material-react-table 0.18.1 → 0.20.0

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -4,25 +4,24 @@ import { MRT_TableInstance } from '..';
 
 interface Props {
   stackAlertBanner?: boolean;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_ToolbarAlertBanner: FC<Props> = ({
   stackAlertBanner,
-  instance,
+  table,
 }) => {
   const {
     getPrePaginationRowModel,
     getSelectedRowModel,
     getState,
     options: { localization, muiTableToolbarAlertBannerProps },
-  } = instance;
-
+  } = table;
   const { grouping, showAlertBanner } = getState();
 
   const alertProps =
     muiTableToolbarAlertBannerProps instanceof Function
-      ? muiTableToolbarAlertBannerProps({ instance })
+      ? muiTableToolbarAlertBannerProps({ table })
       : muiTableToolbarAlertBannerProps;
 
   const selectMessage =
@@ -47,8 +46,8 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
             {index > 0 ? localization.thenBy : ''}
             <Chip
               color="secondary"
-              label={instance.getColumn(columnId).columnDef.header}
-              onDelete={() => instance.getColumn(columnId).toggleGrouping()}
+              label={table.getColumn(columnId).columnDef.header}
+              onDelete={() => table.getColumn(columnId).toggleGrouping()}
             />
           </Fragment>
         ))}

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -7,10 +7,10 @@ import { commonToolbarStyles } from './MRT_ToolbarTop';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
+export const MRT_ToolbarBottom: FC<Props> = ({ table }) => {
   const {
     getState,
     options: {
@@ -21,15 +21,14 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
       renderToolbarBottomCustomActions,
       tableId,
     },
-  } = instance;
-
+  } = table;
   const { isFullScreen } = getState();
 
   const isMobile = useMediaQuery('(max-width:720px)');
 
   const toolbarProps =
     muiTableToolbarBottomProps instanceof Function
-      ? muiTableToolbarBottomProps({ instance })
+      ? muiTableToolbarBottomProps({ table })
       : muiTableToolbarBottomProps;
 
   const stackAlertBanner =
@@ -54,9 +53,9 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
         } as any)
       }
     >
-      <MRT_LinearProgressBar alignTo="top" instance={instance} />
+      <MRT_LinearProgressBar alignTo="top" table={table} />
       {positionToolbarAlertBanner === 'bottom' && (
-        <MRT_ToolbarAlertBanner instance={instance} />
+        <MRT_ToolbarAlertBanner table={table} />
       )}
       <Box
         sx={{
@@ -67,7 +66,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
       >
         {renderToolbarBottomCustomActions ? (
           <Box sx={{ p: '0.5rem' }}>
-            {renderToolbarBottomCustomActions({ instance })}
+            {renderToolbarBottomCustomActions({ table })}
           </Box>
         ) : (
           <span />
@@ -83,7 +82,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
         >
           {enablePagination &&
             ['bottom', 'both'].includes(positionPagination ?? '') && (
-              <MRT_TablePagination instance={instance} position="bottom" />
+              <MRT_TablePagination table={table} position="bottom" />
             )}
         </Box>
       </Box>

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -9,10 +9,10 @@ import { MRT_TableInstance } from '..';
 import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
+export const MRT_ToolbarInternalButtons: FC<Props> = ({ table }) => {
   const {
     options: {
       enableColumnFilters,
@@ -26,7 +26,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
       positionGlobalFilter,
       renderToolbarInternalActions,
     },
-  } = instance;
+  } = table;
 
   return (
     <Box
@@ -42,26 +42,26 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
         MRT_ToggleDensePaddingButton,
         MRT_ToggleFiltersButton,
         MRT_ToggleGlobalFilterButton,
-        instance,
+        table,
       }) ?? (
         <>
           {enableGlobalFilter && positionGlobalFilter === 'right' && (
-            <MRT_GlobalFilterTextField instance={instance} />
+            <MRT_GlobalFilterTextField table={table} />
           )}
           {enableFilters && enableGlobalFilter && (
-            <MRT_ToggleGlobalFilterButton instance={instance} />
+            <MRT_ToggleGlobalFilterButton table={table} />
           )}
           {enableFilters && enableColumnFilters && (
-            <MRT_ToggleFiltersButton instance={instance} />
+            <MRT_ToggleFiltersButton table={table} />
           )}
           {(enableHiding || enableColumnOrdering || enablePinning) && (
-            <MRT_ShowHideColumnsButton instance={instance} />
+            <MRT_ShowHideColumnsButton table={table} />
           )}
           {enableDensityToggle && (
-            <MRT_ToggleDensePaddingButton instance={instance} />
+            <MRT_ToggleDensePaddingButton table={table} />
           )}
           {enableFullScreenToggle && (
-            <MRT_FullScreenToggleButton instance={instance} />
+            <MRT_FullScreenToggleButton table={table} />
           )}
         </>
       )}

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -19,10 +19,10 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
 });
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
+export const MRT_ToolbarTop: FC<Props> = ({ table }) => {
   const {
     getState,
     options: {
@@ -36,7 +36,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
       renderToolbarTopCustomActions,
       tableId,
     },
-  } = instance;
+  } = table;
 
   const { isFullScreen, showGlobalFilter } = getState();
 
@@ -44,7 +44,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
 
   const toolbarProps =
     muiTableToolbarTopProps instanceof Function
-      ? muiTableToolbarTopProps({ instance })
+      ? muiTableToolbarTopProps({ table })
       : muiTableToolbarTopProps;
 
   const stackAlertBanner =
@@ -69,7 +69,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
       {positionToolbarAlertBanner === 'top' && (
         <MRT_ToolbarAlertBanner
           stackAlertBanner={stackAlertBanner}
-          instance={instance}
+          table={table}
         />
       )}
       <Box
@@ -86,24 +86,24 @@ export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
         }}
       >
         {enableGlobalFilter && positionGlobalFilter === 'left' && (
-          <MRT_GlobalFilterTextField instance={instance} />
+          <MRT_GlobalFilterTextField table={table} />
         )}
 
-        {renderToolbarTopCustomActions?.({ instance }) ?? <span />}
+        {renderToolbarTopCustomActions?.({ table }) ?? <span />}
         {enableToolbarInternalActions ? (
-          <MRT_ToolbarInternalButtons instance={instance} />
+          <MRT_ToolbarInternalButtons table={table} />
         ) : (
           enableGlobalFilter &&
           positionGlobalFilter === 'right' && (
-            <MRT_GlobalFilterTextField instance={instance} />
+            <MRT_GlobalFilterTextField table={table} />
           )
         )}
       </Box>
       {enablePagination &&
         ['top', 'both'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination instance={instance} position="top" />
+          <MRT_TablePagination table={table} position="top" />
         )}
-      <MRT_LinearProgressBar alignTo="bottom" instance={instance} />
+      <MRT_LinearProgressBar alignTo="bottom" table={table} />
     </Toolbar>
   );
 };

package/src/utils.ts

@@ -1,22 +1,29 @@
-import { ColumnDef, ColumnOrderState, Table } from '@tanstack/react-table';
+import { ColumnOrderState } from '@tanstack/react-table';
 import {
   MaterialReactTableProps,
   MRT_Column,
   MRT_ColumnDef,
-  MRT_FilterFn,
+  MRT_DefinedColumnDef,
+  MRT_FilterOption,
 } from '.';
 import { MRT_FilterFns } from './filtersFns';
+import { MRT_SortingFns } from './sortingFns';
 
-export const getAllLeafColumnDefs = (
-  columns: MRT_ColumnDef[],
-): MRT_ColumnDef[] => {
-  let lowestLevelColumns: MRT_ColumnDef[] = columns;
-  let currentCols: MRT_ColumnDef[] | undefined = columns;
+const getColumnId = <D extends Record<string, any> = {}>(
+  columnDef: MRT_ColumnDef<D>,
+): string =>
+  columnDef.id ?? columnDef.accessorKey?.toString?.() ?? columnDef.header;
+
+export const getAllLeafColumnDefs = <D extends Record<string, any> = {}>(
+  columns: MRT_ColumnDef<D>[],
+): MRT_ColumnDef<D>[] => {
+  let lowestLevelColumns: MRT_ColumnDef<D>[] = columns;
+  let currentCols: MRT_ColumnDef<D>[] | undefined = columns;
   while (!!currentCols?.length && currentCols.some((col) => col.columns)) {
-    const nextCols: MRT_ColumnDef[] = currentCols
+    const nextCols: MRT_ColumnDef<D>[] = currentCols
       .filter((col) => !!col.columns)
       .map((col) => col.columns)
-      .flat() as MRT_ColumnDef[];
+      .flat() as MRT_ColumnDef<D>[];
     if (nextCols.every((col) => !col?.columns)) {
       lowestLevelColumns = [...lowestLevelColumns, ...nextCols];
     }
@@ -25,42 +32,37 @@ export const getAllLeafColumnDefs = (
   return lowestLevelColumns.filter((col) => !col.columns);
 };
 
-export const createGroup = <D extends Record<string, any> = {}>(
-  table: Table<D>,
-  column: MRT_ColumnDef<D>,
-  currentFilterFns: { [key: string]: MRT_FilterFn },
-): ColumnDef<D> =>
-  table.createGroup({
-    ...column,
-    columns: column?.columns?.map?.((col) =>
-      col.columns
-        ? createGroup<D>(table, col, currentFilterFns)
-        : createDataColumn(table, col, currentFilterFns),
-    ),
-  } as any);
-
-export const createDataColumn = <D extends Record<string, any> = {}>(
-  table: Table<D>,
-  column: MRT_ColumnDef<D>,
-  currentFilterFns: { [key: string]: MRT_FilterFn },
-): ColumnDef<D> => // @ts-ignore
-  table.createDataColumn(column.id, {
-    filterFn:
-      currentFilterFns[column.id] instanceof Function
-        ? currentFilterFns[column.id]
-        : // @ts-ignore
-          MRT_FilterFns[currentFilterFns[column.id]],
-    ...column,
-  }) as any;
-
-export const createDisplayColumn = <D extends Record<string, any> = {}>(
-  table: Table<D>,
-  column: Omit<MRT_ColumnDef<D>, 'header'> & { header?: string },
-): ColumnDef<D> => table.createDisplayColumn(column as ColumnDef<D>);
+export const prepareColumns = <D extends Record<string, any> = {}>(
+  columnDefs: MRT_ColumnDef<D>[],
+  currentFilterFns: { [key: string]: MRT_FilterOption },
+): MRT_DefinedColumnDef<D>[] =>
+  columnDefs.map((columnDef) => {
+    if (!columnDef.id) columnDef.id = getColumnId(columnDef);
+    if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
+      console.error(
+        'Column definitions must have a valid `accessorKey` or `id` property',
+      );
+    }
+    if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
+    if (!!columnDef.columns?.length) {
+      columnDef.columnDefType = 'group';
+      columnDef.columns = prepareColumns(columnDef.columns, currentFilterFns);
+    } else if (columnDef.columnDefType === 'data') {
+      if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
+        columnDef.filterFn =
+          MRT_FilterFns[currentFilterFns[columnDef.id]] ?? MRT_FilterFns.fuzzy;
+      }
+      if (Object.keys(MRT_SortingFns).includes(columnDef.sortingFn as string)) {
+        // @ts-ignore
+        columnDef.sortingFn = MRT_SortingFns[columnDef.sortingFn];
+      }
+    }
+    return columnDef;
+  }) as MRT_DefinedColumnDef<D>[];
 
-export const reorderColumn = (
-  movingColumn: MRT_Column,
-  receivingColumn: MRT_Column,
+export const reorderColumn = <D extends Record<string, any> = {}>(
+  movingColumn: MRT_Column<D>,
+  receivingColumn: MRT_Column<D>,
   columnOrder: ColumnOrderState,
 ): ColumnOrderState => {
   if (movingColumn.getCanPin()) {
@@ -74,8 +76,8 @@ export const reorderColumn = (
   return [...columnOrder];
 };
 
-export const getLeadingDisplayColumnIds = (
-  props: MaterialReactTableProps<any>,
+export const getLeadingDisplayColumnIds = <D extends Record<string, any> = {}>(
+  props: MaterialReactTableProps<D>,
 ) =>
   [
     ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
@@ -86,17 +88,21 @@ export const getLeadingDisplayColumnIds = (
     props.enableRowNumbers && 'mrt-row-numbers',
   ].filter(Boolean) as string[];
 
-export const getTrailingDisplayColumnIds = (
-  props: MaterialReactTableProps<any>,
+export const getTrailingDisplayColumnIds = <D extends Record<string, any> = {}>(
+  props: MaterialReactTableProps<D>,
 ) => [
   ((props.positionActionsColumn === 'last' && props.enableRowActions) ||
     (props.enableEditing && props.editingMode === 'row')) &&
     'mrt-row-actions',
 ];
 
-export const getDefaultColumnOrderIds = (props: MaterialReactTableProps<any>) =>
+export const getDefaultColumnOrderIds = <D extends Record<string, any> = {}>(
+  props: MaterialReactTableProps<D>,
+) =>
   [
     ...getLeadingDisplayColumnIds(props),
-    ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map((c) => c.id),
+    ...getAllLeafColumnDefs(props.columns).map((columnDef) =>
+      getColumnId(columnDef),
+    ),
     ...getTrailingDisplayColumnIds(props),
   ].filter(Boolean) as string[];