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

• [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.

[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

[dvarjun]

As a workaround I set

mantineTableHeadProps: { style: { zIndex: 2, }, };

it worked all on browsers. I'm using V2 not sure if it is the same for V1.

[JustynaKK]

I have the same issue. While scrolling the list, on Chrome it looks like:

and on Safari:

[zdenkolini]

the example on the docs also has the same issue, even with v2. (https://v2.mantine-react-table.com/docs/guides/sticky-header) fixed it with position sticky on the thead element, but needed to set it as important as its position is relative via inline style.

I'm not sure if this will have influence on the rest of the application, but will let you guys know if we encounter something.

const defaultTableOptions: Partial<MRT_TableOptions<MRT_RowData>> = {
  mantineTableHeadProps: ({ table }) =>
    table.options.enableStickyHeader ?
      {
        style: {
          position: "sticky",
        },
      }
    : {}
}

EDIT: the above solution doesn't work as the TableHead has specified the pos property, which overrites any defined position. this is how we solved it in the end:

mantineTableHeadProps: (({ table }) => {
  const mantineTableHeadProps = parseFromValuesOrFunc(
    tableOptions.mantineTableHeadProps,
    {
      table,
    },
  );

  // Doesn't work as position is not overridable for TableHead
  // const mantineTableHeadStyle = mantineTableHeadProps?.style;
  // const isSticky = table.options.enableStickyHeader;
  // let style: MantineStyleProp;
  // if (!isSticky) {
  //   style = mantineTableHeadStyle;
  // } else {
  //   if (mantineTableHeadStyle) {
  //     if (typeof mantineTableHeadStyle === "function") {
  //       style = (theme) => ({
  //         position: "sticky",
  //         ...mantineTableHeadStyle(theme),
  //       });
  //     } else if (Array.isArray(mantineTableHeadStyle)) {
  //       style = [{ position: "sticky" }, ...mantineTableHeadStyle];
  //     } else {
  //       style = {
  //         position: "sticky",
  //         ...mantineTableHeadStyle,
  //       };
  //     }
  //   } else {
  //     style = { position: "sticky" };
  //   }
  // }

  return {
    ...mantineTableHeadProps,
    // note: using cn from shadcn and tailwind for css
    className: cn("!sticky", mantineTableHeadProps?.className),
  };
}) as MRT_TableOptions<TData>["mantineTableHeadProps"],