Pinned column overlap in safari

[ChristopherBanas]

mantine-react-table version

1.0.0-beta.3

react & react-dom versions

react: v17.0.42, react-dom: v18.0.4

Describe the bug and the steps to reproduce it

Initially brought up this issue in discord but did not get any responses so wanted to increase it's visibility.

When pinning the leftmost column, on Safari the upper left row header cell gets overlapped rows within the table. I have tried debugging this a few times but am not sure why this is occurring. This is ONLY present on Safari, the table acted as expected in Chrome & Firefox

Minimal, Reproducible Example - (Optional, but Recommended)

I have 2 examples

1. Open this example in safari
2. Enable full screen mode
3. Condense screen size vertically so the table is scrollable
4. Scroll, the bug will be present

Or by running this small code snippet example

import { MantineReactTable, MRT_ColumnDef } from 'mantine-react-table';
import { useMemo } from 'react';

const BrokenTable = () => {
  type Person = {
    name: {
      firstName: string;
      lastName: string;
    };
    address: string;
    city: string;
    state: string;
  };

  const person_data: Person[] = [
    {
      name: {
        firstName: 'Zachary',
        lastName: 'Davis',
      },
      address: '261 Battle Ford',
      city: 'Columbus',
      state: 'Ohio',
    },
    {
      name: {
        firstName: 'Robert',
        lastName: 'Smith',
      },
      address: '566 Brakus Inlet',
      city: 'Westerville',
      state: 'West Virginia',
    },
    {
      name: {
        firstName: 'Kevin',
        lastName: 'Yan',
      },
      address: '7777 Kuhic Knoll',
      city: 'South Linda',
      state: 'West Virginia',
    },
    {
      name: {
        firstName: 'John',
        lastName: 'Upton',
      },
      address: '722 Emie Stream',
      city: 'Huntington',
      state: 'Washington',
    },
  ];

  const table_columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'name.firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'name.lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'address',
        header: 'Address',
      },
      {
        accessorKey: 'city',
        header: 'City',
      },
      {
        accessorKey: 'state',
        header: 'State',
      },
    ],
    []
  );

  return (
    <MantineReactTable
      enableStickyHeader={true}
      initialState={{
        columnPinning: { left: ['name.firstName'] },
      }}
      columns={table_columns}
      data={person_data}
      enablePagination={false}
      mantineTableContainerProps={{ sx: { maxHeight: '200px' } }}
    />
  );
};

export default BrokenTable;

Screenshots or Videos (Optional)

What it looks like in safari

What it looks like in chrome or firefox

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

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.

[ChristopherBanas]

Not sure if this is a z-index issue. In the screenshot attached I wrote down all the z-index's. They are all as they should be.

[Eyuelb]

@ChristopherBanas its b/c of the rendering of safari ui i am working on it i will let u know. if u don't mind. if you try to make it work anyway and fail
it will give guidance