{renderEmptyRowsFallback?.({ table }) ?? (
@@ -299,7 +299,7 @@ export const MRT_TableBody = = {}>({
{...tableBodyProps}
style={(theme) => ({
bottom: tableFooterHeight - 1,
- display: layoutMode === 'grid' ? 'grid' : undefined,
+ display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
position: 'sticky',
zIndex: 1,
...(parseFromValuesOrFunc(tableBodyProps?.style, theme) as any),
diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx
index 8c3033fc3..dc6ab3a8c 100644
--- a/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx
+++ b/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx
@@ -116,6 +116,8 @@ export const MRT_TableBodyCell = = {}>({
if (layoutMode === 'grid') {
styles.flex = `${column.getSize()} 0 auto`;
+ } else if (layoutMode === 'grid-no-grow') {
+ styles.flex = '0 0 auto';
}
return styles;
@@ -211,14 +213,13 @@ export const MRT_TableBodyCell = = {}>({
}}
{...tableCellProps}
__vars={{
- '--mrt-table-cell-justify':
- layoutMode === 'grid'
- ? tableCellProps.align === 'left'
- ? 'flex-start'
- : tableCellProps.align === 'right'
- ? 'flex-end'
- : tableCellProps.align
- : undefined,
+ '--mrt-table-cell-justify': layoutMode?.startsWith('grid')
+ ? tableCellProps.align === 'left'
+ ? 'flex-start'
+ : tableCellProps.align === 'right'
+ ? 'flex-end'
+ : tableCellProps.align
+ : undefined,
'--mrt-table-cell-left':
column.getIsPinned() === 'left'
? `${column.getStart('left')}`
@@ -236,7 +237,7 @@ export const MRT_TableBodyCell = = {}>({
isStriped || row.getIsSelected()
? classes['root-inherit-background-color']
: classes['root-default-background'],
- layoutMode === 'grid' && classes['root-grid'],
+ layoutMode?.startsWith('grid') && classes['root-grid'],
isEditable &&
editDisplayMode === 'cell' &&
classes['root-cursor-pointer'],
diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx
index e25984087..1ed09bad3 100644
--- a/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx
+++ b/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx
@@ -150,7 +150,7 @@ export const MRT_TableBodyRow = = {}>({
}}
className={clsx(
classes.root,
- layoutMode === 'grid' && classes['root-grid'],
+ layoutMode?.startsWith('grid') && classes['root-grid'],
virtualRow && classes['root-virtualized'],
(draggingRow?.id === row.id || hoveredRow?.id === row.id) &&
classes['root-dragging'],
diff --git a/packages/mantine-react-table/src/body/MRT_TableDetailPanel.tsx b/packages/mantine-react-table/src/body/MRT_TableDetailPanel.tsx
index d1de9f8ca..52f017387 100644
--- a/packages/mantine-react-table/src/body/MRT_TableDetailPanel.tsx
+++ b/packages/mantine-react-table/src/body/MRT_TableDetailPanel.tsx
@@ -67,7 +67,7 @@ export const MRT_TableDetailPanel = = {}>({
className={clsx(
'mantine-Table-tr-detail-panel',
classes.root,
- layoutMode === 'grid' && classes['root-grid'],
+ layoutMode?.startsWith('grid') && classes['root-grid'],
virtualRow && classes['root-virtual-row'],
tableRowProps?.className,
)}
@@ -82,7 +82,7 @@ export const MRT_TableDetailPanel = = {}>({
className={clsx(
'mantine-Table-td-detail-panel',
classes.inner,
- layoutMode === 'grid' && classes['inner-grid'],
+ layoutMode?.startsWith('grid') && classes['inner-grid'],
row.getIsExpanded() && classes['inner-expanded'],
virtualRow && classes['inner-virtual'],
)}
diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx
index 948d5403e..33c5c7ecc 100644
--- a/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx
+++ b/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx
@@ -49,7 +49,7 @@ export const MRT_TableFooter = = {}>({
classes.root,
tableFooterProps?.className,
stickFooter && classes.sticky,
- layoutMode === 'grid' && classes.grid,
+ layoutMode?.startsWith('grid') && classes.grid,
)}
>
{getFooterGroups().map((footerGroup) => (
diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx
index 1b065ba4f..acf2b3cea 100644
--- a/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx
+++ b/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx
@@ -42,7 +42,7 @@ export const MRT_TableFooterCell = = {}>({
{...tableCellProps}
className={clsx(
classes.root,
- layoutMode === 'grid' && classes.grid,
+ layoutMode?.startsWith('grid') && classes.grid,
column.getIsPinned() && columnDefType !== 'group' && classes.pinned,
columnDefType === 'group' && classes.group,
className,
diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx
index 216d4fce0..9fdfa0e64 100644
--- a/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx
+++ b/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx
@@ -50,7 +50,7 @@ export const MRT_TableFooterRow = = {}>({
diff --git a/packages/mantine-react-table/src/head/MRT_TableHead.tsx b/packages/mantine-react-table/src/head/MRT_TableHead.tsx
index 763145d33..9347a20f0 100644
--- a/packages/mantine-react-table/src/head/MRT_TableHead.tsx
+++ b/packages/mantine-react-table/src/head/MRT_TableHead.tsx
@@ -52,7 +52,7 @@ export const MRT_TableHead = = {}>({
}}
className={clsx(
classes.root,
- layoutMode === 'grid' && classes['root-grid'],
+ layoutMode?.startsWith('grid') && classes['root-grid'],
stickyHeader && classes['root-sticky'],
tableHeadProps?.className,
)}
@@ -62,14 +62,14 @@ export const MRT_TableHead = = {}>({
diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx
index db7622107..3280c3788 100644
--- a/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx
+++ b/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx
@@ -69,6 +69,8 @@ export const MRT_TableHeadCell = = {}>({
if (layoutMode === 'grid') {
styles.flex = `${column.getSize()} 0 auto`;
+ } else if (layoutMode === 'grid-no-grow') {
+ styles.flex = '0 0 auto';
}
return styles;
@@ -165,7 +167,7 @@ export const MRT_TableHeadCell = = {}>({
}}
className={clsx(
classes.root,
- layoutMode === 'grid' && classes['root-grid'],
+ layoutMode?.startsWith('grid') && classes['root-grid'],
enableMultiSort && column.getCanSort() && classes['root-no-select'],
column.getIsPinned() &&
column.columnDef.columnDefType !== 'group' &&
diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadRow.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadRow.tsx
index 2f64f9849..8739bfd30 100644
--- a/packages/mantine-react-table/src/head/MRT_TableHeadRow.tsx
+++ b/packages/mantine-react-table/src/head/MRT_TableHeadRow.tsx
@@ -43,7 +43,7 @@ export const MRT_TableHeadRow = = {}>({
className={clsx(
classes.root,
(enableStickyHeader || isFullScreen) && classes.sticky,
- layoutMode === 'grid' && classes['layout-mode-grid'],
+ layoutMode?.startsWith('grid') && classes['layout-mode-grid'],
)}
>
{virtualPaddingLeft ? (
diff --git a/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts b/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts
index aae0c1ae9..65fb867af 100644
--- a/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts
+++ b/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts
@@ -92,8 +92,13 @@ export const useMRT_TableOptions: = {}>(
[defaultDisplayColumn],
);
- if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
- layoutMode = 'grid';
+ if (layoutMode === 'semantic') {
+ if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
+ layoutMode = 'grid';
+ }
+ if (enableColumnResizing) {
+ layoutMode = 'grid-no-grow';
+ }
}
if (rest.enableRowVirtualization) {
diff --git a/packages/mantine-react-table/src/table/MRT_Table.tsx b/packages/mantine-react-table/src/table/MRT_Table.tsx
index 7986adef3..481fc4c31 100644
--- a/packages/mantine-react-table/src/table/MRT_Table.tsx
+++ b/packages/mantine-react-table/src/table/MRT_Table.tsx
@@ -147,9 +147,9 @@ export const MRT_Table = = {}>({
className={clsx(
'mrt-table',
classes.root,
- layoutMode === 'grid' && classes['root-grid'],
+ layoutMode?.startsWith('grid') && classes['root-grid'],
enableColumnResizing &&
- layoutMode !== 'grid' &&
+ layoutMode === 'semantic' &&
classes['root-semantic-not-resizing'],
tableProps?.className,
)}
diff --git a/packages/mantine-react-table/src/types.ts b/packages/mantine-react-table/src/types.ts
index 3773d60a8..dbcb23c0c 100644
--- a/packages/mantine-react-table/src/types.ts
+++ b/packages/mantine-react-table/src/types.ts
@@ -782,7 +782,7 @@ export type MRT_TableOptions = {}> = Omit<
/**
* Changes which kind of CSS layout is used to render the table. `semantic` uses default semantic HTML elements, while `grid` adds CSS grid and flexbox styles
*/
- layoutMode?: 'semantic' | 'grid';
+ layoutMode?: 'semantic' | 'grid' | 'grid-no-grow';
/**
* Pass in either a locale imported from `mantine-react-table/locales/*` or a custom locale object.
*
diff --git a/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx b/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx
index 65aff29cc..f9bf38877 100644
--- a/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx
+++ b/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx
@@ -167,7 +167,7 @@ export const ColumnResizingWithHeaderGroups = () => (
/>
);
-export const ColumnResizingWithHeaderGroupsGrid = () => (
+export const ColumnResizingWithHeaderGroupsGrowGrid = () => (
(
/>
);
-export const ColumnResizingLayoutGridNoFlexGrow = () => (
+export const ColumnResizingLayoutGridGrow = () => (
);
| |