material-react-table 0.3.0 → 0.3.1

package/src/head/MRT_TableHeadRow.tsx

@@ -1,11 +1,10 @@
 import React, { FC, useMemo } from 'react';
 import { TableRow } from '@mui/material';
 import { HeaderGroup } from 'react-table';
-import { MRT_TableHeadCell } from './MRT_TableHeadCell';
+import { MRT_TableHeadCell, StyledTableHeadCell } from './MRT_TableHeadCell';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_SelectAllCheckbox } from '../inputs/MRT_SelectAllCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
-import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 
 interface Props {
@@ -14,28 +13,49 @@ interface Props {
 
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
-    overrideTableHeadRowComponent,
     anyRowsCanExpand,
-    enableColumnHiding,
-    enableExpandAll,
+    disableExpandAll,
+    enableRowActions,
     enableSelection,
+    localization,
+    muiTableHeadRowProps,
+    positionActionsColumn,
     renderDetailPanel,
     tableInstance,
   } = useMaterialReactTable();
 
-  if (overrideTableHeadRowComponent) {
-    return <>{overrideTableHeadRowComponent(headerGroup, tableInstance)}</>;
-  }
-
   const isParentHeader = useMemo(
     () => headerGroup.headers.some((h) => (h.columns?.length ?? 0) > 0),
     [headerGroup.headers],
   );
 
+  const mTableHeadRowProps =
+    muiTableHeadRowProps instanceof Function
+      ? muiTableHeadRowProps(headerGroup)
+      : muiTableHeadRowProps;
+
+  const tableRowProps = {
+    ...mTableHeadRowProps,
+    ...headerGroup.getHeaderGroupProps(),
+    style: {
+      ...headerGroup.getHeaderGroupProps().style,
+      ...(mTableHeadRowProps?.style ?? {}),
+    },
+  };
+
   return (
-    <TableRow {...headerGroup.getHeaderGroupProps()}>
+    <TableRow {...tableRowProps}>
+      {enableRowActions &&
+        positionActionsColumn === 'first' &&
+        (isParentHeader ? (
+          <MRT_TableSpacerCell />
+        ) : (
+          <StyledTableHeadCell>
+            {localization?.actionsHeadColumnTitle}
+          </StyledTableHeadCell>
+        ))}
       {anyRowsCanExpand || renderDetailPanel ? (
-        enableExpandAll && !isParentHeader ? (
+        !disableExpandAll && !isParentHeader ? (
           <MRT_ExpandAllButton />
         ) : (
           <MRT_TableSpacerCell
@@ -52,10 +72,18 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
           <MRT_TableSpacerCell width="1rem" />
         )
       ) : null}
-      {headerGroup.headers.map((column, index) => (
-        <MRT_TableHeadCell key={`${index}-${column.id}`} column={column} />
+      {headerGroup.headers.map((column) => (
+        <MRT_TableHeadCell key={column.getHeaderProps().key} column={column} />
       ))}
-      {enableColumnHiding && !isParentHeader && <MRT_ShowHideColumnsButton />}
+      {enableRowActions &&
+        positionActionsColumn === 'last' &&
+        (isParentHeader ? (
+          <MRT_TableSpacerCell />
+        ) : (
+          <StyledTableHeadCell>
+            {localization?.actionsHeadColumnTitle}
+          </StyledTableHeadCell>
+        ))}
     </TableRow>
   );
 };

package/src/index.tsx

@@ -1,6 +1,3 @@
-import {
-  MaterialReactTable,
-  MaterialReactTableProps,
-} from './MaterialReactTable';
+import MaterialReactTable from './MaterialReactTable';
 export default MaterialReactTable;
-export type { MaterialReactTableProps };
+export * from './MaterialReactTable';

package/src/inputs/MRT_DensePaddingSwitch.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { Switch, Tooltip } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {}
+
+export const MRT_DensePaddingSwitch: FC<Props> = () => {
+  const { densePadding, setDensePadding, localization } =
+    useMaterialReactTable();
+
+  return (
+    <Tooltip arrow title={localization?.toggleDensePaddingSwitchTitle ?? ''}>
+      <Switch
+        color="default"
+        checked={densePadding}
+        size="small"
+        onChange={() => setDensePadding(!densePadding)}
+      />
+    </Tooltip>
+  );
+};

package/src/inputs/MRT_FilterTextField.tsx

@@ -23,6 +23,11 @@ export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
     column.setFilter(undefined);
   };
 
+  if (column.Filter) {
+    //@ts-ignore
+    return <>{column.Filter({ column })}</>;
+  }
+
   return (
     <TextField
       margin="dense"

package/src/inputs/MRT_SearchTextField.tsx

@@ -19,9 +19,9 @@ interface Props {}
 export const MRT_SearchTextField: FC<Props> = () => {
   const {
     tableInstance,
-    tableSearchTextfieldProps,
+    muiSearchTextFieldProps,
     localization,
-    onSearchChange,
+    onGlobalFilterChange,
   } = useMaterialReactTable();
 
   const [searchValue, setSearchValue] = useState('');
@@ -29,7 +29,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
   const handleChange = useAsyncDebounce(
     (event: ChangeEvent<HTMLInputElement>) => {
       tableInstance.setGlobalFilter(event.target.value ?? undefined);
-      onSearchChange?.(event);
+      onGlobalFilterChange?.(event);
     },
     200,
   );
@@ -68,7 +68,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
           </InputAdornment>
         ),
       }}
-      {...tableSearchTextfieldProps}
+      {...muiSearchTextFieldProps}
     />
   );
 };

package/src/inputs/MRT_SelectAllCheckbox.tsx

@@ -3,11 +3,19 @@ import { Checkbox, TableCell } from '@mui/material';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
 export const MRT_SelectAllCheckbox = () => {
-  const { tableInstance, enableSelectAll } = useMaterialReactTable();
+  const { tableInstance, disableSelectAll, densePadding } =
+    useMaterialReactTable();
 
   return (
-    <TableCell style={{ width: '2rem', padding: '0.5rem' }} variant="head">
-      {enableSelectAll ? (
+    <TableCell
+      style={{
+        width: '2rem',
+        padding: densePadding ? '0' : '0.6rem',
+        transition: 'all 0.2s ease-in-out',
+      }}
+      variant="head"
+    >
+      {!disableSelectAll ? (
         <Checkbox
           aria-label=""
           {...tableInstance.getToggleAllPageRowsSelectedProps()}

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -8,7 +8,8 @@ interface Props {
 }
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
-  const { tableInstance, onRowSelectChange } = useMaterialReactTable();
+  const { tableInstance, onRowSelectChange, densePadding } =
+    useMaterialReactTable();
 
   const onSelectChange = (event: ChangeEvent) => {
     row.getToggleRowSelectedProps()?.onChange?.(event);
@@ -16,7 +17,13 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
   };
 
   return (
-    <TableCell style={{ width: '2rem', padding: '0.5rem' }}>
+    <TableCell
+      style={{
+        width: '2rem',
+        padding: densePadding ? '0' : '0.6rem',
+        transition: 'all 0.2s ease-in-out',
+      }}
+    >
       <Checkbox
         {...row.getToggleRowSelectedProps()}
         onChange={onSelectChange}

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -24,9 +24,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
   setAnchorEl,
 }) => {
   const {
-    enableColumnHiding,
+    disableColumnHiding,
     enableColumnGrouping,
-    enableSorting,
+    disableSortBy,
     localization,
   } = useMaterialReactTable();
 
@@ -61,28 +61,33 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
     >
-      {enableSorting && [
-        <MenuItem key={1} disabled={!column.isSorted} onClick={handleClearSort}>
-          <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
-        </MenuItem>,
-        <MenuItem
-          key={2}
-          disabled={column.isSorted && !column.isSortedDesc}
-          onClick={handleSortAsc}
-        >
-          <SortIcon /> {localization?.columnActionMenuItemSortAsc}
-        </MenuItem>,
-        <MenuItem
-          key={3}
-          disabled={column.isSorted && column.isSortedDesc}
-          onClick={handleSortDesc}
-        >
-          <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
-          {localization?.columnActionMenuItemSortDesc}
-        </MenuItem>,
-        <Divider key={4} />,
-      ]}
-      {enableColumnHiding && (
+      {!disableSortBy &&
+        column.canSort && [
+          <MenuItem
+            key={1}
+            disabled={!column.isSorted}
+            onClick={handleClearSort}
+          >
+            <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
+          </MenuItem>,
+          <MenuItem
+            key={2}
+            disabled={column.isSorted && !column.isSortedDesc}
+            onClick={handleSortAsc}
+          >
+            <SortIcon /> {localization?.columnActionMenuItemSortAsc}
+          </MenuItem>,
+          <MenuItem
+            key={3}
+            disabled={column.isSorted && column.isSortedDesc}
+            onClick={handleSortDesc}
+          >
+            <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
+            {localization?.columnActionMenuItemSortDesc}
+          </MenuItem>,
+          <Divider key={4} />,
+        ]}
+      {!disableColumnHiding && (
         <MenuItem onClick={handleHideColumn}>
           <VisibilityOffIcon /> {localization?.columnActionMenuItemHideColumn}
         </MenuItem>

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,
+    setCurrentEditingRowId,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  const handleEdit = () => {
+    setCurrentEditingRowId(row.id);
+    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,22 @@
 import React, { FC } from 'react';
-import { Paper, TableContainer } from '@mui/material';
+import { LinearProgress, Paper, 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';
 
 interface Props {}
 
 export const MRT_TableContainer: FC<Props> = () => {
-  const { tableContainerProps, showToolbar } = useMaterialReactTable();
+  const { muiTableContainerProps, hideToolbarTop, hideToolbarBottom, isFetching } =
+    useMaterialReactTable();
 
   return (
-    <TableContainer component={Paper} {...tableContainerProps}>
-      {showToolbar && <MRT_Toolbar />}
+    <TableContainer component={Paper} {...muiTableContainerProps}>
+      {!hideToolbarTop && <MRT_ToolbarTop />}
+      {isFetching && <LinearProgress />}
       <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 mTableBodyRowProps =
+    muiTableBodyCellProps instanceof Function
+      ? muiTableBodyCellProps()
+      : muiTableBodyCellProps;
+
+  const tableCellProps = {
+    ...mTableBodyRowProps,
+    style: {
+      width,
+      ...(mTableBodyRowProps?.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,58 @@
+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 {
+    disableGlobalFilter,
+    disableColumnHiding,
+    manualPagination,
+    positionPagination,
+    disableFilters,
+    hideToolbarActions,
+    positionToolbarActions,
+    muiTableToolbarBottomProps,
+    title,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  // if no features in the toolbar are enabled, don't render anything
+  if (
+    !muiTableToolbarBottomProps &&
+    !title &&
+    disableColumnHiding &&
+    disableFilters &&
+    disableGlobalFilter
+  ) {
+    return null;
+  }
+
+  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,81 @@
+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,
+    disableColumnHiding,
+    muiTableTitleProps,
+    disableFilters,
+    manualPagination,
+    positionPagination,
+    muiTableToolbarTopProps,
+    hideToolbarActions,
+    positionToolbarActions,
+    title,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  // if no features in the toolbar are enabled, don't render anything
+  if (
+    !muiTableToolbarTopProps &&
+    !title &&
+    disableColumnHiding &&
+    disableFilters &&
+    disableGlobalFilter
+  ) {
+    return null;
+  }
+
+  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>
+  );
+};