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

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,63 +1,68 @@
 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
-      ? muiTableToolbarTopProps(tableInstance)
+      ? muiTableToolbarTopProps({ tableInstance })
       : muiTableToolbarTopProps;
 
   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',
@@ -65,7 +70,7 @@ export const MRT_ToolbarTop: FC<Props> = () => {
           justifyContent: 'space-between',
         }}
       >
-        {renderToolbarCustomActions?.(tableInstance) ?? <span />}
+        {renderToolbarCustomActions?.({ tableInstance }) ?? <span />}
         <Box
           sx={{
             display: 'flex',
@@ -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,27 +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;
-    }>>;
-    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 }} />
-  );
-};

package/src/useMRT.tsx

@@ -1,215 +0,0 @@
-import React, {
-  Context,
-  Dispatch,
-  PropsWithChildren,
-  SetStateAction,
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  PluginHook,
-  useExpanded,
-  useFilters,
-  useFlexLayout,
-  useGlobalFilter,
-  useGroupBy,
-  usePagination,
-  useResizeColumns,
-  useRowSelect,
-  useSortBy,
-  useTable,
-} from 'react-table';
-import type {
-  MRT_ColumnInterface,
-  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';
-import { findLowestLevelCols } from './utils';
-
-export 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;
-    }>
-  >;
-  setDensePadding: Dispatch<SetStateAction<boolean>>;
-  setFullScreen: Dispatch<SetStateAction<boolean>>;
-  setShowFilters: Dispatch<SetStateAction<boolean>>;
-  setShowSearch: Dispatch<SetStateAction<boolean>>;
-  tableInstance: MRT_TableInstance<D>;
-};
-
-const MaterialReactTableContext = (<D extends {} = {}>() =>
-  createContext<UseMRT<D>>({} as UseMRT<D>) as Context<UseMRT<D>>)();
-
-export const MaterialReactTableProvider = <D extends {} = {}>(
-  props: PropsWithChildren<MaterialReactTableProps<D>>,
-) => {
-  const hooks: PluginHook<D>[] = [
-    useFilters,
-    useGlobalFilter,
-    useGroupBy,
-    useSortBy,
-    useExpanded,
-    usePagination,
-    useRowSelect,
-  ];
-
-  if (props.enableColumnResizing)
-    hooks.unshift(useResizeColumns, useFlexLayout);
-
-  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row<D> | null>(
-    null,
-  );
-  const [densePadding, setDensePadding] = useState(
-    props.initialState?.densePadding ?? false,
-  );
-  const [fullScreen, setFullScreen] = useState(
-    props.initialState?.fullScreen ?? false,
-  );
-  const [showFilters, setShowFilters] = useState(
-    props.initialState?.showFilters ?? false,
-  );
-  const [showSearch, setShowSearch] = useState(
-    props.initialState?.showSearch ?? false,
-  );
-
-  const [currentFilterTypes, setCurrentFilterTypes] = useState<{
-    [key: string]: MRT_FilterType;
-  }>(() =>
-    Object.assign(
-      {},
-      ...findLowestLevelCols(props.columns).map((c) => ({
-        [c.accessor as string]:
-          c.filter ??
-          props?.initialState?.filters?.[c.accessor as any] ??
-          (!!c.filterSelectOptions ? 'equals' : 'fuzzy'),
-      })),
-    ),
-  );
-
-  const applyFiltersToColumns = useCallback(
-    (cols: MRT_ColumnInterface[]) =>
-      cols.map((column) => {
-        if (column.columns) {
-          applyFiltersToColumns(column.columns);
-        } else {
-          column.filter =
-            props?.filterTypes?.[
-              currentFilterTypes[column.accessor as string] as MRT_FILTER_TYPE
-            ];
-        }
-        return column;
-      }),
-    [currentFilterTypes, props.filterTypes],
-  );
-
-  const columns = useMemo(
-    () => applyFiltersToColumns(props.columns),
-    [props.columns, applyFiltersToColumns],
-  );
-
-  const data = useMemo(
-    () =>
-      !props.isLoading || !!props.data.length
-        ? props.data
-        : [...Array(10).fill(null)].map((_) =>
-            Object.assign(
-              {},
-              ...findLowestLevelCols(props.columns).map((c) => ({
-                [c.accessor as string]: null,
-              })),
-            ),
-          ),
-    [props.data, props.isLoading],
-  );
-
-  const tableInstance = useTable(
-    // @ts-ignore
-    {
-      ...props,
-      // @ts-ignore
-      columns,
-      data,
-      useControlledState: (state) =>
-        useMemo(
-          () => ({
-            ...state,
-            currentEditingRow,
-            currentFilterTypes,
-            densePadding,
-            fullScreen,
-            showFilters,
-            showSearch,
-            //@ts-ignore
-            ...props?.useControlledState?.(state),
-          }),
-          [
-            currentEditingRow,
-            currentFilterTypes,
-            densePadding,
-            fullScreen,
-            showFilters,
-            showSearch,
-            state,
-          ],
-        ),
-    },
-    ...hooks,
-  ) as unknown as MRT_TableInstance<D>;
-
-  const idPrefix = useMemo(
-    () => props.idPrefix ?? Math.random().toString(36).substring(2, 9),
-    [props.idPrefix],
-  );
-  const anyRowsCanExpand = useMemo(
-    () => tableInstance.rows.some((row) => row.canExpand),
-    [tableInstance.rows],
-  );
-  const anyRowsExpanded = useMemo(
-    () => tableInstance.rows.some((row) => row.isExpanded),
-    [tableInstance.rows],
-  );
-
-  return (
-    <MaterialReactTableContext.Provider
-      value={{
-        ...props,
-        anyRowsCanExpand,
-        anyRowsExpanded,
-        idPrefix,
-        //@ts-ignore
-        setCurrentEditingRow,
-        setCurrentFilterTypes,
-        setDensePadding,
-        setFullScreen,
-        setShowFilters,
-        setShowSearch,
-        //@ts-ignore
-        tableInstance,
-      }}
-    >
-      {props.children}
-    </MaterialReactTableContext.Provider>
-  );
-};
-
-export const useMRT = <D extends {} = {}>(): UseMRT<D> =>
-  useContext<UseMRT<D>>(
-    MaterialReactTableContext as unknown as Context<UseMRT<D>>,
-  );