material-react-table 0.1.0 → 0.2.0

package/src/body/MRT_TableBody.tsx

@@ -0,0 +1,57 @@
+import React, { FC } from 'react';
+import {
+  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')({
+  backgroundColor: 'rgba(255, 255, 255, 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,
+    tableBodyProps,
+    isLoading,
+    enablePagination,
+    OverrideTableBodyComponent,
+  } = useMaterialReactTable();
+
+  if (OverrideTableBodyComponent) {
+    return <>{OverrideTableBodyComponent(tableInstance)}</>;
+  }
+
+  const rows = enablePagination ? tableInstance.page : tableInstance.rows;
+
+  return (
+    <>
+      <TableBody {...tableBodyProps} {...tableInstance.getTableBodyProps()}>
+        {isLoading && (
+          <CircularProgressWrapper>
+            <CircularProgress />
+          </CircularProgressWrapper>
+        )}
+        {rows.map((row, index) => {
+          tableInstance.prepareRow(row);
+          return <MRT_TableBodyRow key={`${index}-${row.id}`} row={row} />;
+        })}
+      </TableBody>
+    </>
+  );
+};

package/src/{MRT_TableBodyCell.tsx → body/MRT_TableBodyCell.tsx}

@@ -1,12 +1,22 @@
 import React, { FC } from 'react';
 import { TableCell } from '@mui/material';
 import { Cell } from 'react-table';
+import { useMaterialReactTable } from '../useMaterialReactTable';
 
 interface Props {
-  cell: Cell<object>;
+  cell: Cell;
 }
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
+  const {
+    tableInstance,
+    OverrideTableBodyCellComponent,
+  } = useMaterialReactTable();
+
+  if (OverrideTableBodyCellComponent) {
+    return <>{OverrideTableBodyCellComponent(cell, tableInstance)}</>;
+  }
+
   return (
     <TableCell variant="body" {...cell.getCellProps()}>
       {cell.render('Cell')}

package/src/body/MRT_TableBodyRow.tsx

@@ -0,0 +1,56 @@
+import React, { FC, MouseEvent } from 'react';
+import { TableCell, TableRow } 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_TableSpacerCell } from '../table/MRT_TableSpacerCell';
+
+interface Props {
+  row: Row;
+}
+
+export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
+  const {
+    OverrideTableBodyRowComponent,
+    anyRowsCanExpand,
+    enableSelection,
+    enableSubRowTree,
+    enableColumnHiding,
+    onRowClick,
+    renderDetailPanel,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  if (OverrideTableBodyRowComponent) {
+    return <>{OverrideTableBodyRowComponent(row, tableInstance)}</>;
+  }
+
+  return (
+    <>
+      <TableRow
+        onClick={(event: MouseEvent<HTMLTableRowElement>) =>
+          onRowClick?.(event, row)
+        }
+        {...row.getRowProps()}
+      >
+        {((enableSubRowTree && anyRowsCanExpand) || renderDetailPanel) &&
+          (row.canExpand || renderDetailPanel ? (
+            <MRT_ExpandButton row={row} />
+          ) : (
+            <TableCell
+              style={{ width: `${tableInstance.expandedDepth + 0.5}rem` }}
+            />
+          ))}
+        {enableSelection && <MRT_SelectCheckbox row={row} />}
+        {row.cells.map((cell, index) => (
+          <MRT_TableBodyCell key={`${index}-${cell.value}`} cell={cell} />
+        ))}
+        {enableColumnHiding && <MRT_TableSpacerCell />}
+      </TableRow>
+      {renderDetailPanel && <MRT_TableDetailPanel row={row} />}
+    </>
+  );
+};

package/src/{MRT_TableDetailPanel.tsx → body/MRT_TableDetailPanel.tsx}

@@ -1,24 +1,35 @@
 import React, { FC } from 'react';
 import { Collapse, TableCell, TableRow } from '@mui/material';
 import { Row } from 'react-table';
-import { useMaterialReactTable } from './useMaterialReactTable';
+import { useMaterialReactTable } from '../useMaterialReactTable';
 
 interface Props {
-  row: Row<object>;
+  row: Row;
 }
 
 export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
-  const { tableInstance, renderDetailPanel } = useMaterialReactTable();
+  const {
+    tableInstance,
+    renderDetailPanel,
+    OverrideTableDetailPanelComponent,
+    tableDetailPanelProps,
+  } = useMaterialReactTable();
+
+  if (OverrideTableDetailPanelComponent) {
+    return <>{OverrideTableDetailPanelComponent(row, tableInstance)}</>;
+  }
 
   return (
     <TableRow {...row.getToggleRowExpandedProps()}>
       <TableCell
         colSpan={tableInstance.visibleColumns.length + 10}
         style={{
+          borderBottom: !row.isExpanded ? 'none' : undefined,
           paddingBottom: row.isExpanded ? '1rem' : 0,
           paddingTop: row.isExpanded ? '1rem' : 0,
-          transition: 'padding 0.2s',
+          transition: 'all 0.2s',
         }}
+        {...tableDetailPanelProps}
       >
         <Collapse in={row.isExpanded}>{renderDetailPanel?.(row)}</Collapse>
       </TableCell>

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -0,0 +1,40 @@
+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 } =
+    useMaterialReactTable();
+
+  return (
+    <TableCell
+      size="small"
+      {...tableInstance.getToggleAllRowsExpandedProps()}
+      style={{
+        padding: '0.5rem',
+        paddingRight: '0',
+        width: `${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,39 @@
+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 } = useMaterialReactTable();
+
+  return (
+    <TableCell
+      size="small"
+      {...row.getToggleRowExpandedProps()}
+      style={{
+        padding: '0.5rem',
+        paddingRight: '0',
+        paddingLeft: `${row.depth + 0.5}rem`,
+        width: `${tableInstance.expandedDepth - row.depth + 2}rem`,
+      }}
+    >
+      <IconButton
+        aria-label={localization?.expandButtonTitle}
+        title={localization?.expandButtonTitle}
+      >
+        <ExpandMoreIcon
+          fontSize="small"
+          style={{
+            transform: row.isExpanded ? 'rotate(-180deg)' : 'rotate(0)',
+            transition: 'transform 0.2s',
+          }}
+        />
+      </IconButton>
+    </TableCell>
+  );
+};

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -0,0 +1,43 @@
+import React, { FC, MouseEvent, useState } from 'react';
+import { IconButton, Menu, TableCell } 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 (
+    <TableCell size="small" style={{ width: '2rem', padding: '0.75rem 0' }}>
+      <IconButton
+        aria-label={localization?.showHideColumnsButtonTitle}
+        title={localization?.showHideColumnsButtonTitle}
+        onClick={handleClick}
+        size="small"
+        style={{ margin: '0 0 0 -0.75rem' }}
+      >
+        <ViewColumnIcon />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={!!anchorEl}
+        onClose={() => setAnchorEl(null)}
+      >
+        {tableInstance.columns.map((column, index) => (
+          <MRT_ShowHideColumnsMenu
+            key={`${index}-${column.id}`}
+            column={column}
+          />
+        ))}
+      </Menu>
+    </TableCell>
+  );
+};

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -0,0 +1,49 @@
+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.2,
+  transition: 'opacity 0.2s',
+  marginRight: '2px',
+  '&: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/footer/MRT_TableFooter.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+import { TableFooter } from '@mui/material';
+import { MRT_TableFooterRow } from './MRT_TableFooterRow';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_TablePagination } from './MRT_TablePagination';
+
+interface Props {}
+
+export const MRT_TableFooter: FC<Props> = () => {
+  const {
+    OverrideTableFooterComponent,
+    enablePagination,
+    positionPagination,
+    tableFooterProps,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  if (OverrideTableFooterComponent) {
+    return <>{OverrideTableFooterComponent(tableInstance)}</>;
+  }
+
+  return (
+    <TableFooter {...tableFooterProps}>
+      {tableInstance.footerGroups.map((footerGroup, index) => (
+        <MRT_TableFooterRow
+          key={`${index}-${footerGroup.id}`}
+          footerGroup={footerGroup}
+        />
+      ))}
+      {enablePagination &&
+        ['bottom', 'both'].includes(positionPagination ?? '') && (
+          <MRT_TablePagination />
+        )}
+    </TableFooter>
+  );
+};

package/src/{MRT_TableFooterCell.tsx → footer/MRT_TableFooterCell.tsx}

@@ -1,6 +1,7 @@
 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)({
   fontWeight: 'bold',
@@ -11,6 +12,13 @@ interface Props {
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
+  const { tableInstance, OverrideTableFooterCellComponent } =
+    useMaterialReactTable();
+
+  if (OverrideTableFooterCellComponent) {
+    return <>{OverrideTableFooterCellComponent(column, tableInstance)}</>;
+  }
+
   const isParentHeader = (column?.columns?.length ?? 0) > 0;
 
   return (

package/src/footer/MRT_TableFooterRow.tsx

@@ -0,0 +1,44 @@
+import React, { FC } from 'react';
+import { TableCell, 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,
+    enableColumnHiding,
+    enableSelection,
+    tableInstance,
+    OverrideTableFooterRowComponent,
+  } = useMaterialReactTable();
+
+  //if no content in row, skip row
+  if (!columns.some((c) => c.Footer)) return null;
+
+  if (OverrideTableFooterRowComponent) {
+    return <>{OverrideTableFooterRowComponent(footerGroup, tableInstance)}</>;
+  }
+
+  return (
+    <TableRow {...footerGroup.getFooterGroupProps()}>
+      {(anyRowsCanExpand || renderDetailPanel) && (
+        <TableCell
+          style={{ width: `${tableInstance.expandedDepth + 0.5}rem` }}
+        />
+      )}
+      {enableSelection && <MRT_TableSpacerCell width="1rem" />}
+      {footerGroup.headers.map((column, index) => (
+        <MRT_TableFooterCell key={`${index}-${column.id}`} column={column} />
+      ))}
+      {enableColumnHiding && <MRT_TableSpacerCell />}
+    </TableRow>
+  );
+};

package/src/{MRT_TablePagination.tsx → footer/MRT_TablePagination.tsx}

@@ -1,17 +1,22 @@
 import React, { ChangeEvent, FC } from 'react';
 import { TablePagination, TableRow } from '@mui/material';
-import { useMaterialReactTable } from './useMaterialReactTable';
+import { useMaterialReactTable } from '../useMaterialReactTable';
 
 interface Props {}
 
 export const MRT_TablePagination: FC<Props> = () => {
-  const { tableInstance, tablePaginationProps } = useMaterialReactTable();
+  const { tableInstance, tablePaginationProps, OverrideTablePaginationComponent } =
+    useMaterialReactTable();
 
   const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
     tableInstance.setPageSize(+event.target.value);
     tableInstance.gotoPage(0);
   };
 
+  if (OverrideTablePaginationComponent) {
+    return <>{OverrideTablePaginationComponent(tableInstance)}</>;
+  }
+
   return (
     <TableRow>
       <TablePagination

package/src/head/MRT_TableHead.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import { LinearProgress, TableHead } from '@mui/material';
+import { MRT_TableHeadRow } from './MRT_TableHeadRow';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_TablePagination } from '../footer/MRT_TablePagination';
+
+interface Props {}
+
+export const MRT_TableHead: FC<Props> = () => {
+  const {
+    OverrideTableHeadComponent,
+    tableInstance,
+    tableHeadProps,
+    enablePagination,
+    isReloading,
+    positionPagination,
+  } = useMaterialReactTable();
+
+  if (OverrideTableHeadComponent) {
+    return <>{OverrideTableHeadComponent(tableInstance)}</>;
+  }
+
+  return (
+    <TableHead {...tableHeadProps}>
+      {isReloading && <LinearProgress />}
+      {enablePagination &&
+        ['top', 'both'].includes(positionPagination ?? '') && (
+          <MRT_TablePagination />
+        )}
+      {tableInstance.headerGroups.map((headerGroup, index) => (
+        <MRT_TableHeadRow
+          key={`${index}-${headerGroup.id}`}
+          headerGroup={headerGroup}
+        />
+      ))}
+    </TableHead>
+  );
+};

package/src/head/MRT_TableHeadCell.tsx

@@ -0,0 +1,94 @@
+import React, { FC } from 'react';
+import {
+  TableCell as MuiTableCell,
+  TableSortLabel,
+  styled,
+  Divider,
+  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';
+
+const TableCell = styled(MuiTableCell)({
+  fontWeight: 'bold',
+});
+
+const TableCellContents = styled('div')({
+  display: 'grid',
+});
+
+const TableCellText = styled('div')({
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+interface Props {
+  column: HeaderGroup;
+  index: number;
+}
+
+export const MRT_TableHeadCell: FC<Props> = ({ column, index }) => {
+  const {
+    OverrideTableHeadCellComponent,
+    enableColumnActions,
+    enableColumnResizing,
+    enableFiltering,
+    showFiltersInColumnHead,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  if (OverrideTableHeadCellComponent) {
+    return <>{OverrideTableHeadCellComponent(column, tableInstance)}</>;
+  }
+
+  const isParentHeader = (column?.columns?.length ?? 0) > 0;
+  const isLastColumn =
+    (!isParentHeader && index === tableInstance.visibleColumns.length - 1) ||
+    (isParentHeader && index === column.headers.length - 1);
+
+  return (
+    <TableCell
+      align={isParentHeader ? 'center' : 'left'}
+      {...column.getHeaderProps()}
+    >
+      <TableCellContents>
+        <TableCellText
+          style={{ justifyContent: isParentHeader ? 'center' : undefined }}
+        >
+          <span {...column.getSortByToggleProps()}>
+            {column.render('Header')}
+            {!isParentHeader && column.canSort && (
+              <TableSortLabel
+                active={column.isSorted}
+                direction={column.isSortedDesc ? 'desc' : 'asc'}
+              />
+            )}
+          </span>
+          <span style={{ display: 'flex' }}>
+            {enableColumnActions && !isParentHeader && (
+              <MRT_ToggleColumnActionMenuButton column={column} />
+            )}
+            {enableColumnResizing && !isLastColumn && (
+              <Divider
+                flexItem
+                orientation="vertical"
+                style={{ borderRightWidth: '2px', borderRadius: '2px' }}
+                onDoubleClick={() => tableInstance.resetResizing()}
+                {...column.getResizerProps()}
+              />
+            )}
+          </span>
+        </TableCellText>
+        {enableFiltering && column.canFilter && (
+          <Collapse in={showFiltersInColumnHead}>
+            <MRT_FilterTextfield column={column} />
+          </Collapse>
+        )}
+      </TableCellContents>
+    </TableCell>
+  );
+};

package/src/head/MRT_TableHeadRow.tsx

@@ -0,0 +1,63 @@
+import React, { FC, useMemo } from 'react';
+import { TableRow } from '@mui/material';
+import { HeaderGroup } from 'react-table';
+import { MRT_TableHeadCell } 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 {
+  headerGroup: HeaderGroup;
+}
+
+export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
+  const {
+    OverrideTableHeadRowComponent,
+    anyRowsCanExpand,
+    enableColumnHiding,
+    enableExpandAll,
+    enableSelection,
+    renderDetailPanel,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  if (OverrideTableHeadRowComponent) {
+    return <>{OverrideTableHeadRowComponent(headerGroup, tableInstance)}</>;
+  }
+
+  const isParentHeader = useMemo(
+    () => headerGroup.headers.some((h) => (h.columns?.length ?? 0) > 0),
+    [headerGroup.headers],
+  );
+
+  return (
+    <TableRow {...headerGroup.getHeaderGroupProps()}>
+      {anyRowsCanExpand || renderDetailPanel ? (
+        enableExpandAll && !isParentHeader ? (
+          <MRT_ExpandAllButton />
+        ) : (
+          <MRT_TableSpacerCell
+            width={`${tableInstance.expandedDepth + 0.5}rem`}
+          />
+        )
+      ) : null}
+      {enableSelection ? (
+        !isParentHeader ? (
+          <MRT_SelectAllCheckbox />
+        ) : (
+          <MRT_TableSpacerCell width="1rem" />
+        )
+      ) : null}
+      {headerGroup.headers.map((column, index) => (
+        <MRT_TableHeadCell
+          key={`${index}-${column.id}`}
+          column={column}
+          index={index}
+        />
+      ))}
+      {enableColumnHiding && !isParentHeader && <MRT_ShowHideColumnsButton />}
+    </TableRow>
+  );
+};