Column pinning selection opacity issue

[achennuru]

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:kevinvandy@mailinator.com?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.

[ddanielcruzz]

This also happens in V2, here's a video from the documentation website:

Screen.Recording.2023-12-21.at.10.07.45.mov

I'm happy to help fix this if you can point what files should I check to debug it.

[alessandrojcm]

This was fixed for V2 in #229 although it's not published. We will see about back porting this fix for V1.

[nairvishal]

@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.

[alessandrojcm]

@nairvishal I can take a look into this later today.

[alessandrojcm]

#247

[KaganHamzacebi]

This was fixed for V2 in #229 although it's not published. We will see about back porting this fix for V1.

This problem still exist in v2.0.0-beta.9, is it going to get published or, is there a plan?

And for people who is looking for a work around can use

td[data-column-pinned] {
  opacity: 1 !important; // override MRT default 0.97
  z-index: 99999 !important; // override MRT default 1
}