material-react-table 0.1.0-beta.1 → 0.3.1

package/src/inputs/MRT_SearchTextField.tsx

@@ -0,0 +1,74 @@
+import React, { ChangeEvent, FC, useState } from 'react';
+import {
+  IconButton,
+  InputAdornment,
+  styled,
+  TextField as MuiTextField,
+} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import CloseIcon from '@mui/icons-material/Close';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useAsyncDebounce } from 'react-table';
+
+const TextField = styled(MuiTextField)({
+  justifySelf: 'end',
+});
+
+interface Props {}
+
+export const MRT_SearchTextField: FC<Props> = () => {
+  const {
+    tableInstance,
+    muiSearchTextFieldProps,
+    localization,
+    onGlobalFilterChange,
+  } = useMaterialReactTable();
+
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleChange = useAsyncDebounce(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      tableInstance.setGlobalFilter(event.target.value ?? undefined);
+      onGlobalFilterChange?.(event);
+    },
+    200,
+  );
+
+  const handleClear = () => {
+    setSearchValue('');
+    tableInstance.setGlobalFilter(undefined);
+  };
+
+  return (
+    <TextField
+      placeholder={localization?.searchTextFieldPlaceholder}
+      onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        setSearchValue(event.target.value);
+        handleChange(event);
+      }}
+      value={searchValue ?? ''}
+      variant="standard"
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <SearchIcon fontSize="small" />
+          </InputAdornment>
+        ),
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton
+              aria-label={localization?.searchTextFieldClearButtonTitle}
+              disabled={searchValue?.length === 0}
+              onClick={handleClear}
+              size="small"
+              title={localization?.searchTextFieldClearButtonTitle}
+            >
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+      {...muiSearchTextFieldProps}
+    />
+  );
+};

package/src/inputs/MRT_SelectAllCheckbox.tsx

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

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -0,0 +1,33 @@
+import React, { ChangeEvent, FC } from 'react';
+import { Checkbox, TableCell } from '@mui/material';
+import { Row } from 'react-table';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {
+  row: Row;
+}
+
+export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
+  const { tableInstance, onRowSelectChange, densePadding } =
+    useMaterialReactTable();
+
+  const onSelectChange = (event: ChangeEvent) => {
+    row.getToggleRowSelectedProps()?.onChange?.(event);
+    onRowSelectChange?.(event, row, tableInstance.selectedFlatRows);
+  };
+
+  return (
+    <TableCell
+      style={{
+        width: '2rem',
+        padding: densePadding ? '0' : '0.6rem',
+        transition: 'all 0.2s ease-in-out',
+      }}
+    >
+      <Checkbox
+        {...row.getToggleRowSelectedProps()}
+        onChange={onSelectChange}
+      />
+    </TableCell>
+  );
+};

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -0,0 +1,107 @@
+import React, { FC } from 'react';
+import { Divider, Menu, MenuItem as MuiMenuItem, styled } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+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',
+  gap: '0.75rem',
+});
+
+interface Props {
+  anchorEl: HTMLElement | null;
+  column: ColumnInstance;
+  setAnchorEl: (anchorEl: HTMLElement | null) => void;
+}
+
+export const MRT_ColumnActionMenu: FC<Props> = ({
+  anchorEl,
+  column,
+  setAnchorEl,
+}) => {
+  const {
+    disableColumnHiding,
+    enableColumnGrouping,
+    disableSortBy,
+    localization,
+  } = useMaterialReactTable();
+
+  const handleClearSort = () => {
+    column.clearSortBy();
+    setAnchorEl(null);
+  };
+
+  const handleSortAsc = () => {
+    column.toggleSortBy(false);
+    setAnchorEl(null);
+  };
+
+  const handleSortDesc = () => {
+    column.toggleSortBy(true);
+    setAnchorEl(null);
+  };
+
+  const handleHideColumn = () => {
+    column.toggleHidden();
+    setAnchorEl(null);
+  };
+
+  const handleGroupByColumn = () => {
+    column.toggleGroupBy();
+    setAnchorEl(null);
+  };
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      open={!!anchorEl}
+      onClose={() => setAnchorEl(null)}
+    >
+      {!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>
+      )}
+      {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,
+    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

@@ -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,22 @@
+import React, { FC } from 'react';
+import { LinearProgress, Paper, 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';
+
+interface Props {}
+
+export const MRT_TableContainer: FC<Props> = () => {
+  const { muiTableContainerProps, hideToolbarTop, hideToolbarBottom, isFetching } =
+    useMaterialReactTable();
+
+  return (
+    <TableContainer component={Paper} {...muiTableContainerProps}>
+      {!hideToolbarTop && <MRT_ToolbarTop />}
+      {isFetching && <LinearProgress />}
+      <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 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>
+  );
+};