material-react-table 0.1.0 → 0.3.2

package/src/body/MRT_TableDetailPanel.tsx

@@ -0,0 +1,73 @@
+import React, { FC, MouseEvent } from 'react';
+import {
+  Collapse,
+  styled,
+  TableCell as MuiTableCell,
+  TableRow,
+} from '@mui/material';
+import { Row } from 'react-table';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'isExpanded',
+})<{ isExpanded?: boolean }>(({ isExpanded }) => ({
+  borderBottom: !isExpanded ? 'none' : undefined,
+  paddingBottom: isExpanded ? '1rem' : 0,
+  paddingTop: isExpanded ? '1rem' : 0,
+  transition: 'all 0.2s ease-in-out',
+}));
+
+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: {
+      ...(mTableDetailPanelProps?.style ?? {}),
+    },
+  };
+
+  return (
+    <TableRow hover {...tableRowProps}>
+      <TableCell
+        colSpan={tableInstance.visibleColumns.length + 10}
+        isExpanded={row.isExpanded}
+        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,55 @@
+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,
+    setCurrentEditingRow,
+    onRowEditSubmit,
+    currentEditingRow,
+  } = useMaterialReactTable();
+
+  const handleCancel = () => {
+    setCurrentEditingRow(null);
+  };
+
+  const handleSave = async () => {
+    await onRowEditSubmit?.(currentEditingRow ?? row);
+    setCurrentEditingRow(null);
+  };
+
+  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,47 @@
+import React, { FC } from 'react';
+import { IconButton, styled, TableCell } from '@mui/material';
+import MuiArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+const ArrowRightIcon = styled(MuiArrowRightIcon, {
+  shouldForwardProp: (prop) => prop !== 'rotation',
+})<{ rotation?: number }>(({ rotation }) => ({
+  transform: `rotate(${rotation}deg)`,
+  transition: 'transform 0.2s',
+}));
+
+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"
+          rotation={
+            tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
+          }
+        />
+      </IconButton>
+    </TableCell>
+  );
+};

package/src/buttons/MRT_ExpandButton.tsx

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

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -0,0 +1,43 @@
+import React, { FC, MouseEvent, useState } from 'react';
+import { IconButton, Menu, Tooltip } from '@mui/material';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
+
+interface Props {}
+
+export const MRT_ShowHideColumnsButton: FC<Props> = () => {
+  const { tableInstance, localization } = useMaterialReactTable();
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return (
+    <>
+      <Tooltip arrow title={localization?.showHideColumnsButtonTitle ?? ''}>
+        <IconButton
+          aria-label={localization?.showHideColumnsButtonTitle}
+          onClick={handleClick}
+          size="small"
+        >
+          <ViewColumnIcon />
+        </IconButton>
+      </Tooltip>
+      <Menu
+        anchorEl={anchorEl}
+        open={!!anchorEl}
+        onClose={() => setAnchorEl(null)}
+      >
+        {tableInstance.columns.map((column, index) => (
+          <MRT_ShowHideColumnsMenu
+            key={`${index}-${column.id}`}
+            column={column}
+          />
+        ))}
+      </Menu>
+    </>
+  );
+};

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -0,0 +1,51 @@
+import React, { FC, MouseEvent, useState } from 'react';
+import { IconButton as MuiIconButton, styled } from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
+import { HeaderGroup } from 'react-table';
+
+const IconButton = styled(MuiIconButton)({
+  opacity: 0.5,
+  transition: 'opacity 0.2s',
+  marginRight: '2px',
+  height: '2rem',
+  width: '2rem',
+  '&:hover': {
+    opacity: 1,
+  },
+});
+
+interface Props {
+  column: HeaderGroup;
+}
+
+export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
+  const { localization } = useMaterialReactTable();
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  return (
+    <>
+      <IconButton
+        aria-label={localization?.columnActionMenuButtonTitle}
+        title={localization?.columnActionMenuButtonTitle}
+        onClick={handleClick}
+        size="small"
+      >
+        <MoreVertIcon />
+      </IconButton>
+      <MRT_ColumnActionMenu
+        anchorEl={anchorEl}
+        column={column}
+        setAnchorEl={setAnchorEl}
+      />
+    </>
+  );
+};

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import FilterListOffIcon from '@mui/icons-material/FilterListOff';
+
+type Props = {};
+
+export const MRT_ToggleFiltersButton: FC<Props> = () => {
+  const { localization, setShowFilters, showFilters } = useMaterialReactTable();
+
+  return (
+    <Tooltip arrow title={localization?.toggleFilterButtonTitle ?? ''}>
+      <IconButton
+        aria-label={localization?.toggleFilterButtonTitle}
+        onClick={() => setShowFilters(!showFilters)}
+        size="small"
+      >
+        {showFilters ? <FilterListOffIcon /> : <FilterListIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -0,0 +1,65 @@
+import React, { FC, MouseEvent, useState } from 'react';
+import { IconButton as MuiIconButton, styled } from '@mui/material';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { Row } from 'react-table';
+import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
+import { MRT_EditActionButtons } from './MRT_EditActionButtons';
+
+const IconButton = styled(MuiIconButton)({
+  opacity: 0.5,
+  transition: 'opacity 0.2s',
+  marginRight: '2px',
+  height: '2rem',
+  width: '2rem',
+  '&:hover': {
+    opacity: 1,
+  },
+});
+
+interface Props {
+  row: Row;
+}
+
+export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
+  const {
+    localization,
+    currentEditingRow,
+    renderRowActions,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleOpenRowActionMenu = (event: MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  if (renderRowActions) {
+    return <>{renderRowActions(row, tableInstance)}</>;
+  }
+
+  if (row.id === currentEditingRow?.id) {
+    return <MRT_EditActionButtons row={row} />;
+  }
+
+  return (
+    <>
+      <IconButton
+        aria-label={localization?.rowActionMenuButtonTitle}
+        title={localization?.rowActionMenuButtonTitle}
+        onClick={handleOpenRowActionMenu}
+        size="small"
+      >
+        <MoreHorizIcon />
+      </IconButton>
+      <MRT_RowActionMenu
+        anchorEl={anchorEl}
+        row={row}
+        setAnchorEl={setAnchorEl}
+      />
+    </>
+  );
+};

package/src/footer/MRT_TableFooter.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { TableFooter } from '@mui/material';
+import { MRT_TableFooterRow } from './MRT_TableFooterRow';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {}
+
+export const MRT_TableFooter: FC<Props> = () => {
+  const { muiTableFooterProps, tableInstance } = useMaterialReactTable();
+
+  return (
+    <TableFooter {...muiTableFooterProps}>
+      {tableInstance.footerGroups.map((footerGroup) => (
+        <MRT_TableFooterRow
+          key={footerGroup.getFooterGroupProps().key}
+          footerGroup={footerGroup}
+        />
+      ))}
+    </TableFooter>
+  );
+};

package/src/footer/MRT_TableFooterCell.tsx

@@ -0,0 +1,60 @@
+import React, { FC } from 'react';
+import { styled, TableCell as MuiTableCell } from '@mui/material';
+import { HeaderGroup } from 'react-table';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+const TableCell = 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`,
+  }),
+);
+
+interface Props {
+  column: HeaderGroup;
+}
+
+export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
+  const { muiTableFooterCellProps, densePadding, enableColumnResizing } =
+    useMaterialReactTable();
+
+  const isParentHeader = (column?.columns?.length ?? 0) > 0;
+
+  const mTableFooterCellProps =
+    muiTableFooterCellProps instanceof Function
+      ? muiTableFooterCellProps(column)
+      : muiTableFooterCellProps;
+
+  const mcTableFooterCellProps =
+    column.muiTableFooterCellProps instanceof Function
+      ? column.muiTableFooterCellProps(column)
+      : column.muiTableFooterCellProps;
+
+  const tableCellProps = {
+    ...mTableFooterCellProps,
+    ...mcTableFooterCellProps,
+    ...column.getFooterProps(),
+    style: {
+      ...column.getFooterProps().style,
+      ...(mTableFooterCellProps?.style ?? {}),
+      ...(mcTableFooterCellProps?.style ?? {}),
+    },
+  };
+
+  return (
+    <TableCell
+      align={isParentHeader ? 'center' : 'left'}
+      densePadding={densePadding}
+      enableColumnResizing={enableColumnResizing}
+      variant="head"
+      {...tableCellProps}
+    >
+      {column.render('Footer')}
+    </TableCell>
+  );
+};

package/src/footer/MRT_TableFooterRow.tsx

@@ -0,0 +1,62 @@
+import React, { FC } from 'react';
+import { TableRow } from '@mui/material';
+import { HeaderGroup } from 'react-table';
+import { MRT_TableFooterCell } from './MRT_TableFooterCell';
+import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {
+  footerGroup: HeaderGroup;
+}
+
+export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
+  const {
+    renderDetailPanel,
+    columns,
+    anyRowsCanExpand,
+    enableSelection,
+    enableRowActions,
+    positionActionsColumn,
+    tableInstance,
+    muiTableFooterRowProps,
+  } = useMaterialReactTable();
+
+  //if no content in row, skip row
+  if (!columns?.some((c) => c.Footer)) return null;
+
+  const mTableFooterRowProps =
+    muiTableFooterRowProps instanceof Function
+      ? muiTableFooterRowProps(footerGroup)
+      : muiTableFooterRowProps;
+
+  const tableRowProps = {
+    ...mTableFooterRowProps,
+    ...footerGroup.getFooterGroupProps(),
+    style: {
+      ...footerGroup.getFooterGroupProps().style,
+      ...(mTableFooterRowProps?.style ?? {}),
+    },
+  };
+
+  return (
+    <TableRow {...tableRowProps}>
+      {enableRowActions && positionActionsColumn === 'first' && (
+        <MRT_TableSpacerCell />
+      )}
+      {(anyRowsCanExpand || renderDetailPanel) && (
+        <MRT_TableSpacerCell
+          width={`${
+            renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
+          }rem`}
+        />
+      )}
+      {enableSelection && <MRT_TableSpacerCell width="1rem" />}
+      {footerGroup.headers.map((column,) => (
+        <MRT_TableFooterCell key={column.getFooterProps().key} column={column} />
+      ))}
+      {enableRowActions && positionActionsColumn === 'last' && (
+        <MRT_TableSpacerCell />
+      )}
+    </TableRow>
+  );
+};

package/src/head/MRT_TableHead.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { TableHead } from '@mui/material';
+import { MRT_TableHeadRow } from './MRT_TableHeadRow';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {}
+
+export const MRT_TableHead: FC<Props> = () => {
+  const { tableInstance, muiTableHeadProps } = useMaterialReactTable();
+
+  const tableHeadProps =
+    muiTableHeadProps instanceof Function
+      ? muiTableHeadProps(tableInstance)
+      : muiTableHeadProps;
+
+  return (
+    <TableHead {...tableHeadProps}>
+      {tableInstance.headerGroups.map((headerGroup) => (
+        <MRT_TableHeadRow
+          key={headerGroup.getHeaderGroupProps().key}
+          headerGroup={headerGroup}
+        />
+      ))}
+    </TableHead>
+  );
+};