material-react-table 0.6.10 → 0.7.0-alpha.1

package/src/toolbar/MRT_TablePagination.tsx

@@ -1,11 +1,23 @@
 import React, { ChangeEvent, FC } from 'react';
 import { TablePagination } from '@mui/material';
-import { useMRT } from '../useMRT';
+import { MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_TablePagination: FC<Props> = () => {
-  const { tableInstance, muiTablePaginationProps } = useMRT();
+export const MRT_TablePagination: FC<Props> = ({ tableInstance }) => {
+  const {
+    getPrePaginationRowModel,
+    getState,
+    setPageIndex,
+    setPageSize,
+    options: { muiTablePaginationProps },
+  } = tableInstance;
+
+  const {
+    pagination: { pageSize = 10, pageIndex = 0 },
+  } = getState();
 
   const tablePaginationProps =
     muiTablePaginationProps instanceof Function
@@ -13,25 +25,23 @@ export const MRT_TablePagination: FC<Props> = () => {
       : muiTablePaginationProps;
 
   const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
-    tableInstance.setPageSize(+event.target.value);
-    tableInstance.gotoPage(0);
+    setPageSize(+event.target.value);
   };
 
+  const showFirstLastPageButtons =
+    getPrePaginationRowModel().rows.length / pageSize > 2;
+
   return (
     <TablePagination
-      component={'div'}
-      count={tableInstance.rows.length}
-      onPageChange={(_, newPage) => tableInstance.gotoPage(newPage)}
+      component="div"
+      count={getPrePaginationRowModel().rows.length}
+      onPageChange={(_: any, newPage: number) => setPageIndex(newPage)}
       onRowsPerPageChange={handleChangeRowsPerPage}
-      page={tableInstance.state.pageIndex}
-      rowsPerPage={tableInstance.state.pageSize}
-      SelectProps={{ style: { margin: '0 1rem 0 1ch' } }}
-      showFirstButton={
-        tableInstance.rows.length / tableInstance.state.pageSize > 2
-      }
-      showLastButton={
-        tableInstance.rows.length / tableInstance.state.pageSize > 2
-      }
+      page={pageIndex}
+      rowsPerPage={pageSize}
+      SelectProps={{ sx: { m: '0 1rem 0 1ch' } }}
+      showFirstButton={showFirstLastPageButtons}
+      showLastButton={showFirstLastPageButtons}
       {...tablePaginationProps}
       sx={{
         m: '0 0.5rem',

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,18 +1,27 @@
 import React, { FC, Fragment } from 'react';
 import { Alert, Box, Chip, Collapse, useMediaQuery } from '@mui/material';
-import { useMRT } from '../useMRT';
+import { MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_ToolbarAlertBanner: FC<Props> = () => {
+export const MRT_ToolbarAlertBanner: FC<Props> = ({ tableInstance }) => {
   const {
-    muiTableToolbarAlertBannerProps,
-    tableInstance,
-    positionToolbarAlertBanner,
-    positionToolbarActions,
-    localization,
-    renderToolbarCustomActions,
-  } = useMRT();
+    getPrePaginationRowModel,
+    getSelectedRowModel,
+    getState,
+    toggleColumnGrouping,
+    options: {
+      localization,
+      muiTableToolbarAlertBannerProps,
+      positionToolbarActions,
+      positionToolbarAlertBanner,
+      renderToolbarCustomActions,
+    },
+  } = tableInstance;
+
+  const { grouping } = getState();
 
   const isMobile = useMediaQuery('(max-width:720px)');
 
@@ -22,30 +31,33 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
       : muiTableToolbarAlertBannerProps;
 
   const selectMessage =
-    tableInstance.selectedFlatRows.length > 0
+    getSelectedRowModel().rows.length > 0
       ? localization.selectedCountOfRowCountRowsSelected
           ?.replace(
             '{selectedCount}',
-            tableInstance.selectedFlatRows.length.toString(),
+            getSelectedRowModel().rows.length.toString(),
+          )
+          ?.replace(
+            '{rowCount}',
+            getPrePaginationRowModel().rows.length.toString(),
           )
-          ?.replace('{rowCount}', tableInstance.flatRows.length.toString())
       : null;
 
   const groupedByMessage =
-    tableInstance.state.groupBy.length > 0 ? (
+    grouping.length > 0 ? (
       <span>
         {localization.groupedBy}{' '}
-        {tableInstance.state.groupBy.map((columnId, index) => (
+        {grouping.map((columnId, index) => (
           <Fragment key={`${index}-${columnId}`}>
             {index > 0 ? localization.thenBy : ''}
             <Chip
               color="secondary"
               label={
-                tableInstance.allColumns.find(
-                  (column) => column.id === columnId,
-                )?.Header
+                tableInstance
+                  .getAllColumns()
+                  .find((column) => column.id === columnId)?.header
               }
-              onDelete={() => tableInstance.toggleGroupBy(columnId, false)}
+              onDelete={() => toggleColumnGrouping(columnId)}
             />
           </Fragment>
         ))}

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,24 +1,31 @@
 import React, { FC } from 'react';
-import { Box, Toolbar } from '@mui/material';
-import { useMRT } from '../useMRT';
+import { alpha, Box, Toolbar } from '@mui/material';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { commonToolbarStyles } from './MRT_ToolbarTop';
+import { MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_ToolbarBottom: FC<Props> = () => {
+export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
   const {
-    hideToolbarInternalActions,
-    manualPagination,
-    muiTableToolbarBottomProps,
-    positionPagination,
-    positionToolbarActions,
-    positionToolbarAlertBanner,
-    tableInstance,
-  } = useMRT();
+    getState,
+    options: {
+      hideToolbarInternalActions,
+      idPrefix,
+      enablePagination,
+      muiTableToolbarBottomProps,
+      positionPagination,
+      positionToolbarActions,
+      positionToolbarAlertBanner,
+    },
+  } = tableInstance;
+
+  const { isFullScreen } = getState();
 
   const toolbarProps =
     muiTableToolbarBottomProps instanceof Function
@@ -27,30 +34,34 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
 
   return (
     <Toolbar
+      id={`mrt-${idPrefix}-toolbar-bottom`}
       variant="dense"
       {...toolbarProps}
       sx={(theme) =>
         ({
-          bottom: tableInstance.state.fullScreen ? '0' : undefined,
-          position: tableInstance.state.fullScreen ? 'fixed' : undefined,
-          ...commonToolbarStyles(theme, tableInstance),
+          ...commonToolbarStyles({ theme }),
+          bottom: isFullScreen ? '0' : undefined,
+          position: isFullScreen ? 'fixed' : undefined,
+          boxShadow: `-3px 0 6px ${alpha(theme.palette.common.black, 0.1)}`,
           ...toolbarProps?.sx,
         } as any)
       }
     >
-      <MRT_LinearProgressBar />
+      <MRT_LinearProgressBar tableInstance={tableInstance} />
       <Box
         sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
       >
         {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
-          <MRT_ToolbarInternalButtons />
+          <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
         ) : (
           <span />
         )}
-        {positionToolbarAlertBanner === 'bottom' && <MRT_ToolbarAlertBanner />}
-        {!manualPagination &&
+        {positionToolbarAlertBanner === 'bottom' && (
+          <MRT_ToolbarAlertBanner tableInstance={tableInstance} />
+        )}
+        {enablePagination &&
           ['bottom', 'both'].includes(positionPagination ?? '') && (
-            <MRT_TablePagination />
+            <MRT_TablePagination tableInstance={tableInstance} />
           )}
       </Box>
     </Toolbar>

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -5,20 +5,23 @@ import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton'
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleSearchButton } from '../buttons/MRT_ToggleSearchButton';
-import { useMRT } from '../useMRT';
+import { MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_ToolbarInternalButtons: FC<Props> = () => {
+export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
   const {
-    disableFilters,
-    disableColumnHiding,
-    disableDensePaddingToggle,
-    disableGlobalFilter,
-    disableFullScreenToggle,
-    renderToolbarInternalActions,
-    tableInstance,
-  } = useMRT();
+    options: {
+      enableColumnFilters,
+      enableHiding,
+      enableDensePaddingToggle,
+      enableGlobalFilter,
+      enableFullScreenToggle,
+      renderToolbarInternalActions,
+    },
+  } = tableInstance;
 
   if (renderToolbarInternalActions) {
     return (
@@ -43,11 +46,21 @@ export const MRT_ToolbarInternalButtons: FC<Props> = () => {
         p: '0 0.5rem',
       }}
     >
-      {!disableGlobalFilter && <MRT_ToggleSearchButton />}
-      {!disableFilters && <MRT_ToggleFiltersButton />}
-      {!disableColumnHiding && <MRT_ShowHideColumnsButton />}
-      {!disableDensePaddingToggle && <MRT_ToggleDensePaddingButton />}
-      {!disableFullScreenToggle && <MRT_FullScreenToggleButton />}
+      {enableGlobalFilter && (
+        <MRT_ToggleSearchButton tableInstance={tableInstance} />
+      )}
+      {enableColumnFilters && (
+        <MRT_ToggleFiltersButton tableInstance={tableInstance} />
+      )}
+      {enableHiding && (
+        <MRT_ShowHideColumnsButton tableInstance={tableInstance} />
+      )}
+      {enableDensePaddingToggle && (
+        <MRT_ToggleDensePaddingButton tableInstance={tableInstance} />
+      )}
+      {enableFullScreenToggle && (
+        <MRT_FullScreenToggleButton tableInstance={tableInstance} />
+      )}
     </Box>
   );
 };

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,43 +1,45 @@
 import React, { FC } from 'react';
 import { alpha, Box, Theme, Toolbar } from '@mui/material';
 import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
-import { useMRT } from '../useMRT';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TableInstance } from '..';
 
-export const commonToolbarStyles = (
-  theme: Theme,
-  tableInstance: MRT_TableInstance,
-) => ({
+export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   backgroundColor: theme.palette.background.default,
   backgroundImage: `linear-gradient(${alpha(
     theme.palette.common.white,
     0.05,
   )},${alpha(theme.palette.common.white, 0.05)})`,
   display: 'grid',
-  opacity: tableInstance.state.fullScreen ? 0.95 : 1,
   p: '0 !important',
   width: '100%',
   zIndex: 1,
 });
 
-interface Props {}
+interface Props {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_ToolbarTop: FC<Props> = () => {
+export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
   const {
-    disableGlobalFilter,
-    hideToolbarInternalActions,
-    manualPagination,
-    muiTableToolbarTopProps,
-    positionPagination,
-    positionToolbarActions,
-    positionToolbarAlertBanner,
-    renderToolbarCustomActions,
-    tableInstance,
-  } = useMRT();
+    getState,
+    options: {
+      enableGlobalFilter,
+      enablePagination,
+      hideToolbarInternalActions,
+      idPrefix,
+      muiTableToolbarTopProps,
+      positionPagination,
+      positionToolbarActions,
+      positionToolbarAlertBanner,
+      renderToolbarCustomActions,
+    },
+  } = tableInstance;
+
+  const { isFullScreen } = getState();
 
   const toolbarProps =
     muiTableToolbarTopProps instanceof Function
@@ -46,18 +48,21 @@ export const MRT_ToolbarTop: FC<Props> = () => {
 
   return (
     <Toolbar
+      id={`mrt-${idPrefix}-toolbar-top`}
       variant="dense"
       {...toolbarProps}
       sx={(theme) =>
         ({
-          position: tableInstance.state.fullScreen ? 'sticky' : undefined,
-          top: tableInstance.state.fullScreen ? '0' : undefined,
-          ...commonToolbarStyles(theme, tableInstance),
+          position: isFullScreen ? 'sticky' : undefined,
+          top: isFullScreen ? '0' : undefined,
+          ...commonToolbarStyles({ theme }),
           ...toolbarProps?.sx,
         } as any)
       }
     >
-      {positionToolbarAlertBanner === 'top' && <MRT_ToolbarAlertBanner />}
+      {positionToolbarAlertBanner === 'top' && (
+        <MRT_ToolbarAlertBanner tableInstance={tableInstance} />
+      )}
       <Box
         sx={{
           p: '0.5rem',
@@ -74,19 +79,21 @@ export const MRT_ToolbarTop: FC<Props> = () => {
             zIndex: 3,
           }}
         >
-          {!disableGlobalFilter && <MRT_SearchTextField />}
+          {enableGlobalFilter && (
+            <MRT_SearchTextField tableInstance={tableInstance} />
+          )}
           {!hideToolbarInternalActions && positionToolbarActions === 'top' && (
-            <MRT_ToolbarInternalButtons />
+            <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
           )}
         </Box>
       </Box>
       <div>
-        {!manualPagination &&
+        {enablePagination &&
           ['top', 'both'].includes(positionPagination ?? '') && (
-            <MRT_TablePagination />
+            <MRT_TablePagination tableInstance={tableInstance} />
           )}
       </div>
-      <MRT_LinearProgressBar />
+      <MRT_LinearProgressBar tableInstance={tableInstance} />
     </Toolbar>
   );
 };

package/src/utils.ts

@@ -1,12 +1,12 @@
-import { MRT_ColumnInstance, MRT_ColumnInterface } from '.';
+import { ColumnDef, Table } from '@tanstack/react-table';
+import { MRT_ColumnInterface, MRT_FilterType } from '.';
+import { MRT_FILTER_TYPE } from './enums';
 
-export const findLowestLevelCols = (
-  columns: MRT_ColumnInterface[] | MRT_ColumnInstance[],
-) => {
-  let lowestLevelColumns: MRT_ColumnInterface[] | MRT_ColumnInstance[] =
-    columns;
-  let currentCols: MRT_ColumnInterface[] | MRT_ColumnInstance[] | undefined =
-    columns;
+export const getAllLeafColumnDefs = (
+  columns: MRT_ColumnInterface[],
+): MRT_ColumnInterface[] => {
+  let lowestLevelColumns: MRT_ColumnInterface[] = columns;
+  let currentCols: MRT_ColumnInterface[] | undefined = columns;
   while (!!currentCols?.length && currentCols.some((col) => col.columns)) {
     const nextCols: MRT_ColumnInterface[] = currentCols
       .filter((col) => !!col.columns)
@@ -19,3 +19,32 @@ export const findLowestLevelCols = (
   }
   return lowestLevelColumns.filter((col) => !col.columns);
 };
+
+export const createGroup = <D extends Record<string, any> = {}>(
+  table: Table<D>,
+  column: MRT_ColumnInterface<D>,
+  currentFilterTypes: { [key: string]: MRT_FilterType },
+): ColumnDef<D> =>
+  table.createGroup({
+    ...column,
+    columns: column?.columns?.map?.((col) =>
+      col.columns
+        ? createGroup<D>(table, col, currentFilterTypes)
+        : createDataColumn(table, col, currentFilterTypes),
+    ),
+  } as any);
+
+export const createDataColumn = <D extends Record<string, any> = {}>(
+  table: Table<D>,
+  column: MRT_ColumnInterface<D>,
+  currentFilterTypes: { [key: string]: MRT_FilterType },
+): ColumnDef<D> => // @ts-ignore
+  table.createDataColumn(column.id, {
+    filterType: currentFilterTypes[column.id] || MRT_FILTER_TYPE.BEST_MATCH,
+    ...column,
+  }) as any;
+
+export const createDisplayColumn = <D extends Record<string, any> = {}>(
+  table: Table<D>,
+  column: Omit<MRT_ColumnInterface<D>, 'header'> & { header?: string },
+): ColumnDef<D> => table.createDisplayColumn(column);

package/dist/head/MRT_TableHeadCellActions.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-interface Props {
-}
-export declare const MRT_TableHeadCellActions: FC<Props>;
-export {};

package/dist/table/MRT_TableSpacerCell.d.ts

@@ -1,6 +0,0 @@
-import { CSSProperties, FC } from 'react';
-interface Props {
-    width?: CSSProperties['width'];
-}
-export declare const MRT_TableSpacerCell: FC<Props>;
-export {};

package/dist/useMRT.d.ts

@@ -1,28 +0,0 @@
-import React, { Dispatch, PropsWithChildren, SetStateAction } from 'react';
-import type { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
-import { MRT_FILTER_TYPE } from './enums';
-import { MRT_Icons } from './icons';
-import { MRT_Localization } from './localization';
-import { MaterialReactTableProps } from './MaterialReactTable';
-export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
-    anyRowsCanExpand: boolean;
-    anyRowsExpanded: boolean;
-    icons: MRT_Icons;
-    idPrefix: string;
-    filterTypes: {
-        [key in MRT_FILTER_TYPE]: any;
-    };
-    localization: MRT_Localization;
-    setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
-    setCurrentFilterTypes: Dispatch<SetStateAction<{
-        [key: string]: MRT_FilterType;
-    }>>;
-    setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
-    setDensePadding: Dispatch<SetStateAction<boolean>>;
-    setFullScreen: Dispatch<SetStateAction<boolean>>;
-    setShowFilters: Dispatch<SetStateAction<boolean>>;
-    setShowSearch: Dispatch<SetStateAction<boolean>>;
-    tableInstance: MRT_TableInstance<D>;
-};
-export declare const MaterialReactTableProvider: <D extends {} = {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;
-export declare const useMRT: <D extends {} = {}>() => UseMRT<D>;

package/src/@types/faker.d.ts

@@ -1,4 +0,0 @@
-declare module '@faker-js/faker' {
-  import faker from 'faker';
-  export default faker;
-}

package/src/@types/react-table-config.d.ts

@@ -1,53 +0,0 @@
-import {
-  UseGroupByHooks,
-  UseRowSelectHooks,
-  UseSortByHooks,
-} from 'react-table';
-import {
-  MRT_Cell,
-  MRT_ColumnInstance,
-  MRT_ColumnInterface,
-  MRT_Row,
-  MRT_TableInstance,
-  MRT_TableOptions,
-  MRT_TableState,
-} from '..';
-
-declare module 'react-table' {
-  export interface TableOptions<D extends Record<string, unknown>>
-    extends MRT_TableOptions<D> {}
-
-  export interface Hooks<
-    D extends Record<string, unknown> = Record<string, unknown>,
-  > extends UseExpandedHooks<D>,
-      UseGroupByHooks<D>,
-      UseRowSelectHooks<D>,
-      UseSortByHooks<D> {}
-
-  export interface TableInstance<
-    D extends Record<string, unknown> = Record<string, unknown>,
-  > extends MRT_TableInstance<D> {
-    rows: MRT_Row<D>[];
-  }
-
-  export interface TableState<
-    D extends Record<string, unknown> = Record<string, unknown>,
-  > extends MRT_TableState<D> {}
-
-  export interface ColumnInterface<
-    D extends Record<string, unknown> = Record<string, unknown>,
-  > extends MRT_ColumnInterface<D> {}
-
-  export interface ColumnInstance<
-    D extends Record<string, unknown> = Record<string, unknown>,
-  > extends MRT_ColumnInstance<D> {}
-
-  export interface Cell<
-    D extends Record<string, unknown> = Record<string, unknown>,
-    V = any,
-  > extends MRT_Cell<D> {}
-
-  export interface Row<
-    D extends Record<string, unknown> = Record<string, unknown>,
-  > extends MRT_Row<D> {}
-}

package/src/head/MRT_TableHeadCellActions.tsx

@@ -1,29 +0,0 @@
-import React, { FC } from 'react';
-import { TableCell } from '@mui/material';
-import { useMRT } from '../useMRT';
-import { commonTableHeadCellStyles } from './MRT_TableHeadCell';
-
-interface Props {}
-
-export const MRT_TableHeadCellActions: FC<Props> = () => {
-  const {
-    localization,
-    tableInstance: {
-      state: { densePadding },
-    },
-  } = useMRT();
-
-  return (
-    <TableCell
-      style={{ textAlign: 'center' }}
-      sx={{
-        ...commonTableHeadCellStyles(densePadding),
-        textAlign: 'center',
-        maxWidth: '4rem',
-        width: '4rem',
-      }}
-    >
-      {localization.actions}
-    </TableCell>
-  );
-};

package/src/table/MRT_TableSpacerCell.tsx

@@ -1,20 +0,0 @@
-import React, { CSSProperties, FC } from 'react';
-import { TableCell } from '@mui/material';
-import { useMRT } from '../useMRT';
-
-interface Props {
-  width?: CSSProperties['width'];
-}
-
-export const MRT_TableSpacerCell: FC<Props> = ({ width }) => {
-  const { muiTableBodyCellProps } = useMRT();
-
-  const tableCellProps =
-    muiTableBodyCellProps instanceof Function
-      ? muiTableBodyCellProps()
-      : muiTableBodyCellProps;
-
-  return (
-    <TableCell {...tableCellProps} sx={{ width, ...tableCellProps?.sx }} />
-  );
-};