add new column resizing behavior

KevinVandy · Oct 11, 2023 · c3f2496 · c3f2496
1 parent 5df845d
commit c3f2496
Show file tree

Hide file tree

Showing 15 changed files with 41 additions and 43 deletions.
diff --git 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 <sup>V5</sup>](https://mantine.dev/) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
+### __Built with [Mantine <sup>V7</sup>](https://mantine.dev/) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
 
 <img src="https://mantine-react-table.com/banner.png" alt="MRT" height="50"/>
 

diff --git 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 = <TData extends Record<string, any> = {}>({
           <TableTbody
             {...tableBodyProps}
             style={(theme) => ({
-              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 = <TData extends Record<string, any> = {}>({
         {...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 = <TData extends Record<string, any> = {}>({
           <tr
             className={clsx(
               'mrt-table-body-row',
-              layoutMode === 'grid' && classes['empty-row-tr-grid'],
+              layoutMode?.startsWith('grid') && classes['empty-row-tr-grid'],
             )}
           >
             <td
               colSpan={table.getVisibleLeafColumns().length}
               className={clsx(
                 'mrt-table-body-cell',
-                layoutMode === 'grid' && classes['empty-row-td-grid'],
+                layoutMode?.startsWith('grid') && classes['empty-row-td-grid'],
               )}
             >
               {renderEmptyRowsFallback?.({ table }) ?? (
@@ -299,7 +299,7 @@ export const MRT_TableBody = <TData extends Record<string, any> = {}>({
             {...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
@@ -116,6 +116,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any> = {}>({
 
     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 = <TData extends Record<string, any> = {}>({
       }}
       {...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 = <TData extends Record<string, any> = {}>({
         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
@@ -150,7 +150,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any> = {}>({
         }}
         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
@@ -67,7 +67,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any> = {}>({
       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 = <TData extends Record<string, any> = {}>({
         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
@@ -49,7 +49,7 @@ export const MRT_TableFooter = <TData extends Record<string, any> = {}>({
         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
@@ -42,7 +42,7 @@ export const MRT_TableFooterCell = <TData extends Record<string, any> = {}>({
       {...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
@@ -50,7 +50,7 @@ export const MRT_TableFooterRow = <TData extends Record<string, any> = {}>({
     <TableTr
       className={clsx(
         classes.root,
-        layoutMode === 'grid' && classes['layout-mode-grid'],
+        layoutMode?.startsWith('grid') && classes['layout-mode-grid'],
       )}
       {...tableRowProps}
     >

diff --git 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 = <TData extends Record<string, any> = {}>({
       }}
       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 = <TData extends Record<string, any> = {}>({
         <tr
           className={clsx(
             classes['banner-tr'],
-            layoutMode === 'grid' && classes.grid,
+            layoutMode?.startsWith('grid') && classes.grid,
           )}
         >
           <th
             colSpan={table.getVisibleLeafColumns().length}
             className={clsx(
               classes['banner-th'],
-              layoutMode === 'grid' && classes.grid,
+              layoutMode?.startsWith('grid') && classes.grid,
             )}
           >
             <MRT_ToolbarAlertBanner table={table} />

diff --git 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 = <TData extends Record<string, any> = {}>({
 
     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 = <TData extends Record<string, any> = {}>({
       }}
       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
@@ -43,7 +43,7 @@ export const MRT_TableHeadRow = <TData extends Record<string, any> = {}>({
       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
@@ -92,8 +92,13 @@ export const useMRT_TableOptions: <TData extends Record<string, any> = {}>(
     [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
@@ -147,9 +147,9 @@ export const MRT_Table = <TData extends Record<string, any> = {}>({
       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
@@ -782,7 +782,7 @@ export type MRT_TableOptions<TData extends Record<string, any> = {}> = 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
@@ -167,7 +167,7 @@ export const ColumnResizingWithHeaderGroups = () => (
   />
 );
 
-export const ColumnResizingWithHeaderGroupsGrid = () => (
+export const ColumnResizingWithHeaderGroupsGrowGrid = () => (
   <MantineReactTable
     columns={[
       {
@@ -216,22 +216,12 @@ export const ColumnResizingWithHeaderGroupsGrid = () => (
   />
 );
 
-export const ColumnResizingLayoutGridNoFlexGrow = () => (
+export const ColumnResizingLayoutGridGrow = () => (
   <MantineReactTable
     columns={columns.slice(0, 3)}
     data={data}
     layoutMode="grid"
     enableRowSelection
     enableColumnResizing
-    mantineTableHeadCellProps={{
-      style: {
-        flex: '0 0 auto',
-      },
-    }}
-    mantineTableBodyCellProps={{
-      style: {
-        flex: '0 0 auto',
-      },
-    }}
   />
 );