material-react-table 0.6.9 → 0.7.0-alpha.10

package/src/table/MRT_TablePaper.tsx

@@ -0,0 +1,65 @@
+import React, { FC, useEffect } from 'react';
+import { Paper } from '@mui/material';
+import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
+import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
+import { MRT_TableContainer } from './MRT_TableContainer';
+import { MRT_TableInstance } from '..';
+
+interface Props {
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
+  const {
+    getState,
+    options: { hideToolbarBottom, hideToolbarTop, muiTablePaperProps },
+  } = tableInstance;
+
+  const { isFullScreen } = getState();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      if (isFullScreen) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow = 'auto';
+      }
+    }
+  }, [isFullScreen]);
+
+  const tablePaperProps =
+    muiTablePaperProps instanceof Function
+      ? muiTablePaperProps({ tableInstance })
+      : muiTablePaperProps;
+
+  return (
+    <Paper
+      elevation={2}
+      {...tablePaperProps}
+      sx={{
+        transition: 'all 0.2s ease-in-out',
+        ...tablePaperProps?.sx,
+      }}
+      style={{
+        height: isFullScreen ? '100%' : undefined,
+        left: isFullScreen ? '0' : undefined,
+        margin: isFullScreen ? '0' : undefined,
+        maxHeight: isFullScreen ? '100%' : undefined,
+        maxWidth: isFullScreen ? '100%' : undefined,
+        overflowY: !isFullScreen ? 'hidden' : undefined,
+        position: isFullScreen ? 'fixed' : undefined,
+        right: isFullScreen ? '0' : undefined,
+        top: isFullScreen ? '0' : undefined,
+        width: isFullScreen ? '100vw' : undefined,
+        zIndex: isFullScreen ? 1200 : 1,
+        bottom: isFullScreen ? '0' : undefined,
+      }}
+    >
+      {!hideToolbarTop && <MRT_ToolbarTop tableInstance={tableInstance} />}
+      <MRT_TableContainer tableInstance={tableInstance} />
+      {!hideToolbarBottom && (
+        <MRT_ToolbarBottom tableInstance={tableInstance} />
+      )}
+    </Paper>
+  );
+};

package/src/table/MRT_TableRoot.tsx

@@ -0,0 +1,239 @@
+import {
+  columnFilterRowsFn,
+  createTable,
+  expandRowsFn,
+  functionalUpdate,
+  globalFilterRowsFn,
+  groupRowsFn,
+  paginateRowsFn,
+  PaginationState,
+  sortRowsFn,
+  Table,
+  useTable,
+} from '@tanstack/react-table';
+import React, { useMemo, useState } from 'react';
+import {
+  MRT_ColumnInterface,
+  MRT_FilterType,
+  MRT_Row,
+  MRT_TableInstance,
+} from '..';
+import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
+import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
+import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
+import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
+import { MaterialReactTableProps } from '../MaterialReactTable';
+import { MRT_TablePaper } from './MRT_TablePaper';
+import {
+  createDataColumn,
+  createDisplayColumn,
+  createGroup,
+  getAllLeafColumnDefs,
+} from '../utils';
+import { defaultFilterFNs } from '../filtersFNs';
+import { MRT_FILTER_TYPE } from '../enums';
+
+export const MRT_TableRoot = <D extends Record<string, any> = {}>(
+  props: MaterialReactTableProps<D>,
+) => {
+  const idPrefix = useMemo(
+    () => props.idPrefix ?? Math.random().toString(36).substring(2, 9),
+    [props.idPrefix],
+  );
+  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row | null>(
+    null,
+  );
+  const [isDensePadding, setIsDensePadding] = useState(
+    props.initialState?.isDensePadding ?? false,
+  );
+  const [isFullScreen, setIsFullScreen] = useState(
+    props.initialState?.isFullScreen ?? false,
+  );
+  const [showFilters, setShowFilters] = useState(
+    props.initialState?.showFilters ?? false,
+  );
+  const [showSearch, setShowSearch] = useState(
+    props.initialState?.showSearch ?? false,
+  );
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: props.initialState?.pagination?.pageIndex ?? 0,
+    pageSize: props.initialState?.pagination?.pageSize ?? 10,
+    pageCount: props.initialState?.pagination?.pageCount ?? -1,
+  });
+
+  const [currentFilterTypes, setCurrentFilterTypes] = useState<{
+    [key: string]: MRT_FilterType;
+  }>(() =>
+    Object.assign(
+      {},
+      ...getAllLeafColumnDefs(props.columns as MRT_ColumnInterface[]).map(
+        (c) => ({
+          [c.id as string]:
+            c.filter ??
+            props?.initialState?.columnFilters?.[c.id as any] ??
+            (!!c.filterSelectOptions?.length
+              ? MRT_FILTER_TYPE.EQUALS
+              : MRT_FILTER_TYPE.BEST_MATCH),
+        }),
+      ),
+    ),
+  );
+
+  const [currentGlobalFilterType, setCurrentGlobalFilterType] = useState(
+    props.globalFilterType ?? MRT_FILTER_TYPE.BEST_MATCH_FIRST,
+  );
+
+  const table = useMemo(
+    () => createTable<{ Row: D }>(),
+    [],
+  ) as unknown as Table<D>;
+
+  const displayColumns = useMemo(
+    () =>
+      [
+        (props.enableRowActions || props.enableEditing) &&
+          createDisplayColumn(table, {
+            Cell: ({ cell }) => (
+              <MRT_ToggleRowActionMenuButton
+                row={cell.row as any}
+                tableInstance={tableInstance}
+              />
+            ),
+            header: props.localization?.actions,
+            id: 'mrt-row-actions',
+            maxWidth: 60,
+            width: 60,
+          }),
+        (props.enableExpanded || props.enableGrouping) &&
+          createDisplayColumn(table, {
+            Cell: ({ cell }) => (
+              <MRT_ExpandButton
+                row={cell.row as any}
+                tableInstance={tableInstance}
+              />
+            ),
+            Header: () =>
+              props.enableExpandAll ? (
+                <MRT_ExpandAllButton tableInstance={tableInstance} />
+              ) : null,
+            header: props.localization?.expand,
+            id: 'mrt-expand',
+            maxWidth: 40,
+            width: 40,
+          }),
+        props.enableRowSelection &&
+          createDisplayColumn(table, {
+            Cell: ({ cell }) => (
+              <MRT_SelectCheckbox
+                row={cell.row as any}
+                tableInstance={tableInstance}
+              />
+            ),
+            Header: () =>
+              props.enableSelectAll ? (
+                <MRT_SelectCheckbox selectAll tableInstance={tableInstance} />
+              ) : null,
+            header: props.localization?.select,
+            id: 'mrt-select',
+            maxWidth: 40,
+            width: 40,
+          }),
+        props.enableRowNumbers &&
+          createDisplayColumn(table, {
+            Cell: ({ cell }) => cell.row.index + 1,
+            Header: () => props.localization?.rowNumber,
+            header: props.localization?.rowNumbers,
+            id: 'mrt-row-numbers',
+            maxWidth: 40,
+            width: 40,
+            minWidth: 40,
+          }),
+      ].filter(Boolean),
+    [
+      table,
+      props.enableExpandAll,
+      props.enableExpanded,
+      props.enableRowActions,
+      props.enableGrouping,
+      props.enableEditing,
+      props.enableRowNumbers,
+      props.enableRowSelection,
+      props.enableSelectAll,
+      props.localization,
+    ],
+  );
+
+  const columns = useMemo(
+    () =>
+      table.createColumns([
+        ...displayColumns,
+        ...props.columns.map((column) =>
+          column.columns
+            ? createGroup(table, column, currentFilterTypes)
+            : createDataColumn(table, column, currentFilterTypes),
+        ),
+      ] as any),
+    [table, props.columns, currentFilterTypes],
+  );
+
+  const data = useMemo(
+    () =>
+      props.isLoading && !props.data.length
+        ? [...Array(10).fill(null)].map((_) =>
+            Object.assign(
+              {},
+              ...getAllLeafColumnDefs(
+                props.columns as MRT_ColumnInterface[],
+              ).map((c) => ({
+                [c.id]: null,
+              })),
+            ),
+          )
+        : props.data,
+    [props.data, props.isLoading],
+  );
+
+  //@ts-ignore
+  const tableInstance: MRT_TableInstance<{}> = useTable(table, {
+    ...props,
+    columnFilterRowsFn: columnFilterRowsFn,
+    columns,
+    data,
+    debugAll: false,
+    expandRowsFn: expandRowsFn,
+    //@ts-ignore
+    filterTypes: defaultFilterFNs,
+    getSubRows: props.getSubRows ?? ((originalRow: D) => originalRow.subRows),
+    globalFilterRowsFn: globalFilterRowsFn,
+    globalFilterType: currentGlobalFilterType,
+    groupRowsFn: groupRowsFn,
+    idPrefix,
+    //@ts-ignore
+    initialState: props.initialState,
+    onPaginationChange: (updater: any) =>
+      setPagination((old) => functionalUpdate(updater, old)),
+    paginateRowsFn: paginateRowsFn,
+    setCurrentEditingRow,
+    setCurrentFilterTypes,
+    setCurrentGlobalFilterType,
+    setIsDensePadding,
+    setIsFullScreen,
+    setShowFilters,
+    setShowSearch,
+    sortRowsFn,
+    state: {
+      currentEditingRow,
+      currentFilterTypes,
+      currentGlobalFilterType,
+      isDensePadding,
+      isFullScreen,
+      //@ts-ignore
+      pagination,
+      showFilters,
+      showSearch,
+      ...props.state,
+    },
+  });
+
+  return <MRT_TablePaper tableInstance={tableInstance} />;
+};

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -1,20 +1,23 @@
 import React, { FC } from 'react';
 import { Collapse, LinearProgress } from '@mui/material';
-import { useMRT } from '../useMRT';
+import { MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_LinearProgressBar: FC<Props> = () => {
-  const { muiLinearProgressProps, isFetching, isLoading, tableInstance } =
-    useMRT();
+export const MRT_LinearProgressBar: FC<Props> = ({ tableInstance }) => {
+  const {
+    options: { muiLinearProgressProps, isReloading, isLoading },
+  } = tableInstance;
 
   const linearProgressProps =
     muiLinearProgressProps instanceof Function
-      ? muiLinearProgressProps(tableInstance)
+      ? muiLinearProgressProps({ tableInstance })
       : muiLinearProgressProps;
 
   return (
-    <Collapse in={isFetching || isLoading} unmountOnExit>
+    <Collapse in={isReloading || isLoading} unmountOnExit>
       <LinearProgress
         aria-label="Loading"
         aria-busy="true"

package/src/toolbar/MRT_TablePagination.tsx

@@ -1,37 +1,51 @@
 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
-      ? muiTablePaginationProps(tableInstance)
+      ? muiTablePaginationProps({ tableInstance })
       : 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)}
+      SelectProps={{
+        sx: { m: '0 1rem 0 1ch' },
+        MenuProps: { MenuListProps: { disablePadding: true } },
+      }}
+      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}
+      rowsPerPageOptions={[5, 10, 15, 20, 25, 30, 50, 100]}
+      showFirstButton={showFirstLastPageButtons}
+      showLastButton={showFirstLastPageButtons}
       {...tablePaginationProps}
       sx={{
         m: '0 0.5rem',

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,51 +1,63 @@
 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)');
 
   const alertProps =
     muiTableToolbarAlertBannerProps instanceof Function
-      ? muiTableToolbarAlertBannerProps(tableInstance)
+      ? muiTableToolbarAlertBannerProps({ tableInstance })
       : 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>
         ))}
@@ -84,6 +96,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
       >
         <Box sx={{ p: '0.5rem 1rem' }}>
           {selectMessage}
+          <br />
           {groupedByMessage}
         </Box>
       </Alert>

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,56 +1,67 @@
 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
-      ? muiTableToolbarBottomProps(tableInstance)
+      ? muiTableToolbarBottomProps({ tableInstance })
       : muiTableToolbarBottomProps;
 
   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,30 +5,34 @@ 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 (
       <>
-        {renderToolbarInternalActions(tableInstance, {
-          MRT_ToggleSearchButton,
-          MRT_ToggleFiltersButton,
+        {renderToolbarInternalActions({
+          MRT_FullScreenToggleButton,
           MRT_ShowHideColumnsButton,
           MRT_ToggleDensePaddingButton,
-          MRT_FullScreenToggleButton,
+          MRT_ToggleFiltersButton,
+          MRT_ToggleSearchButton,
+          tableInstance,
         })}
       </>
     );
@@ -43,11 +47,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>
   );
 };