material-react-table 0.2.0 → 0.3.3

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -5,6 +5,7 @@ import { ColumnInstance } from 'react-table';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import SortIcon from '@mui/icons-material/Sort';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
 
 const MenuItem = styled(MuiMenuItem)({
   display: 'flex',
@@ -22,8 +23,12 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
   column,
   setAnchorEl,
 }) => {
-  const { enableColumnHiding, enableSorting, localization } =
-    useMaterialReactTable();
+  const {
+    disableColumnHiding,
+    enableColumnGrouping,
+    disableSortBy,
+    localization,
+  } = useMaterialReactTable();
 
   const handleClearSort = () => {
     column.clearSortBy();
@@ -45,38 +50,58 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleGroupByColumn = () => {
+    column.toggleGroupBy();
+    setAnchorEl(null);
+  };
+
   return (
     <Menu
       anchorEl={anchorEl}
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
     >
-      {enableSorting && (
-        <>
-          <MenuItem disabled={!column.isSorted} onClick={handleClearSort}>
+      {!disableSortBy &&
+        column.canSort && [
+          <MenuItem
+            key={1}
+            disabled={!column.isSorted}
+            onClick={handleClearSort}
+          >
             <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
-          </MenuItem>
+          </MenuItem>,
           <MenuItem
+            key={2}
             disabled={column.isSorted && !column.isSortedDesc}
             onClick={handleSortAsc}
           >
             <SortIcon /> {localization?.columnActionMenuItemSortAsc}
-          </MenuItem>
+          </MenuItem>,
           <MenuItem
+            key={3}
             disabled={column.isSorted && column.isSortedDesc}
             onClick={handleSortDesc}
           >
             <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
             {localization?.columnActionMenuItemSortDesc}
-          </MenuItem>
-          <Divider />
-        </>
-      )}
-      {enableColumnHiding && (
+          </MenuItem>,
+          <Divider key={4} />,
+        ]}
+      {!disableColumnHiding && (
         <MenuItem onClick={handleHideColumn}>
           <VisibilityOffIcon /> {localization?.columnActionMenuItemHideColumn}
         </MenuItem>
       )}
+      {enableColumnGrouping && column.canGroupBy && (
+        <MenuItem disabled={column.isGrouped} onClick={handleGroupByColumn}>
+          <DynamicFeedIcon /> {localization?.columnActionMenuItemGroupBy}
+        </MenuItem>
+      )}
+      {enableColumnGrouping && column.canGroupBy && (
+        <MenuItem disabled={!column.isGrouped} onClick={handleGroupByColumn}>
+          <DynamicFeedIcon /> {localization?.columnActionMenuItemUnGroupBy}
+        </MenuItem>
+      )}
     </Menu>
   );
 };

package/src/menus/MRT_RowActionMenu.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import { Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { Row } from 'react-table';
+import EditIcon from '@mui/icons-material/Edit';
+
+const MenuItem = styled(MuiMenuItem)({
+  display: 'flex',
+  gap: '0.75rem',
+});
+
+interface Props {
+  anchorEl: HTMLElement | null;
+  row: Row;
+  setAnchorEl: (anchorEl: HTMLElement | null) => void;
+}
+
+export const MRT_RowActionMenu: FC<Props> = ({
+  anchorEl,
+  row,
+  setAnchorEl,
+}) => {
+  const {
+    enableRowEditing,
+    localization,
+    renderRowActionMenuItems,
+    setCurrentEditingRow,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  const handleEdit = () => {
+    setCurrentEditingRow({ ...row });
+    setAnchorEl(null);
+  };
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      open={!!anchorEl}
+      onClose={() => setAnchorEl(null)}
+    >
+      {enableRowEditing && (
+        <MenuItem onClick={handleEdit}>
+          <EditIcon /> {localization?.rowActionMenuItemEdit}
+        </MenuItem>
+      )}
+      {renderRowActionMenuItems?.(row, tableInstance, () =>
+        setAnchorEl(null),
+      ) ?? null}
+    </Menu>
+  );
+};

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -17,10 +17,10 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
       <MenuItem style={{ paddingLeft: `${column.depth + 1}rem` }}>
         {isMaxDepth ? (
           <FormControlLabel
-            onChange={() => isMaxDepth && column.toggleHidden()}
-            label={column.Header as string}
             checked={column.isVisible}
             control={<Switch />}
+            label={column.Header as string}
+            onChange={() => isMaxDepth && column.toggleHidden()}
           />
         ) : (
           <Typography>{column.Header}</Typography>

package/src/table/MRT_Table.tsx

@@ -8,14 +8,23 @@ import { useMaterialReactTable } from '../useMaterialReactTable';
 interface Props {}
 
 export const MRT_Table: FC<Props> = () => {
-  const { tableInstance, tableProps, showHead, showFooter } =
+  const { tableInstance, muiTableProps, hideTableHead, hideTableFooter } =
     useMaterialReactTable();
 
+  const tableProps = {
+    ...muiTableProps,
+    ...tableInstance.getTableProps(),
+    style: {
+      ...tableInstance.getTableProps().style,
+      ...(muiTableProps?.style ?? {}),
+    },
+  };
+
   return (
-    <Table {...tableProps} {...tableInstance.getTableProps()}>
-      {showHead && <MRT_TableHead />}
+    <Table {...tableProps}>
+      {!hideTableHead && <MRT_TableHead />}
       <MRT_TableBody />
-      {showFooter && <MRT_TableFooter />}
+      {!hideTableFooter && <MRT_TableFooter />}
     </Table>
   );
 };

package/src/table/MRT_TableContainer.tsx

@@ -1,18 +1,50 @@
 import React, { FC } from 'react';
-import { Paper, TableContainer } from '@mui/material';
+import {
+  alpha,
+  CircularProgress,
+  LinearProgress,
+  Paper,
+  styled,
+  TableContainer,
+} from '@mui/material';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_Table } from './MRT_Table';
-import { MRT_Toolbar } from '../toolbar/MRT_Toolbar';
+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 { tableContainerProps, showToolbar } = useMaterialReactTable();
+  const {
+    muiTableContainerProps,
+    hideToolbarTop,
+    hideToolbarBottom,
+    isLoading,
+    isFetching,
+  } = useMaterialReactTable();
 
   return (
-    <TableContainer component={Paper} {...tableContainerProps}>
-      {showToolbar && <MRT_Toolbar />}
+    <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

@@ -1,10 +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 }) => {
-  return <TableCell style={{ 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

@@ -3,26 +3,35 @@ import React, {
   createContext,
   PropsWithChildren,
   useContext,
+  useState,
 } from 'react';
 import {
+  PluginHook,
+  Row,
   TableInstance,
   useExpanded,
   useFilters,
   useFlexLayout,
   useGlobalFilter,
+  useGroupBy,
   usePagination,
   useResizeColumns,
   useRowSelect,
   useSortBy,
   useTable,
 } from 'react-table';
-import { MaterialReactTableProps } from '.';
+import { MaterialReactTableProps } from './MaterialReactTable';
 import { UseMRTCalcs, useMRTCalcs } from './utils/useMRTCalcs';
-import { showOverrideWarnings } from './utils/overrideWarnings';
 
-interface UseMaterialReactTable<D extends {}>
+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>;
 }
 
@@ -31,43 +40,50 @@ const MaterialReactTableContext = (<D extends {}>() =>
     {} as UseMaterialReactTable<D>,
   ) as Context<UseMaterialReactTable<D>>)();
 
-export const MaterialReactTableProvider = <D extends {}>({
-  children,
-  columns,
-  data,
-  surpressOverrideWarnings,
-  ...rest
-}: PropsWithChildren<MaterialReactTableProps<D>>) => {
-  const tableInstance = useTable(
-    { columns, data },
-    useFlexLayout,
+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 });
 
-  if (process.env.NODE_ENV !== 'production' && !surpressOverrideWarnings) {
-    showOverrideWarnings(rest);
-  }
+  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
-      //@ts-ignore
       value={{
-        columns,
-        data,
-        tableInstance,
         ...mrtCalcs,
-        ...rest,
+        ...props,
+        densePadding,
+        setDensePadding,
+        setShowFilters,
+        currentEditingRow,
+        setCurrentEditingRow,
+        showFilters,
+        // @ts-ignore
+        tableInstance,
       }}
     >
-      {children}
+      {props.children}
     </MaterialReactTableContext.Provider>
   );
 };

package/src/utils/localization.ts

@@ -1,29 +1,51 @@
 export interface MRT_Localization {
-  columnActionMenuButtonTitle?: string;
-  columnActionMenuItemHideColumn?: string;
-  columnActionMenuItemSortAsc?: string;
-  columnActionMenuItemClearSort?: string;
-  columnActionMenuItemSortDesc?: string;
-  expandAllButtonTitle?: string;
-  expandButtonTitle?: string;
-  filterTextFieldClearButtonTitle?: string;
-  filterTextFieldPlaceholder?: string;
-  searchTextFieldClearButtonTitle?: string;
-  searchTextFieldPlaceholder?: string;
-  showHideColumnsButtonTitle?: string;
+  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',
-  columnActionMenuItemClearSort: 'Clear sorting',
   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',
-  showHideColumnsButtonTitle: 'Show/Hide columns'
+  selectAllCheckboxTitle: 'Select all',
+  showHideColumnsButtonTitle: 'Show/Hide columns',
+  toggleDensePaddingSwitchTitle: 'Toggle dense padding',
+  toggleFilterButtonTitle: 'Toggle filters',
 };

package/dist/utils/overrideWarnings.d.ts

@@ -1 +0,0 @@
-export declare const showOverrideWarnings: (props: any) => void;

package/src/footer/MRT_TablePagination.tsx

@@ -1,39 +0,0 @@
-import React, { ChangeEvent, FC } from 'react';
-import { TablePagination, TableRow } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
-
-interface Props {}
-
-export const MRT_TablePagination: FC<Props> = () => {
-  const { tableInstance, tablePaginationProps, OverrideTablePaginationComponent } =
-    useMaterialReactTable();
-
-  const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
-    tableInstance.setPageSize(+event.target.value);
-    tableInstance.gotoPage(0);
-  };
-
-  if (OverrideTablePaginationComponent) {
-    return <>{OverrideTablePaginationComponent(tableInstance)}</>;
-  }
-
-  return (
-    <TableRow>
-      <TablePagination
-        colSpan={tableInstance.visibleColumns.length + 10}
-        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}
-      />
-    </TableRow>
-  );
-};