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

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,
+    currentEditingRowId,
+    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 === currentEditingRowId) {
+    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, index) => (
+        <MRT_TableFooterRow
+          key={`${index}-${footerGroup.id}`}
+          footerGroup={footerGroup}
+        />
+      ))}
+    </TableFooter>
+  );
+};

package/src/footer/MRT_TableFooterCell.tsx

@@ -0,0 +1,44 @@
+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',
+});
+
+interface Props {
+  column: HeaderGroup;
+}
+
+export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
+  const { muiTableFooterCellProps, densePadding } = useMaterialReactTable();
+
+  const isParentHeader = (column?.columns?.length ?? 0) > 0;
+
+  const mTableFooterCellProps =
+    muiTableFooterCellProps instanceof Function
+      ? muiTableFooterCellProps(column)
+      : muiTableFooterCellProps;
+
+  const tableCellProps = {
+    ...mTableFooterCellProps,
+    ...column.getFooterProps(),
+    style: {
+      padding: densePadding ? '0.5rem' : '1rem',
+      transition: 'all 0.2s ease-in-out',
+      ...column.getFooterProps().style,
+      ...(mTableFooterCellProps?.style ?? {}),
+    },
+  };
+
+  return (
+    <TableCell
+      align={isParentHeader ? 'center' : 'left'}
+      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, index) => (
+        <MRT_TableFooterCell key={`${index}-${column.id}`} column={column} />
+      ))}
+      {enableRowActions && positionActionsColumn === 'last' && (
+        <MRT_TableSpacerCell />
+      )}
+    </TableRow>
+  );
+};

package/src/{MRT_TableHead.tsx → head/MRT_TableHead.tsx}

@@ -1,19 +1,20 @@
 import React, { FC } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import { useMaterialReactTable } from './useMaterialReactTable';
-import { MRT_TablePagination } from './MRT_TablePagination';
+import { useMaterialReactTable } from '../useMaterialReactTable';
 
 interface Props {}
 
 export const MRT_TableHead: FC<Props> = () => {
-  const { tableInstance, tableHeadProps, options } = useMaterialReactTable();
+  const { tableInstance, muiTableHeadProps } = useMaterialReactTable();
+
+  const tableHeadProps =
+    muiTableHeadProps instanceof Function
+      ? muiTableHeadProps(tableInstance)
+      : muiTableHeadProps;
 
   return (
     <TableHead {...tableHeadProps}>
-      {['top', 'both'].includes(options.enablePagination.toString()) && (
-        <MRT_TablePagination />
-      )}
       {tableInstance.headerGroups.map((headerGroup, index) => (
         <MRT_TableHeadRow
           key={`${index}-${headerGroup.id}`}

package/src/head/MRT_TableHeadCell.tsx

@@ -0,0 +1,120 @@
+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)({
+  fontWeight: 'bold',
+  verticalAlign: 'text-top',
+});
+
+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 tableCellProps = {
+    ...mTableHeadCellProps,
+    ...column.getHeaderProps(),
+    style: {
+      padding: densePadding ? '0.5rem' : '1rem',
+      transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
+      ...column.getHeaderProps().style,
+      ...(mTableHeadCellProps?.style ?? {}),
+    },
+  };
+
+  return (
+    <StyledTableHeadCell align={isParentHeader ? 'center' : 'left'} {...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,89 @@
+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,
+    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) => (
+        <MRT_TableHeadCell key={column.getHeaderProps().key} column={column} />
+      ))}
+      {enableRowActions &&
+        positionActionsColumn === 'last' &&
+        (isParentHeader ? (
+          <MRT_TableSpacerCell />
+        ) : (
+          <StyledTableHeadCell>
+            {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_FilterTextField.tsx

@@ -0,0 +1,64 @@
+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) {
+    //@ts-ignore
+    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>
+        ),
+      }}
+    />
+  );
+};