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

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,37 +1,45 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
-import { ColumnInstance } from 'react-table';
-import type { MRT_ColumnInstance } from '..';
+import type { MRT_ColumnInstance, MRT_TableInstance } from '..';
 import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
-import { useMRT } from '../useMRT';
 
 interface Props {
   column: MRT_ColumnInstance;
   isSubMenu?: boolean;
+  tableInstance: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   column,
   isSubMenu,
+  tableInstance,
 }) => {
-  const { onColumnHide, tableInstance } = useMRT();
-  const isParentHeader = !!column?.columns?.length;
+  const {
+    getState,
+    options: { onColumnHide },
+  } = tableInstance;
 
-  const allChildColumnsVisible =
-    isParentHeader &&
-    !!column.columns?.every((childColumn) => childColumn.isVisible);
+  const { columnVisibility } = getState();
 
-  const switchChecked = column.isVisible ?? allChildColumnsVisible;
+  const switchChecked =
+    (column.columnDefType !== 'group' && column.getIsVisible()) ||
+    (column.columnDefType === 'group' &&
+      column.getLeafColumns().some((col) => col.getIsVisible()));
 
-  const handleToggleColumnHidden = (column: ColumnInstance) => {
-    if (isParentHeader) {
-      column?.columns?.forEach?.((childColumn) => {
-        childColumn.toggleHidden(switchChecked);
+  const handleToggleColumnHidden = (column: MRT_ColumnInstance) => {
+    if (column.columnDefType === 'group') {
+      column?.columns?.forEach?.((childColumn: MRT_ColumnInstance) => {
+        childColumn.toggleVisibility(!switchChecked);
       });
     } else {
-      column.toggleHidden();
+      column.toggleVisibility();
     }
-    onColumnHide?.(column, tableInstance.state.hiddenColumns);
+    onColumnHide?.(
+      column,
+      Object.entries(columnVisibility)
+        .filter((entry) => entry[1])
+        .map((entry) => entry[0]),
+    );
   };
 
   return (
@@ -43,8 +51,10 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
           checked={switchChecked}
           control={<Switch />}
-          disabled={(isSubMenu && switchChecked) || column.disableColumnHiding}
-          label={column.Header as string}
+          disabled={
+            (isSubMenu && switchChecked) || column.enableHiding === false
+          }
+          label={column.header}
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>
@@ -53,6 +63,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           key={`${i}-${c.id}`}
           column={c}
           isSubMenu={isSubMenu}
+          tableInstance={tableInstance}
         />
       ))}
     </>

package/src/table/MRT_Table.tsx

@@ -3,13 +3,23 @@ import { Table } from '@mui/material';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
-import { useMRT } from '../useMRT';
+import { MRT_TableInstance } from '..';
 
-interface Props {}
+interface Props {
+  pinned: 'left' | 'center' | 'right' | 'none';
+  tableInstance: MRT_TableInstance;
+}
 
-export const MRT_Table: FC<Props> = () => {
-  const { tableInstance, muiTableProps, hideTableHead, hideTableFooter } =
-    useMRT();
+export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
+  const {
+    getTableProps,
+    options: {
+      enableStickyHeader,
+      hideTableFooter,
+      hideTableHead,
+      muiTableProps,
+    },
+  } = tableInstance;
 
   const mTableProps =
     muiTableProps instanceof Function
@@ -17,19 +27,19 @@ export const MRT_Table: FC<Props> = () => {
       : muiTableProps;
 
   const tableProps = {
+    ...getTableProps(),
     ...mTableProps,
-    ...tableInstance.getTableProps(),
-    style: {
-      ...tableInstance.getTableProps().style,
-      ...mTableProps?.style,
-    },
   };
 
   return (
-    <Table {...tableProps}>
-      {!hideTableHead && <MRT_TableHead />}
-      <MRT_TableBody />
-      {!hideTableFooter && <MRT_TableFooter />}
+    <Table stickyHeader={enableStickyHeader} {...tableProps}>
+      {!hideTableHead && (
+        <MRT_TableHead pinned={pinned} tableInstance={tableInstance} />
+      )}
+      <MRT_TableBody pinned={pinned} tableInstance={tableInstance} />
+      {!hideTableFooter && (
+        <MRT_TableFooter pinned={pinned} tableInstance={tableInstance} />
+      )}
     </Table>
   );
 };

package/src/table/MRT_TableContainer.tsx

@@ -1,65 +1,130 @@
-import React, { FC, useEffect } from 'react';
-import { Paper, TableContainer, Box } from '@mui/material';
-import { useMRT } from '../useMRT';
+import React, { FC, useLayoutEffect, useState } from 'react';
+import { alpha, Box, SxProps, TableContainer, Theme } from '@mui/material';
 import { MRT_Table } from './MRT_Table';
-import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
-import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
+import { MRT_TableInstance } from '..';
 
-interface Props {}
+const commonBoxStyles = ({
+  pinned,
+  theme,
+  visible,
+}: {
+  pinned?: 'left' | 'right';
+  theme: Theme;
+  visible?: boolean;
+}) =>
+  ({
+    display: 'grid',
+    minWidth: visible ? '200px' : 0,
+    overflowX: 'auto',
+    boxShadow:
+      pinned === 'left'
+        ? `0 1px 12px ${alpha(theme.palette.common.black, 0.5)}`
+        : pinned === 'right'
+        ? `0 -1px 12px ${alpha(theme.palette.common.black, 0.5)}`
+        : 'none',
+  } as SxProps<Theme>);
 
-export const MRT_TableContainer: FC<Props> = () => {
+interface Props {
+  tableInstance: MRT_TableInstance;
+}
+
+export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
   const {
-    hideToolbarBottom,
-    hideToolbarTop,
-    muiTableContainerProps,
-    tableInstance,
-  } = useMRT();
-  const fullScreen = tableInstance.state.fullScreen;
+    getCenterTableWidth,
+    getIsSomeColumnsPinned,
+    getLeftTableWidth,
+    getRightTableWidth,
+    getState,
+    options: {
+      enableColumnPinning,
+      enableStickyHeader,
+      idPrefix,
+      muiTableContainerProps,
+    },
+  } = tableInstance;
+
+  const { isFullScreen, columnPinning } = getState();
 
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      if (fullScreen) {
-        document.body.style.overflow = 'hidden';
-      } else {
-        document.body.style.overflow = 'auto';
-      }
-    }
-  }, [fullScreen]);
+  const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
   const tableContainerProps =
     muiTableContainerProps instanceof Function
       ? muiTableContainerProps(tableInstance)
       : muiTableContainerProps;
 
+  useLayoutEffect(() => {
+    const topToolbarHeight =
+      typeof document !== 'undefined'
+        ? document?.getElementById(`mrt-${idPrefix}-toolbar-top`)
+            ?.offsetHeight ?? 0
+        : 0;
+
+    const bottomToolbarHeight =
+      typeof document !== 'undefined'
+        ? document?.getElementById(`mrt-${idPrefix}-toolbar-bottom`)
+            ?.offsetHeight ?? 0
+        : 0;
+
+    setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
+  });
+
   return (
     <TableContainer
-      component={Paper}
       {...tableContainerProps}
       sx={{
-        bottom: fullScreen ? '0' : undefined,
-        height: fullScreen ? '100%' : undefined,
-        left: fullScreen ? '0' : undefined,
-        m: fullScreen ? '0' : undefined,
-        overflowY: !fullScreen ? 'hidden' : undefined,
-        position: fullScreen ? 'fixed' : undefined,
-        right: fullScreen ? '0' : undefined,
-        top: fullScreen ? '0' : undefined,
-        transition: 'all 0.2s ease-in-out',
-        width: fullScreen ? '100vw' : undefined,
-        zIndex: fullScreen ? 1200 : 1,
+        maxWidth: '100%',
+        maxHeight: enableStickyHeader
+          ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 2000px)`
+          : undefined,
+        overflow: 'auto',
         ...tableContainerProps?.sx,
       }}
+      style={{
+        maxHeight: isFullScreen
+          ? `calc(100vh - ${totalToolbarHeight}px)`
+          : undefined,
+      }}
     >
-      {!hideToolbarTop && <MRT_ToolbarTop />}
-      <Box
-        sx={{
-          maxWidth: '100%',
-          overflowX: 'auto',
-        }}
-      >
-        <MRT_Table />
-      </Box>
-      {!hideToolbarBottom && <MRT_ToolbarBottom />}
+      {enableColumnPinning && getIsSomeColumnsPinned() ? (
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: `${getLeftTableWidth()}fr ${getCenterTableWidth()}fr ${getRightTableWidth()}fr`,
+          }}
+        >
+          <Box
+            // @ts-ignore
+            sx={(theme: Theme) =>
+              commonBoxStyles({
+                pinned: 'left',
+                theme,
+                visible: !!columnPinning.left?.length,
+              })
+            }
+          >
+            <MRT_Table pinned="left" tableInstance={tableInstance} />
+          </Box>
+          <Box // @ts-ignore
+            sx={(theme: Theme) => commonBoxStyles({ theme })}
+          >
+            <MRT_Table pinned="center" tableInstance={tableInstance} />
+          </Box>
+          <Box
+            // @ts-ignore
+            sx={(theme: Theme) =>
+              commonBoxStyles({
+                pinned: 'right',
+                theme,
+                visible: !!columnPinning.right?.length,
+              })
+            }
+          >
+            <MRT_Table pinned="right" tableInstance={tableInstance} />
+          </Box>
+        </Box>
+      ) : (
+        <MRT_Table pinned="none" tableInstance={tableInstance} />
+      )}
     </TableContainer>
   );
 };

package/src/table/MRT_TablePaper.tsx

@@ -0,0 +1,61 @@
+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={{
+        bottom: isFullScreen ? '0' : undefined,
+        height: isFullScreen ? '100%' : undefined,
+        left: isFullScreen ? '0' : undefined,
+        m: isFullScreen ? '0' : undefined,
+        overflowY: !isFullScreen ? 'hidden' : undefined,
+        position: isFullScreen ? 'fixed' : undefined,
+        right: isFullScreen ? '0' : undefined,
+        top: isFullScreen ? '0' : undefined,
+        transition: 'all 0.2s ease-in-out',
+        width: isFullScreen ? '100vw' : undefined,
+        zIndex: isFullScreen ? 1200 : 1,
+        ...tablePaperProps?.sx,
+      }}
+    >
+      {!hideToolbarTop && <MRT_ToolbarTop tableInstance={tableInstance} />}
+      <MRT_TableContainer tableInstance={tableInstance} />
+      {!hideToolbarBottom && (
+        <MRT_ToolbarBottom tableInstance={tableInstance} />
+      )}
+    </Paper>
+  );
+};

package/src/table/MRT_TableRoot.tsx

@@ -0,0 +1,236 @@
+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.enableRowEditing) &&
+          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: () => '#',
+            header: props.localization?.rowNumbers,
+            id: 'mrt-row-numbers',
+            maxWidth: 40,
+            width: 40,
+            minWidth: 40,
+          }),
+      ].filter(Boolean),
+    [
+      props.enableExpandAll,
+      props.enableExpanded,
+      props.enableRowActions,
+      props.enableRowEditing,
+      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,
+    //@ts-ignore
+    filterTypes: defaultFilterFNs,
+    globalFilterType: currentGlobalFilterType,
+    columnFilterRowsFn: columnFilterRowsFn,
+    columns,
+    data,
+    expandRowsFn: expandRowsFn,
+    getSubRows: props.getSubRows ?? ((originalRow: D) => originalRow.subRows),
+    globalFilterRowsFn: globalFilterRowsFn,
+    groupRowsFn: groupRowsFn,
+    idPrefix,
+    onPaginationChange: (updater: any) =>
+      setPagination((old) => functionalUpdate(updater, old)),
+    paginateRowsFn: paginateRowsFn,
+    setCurrentEditingRow,
+    setCurrentFilterTypes,
+    setCurrentGlobalFilterType,
+    setIsDensePadding,
+    setIsFullScreen,
+    setShowFilters,
+    setShowSearch,
+    sortRowsFn,
+    state: {
+      ...props.initialState,
+      currentEditingRow,
+      currentFilterTypes,
+      currentGlobalFilterType,
+      isDensePadding,
+      isFullScreen,
+      //@ts-ignore
+      pagination,
+      showFilters,
+      showSearch,
+      ...props.state,
+    },
+  });
+
+  return <MRT_TablePaper tableInstance={tableInstance} />;
+};

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -1,12 +1,15 @@
 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
@@ -14,7 +17,7 @@ export const MRT_LinearProgressBar: FC<Props> = () => {
       : muiLinearProgressProps;
 
   return (
-    <Collapse in={isFetching || isLoading} unmountOnExit>
+    <Collapse in={isReloading || isLoading} unmountOnExit>
       <LinearProgress
         aria-label="Loading"
         aria-busy="true"