KevinVandy
Column pinning selection opacity issue
mantine-react-table version
1.2.0
react & react-dom versions
18.2.0
Describe the bug and the steps to reproduce it
When we pin the colums to left or right and there are columns behind with row selection enabled the opacity of hover and selected row will make it so that the text behind the pinned columns overlap.
Minimal, Reproducible Example - (Optional, but Recommended)
Attached the screenshot and the code is below.
` import { useState } from 'react'; import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'; import { columns, data as initialData } from './makeData'; import { ActionIcon, Box } from '@mantine/core'; import { IconEdit, IconSend, IconTrash } from '@tabler/icons-react';
export const Example = () => { const [data, setData] = useState(initialData);
const table = useMantineReactTable({
columns,
data,
enableRowSelection: true,
enableRowActions: true,
enablePinning: true,
renderRowActions: ({ row }) => (
<Box sx={{ display: 'flex', flexWrap: 'nowrap', gap: '8px' }}>
<ActionIcon
color="blue"
onClick={() =>
window.open(
mailto:[email protected]?subject=Hello ${row.original.firstName}!
)
}
>
<IconSend />
</ActionIcon>
<ActionIcon
color="orange"
onClick={() => {
table.setEditingRow(row);
}}
>
<IconEdit />
</ActionIcon>
<ActionIcon
color="red"
onClick={() => {
data.splice(row.index, 1); //assuming simple data table
setData([...data]);
}}
>
<IconTrash />
</ActionIcon>
</Box>
),
});
return <MantineReactTable table={table} />; };
export default Example;
`
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
None
Terms
- [X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
This also happens in V2, here's a video from the documentation website:
https://github.com/KevinVandy/mantine-react-table/assets/20308945/7b1dc6a1-12b6-44a7-9db4-334446f95496
I'm happy to help fix this if you can point what files should I check to debug it.
This was fixed for V2 in #229 although it's not published. We will see about back porting this fix for V1.
@alessandrojcm any info on porting the fix to V1 yet ? or can you suggest any temporary fix we could use on our side until the porting happens.
