material-react-table 0.1.0 → 0.3.2

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import { FormControlLabel, MenuItem, Switch, Typography } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { ColumnInstance } from 'react-table';
+
+interface Props {
+  column: ColumnInstance;
+}
+
+export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
+  const { maxColumnDepth } = useMaterialReactTable();
+
+  const isMaxDepth = column.depth === maxColumnDepth;
+
+  return (
+    <>
+      <MenuItem style={{ paddingLeft: `${column.depth + 1}rem` }}>
+        {isMaxDepth ? (
+          <FormControlLabel
+            checked={column.isVisible}
+            control={<Switch />}
+            label={column.Header as string}
+            onChange={() => isMaxDepth && column.toggleHidden()}
+          />
+        ) : (
+          <Typography>{column.Header}</Typography>
+        )}
+      </MenuItem>
+      {column.columns?.map((c, i) => (
+        <MRT_ShowHideColumnsMenu key={`${i}-${c.id}`} column={c} />
+      ))}
+    </>
+  );
+};

package/src/table/MRT_Table.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+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 { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {}
+
+export const MRT_Table: FC<Props> = () => {
+  const { tableInstance, muiTableProps, hideTableHead, hideTableFooter } =
+    useMaterialReactTable();
+
+  const tableProps = {
+    ...muiTableProps,
+    ...tableInstance.getTableProps(),
+    style: {
+      ...tableInstance.getTableProps().style,
+      ...(muiTableProps?.style ?? {}),
+    },
+  };
+
+  return (
+    <Table {...tableProps}>
+      {!hideTableHead && <MRT_TableHead />}
+      <MRT_TableBody />
+      {!hideTableFooter && <MRT_TableFooter />}
+    </Table>
+  );
+};

package/src/table/MRT_TableContainer.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+import {
+  alpha,
+  CircularProgress,
+  LinearProgress,
+  Paper,
+  styled,
+  TableContainer,
+} from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_Table } from './MRT_Table';
+import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
+import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
+
+const CircularProgressWrapper = styled('div')(({ theme }) => ({
+  alignItems: 'center',
+  backgroundColor: alpha(theme.palette.background.paper, 0.5),
+  display: 'grid',
+  height: '100%',
+  justifyContent: 'center',
+  margin: 'auto',
+  position: 'absolute',
+  width: 'calc(100% - 2rem)',
+}));
+
+interface Props {}
+
+export const MRT_TableContainer: FC<Props> = () => {
+  const {
+    muiTableContainerProps,
+    hideToolbarTop,
+    hideToolbarBottom,
+    isLoading,
+    isFetching,
+  } = useMaterialReactTable();
+
+  return (
+    <TableContainer component={Paper} {...muiTableContainerProps}>
+      {!hideToolbarTop && <MRT_ToolbarTop />}
+      {isFetching && <LinearProgress />}
+      {isLoading && (
+        <CircularProgressWrapper>
+          <CircularProgress aria-busy="true" aria-label="Loading data" />
+        </CircularProgressWrapper>
+      )}
+      <MRT_Table />
+      {!hideToolbarBottom && <MRT_ToolbarBottom />}
+    </TableContainer>
+  );
+};

package/src/table/MRT_TableSpacerCell.tsx

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

package/src/toolbar/MRT_TablePagination.tsx

@@ -0,0 +1,37 @@
+import React, { ChangeEvent, FC } from 'react';
+import { TablePagination } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {}
+
+export const MRT_TablePagination: FC<Props> = () => {
+  const { tableInstance, muiTablePaginationProps } = useMaterialReactTable();
+
+  const tablePaginationProps =
+    muiTablePaginationProps instanceof Function
+      ? muiTablePaginationProps(tableInstance)
+      : muiTablePaginationProps;
+
+  const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
+    tableInstance.setPageSize(+event.target.value);
+    tableInstance.gotoPage(0);
+  };
+
+  return (
+    <TablePagination
+      component={'div'}
+      count={tableInstance.rows.length}
+      onPageChange={(_, newPage) => tableInstance.gotoPage(newPage)}
+      onRowsPerPageChange={handleChangeRowsPerPage}
+      page={tableInstance.state.pageIndex}
+      rowsPerPage={tableInstance.state.pageSize}
+      showFirstButton={
+        tableInstance.rows.length / tableInstance.state.pageSize > 2
+      }
+      showLastButton={
+        tableInstance.rows.length / tableInstance.state.pageSize > 2
+      }
+      {...tablePaginationProps}
+    />
+  );
+};

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -0,0 +1,43 @@
+import React, { FC } from 'react';
+import { styled, Toolbar as MuiToolbar } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_TablePagination } from './MRT_TablePagination';
+import { MRT_ToolbarButtons } from './MRT_ToolbarButtons';
+
+const Toolbar = styled(MuiToolbar)({
+  padding: 0,
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+interface Props {}
+
+export const MRT_ToolbarBottom: FC<Props> = () => {
+  const {
+    hideToolbarActions,
+    manualPagination,
+    muiTableToolbarBottomProps,
+    positionPagination,
+    positionToolbarActions,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  const toolbarProps =
+    muiTableToolbarBottomProps instanceof Function
+      ? muiTableToolbarBottomProps(tableInstance)
+      : muiTableToolbarBottomProps;
+
+  return (
+    <Toolbar variant="dense" {...toolbarProps}>
+      {!hideToolbarActions && positionToolbarActions === 'bottom' ? (
+        <MRT_ToolbarButtons />
+      ) : (
+        <span />
+      )}
+      {!manualPagination &&
+        ['bottom', 'both'].includes(positionPagination ?? '') && (
+          <MRT_TablePagination />
+        )}
+    </Toolbar>
+  );
+};

package/src/toolbar/MRT_ToolbarButtons.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { styled } from '@mui/material';
+import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
+import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_DensePaddingSwitch } from '../inputs/MRT_DensePaddingSwitch';
+
+const ToolbarButtonsContainer = styled('div')({
+  display: 'flex',
+  gap: '0.5rem',
+  alignItems: 'center',
+});
+
+interface Props {}
+
+export const MRT_ToolbarButtons: FC<Props> = () => {
+  const { disableFilters, disableColumnHiding, disableDensePaddingToggle } =
+    useMaterialReactTable();
+
+  return (
+    <ToolbarButtonsContainer>
+      {!disableFilters && <MRT_ToggleFiltersButton />}
+      {!disableColumnHiding && <MRT_ShowHideColumnsButton />}
+      {!disableDensePaddingToggle && <MRT_DensePaddingSwitch />}
+    </ToolbarButtonsContainer>
+  );
+};

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -0,0 +1,68 @@
+import React, { FC } from 'react';
+import { styled, Toolbar as MuiToolbar, Typography } from '@mui/material';
+import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_ToolbarButtons } from './MRT_ToolbarButtons';
+import { MRT_TablePagination } from './MRT_TablePagination';
+
+const Toolbar = styled(MuiToolbar)({
+  display: 'grid',
+});
+
+const ToolbarTopRow = styled('div')({
+  padding: '0.5rem',
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+const ToolbarActionsContainer = styled('div')({
+  display: 'flex',
+  gap: '0.5rem',
+});
+
+interface Props {}
+
+export const MRT_ToolbarTop: FC<Props> = () => {
+  const {
+    disableGlobalFilter,
+    hideToolbarActions,
+    manualPagination,
+    muiTableTitleProps,
+    muiTableToolbarTopProps,
+    positionPagination,
+    positionToolbarActions,
+    tableInstance,
+    title,
+  } = useMaterialReactTable();
+
+  const toolbarProps =
+    muiTableToolbarTopProps instanceof Function
+      ? muiTableToolbarTopProps(tableInstance)
+      : muiTableToolbarTopProps;
+
+  return (
+    <Toolbar variant="dense" {...toolbarProps}>
+      <ToolbarTopRow>
+        {title ? (
+          <Typography variant="h5" {...muiTableTitleProps}>
+            {title}
+          </Typography>
+        ) : (
+          <span />
+        )}
+        <ToolbarActionsContainer>
+          {!disableGlobalFilter && <MRT_SearchTextField />}
+          {!hideToolbarActions && positionToolbarActions === 'top' && (
+            <MRT_ToolbarButtons />
+          )}
+        </ToolbarActionsContainer>
+      </ToolbarTopRow>
+      <div>
+        {!manualPagination &&
+          ['top', 'both'].includes(positionPagination ?? '') && (
+            <MRT_TablePagination />
+          )}
+      </div>
+    </Toolbar>
+  );
+};

package/src/useMaterialReactTable.tsx

@@ -1,57 +1,95 @@
-import React, { createContext, FC, useContext } from 'react';
+import React, {
+  Context,
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useState,
+} from 'react';
 import {
+  PluginHook,
+  Row,
   TableInstance,
   useExpanded,
+  useFilters,
+  useFlexLayout,
+  useGlobalFilter,
+  useGroupBy,
   usePagination,
+  useResizeColumns,
+  useRowSelect,
   useSortBy,
   useTable,
 } from 'react-table';
-import {
-  MaterialReactTableOptionalProps,
-  MaterialReactTableOptions,
-  MaterialReactTableProps,
-} from '.';
-import { defaultOptions } from './defaults';
-
-interface IUseMaterialReactTable extends MaterialReactTableOptionalProps {
-  tableInstance: TableInstance<object>;
-  options: MaterialReactTableOptions;
-}
-
-const MaterialReactTableContext = createContext<IUseMaterialReactTable>(
-  {} as IUseMaterialReactTable,
-);
+import { MaterialReactTableProps } from './MaterialReactTable';
+import { UseMRTCalcs, useMRTCalcs } from './utils/useMRTCalcs';
 
-interface ProviderProps extends MaterialReactTableProps {
-  children: React.ReactNode;
+export interface UseMaterialReactTable<D extends {}>
+  extends MaterialReactTableProps<D>,
+    UseMRTCalcs {
+  currentEditingRow: Row<D> | null;
+  densePadding: boolean;
+  setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
+  setDensePadding: (densePadding: boolean) => void;
+  setShowFilters: (showFilters: boolean) => void;
+  showFilters: boolean;
+  tableInstance: TableInstance<D>;
 }
 
-export const MaterialReactTableProvider: FC<ProviderProps> = ({
-  children,
-  columns,
-  data,
-  options,
-  ...rest
-}) => {
-  const tableInstance = useTable(
-    { columns, data },
+const MaterialReactTableContext = (<D extends {}>() =>
+  createContext<UseMaterialReactTable<D>>(
+    {} as UseMaterialReactTable<D>,
+  ) as Context<UseMaterialReactTable<D>>)();
+
+export const MaterialReactTableProvider = <D extends {}>(
+  props: PropsWithChildren<MaterialReactTableProps<D>>,
+) => {
+  const hooks: PluginHook<D>[] = [
+    useResizeColumns,
+    useFilters,
+    useGlobalFilter,
+    useGroupBy,
     useSortBy,
     useExpanded,
     usePagination,
+    useRowSelect,
+  ];
+
+  if (props.enableColumnResizing) hooks.unshift(useFlexLayout);
+
+  const tableInstance = useTable<D>(props, ...hooks);
+
+  const mrtCalcs = useMRTCalcs({ tableInstance });
+
+  const [showFilters, setShowFilters] = useState<boolean>(
+    props.defaultShowFilters ?? false,
+  );
+  const [densePadding, setDensePadding] = useState<boolean>(
+    props.defaultDensePadding ?? false,
   );
+  const [currentEditingRow, setCurrentEditingRow] = useState<Row | null>(null);
 
   return (
     <MaterialReactTableContext.Provider
       value={{
-        options: { ...defaultOptions, ...options },
+        ...mrtCalcs,
+        ...props,
+        densePadding,
+        setDensePadding,
+        setShowFilters,
+        currentEditingRow,
+        setCurrentEditingRow,
+        showFilters,
+        // @ts-ignore
         tableInstance,
-        ...rest,
       }}
     >
-      {children}
+      {props.children}
     </MaterialReactTableContext.Provider>
   );
 };
 
-export const useMaterialReactTable = (): IUseMaterialReactTable =>
-  useContext(MaterialReactTableContext);
+export const useMaterialReactTable = <
+  D extends {},
+>(): UseMaterialReactTable<D> =>
+  //@ts-ignore
+  useContext<UseMaterialReactTable<D>>(MaterialReactTableContext);

package/src/utils/localization.ts

@@ -0,0 +1,51 @@
+export interface MRT_Localization {
+  actionsHeadColumnTitle: string;
+  columnActionMenuButtonTitle: string;
+  columnActionMenuItemClearSort: string;
+  columnActionMenuItemGroupBy: string;
+  columnActionMenuItemHideColumn: string;
+  columnActionMenuItemSortAsc: string;
+  columnActionMenuItemSortDesc: string;
+  columnActionMenuItemUnGroupBy: string;
+  expandAllButtonTitle: string;
+  expandButtonTitle: string;
+  filterTextFieldClearButtonTitle: string;
+  filterTextFieldPlaceholder: string;
+  rowActionButtonCancel: string;
+  rowActionButtonSave: string;
+  rowActionMenuButtonTitle: string;
+  rowActionMenuItemEdit: string;
+  rowActionsColumnTitle: string;
+  searchTextFieldClearButtonTitle: string;
+  searchTextFieldPlaceholder: string;
+  selectAllCheckboxTitle: string;
+  showHideColumnsButtonTitle: string;
+  toggleDensePaddingSwitchTitle: string;
+  toggleFilterButtonTitle: string;
+}
+
+export const defaultLocalization: MRT_Localization = {
+  actionsHeadColumnTitle: 'Actions',
+  columnActionMenuButtonTitle: 'Column Actions',
+  columnActionMenuItemClearSort: 'Clear sorting',
+  columnActionMenuItemGroupBy: 'Group by column',
+  columnActionMenuItemHideColumn: 'Hide column',
+  columnActionMenuItemSortAsc: 'Sort ascending',
+  columnActionMenuItemSortDesc: 'Sort descending',
+  columnActionMenuItemUnGroupBy: 'Ungroup column',
+  expandAllButtonTitle: 'Expand all',
+  expandButtonTitle: 'Expand',
+  filterTextFieldClearButtonTitle: 'Clear filter',
+  filterTextFieldPlaceholder: 'Filter',
+  rowActionButtonCancel: 'Cancel',
+  rowActionButtonSave: 'Save',
+  rowActionMenuButtonTitle: 'Row Actions',
+  rowActionMenuItemEdit: 'Edit',
+  rowActionsColumnTitle: 'Actions',
+  searchTextFieldClearButtonTitle: 'Clear search',
+  searchTextFieldPlaceholder: 'Search',
+  selectAllCheckboxTitle: 'Select all',
+  showHideColumnsButtonTitle: 'Show/Hide columns',
+  toggleDensePaddingSwitchTitle: 'Toggle dense padding',
+  toggleFilterButtonTitle: 'Toggle filters',
+};

package/src/utils/useMRTCalcs.tsx

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import { TableInstance } from 'react-table';
+
+export interface UseMRTCalcs {
+  anyRowsCanExpand: boolean;
+  anyRowsExpanded: boolean;
+  maxColumnDepth: number;
+}
+
+interface Props<D extends {}> {
+  tableInstance: TableInstance<D>;
+}
+
+export const useMRTCalcs = <D extends {}>({
+  tableInstance,
+}: Props<D>): UseMRTCalcs => {
+  const anyRowsCanExpand = useMemo(
+    () => tableInstance.rows.some((row) => row.canExpand),
+    [tableInstance.rows],
+  );
+
+  const anyRowsExpanded = useMemo(
+    () => tableInstance.rows.some((row) => row.isExpanded),
+    [tableInstance.rows],
+  );
+
+  const maxColumnDepth = useMemo(() => {
+    let maxDepth = 1;
+    tableInstance.columns.forEach((column) => {
+      if (column.columns?.length) {
+        maxDepth = Math.max(maxDepth, column.columns.length);
+      }
+    });
+    return maxDepth - 1;
+  }, [tableInstance.columns]);
+
+  return {
+    anyRowsCanExpand,
+    anyRowsExpanded,
+    maxColumnDepth,
+  };
+};

package/dist/defaults.d.ts

@@ -1,2 +0,0 @@
-import { MaterialReactTableOptions } from '.';
-export declare const defaultOptions: MaterialReactTableOptions;

package/src/MRT_Table.tsx

@@ -1,20 +0,0 @@
-import React, { FC } from 'react';
-import { Table } from '@mui/material';
-import { MRT_TableHead } from './MRT_TableHead';
-import { MRT_TableBody } from './MRT_TableBody';
-import { MRT_TableFooter } from './MRT_TableFooter';
-import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {}
-
-export const MRT_Table: FC<Props> = () => {
-  const { tableInstance, tableProps, options } = useMaterialReactTable();
-
-  return (
-    <Table stickyHeader {...tableProps} {...tableInstance.getTableProps()}>
-      {options.showHead && <MRT_TableHead />}
-      <MRT_TableBody />
-      {options.showFooter && <MRT_TableFooter />}
-    </Table>
-  );
-};

package/src/MRT_TableBody.tsx

@@ -1,19 +0,0 @@
-import React, { FC } from 'react';
-import { TableBody } from '@mui/material';
-import { MRT_TableBodyRow } from './MRT_TableBodyRow';
-import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {}
-
-export const MRT_TableBody: FC<Props> = () => {
-  const { tableInstance } = useMaterialReactTable();
-
-  return (
-    <TableBody {...tableInstance.getTableBodyProps()}>
-      {tableInstance.page.map((row, index) => {
-        tableInstance.prepareRow(row);
-        return <MRT_TableBodyRow key={`${index}-${row.id}`} row={row} />;
-      })}
-    </TableBody>
-  );
-};

package/src/MRT_TableBodyCell.tsx

@@ -1,15 +0,0 @@
-import React, { FC } from 'react';
-import { TableCell } from '@mui/material';
-import { Cell } from 'react-table';
-
-interface Props {
-  cell: Cell<object>;
-}
-
-export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
-  return (
-    <TableCell variant="body" {...cell.getCellProps()}>
-      {cell.render('Cell')}
-    </TableCell>
-  );
-};

package/src/MRT_TableBodyRow.tsx

@@ -1,27 +0,0 @@
-import React, { FC } from 'react';
-import { TableRow } from '@mui/material';
-import { Row } from 'react-table';
-import { MRT_TableBodyCell } from './MRT_TableBodyCell';
-import { useMaterialReactTable } from './useMaterialReactTable';
-import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
-import { MRT_TableExpandButton } from './MRT_TableExpandButton';
-
-interface Props {
-  row: Row<object>;
-}
-
-export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
-  const { renderDetailPanel } = useMaterialReactTable();
-
-  return (
-    <>
-      <TableRow {...row.getRowProps()}>
-        {renderDetailPanel && <MRT_TableExpandButton row={row} />}
-        {row.cells.map((cell, index) => (
-          <MRT_TableBodyCell key={`${index}-${cell.value}`} cell={cell} />
-        ))}
-      </TableRow>
-      {renderDetailPanel && <MRT_TableDetailPanel row={row} />}
-    </>
-  );
-};

package/src/MRT_TableContainer.tsx

@@ -1,16 +0,0 @@
-import React, { FC } from 'react';
-import { Paper, TableContainer } from '@mui/material';
-import { useMaterialReactTable } from './useMaterialReactTable';
-import { MRT_Table } from './MRT_Table';
-
-interface Props {}
-
-export const MRT_TableContainer: FC<Props> = () => {
-  const { tableContainerProps } = useMaterialReactTable();
-
-  return (
-    <TableContainer component={Paper} {...tableContainerProps}>
-      <MRT_Table />
-    </TableContainer>
-  );
-};

package/src/MRT_TableDetailPanel.tsx

@@ -1,27 +0,0 @@
-import React, { FC } from 'react';
-import { Collapse, TableCell, TableRow } from '@mui/material';
-import { Row } from 'react-table';
-import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {
-  row: Row<object>;
-}
-
-export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
-  const { tableInstance, renderDetailPanel } = useMaterialReactTable();
-
-  return (
-    <TableRow {...row.getToggleRowExpandedProps()}>
-      <TableCell
-        colSpan={tableInstance.visibleColumns.length + 10}
-        style={{
-          paddingBottom: row.isExpanded ? '1rem' : 0,
-          paddingTop: row.isExpanded ? '1rem' : 0,
-          transition: 'padding 0.2s',
-        }}
-      >
-        <Collapse in={row.isExpanded}>{renderDetailPanel?.(row)}</Collapse>
-      </TableCell>
-    </TableRow>
-  );
-};