Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Mar 14, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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],
),
Expand Down
Original file line number Diff line number Diff line change
@@ -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} />;
};
Loading