Column pinning selection opacity issue #118
Description
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}!
)
}
>
<ActionIcon
color="orange"
onClick={() => {
table.setEditingRow(row);
}}
>
<ActionIcon
color="red"
onClick={() => {
data.splice(row.index, 1); //assuming simple data table
setData([...data]);
}}
>
),
});
return ;
};
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
- 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.