diff --git a/README.md b/README.md index c2559b3b1..a7974e0dd 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ V1 released July 18, 2023 ### _Quickly Create React Data Tables with Mantine_ -### __Built with [Mantine V5](https://mantine.dev/) and [TanStack Table V8](https://tanstack.com/table/v8)__ +### __Built with [Mantine V7](https://mantine.dev/) and [TanStack Table V8](https://tanstack.com/table/v8)__ MRT diff --git a/packages/mantine-react-table/src/body/MRT_TableBody.tsx b/packages/mantine-react-table/src/body/MRT_TableBody.tsx index 4689ac51b..4e49445be 100644 --- a/packages/mantine-react-table/src/body/MRT_TableBody.tsx +++ b/packages/mantine-react-table/src/body/MRT_TableBody.tsx @@ -181,7 +181,7 @@ export const MRT_TableBody = = {}>({ ({ - display: layoutMode === 'grid' ? 'grid' : undefined, + display: layoutMode?.startsWith('grid') ? 'grid' : undefined, position: 'sticky', top: tableHeadHeight - 1, zIndex: 1, @@ -212,7 +212,7 @@ export const MRT_TableBody = = {}>({ {...tableBodyProps} className={clsx( classes.root, - layoutMode === 'grid' && classes['root-grid'], + layoutMode?.startsWith('grid') && classes['root-grid'], !rows.length && classes['root-no-rows'], rowVirtualizer && classes['root-virtualized'], tableBodyProps?.className, @@ -231,14 +231,14 @@ export const MRT_TableBody = = {}>({ {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 = () => ( );