material-react-table 0.1.0 → 0.3.2

package/src/head/MRT_TableHeadCell.tsx

@@ -0,0 +1,137 @@
+import React, { FC } from 'react';
+import {
+  TableCell as MuiTableCell,
+  TableSortLabel,
+  styled,
+  Divider as MuiDivider,
+  Collapse,
+} from '@mui/material';
+import { HeaderGroup } from 'react-table';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_FilterTextfield } from '../inputs/MRT_FilterTextField';
+import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
+
+export const StyledTableHeadCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) =>
+    prop !== 'densePadding' && prop !== 'enableColumnResizing',
+})<{ densePadding?: boolean; enableColumnResizing?: boolean }>(
+  ({ densePadding, enableColumnResizing }) => ({
+    fontWeight: 'bold',
+    verticalAlign: 'text-top',
+    padding: densePadding ? '0.5rem' : '1rem',
+    transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+  }),
+);
+
+const TableCellContents = styled('div')({
+  display: 'grid',
+});
+
+const TableCellText = styled('div')({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+const CellFlexItem = styled('span')({
+  display: 'flex',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+});
+
+const Divider = styled(MuiDivider)({
+  borderRightWidth: '2px',
+  borderRadius: '2px',
+  maxHeight: '2rem',
+});
+
+interface Props {
+  column: HeaderGroup;
+}
+
+export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
+  const {
+    densePadding,
+    disableColumnActions,
+    disableFilters,
+    enableColumnResizing,
+    localization,
+    muiTableHeadCellProps,
+    showFilters,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  const isParentHeader = (column?.columns?.length ?? 0) > 0;
+
+  const mTableHeadCellProps =
+    muiTableHeadCellProps instanceof Function
+      ? muiTableHeadCellProps(column)
+      : muiTableHeadCellProps;
+
+  const mcTableHeadCellProps =
+    column.muiTableHeadCellProps instanceof Function
+      ? column.muiTableHeadCellProps(column)
+      : column.muiTableHeadCellProps;
+
+  const tableCellProps = {
+    ...mTableHeadCellProps,
+    ...mcTableHeadCellProps,
+    ...column.getHeaderProps(),
+    style: {
+      ...column.getHeaderProps().style,
+      ...(mTableHeadCellProps?.style ?? {}),
+      ...(mcTableHeadCellProps?.style ?? {}),
+    },
+  };
+
+  return (
+    <StyledTableHeadCell
+      align={isParentHeader ? 'center' : 'left'}
+      densePadding={densePadding}
+      enableColumnResizing={enableColumnResizing}
+      {...tableCellProps}
+    >
+      <TableCellContents>
+        <TableCellText
+          style={{ justifyContent: isParentHeader ? 'center' : undefined }}
+        >
+          <CellFlexItem {...column.getSortByToggleProps()}>
+            {column.render('Header')}
+            {!isParentHeader && column.canSort && (
+              <TableSortLabel
+                aria-label={
+                  column.isSorted
+                    ? column.sortDescFirst
+                      ? localization?.columnActionMenuItemClearSort
+                      : localization?.columnActionMenuItemSortDesc
+                    : localization?.columnActionMenuItemSortAsc
+                }
+                active={column.isSorted}
+                direction={column.isSortedDesc ? 'desc' : 'asc'}
+                style={{ margin: 0 }}
+              />
+            )}
+          </CellFlexItem>
+          <CellFlexItem>
+            {!disableColumnActions && !isParentHeader && (
+              <MRT_ToggleColumnActionMenuButton column={column} />
+            )}
+            {enableColumnResizing && !isParentHeader && (
+              <Divider
+                flexItem
+                orientation="vertical"
+                onDoubleClick={() => tableInstance.resetResizing()}
+                {...column.getResizerProps()}
+              />
+            )}
+          </CellFlexItem>
+        </TableCellText>
+        {!disableFilters && column.canFilter && (
+          <Collapse in={showFilters}>
+            <MRT_FilterTextfield column={column} />
+          </Collapse>
+        )}
+      </TableCellContents>
+    </StyledTableHeadCell>
+  );
+};

package/src/head/MRT_TableHeadRow.tsx

@@ -0,0 +1,90 @@
+import React, { FC, useMemo } from 'react';
+import { TableRow } from '@mui/material';
+import { HeaderGroup } from 'react-table';
+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_TableSpacerCell } from '../table/MRT_TableSpacerCell';
+
+interface Props {
+  headerGroup: HeaderGroup;
+}
+
+export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
+  const {
+    anyRowsCanExpand,
+    densePadding,
+    disableExpandAll,
+    enableRowActions,
+    enableSelection,
+    localization,
+    muiTableHeadRowProps,
+    positionActionsColumn,
+    renderDetailPanel,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  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 {...tableRowProps}>
+      {enableRowActions &&
+        positionActionsColumn === 'first' &&
+        (isParentHeader ? (
+          <MRT_TableSpacerCell />
+        ) : (
+          <StyledTableHeadCell>
+            {localization?.actionsHeadColumnTitle}
+          </StyledTableHeadCell>
+        ))}
+      {anyRowsCanExpand || renderDetailPanel ? (
+        !disableExpandAll && !isParentHeader ? (
+          <MRT_ExpandAllButton />
+        ) : (
+          <MRT_TableSpacerCell
+            width={`${
+              renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
+            }rem`}
+          />
+        )
+      ) : null}
+      {enableSelection ? (
+        !isParentHeader ? (
+          <MRT_SelectAllCheckbox />
+        ) : (
+          <MRT_TableSpacerCell width="1rem" />
+        )
+      ) : null}
+      {headerGroup.headers.map((column: HeaderGroup) => (
+        <MRT_TableHeadCell key={column.getHeaderProps().key} column={column} />
+      ))}
+      {enableRowActions &&
+        positionActionsColumn === 'last' &&
+        (isParentHeader ? (
+          <MRT_TableSpacerCell />
+        ) : (
+          <StyledTableHeadCell densePadding={densePadding}>
+            {localization?.actionsHeadColumnTitle}
+          </StyledTableHeadCell>
+        ))}
+    </TableRow>
+  );
+};

package/src/index.tsx

@@ -1 +1,3 @@
+import MaterialReactTable from './MaterialReactTable';
+export default MaterialReactTable;
 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_EditCellTextfield.tsx

@@ -0,0 +1,57 @@
+import { TextField } from '@mui/material';
+import React, { ChangeEvent, FC } from 'react';
+import { Cell } from 'react-table';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {
+  cell: Cell;
+}
+
+export const MRT_EditCellTextfield: FC<Props> = ({ cell }) => {
+  const {
+    localization,
+    currentEditingRow,
+    setCurrentEditingRow,
+    muiTableBodyCellEditTextFieldProps,
+  } = useMaterialReactTable();
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (currentEditingRow) {
+      setCurrentEditingRow({
+        ...currentEditingRow,
+        values: { ...cell.row.values, [cell.column.id]: event.target.value },
+      });
+    }
+  };
+
+  const textFieldProps = {
+    ...muiTableBodyCellEditTextFieldProps,
+    ...cell.column.muiTableBodyCellEditTextFieldProps,
+    style: {
+      //@ts-ignore
+      ...muiTableBodyCellEditTextFieldProps?.style,
+      //@ts-ignore
+      ...cell.column.muiTableBodyCellEditTextFieldProps?.style,
+    },
+  };
+
+  if (cell.column.editable && cell.column.Edit) {
+    return (
+      <>
+        {cell.column.Edit({ ...textFieldProps, cell, onChange: handleChange })}
+      </>
+    );
+  }
+
+  return (
+    <TextField
+      margin="dense"
+      placeholder={localization?.filterTextFieldPlaceholder}
+      onChange={handleChange}
+      onClick={(e) => e.stopPropagation()}
+      value={currentEditingRow?.values?.[cell.column.id]}
+      variant="standard"
+      {...textFieldProps}
+    />
+  );
+};

package/src/inputs/MRT_FilterTextField.tsx

@@ -0,0 +1,63 @@
+import React, { ChangeEvent, FC, useState } from 'react';
+import { IconButton, InputAdornment, TextField } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import FilterIcon from '@mui/icons-material/FilterList';
+import { HeaderGroup, useAsyncDebounce } from 'react-table';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {
+  column: HeaderGroup;
+}
+
+export const MRT_FilterTextfield: FC<Props> = ({ column }) => {
+  const { localization } = useMaterialReactTable();
+
+  const [filterValue, setFilterValue] = useState('');
+
+  const handleChange = useAsyncDebounce((value) => {
+    column.setFilter(value ?? undefined);
+  }, 150);
+
+  const handleClear = () => {
+    setFilterValue('');
+    column.setFilter(undefined);
+  };
+
+  if (column.Filter) {
+    return <>{column.Filter({ column })}</>;
+  }
+
+  return (
+    <TextField
+      margin="dense"
+      placeholder={localization?.filterTextFieldPlaceholder}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+        setFilterValue(e.target.value);
+        handleChange(e.target.value);
+      }}
+      onClick={(e) => e.stopPropagation()}
+      value={filterValue ?? ''}
+      variant="standard"
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <FilterIcon />
+          </InputAdornment>
+        ),
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton
+              aria-label={localization?.filterTextFieldClearButtonTitle}
+              disabled={filterValue?.length === 0}
+              onClick={handleClear}
+              size="small"
+              title={localization?.filterTextFieldClearButtonTitle}
+            >
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+    />
+  );
+};

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 as MuiTableCell, styled } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'densePadding',
+})<{ densePadding?: boolean }>(({ densePadding }) => ({
+  padding: densePadding ? '0' : '0.6rem',
+  transition: 'all 0.2s ease-in-out',
+}));
+
+export const MRT_SelectAllCheckbox = () => {
+  const { tableInstance, disableSelectAll, densePadding, localization } =
+    useMaterialReactTable();
+
+  return (
+    <TableCell densePadding={densePadding} variant="head">
+      {!disableSelectAll ? (
+        <Checkbox
+          aria-label={localization?.selectAllCheckboxTitle}
+          {...tableInstance.getToggleAllPageRowsSelectedProps()}
+        />
+      ) : null}
+    </TableCell>
+  );
+};

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -0,0 +1,34 @@
+import React, { ChangeEvent, FC } from 'react';
+import { Checkbox, TableCell as MuiTableCell, styled } from '@mui/material';
+import { Row } from 'react-table';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'densePadding',
+})<{ densePadding?: boolean }>(({ densePadding }) => ({
+  padding: densePadding ? '0' : '0.6rem',
+  transition: 'all 0.2s ease-in-out',
+}));
+
+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 densePadding={densePadding}>
+      <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,
+    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>
+  );
+};