Merge pull request #502 from KevinVandy/414-broken-centered-header

fix: prevent extra padding in centered header cells when no buttons are displayed

Author: alessandrojcm

packages/mantine-react-table/src/components/head/MRT_TableHeadCell.tsx

@@ -129,10 +129,12 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
   const headerPL = useMemo(() => {
     let pl = 0;
     if (column.getCanSort()) pl++;
-    if (showColumnButtons) pl += 1.75;
+    // Only add padding for buttons if they will actually be displayed
+    if (showColumnButtons && (columnActionsEnabled || showDragHandle))
+      pl += 1.75;
     if (showDragHandle) pl += 1.25;
     return pl;
-  }, [showColumnButtons, showDragHandle]);
+  }, [showColumnButtons, showDragHandle, columnActionsEnabled]);
 
   const handleDragEnter: DragEventHandler<HTMLTableCellElement> = (_e) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {

packages/mantine-react-table/src/hooks/useMRT_RowVirtualizer.ts

@@ -73,7 +73,10 @@ export const useMRT_RowVirtualizer = <
           (row) => row.id === draggingRow?.id,
         );
 
-        return extraIndexRangeExtractor(range, current_index >= 0 ? current_index: 0);
+        return extraIndexRangeExtractor(
+          range,
+          current_index >= 0 ? current_index : 0,
+        );
       },
       [draggingRow],
     ),

packages/mantine-react-table/stories/fixed-bugs/cell-alignment.stories.tsx

@@ -0,0 +1,185 @@
+import { useMemo } from 'react';
+
+import {
+  MantineReactTable,
+  type MRT_ColumnDef,
+  useMantineReactTable,
+} from '../../src';
+
+import { type Meta } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Fixed Bugs/Cell Alignment',
+};
+
+export default meta;
+
+type Person = {
+  address: string;
+  city: string;
+  name: {
+    firstName: string;
+    lastName: string;
+  };
+  state: string;
+};
+
+//nested data is ok, see accessorKeys in ColumnDef below
+const data: Person[] = [
+  {
+    address: '261 Battle Ford',
+    city: 'Columbus',
+    name: {
+      firstName: 'Zachary',
+      lastName: 'Davis',
+    },
+    state: 'Ohio',
+  },
+  {
+    address: '566 Brakus Inlet',
+    city: 'Westerville',
+    name: {
+      firstName: 'Robert',
+      lastName: 'Smith',
+    },
+    state: 'West Virginia',
+  },
+  {
+    address: '7777 Kuhic Knoll',
+    city: 'South Linda',
+    name: {
+      firstName: 'Kevin',
+      lastName: 'Yan',
+    },
+    state: 'West Virginia',
+  },
+  {
+    address: '722 Emie Stream',
+    city: 'Huntington',
+    name: {
+      firstName: 'John',
+      lastName: 'Upton',
+    },
+    state: 'Washington',
+  },
+  {
+    address: '1 Kuhic Knoll',
+    city: 'Ohiowa',
+    name: {
+      firstName: 'Nathan',
+      lastName: 'Harris',
+    },
+    state: 'Nebraska',
+  },
+];
+
+// Shared columns definition with centered alignment
+const createColumns = (): MRT_ColumnDef<Person>[] => [
+  {
+    accessorKey: 'name.firstName', //access nested data with dot notation
+    header: 'First Name',
+    mantineTableBodyCellProps: {
+      align: 'center',
+    },
+    mantineTableHeadCellProps: {
+      align: 'center',
+    },
+  },
+  {
+    accessorKey: 'name.lastName',
+    header: 'Last Name',
+    mantineTableBodyCellProps: {
+      align: 'center',
+    },
+    mantineTableHeadCellProps: {
+      align: 'center',
+    },
+  },
+  {
+    accessorKey: 'address', //normal accessorKey
+    header: 'Address',
+    mantineTableBodyCellProps: {
+      align: 'center',
+    },
+    mantineTableHeadCellProps: {
+      align: 'center',
+    },
+  },
+  {
+    accessorKey: 'city',
+    header: 'City',
+    mantineTableBodyCellProps: {
+      align: 'center',
+    },
+    mantineTableHeadCellProps: {
+      align: 'center',
+    },
+  },
+  {
+    accessorKey: 'state',
+    header: 'State',
+    mantineTableBodyCellProps: {
+      align: 'center',
+    },
+    mantineTableHeadCellProps: {
+      align: 'center',
+    },
+  },
+];
+
+export const CellAlignment = () => {
+  //should be memoized or stable
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(() => createColumns(), []);
+
+  const table = useMantineReactTable({
+    columns,
+    data,
+    enableColumnActions: false,
+    enableSorting: false,
+    // enableHeaderActionsHoverReveal: true,
+    mantineTableProps: {
+      withColumnBorders: true,
+      withRowBorders: true,
+      withTableBorder: true,
+    },
+  });
+
+  return <MantineReactTable table={table} />;
+};
+
+export const CellAlignmentWithSorting = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(() => createColumns(), []);
+
+  const table = useMantineReactTable({
+    columns,
+    data,
+    enableColumnActions: false,
+    enableSorting: true, // Enable sorting
+    mantineTableProps: {
+      withColumnBorders: true,
+      withRowBorders: true,
+      withTableBorder: true,
+    },
+  });
+
+  return <MantineReactTable table={table} />;
+};
+
+export const CellAlignmentWithColumnDragging = () => {
+  const columns = useMemo<MRT_ColumnDef<Person>[]>(() => createColumns(), []);
+
+  const table = useMantineReactTable({
+    columns,
+    data,
+    enableColumnActions: true,
+    enableColumnDragging: true, // Enable column dragging
+    enableSorting: false,
+    mantineTableProps: {
+      withColumnBorders: true,
+      withRowBorders: true,
+      withTableBorder: true,
+    },
+  });
+
+  return <MantineReactTable table={table} />;
+};