refactor display columns away from hooks still

KevinVandy · Jan 19, 2024 · 34179a4 · 34179a4
1 parent 90568cd
commit 34179a4
Show file tree

Hide file tree

Showing 13 changed files with 131 additions and 100 deletions.
diff --git a/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx b/packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx
@@ -10,7 +10,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { getDefaultColumnOrderIds } from '../../utils/column.utils';
+import { getDefaultColumnOrderIds } from '../../utils/displayColumn.utils';
 import { getMRTTheme } from '../../utils/style.utils';
 
 interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
@@ -114,9 +114,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
         {enableColumnOrdering && (
           <Button
             onClick={() =>
-              table.setColumnOrder(
-                getDefaultColumnOrderIds(table.options as any),
-              )
+              table.setColumnOrder(getDefaultColumnOrderIds(table.options))
             }
           >
             {localization.resetOrder}

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_DisplayColumns.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_DisplayColumns.tsx
@@ -0,0 +1,27 @@
+import {
+  type MRT_ColumnDef,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../../types';
+import { getMRT_RowActionsColumnDef } from './getMRT_RowActionsColumnDef';
+import { getMRT_RowDragColumnDef } from './getMRT_RowDragColumnDef';
+import { getMRT_RowExpandColumnDef } from './getMRT_RowExpandColumnDef';
+import { getMRT_RowNumbersColumnDef } from './getMRT_RowNumbersColumnDef';
+import { getMRT_RowPinningColumnDef } from './getMRT_RowPinningColumnDef';
+import { getMRT_RowSelectColumnDef } from './getMRT_RowSelectColumnDef';
+import { getMRT_RowSpacerColumnDef } from './getMRT_RowSpacerColumnDef';
+
+export const getMRT_DisplayColumns = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): MRT_ColumnDef<TData>[] => {
+  console.log('useMRT_DisplayColumns');
+  return [
+    getMRT_RowNumbersColumnDef(tableOptions),
+    getMRT_RowSelectColumnDef(tableOptions),
+    getMRT_RowExpandColumnDef(tableOptions),
+    getMRT_RowActionsColumnDef(tableOptions),
+    getMRT_RowDragColumnDef(tableOptions),
+    getMRT_RowPinningColumnDef(tableOptions),
+    getMRT_RowSpacerColumnDef(tableOptions),
+  ].filter(Boolean) as MRT_ColumnDef<TData>[];
+};
diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx
@@ -4,11 +4,18 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+import {
+  defaultDisplayColumnProps,
+  showRowActionsColumn,
+} from '../../utils/displayColumn.utils';
 
 export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
+  if (!showRowActionsColumn(tableOptions)) {
+    return null;
+  }
+
   return {
     Cell: ({ cell, row, staticRowIndex, table }) => (
       <MRT_ToggleRowActionMenuButton

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx
@@ -5,11 +5,18 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+import {
+  defaultDisplayColumnProps,
+  showRowDragColumn,
+} from '../../utils/displayColumn.utils';
 
 export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
+  if (!showRowDragColumn(tableOptions)) {
+    return null;
+  }
+
   return {
     Cell: ({ row, rowRef, table }) => (
       <MRT_TableBodyRowGrabHandle

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx
@@ -8,12 +8,19 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+import {
+  defaultDisplayColumnProps,
+  showRowExpandColumn,
+} from '../../utils/displayColumn.utils';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 
 export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
+  if (!showRowExpandColumn(tableOptions)) {
+    return null;
+  }
+
   const {
     defaultColumn,
     enableExpandAll,

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx
@@ -3,11 +3,18 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+import {
+  defaultDisplayColumnProps,
+  showRowNumbersColumn,
+} from '../../utils/displayColumn.utils';
 
 export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
+  if (!showRowNumbersColumn(tableOptions)) {
+    return null;
+  }
+
   const { rowNumberDisplayMode } = tableOptions;
   const {
     pagination: { pageIndex, pageSize },

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx
@@ -4,11 +4,18 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+import {
+  defaultDisplayColumnProps,
+  showRowPinningColumn,
+} from '../../utils/displayColumn.utils';
 
 export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
+  if (!showRowPinningColumn(tableOptions)) {
+    return null;
+  }
+
   return {
     Cell: ({ row, table }) => (
       <MRT_TableBodyRowPinButton row={row} table={table} />

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx
@@ -4,11 +4,18 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+import {
+  defaultDisplayColumnProps,
+  showRowSelectionColumn,
+} from '../../utils/displayColumn.utils';
 
 export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
+  if (!showRowSelectionColumn(tableOptions)) {
+    return null;
+  }
+
   const { enableMultiRowSelection, enableSelectAll } = tableOptions;
 
   return {

diff --git a/packages/material-react-table/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx b/packages/material-react-table/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx
@@ -4,7 +4,10 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
+import {
+  defaultDisplayColumnProps,
+  showRowSpacerColumn,
+} from '../../utils/displayColumn.utils';
 
 const blankColProps = {
   children: null,
@@ -19,6 +22,10 @@ const blankColProps = {
 export const getMRT_RowSpacerColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
+  if (!showRowSpacerColumn(tableOptions)) {
+    return null;
+  }
+
   return {
     ...defaultDisplayColumnProps({
       id: 'mrt-row-spacer',

diff --git a/packages/material-react-table/src/hooks/useMRT_DisplayColumns.tsx b/packages/material-react-table/src/hooks/useMRT_DisplayColumns.tsx