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

package/package.json

@@ -1,8 +1,8 @@
 {
-  "version": "0.1.0-beta.1",
+  "version": "0.3.1",
   "license": "MIT",
   "name": "material-react-table",
-  "description": "A fully featured Material-UI implementation of react-table, inspired by material-table, written from the ground up in TypeScript.",
+  "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",
   "author": "Kevin Vandy",
   "keywords": [
     "react-table",
@@ -28,14 +28,15 @@
   },
   "scripts": {
     "start": "tsdx watch",
-    "build": "tsdx build",
+    "build": "tsdx build && size-limit",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "upgrade": "ncu -u && npm i"
   },
   "husky": {
     "hooks": {
@@ -54,20 +55,23 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.16.7",
+    "@babel/core": "^7.16.12",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@faker-js/faker": "^6.0.0-alpha.2",
-    "@mui/icons-material": "^5.2.5",
-    "@mui/material": "^5.2.8",
+    "@faker-js/faker": "^6.0.0-alpha.5",
+    "@mui/icons-material": "^5.3.1",
+    "@mui/material": "^5.3.1",
     "@size-limit/preset-small-lib": "^7.0.5",
-    "@storybook/addon-a11y": "^6.4.13",
-    "@storybook/addon-essentials": "^6.4.13",
+    "@storybook/addon-a11y": "^6.4.16",
+    "@storybook/addon-actions": "^6.4.16",
+    "@storybook/addon-console": "^1.2.3",
+    "@storybook/addon-essentials": "^6.4.16",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.4.13",
-    "@storybook/addons": "^6.4.13",
-    "@storybook/react": "^6.4.13",
-    "@types/faker": "^5.5.9",
+    "@storybook/addon-links": "^6.4.16",
+    "@storybook/addon-storysource": "^6.4.16",
+    "@storybook/addons": "^6.4.16",
+    "@storybook/react": "^6.4.16",
+    "@types/faker": "^6.6.8",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/react-table": "^7.7.9",
@@ -79,14 +83,14 @@
     "react-is": "^17.0.2",
     "react-table": "^7.7.0",
     "size-limit": "^7.0.5",
-    "storybook-addon-material-ui": "^0.9.0-alpha.24",
+    "storybook-addon-performance": "^0.16.1",
+    "storybook-dark-mode": "^1.0.8",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
-    "@emotion/styled": ">=11",
     "@mui/icons-material": ">=5",
     "@mui/material": ">=5",
     "react": ">=17",

package/src/MaterialReactTable.tsx

@@ -1,48 +1,156 @@
-import React, { FC } from 'react';
+import React, { ChangeEvent, MouseEvent, ReactNode } from 'react';
 import {
+  TableBodyProps,
+  TableCellProps,
   TableContainerProps,
   TableFooterProps,
   TableHeadProps,
   TablePaginationProps,
   TableProps,
+  TableRowProps,
+  TextFieldProps,
+  ToolbarProps,
+  TypographyProps,
 } from '@mui/material';
-import { Column } from 'react-table';
+import {
+  Cell,
+  Column,
+  HeaderGroup,
+  Row,
+  TableInstance,
+  TableOptions,
+  UseExpandedOptions,
+  UseFiltersOptions,
+  UseGlobalFiltersOptions,
+  UseGroupByOptions,
+  UsePaginationOptions,
+  UseResizeColumnsOptions,
+  UseRowSelectOptions,
+  UseRowStateOptions,
+  UseSortByOptions,
+} from 'react-table';
 import { MaterialReactTableProvider } from './useMaterialReactTable';
-import { MRT_TableContainer } from './MRT_TableContainer';
-import { defaultOptions } from './defaults';
-
-export interface MaterialReactTableOptions {
-  enableFilters: boolean;
-  enablePagination: boolean | 'top' | 'bottom' | 'both' | 'none';
-  enableSearch: boolean;
-  enableSorting: boolean;
-  showFooter: boolean;
-  showHead: boolean;
-  showToolbar: boolean;
-}
-
-export interface MaterialReactTableOptionalProps {
-  options?: Partial<MaterialReactTableOptions>;
-  tableContainerProps?: TableContainerProps;
-  tableFooterProps?: TableFooterProps;
-  tableHeadProps?: TableHeadProps;
-  tablePaginationProps?: TablePaginationProps;
-  tableProps?: TableProps;
-  renderDetailPanel?: (rowData: any) => React.ReactNode;
-}
+import { MRT_TableContainer } from './table/MRT_TableContainer';
+import { defaultLocalization, MRT_Localization } from './utils/localization';
 
-export interface MaterialReactTableProps extends MaterialReactTableOptionalProps {
-  columns: Column[];
-  data: any[];
-}
+export type MaterialReactTableProps<D extends {} = {}> = TableOptions<D> &
+  UseExpandedOptions<D> &
+  UseFiltersOptions<D> &
+  UseGlobalFiltersOptions<D> &
+  UseGroupByOptions<D> &
+  UsePaginationOptions<D> &
+  UseResizeColumnsOptions<D> &
+  UseRowSelectOptions<D> &
+  UseRowStateOptions<D> &
+  UseSortByOptions<D> & {
+    defaultDensePadding?: boolean;
+    defaultShowFilters?: boolean;
+    disableColumnActions?: boolean;
+    disableColumnHiding?: boolean;
+    disableDensePaddingToggle?: boolean;
+    disableExpandAll?: boolean;
+    disableSelectAll?: boolean;
+    disableSubRowTree?: boolean;
+    enableColumnGrouping?: boolean;
+    enableColumnResizing?: boolean;
+    enableRowActions?: boolean;
+    enableRowEditing?: boolean;
+    enableSelection?: boolean;
+    hideTableFooter?: boolean;
+    hideTableHead?: boolean;
+    hideToolbarActions?: boolean;
+    hideToolbarBottom?: boolean;
+    hideToolbarTop?: boolean;
+    isFetching?: boolean;
+    isLoading?: boolean;
+    localization?: Partial<MRT_Localization>;
+    muiSearchTextFieldProps?: TextFieldProps;
+    muiTableBodyCellProps?:
+      | TableCellProps
+      | ((cell?: Cell<D>) => TableCellProps);
+    muiTableBodyProps?: TableBodyProps;
+    muiTableBodyRowProps?: TableRowProps | ((row: Row<D>) => TableRowProps);
+    muiTableContainerProps?: TableContainerProps;
+    muiTableDetailPanelProps?:
+      | TableCellProps
+      | ((row: Row<D>) => TableCellProps);
+    muiTableFooterCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
+    muiTableFooterProps?: TableFooterProps;
+    muiTableFooterRowProps?:
+      | TableRowProps
+      | ((footerGroup: HeaderGroup<D>) => TableRowProps);
+    muiTableHeadCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
+    muiTableHeadProps?: TableHeadProps;
+    muiTableHeadRowProps?:
+      | TableRowProps
+      | ((row: HeaderGroup<D>) => TableRowProps);
+    muiTablePaginationProps?:
+      | Partial<TablePaginationProps>
+      | ((tableInstance: TableInstance<D>) => Partial<TablePaginationProps>);
+    muiTableProps?: TableProps;
+    muiTableTitleProps?: TypographyProps;
+    muiTableToolbarBottomProps?:
+      | ToolbarProps
+      | ((tableInstance: TableInstance<D>) => ToolbarProps);
+    muiTableToolbarTopProps?:
+      | ToolbarProps
+      | ((tableInstance: TableInstance<D>) => ToolbarProps);
+    onCellClick?: (
+      event: MouseEvent<HTMLTableCellElement>,
+      cell: Cell<D>,
+    ) => void;
+    onDetailPanelClick?: (
+      event: MouseEvent<HTMLTableCellElement>,
+      row: Row<D>,
+    ) => void;
+    onGlobalFilterChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onRowClick?: (event: MouseEvent<HTMLTableRowElement>, row: Row<D>) => void;
+    onRowEditSubmit?: (row: Row<D>) => Promise<void> | void;
+    onRowExpandChange?: (
+      event: MouseEvent<HTMLButtonElement>,
+      row: Row<D>,
+    ) => void;
+    onRowSelectChange?: (
+      event: ChangeEvent,
+      row: Row<D>,
+      selectedRows: Row<D>[],
+    ) => void;
+    positionActionsColumn?: 'first' | 'last';
+    positionPagination?: 'bottom' | 'top' | 'both';
+    positionToolbarActions?: 'bottom' | 'top';
+    renderRowActions?: (
+      row: Row<D>,
+      tableInstance: TableInstance<D>,
+    ) => ReactNode;
+    renderDetailPanel?: (row: Row<D>) => ReactNode;
+    renderRowActionMenuItems?: (
+      rowData: Row<D>,
+      tableInstance: TableInstance<D>,
+      closeMenu: () => void,
+    ) => ReactNode[];
+    title?: string | ReactNode;
+  };
 
-export const MaterialReactTable: FC<MaterialReactTableProps> = ({
-  options = defaultOptions,
+export default <D extends {}>({
+  defaultColumn = { minWidth: 50, maxWidth: 1000 },
+  localization = defaultLocalization,
+  positionActionsColumn = 'first',
+  positionPagination = 'bottom',
+  positionToolbarActions = 'top',
   ...rest
-}) => {
-  return (
-    <MaterialReactTableProvider options={options} {...rest}>
-      <MRT_TableContainer />
-    </MaterialReactTableProvider>
-  );
-};
+}: MaterialReactTableProps<D>) => (
+  <MaterialReactTableProvider
+    defaultColumn={defaultColumn}
+    localization={{ ...defaultLocalization, ...localization }}
+    positionPagination={positionPagination}
+    positionActionsColumn={positionActionsColumn}
+    positionToolbarActions={positionToolbarActions}
+    {...rest}
+  >
+    <MRT_TableContainer />
+  </MaterialReactTableProvider>
+);

package/src/body/MRT_TableBody.tsx

@@ -0,0 +1,56 @@
+import React, { FC } from 'react';
+import {
+  alpha,
+  CircularProgress,
+  styled,
+  TableBody as MuiTableBody,
+} from '@mui/material';
+import { MRT_TableBodyRow } from './MRT_TableBodyRow';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+const TableBody = styled(MuiTableBody)({
+  overflowY: 'hidden',
+});
+
+const CircularProgressWrapper = styled('div')(({ theme }) => ({
+  backgroundColor: alpha(theme.palette.background.paper, 0.5),
+  display: 'grid',
+  height: '100%',
+  justifyContent: 'center',
+  margin: 'auto',
+  paddingTop: '5rem',
+  position: 'fixed',
+  width: 'calc(100% - 2rem)',
+}));
+
+interface Props {}
+
+export const MRT_TableBody: FC<Props> = () => {
+  const { tableInstance, muiTableBodyProps, isLoading, manualPagination } =
+    useMaterialReactTable();
+
+  const rows = manualPagination ? tableInstance.rows : tableInstance.page;
+
+  const tableBodyProps = {
+    ...muiTableBodyProps,
+    ...tableInstance.getTableBodyProps(),
+    style: {
+      ...tableInstance.getTableBodyProps().style,
+      ...(muiTableBodyProps?.style ?? {}),
+    },
+  };
+
+  return (
+    <TableBody {...tableBodyProps}>
+      {isLoading && (
+        <CircularProgressWrapper>
+          <CircularProgress />
+        </CircularProgressWrapper>
+      )}
+      {rows.map((row) => {
+        tableInstance.prepareRow(row);
+        return <MRT_TableBodyRow key={row.getRowProps().key} row={row} />;
+      })}
+    </TableBody>
+  );
+};

package/src/body/MRT_TableBodyCell.tsx

@@ -0,0 +1,48 @@
+import React, { FC, MouseEvent } from 'react';
+import { TableCell } from '@mui/material';
+import { Cell } from 'react-table';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {
+  cell: Cell;
+}
+
+export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
+  const { onCellClick, muiTableBodyCellProps, densePadding } =
+    useMaterialReactTable();
+
+  const mTableCellBodyProps =
+    muiTableBodyCellProps instanceof Function
+      ? muiTableBodyCellProps(cell)
+      : muiTableBodyCellProps;
+
+  const tableCellProps = {
+    ...mTableCellBodyProps,
+    ...cell.getCellProps(),
+    style: {
+      padding: densePadding ? '0.5rem' : '1rem',
+      transition: 'all 0.2s ease-in-out',
+      ...cell.getCellProps().style,
+      ...(mTableCellBodyProps?.style ?? {}),
+    },
+  };
+
+  return (
+    <TableCell
+      onClick={(event: MouseEvent<HTMLTableCellElement>) =>
+        onCellClick?.(event, cell)
+      }
+      {...tableCellProps}
+    >
+      {cell.isPlaceholder ? null : cell.isAggregated ? (
+        cell.render('Aggregated')
+      ) : cell.isGrouped ? (
+        <span>
+          {cell.render('Cell')} ({cell.row.subRows.length})
+        </span>
+      ) : (
+        cell.render('Cell')
+      )}
+    </TableCell>
+  );
+};

package/src/body/MRT_TableBodyRow.tsx

@@ -0,0 +1,74 @@
+import React, { FC, MouseEvent } from 'react';
+import { alpha, TableCell, TableRow, useTheme } 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_ExpandButton } from '../buttons/MRT_ExpandButton';
+import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
+import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
+
+interface Props {
+  row: Row;
+}
+
+export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
+  const {
+    anyRowsCanExpand,
+    enableRowActions,
+    enableSelection,
+    muiTableBodyRowProps,
+    onRowClick,
+    positionActionsColumn,
+    renderDetailPanel,
+  } = useMaterialReactTable();
+  const theme = useTheme();
+
+  const mTableBodyRowProps =
+    muiTableBodyRowProps instanceof Function
+      ? muiTableBodyRowProps(row)
+      : muiTableBodyRowProps;
+
+  const tableRowProps = {
+    ...mTableBodyRowProps,
+    ...row.getRowProps(),
+    style: {
+      backgroundColor: row.isSelected
+        ? alpha(theme.palette.primary.light, 0.1)
+        : 'transparent',
+      ...row.getRowProps().style,
+      ...(mTableBodyRowProps?.style ?? {}),
+    },
+  };
+
+  return (
+    <>
+      <TableRow
+        hover
+        onClick={(event: MouseEvent<HTMLTableRowElement>) =>
+          onRowClick?.(event, row)
+        }
+        {...tableRowProps}
+      >
+        {enableRowActions && positionActionsColumn === 'first' && (
+          <TableCell>
+            <MRT_ToggleRowActionMenuButton row={row} />
+          </TableCell>
+        )}
+        {(anyRowsCanExpand || renderDetailPanel) && (
+          <MRT_ExpandButton row={row} />
+        )}
+        {enableSelection && <MRT_SelectCheckbox row={row} />}
+        {row.cells.map((cell) => (
+          <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
+        ))}
+        {enableRowActions && positionActionsColumn === 'last' && (
+          <TableCell>
+            <MRT_ToggleRowActionMenuButton row={row} />
+          </TableCell>
+        )}
+      </TableRow>
+      {renderDetailPanel && <MRT_TableDetailPanel row={row} />}
+    </>
+  );
+};

package/src/body/MRT_TableDetailPanel.tsx

@@ -0,0 +1,62 @@
+import React, { FC, MouseEvent } from 'react';
+import { Collapse, TableCell, TableRow } from '@mui/material';
+import { Row } from 'react-table';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {
+  row: Row;
+}
+
+export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
+  const {
+    tableInstance,
+    renderDetailPanel,
+    muiTableDetailPanelProps,
+    muiTableBodyRowProps,
+    onDetailPanelClick,
+  } = useMaterialReactTable();
+
+  const mTableBodyRowProps =
+    muiTableBodyRowProps instanceof Function
+      ? muiTableBodyRowProps(row)
+      : muiTableBodyRowProps;
+
+  const tableRowProps = {
+    ...mTableBodyRowProps,
+    ...row.getToggleRowExpandedProps(),
+    style: {
+      ...row.getToggleRowExpandedProps().style,
+      ...(mTableBodyRowProps?.style ?? {}),
+    },
+  };
+
+  const mTableDetailPanelProps =
+    muiTableDetailPanelProps instanceof Function
+      ? muiTableDetailPanelProps(row)
+      : muiTableDetailPanelProps;
+
+  const tableCellProps = {
+    ...mTableDetailPanelProps,
+    style: {
+      borderBottom: !row.isExpanded ? 'none' : undefined,
+      paddingBottom: row.isExpanded ? '1rem' : 0,
+      paddingTop: row.isExpanded ? '1rem' : 0,
+      transition: 'all 0.2s ease-in-out',
+      ...(mTableDetailPanelProps?.style || {}),
+    },
+  };
+
+  return (
+    <TableRow hover {...tableRowProps}>
+      <TableCell
+        colSpan={tableInstance.visibleColumns.length + 10}
+        onClick={(event: MouseEvent<HTMLTableCellElement>) =>
+          onDetailPanelClick?.(event, row)
+        }
+        {...tableCellProps}
+      >
+        <Collapse in={row.isExpanded}>{renderDetailPanel?.(row)}</Collapse>
+      </TableCell>
+    </TableRow>
+  );
+};

package/src/buttons/MRT_EditActionButtons.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+import { IconButton, styled, Tooltip } from '@mui/material';
+import SaveIcon from '@mui/icons-material/Save';
+import CancelIcon from '@mui/icons-material/Cancel';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { Row } from 'react-table';
+
+const EditActionButtonWrappers = styled('div')({
+  display: 'flex',
+  gap: '0.75rem',
+});
+
+interface Props {
+  row: Row;
+}
+
+export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
+  const { localization, setCurrentEditingRowId, onRowEditSubmit } =
+    useMaterialReactTable();
+
+  const handleCancel = () => {
+    setCurrentEditingRowId(null);
+  };
+
+  const handleSave = async () => {
+    setCurrentEditingRowId(null);
+    await onRowEditSubmit?.(row);
+  };
+
+  return (
+    <EditActionButtonWrappers>
+      <Tooltip arrow title={localization?.rowActionButtonCancel ?? ''}>
+        <IconButton
+          aria-label={localization?.rowActionButtonCancel}
+          onClick={handleCancel}
+        >
+          <CancelIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip arrow title={localization?.rowActionButtonSave ?? ''}>
+        <IconButton
+          aria-label={localization?.rowActionButtonSave}
+          color="info"
+          onClick={handleSave}
+        >
+          <SaveIcon />
+        </IconButton>
+      </Tooltip>
+    </EditActionButtonWrappers>
+  );
+};

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+import { IconButton, TableCell } from '@mui/material';
+import ArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {}
+
+export const MRT_ExpandAllButton: FC<Props> = () => {
+  const {
+    tableInstance,
+    localization,
+    anyRowsExpanded,
+    densePadding,
+    renderDetailPanel,
+  } = useMaterialReactTable();
+
+  return (
+    <TableCell
+      size="small"
+      {...tableInstance.getToggleAllRowsExpandedProps()}
+      style={{
+        padding: densePadding ? '0' : '0.5rem 0.5rem',
+        transition: 'all 0.2s ease-in-out',
+        width: `${renderDetailPanel ? 2 : tableInstance.expandedDepth + 2}rem`,
+      }}
+    >
+      <IconButton
+        aria-label={localization?.expandAllButtonTitle}
+        title={localization?.expandAllButtonTitle}
+      >
+        <ArrowRightIcon
+          fontSize="small"
+          style={{
+            transform: tableInstance.isAllRowsExpanded
+              ? 'rotate(-180deg)'
+              : anyRowsExpanded
+              ? 'rotate(-90deg)'
+              : 'rotate(0)',
+            transition: 'transform 0.2s',
+          }}
+        />
+      </IconButton>
+    </TableCell>
+  );
+};

package/src/buttons/MRT_ExpandButton.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+import { IconButton, TableCell } from '@mui/material';
+import { Row } from 'react-table';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {
+  row: Row;
+}
+
+export const MRT_ExpandButton: FC<Props> = ({ row }) => {
+  const { localization, tableInstance, densePadding, renderDetailPanel } =
+    useMaterialReactTable();
+
+  return (
+    <TableCell
+      size="small"
+      style={{
+        padding: densePadding ? '0' : '0.6rem 0',
+        paddingLeft: `${row.depth + 0.5}rem`,
+        transition: 'all 0.2s ease-in-out',
+        width: `${
+          renderDetailPanel ? 2 : tableInstance.expandedDepth - row.depth + 2
+        }rem`,
+      }}
+    >
+      <IconButton
+        disabled={!row.canExpand && !renderDetailPanel}
+        aria-label={localization?.expandButtonTitle}
+        title={localization?.expandButtonTitle}
+        {...row.getToggleRowExpandedProps()}
+      >
+        <ExpandMoreIcon
+          fontSize={row.canExpand || renderDetailPanel ? 'medium' : 'small'}
+          style={{
+            transform:
+              !row.canExpand && !renderDetailPanel
+                ? 'rotate(-90deg)'
+                : row.isExpanded
+                ? 'rotate(-180deg)'
+                : 'rotate(0)',
+            transition: 'transform 0.2s',
+          }}
+        />
+      </IconButton>
+    </TableCell>
+  );
+};