material-react-table 0.1.0 → 0.2.0

package/src/inputs/MRT_FilterTextField.tsx

@@ -0,0 +1,59 @@
+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);
+  };
+
+  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,65 @@
+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, tableSearchTextfieldProps, localization } = useMaterialReactTable();
+
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleChange = useAsyncDebounce((value) => {
+    tableInstance.setGlobalFilter(value ?? undefined);
+  }, 200);
+
+  const handleClear = () => {
+    setSearchValue('');
+    tableInstance.setGlobalFilter(undefined);
+  };
+
+  return (
+    <TextField
+      placeholder={localization?.searchTextFieldPlaceholder}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+        setSearchValue(e.target.value);
+        handleChange(e.target.value);
+      }}
+      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>
+        ),
+      }}
+      {...tableSearchTextfieldProps}
+    />
+  );
+};

package/src/inputs/MRT_SelectAllCheckbox.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Checkbox, TableCell } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+export const MRT_SelectAllCheckbox = () => {
+  const { tableInstance, enableSelectAll } = useMaterialReactTable();
+
+  return (
+    <TableCell style={{ width: '2rem', padding: '0.5rem' }} variant="head">
+      {enableSelectAll ? (
+        <Checkbox aria-label='' {...tableInstance.getToggleAllPageRowsSelectedProps()} />
+      ) : null}
+    </TableCell>
+  );
+};

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -0,0 +1,26 @@
+import React, { ChangeEvent, FC } from 'react';
+import { Checkbox, TableCell } from '@mui/material';
+import { Row } from 'react-table';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {
+  row: Row;
+}
+
+export const MRT_SelectCheckbox: FC<Props> = ({ row }) => {
+  const { tableInstance, onRowSelectChange } = useMaterialReactTable();
+
+  const onSelectChange = (event: ChangeEvent) => {
+    row.getToggleRowSelectedProps()?.onChange?.(event);
+    onRowSelectChange?.(event, row.state, tableInstance.selectedFlatRows);
+  };
+
+  return (
+    <TableCell style={{ width: '2rem', padding: '0.5rem' }}>
+      <Checkbox
+        {...row.getToggleRowSelectedProps()}
+        onChange={onSelectChange}
+      />
+    </TableCell>
+  );
+};

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -0,0 +1,82 @@
+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';
+
+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 { enableColumnHiding, enableSorting, 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);
+  };
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      open={!!anchorEl}
+      onClose={() => setAnchorEl(null)}
+    >
+      {enableSorting && (
+        <>
+          <MenuItem disabled={!column.isSorted} onClick={handleClearSort}>
+            <ClearAllIcon /> {localization?.columnActionMenuItemClearSort}
+          </MenuItem>
+          <MenuItem
+            disabled={column.isSorted && !column.isSortedDesc}
+            onClick={handleSortAsc}
+          >
+            <SortIcon /> {localization?.columnActionMenuItemSortAsc}
+          </MenuItem>
+          <MenuItem
+            disabled={column.isSorted && column.isSortedDesc}
+            onClick={handleSortDesc}
+          >
+            <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
+            {localization?.columnActionMenuItemSortDesc}
+          </MenuItem>
+          <Divider />
+        </>
+      )}
+      {enableColumnHiding && (
+        <MenuItem onClick={handleHideColumn}>
+          <VisibilityOffIcon /> {localization?.columnActionMenuItemHideColumn}
+        </MenuItem>
+      )}
+    </Menu>
+  );
+};

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import { FormControlLabel, MenuItem, Switch, Typography } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { ColumnInstance } from 'react-table';
+
+interface Props {
+  column: ColumnInstance;
+}
+
+export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
+  const { maxColumnDepth } = useMaterialReactTable();
+
+  const isMaxDepth = column.depth === maxColumnDepth;
+
+  return (
+    <>
+      <MenuItem style={{ paddingLeft: `${column.depth + 1}rem` }}>
+        {isMaxDepth ? (
+          <FormControlLabel
+            onChange={() => isMaxDepth && column.toggleHidden()}
+            label={column.Header as string}
+            checked={column.isVisible}
+            control={<Switch />}
+          />
+        ) : (
+          <Typography>{column.Header}</Typography>
+        )}
+      </MenuItem>
+      {column.columns?.map((c, i) => (
+        <MRT_ShowHideColumnsMenu key={`${i}-${c.id}`} column={c} />
+      ))}
+    </>
+  );
+};

package/src/table/MRT_Table.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { Table } from '@mui/material';
+import { MRT_TableHead } from '../head/MRT_TableHead';
+import { MRT_TableBody } from '../body/MRT_TableBody';
+import { MRT_TableFooter } from '../footer/MRT_TableFooter';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+interface Props {}
+
+export const MRT_Table: FC<Props> = () => {
+  const { tableInstance, tableProps, showHead, showFooter } =
+    useMaterialReactTable();
+
+  return (
+    <Table {...tableProps} {...tableInstance.getTableProps()}>
+      {showHead && <MRT_TableHead />}
+      <MRT_TableBody />
+      {showFooter && <MRT_TableFooter />}
+    </Table>
+  );
+};

package/src/{MRT_TableContainer.tsx → table/MRT_TableContainer.tsx}

@@ -1,15 +1,17 @@
 import React, { FC } from 'react';
 import { Paper, TableContainer } from '@mui/material';
-import { useMaterialReactTable } from './useMaterialReactTable';
+import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_Table } from './MRT_Table';
+import { MRT_Toolbar } from '../toolbar/MRT_Toolbar';
 
 interface Props {}
 
 export const MRT_TableContainer: FC<Props> = () => {
-  const { tableContainerProps } = useMaterialReactTable();
+  const { tableContainerProps, showToolbar } = useMaterialReactTable();
 
   return (
     <TableContainer component={Paper} {...tableContainerProps}>
+      {showToolbar && <MRT_Toolbar />}
       <MRT_Table />
     </TableContainer>
   );

package/src/table/MRT_TableSpacerCell.tsx

@@ -0,0 +1,10 @@
+import React, { CSSProperties, FC } from 'react';
+import { TableCell } from '@mui/material';
+
+interface Props {
+  width?: CSSProperties['width'];
+}
+
+export const MRT_TableSpacerCell: FC<Props> = ({ width }) => {
+  return <TableCell style={{ width }} />;
+};

package/src/toolbar/MRT_Toolbar.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+import { styled, Toolbar as MuiToolbar, Typography } from '@mui/material';
+import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+
+const Toolbar = styled(MuiToolbar)({
+  padding: '0.5rem',
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+interface Props {}
+
+export const MRT_Toolbar: FC<Props> = () => {
+  const {
+    OverrideTableToolbarComponent,
+    enableSearch,
+    tableInstance,
+    tableTitleProps,
+    tableToolbarProps,
+    title,
+  } = useMaterialReactTable();
+
+  if (OverrideTableToolbarComponent) {
+    return <>{OverrideTableToolbarComponent(tableInstance)}</>;
+  }
+
+  //if no features in the toolbar are enabled, don't render anything
+  if (!enableSearch && !title && !tableToolbarProps) {
+    return null;
+  }
+
+  return (
+    <Toolbar variant="dense" {...tableToolbarProps}>
+      {title ? <Typography {...tableTitleProps}>{title}</Typography> : <span />}
+      {enableSearch && <MRT_SearchTextField />}
+    </Toolbar>
+  );
+};

package/src/useMaterialReactTable.tsx

@@ -1,50 +1,69 @@
-import React, { createContext, FC, useContext } from 'react';
+import React, {
+  Context,
+  createContext,
+  PropsWithChildren,
+  useContext,
+} from 'react';
 import {
   TableInstance,
   useExpanded,
+  useFilters,
+  useFlexLayout,
+  useGlobalFilter,
   usePagination,
+  useResizeColumns,
+  useRowSelect,
   useSortBy,
   useTable,
 } from 'react-table';
-import {
-  MaterialReactTableOptionalProps,
-  MaterialReactTableOptions,
-  MaterialReactTableProps,
-} from '.';
-import { defaultOptions } from './defaults';
+import { MaterialReactTableProps } from '.';
+import { UseMRTCalcs, useMRTCalcs } from './utils/useMRTCalcs';
+import { showOverrideWarnings } from './utils/overrideWarnings';
 
-interface IUseMaterialReactTable extends MaterialReactTableOptionalProps {
-  tableInstance: TableInstance<object>;
-  options: MaterialReactTableOptions;
+interface UseMaterialReactTable<D extends {}>
+  extends MaterialReactTableProps<D>,
+    UseMRTCalcs {
+  tableInstance: TableInstance<D>;
 }
 
-const MaterialReactTableContext = createContext<IUseMaterialReactTable>(
-  {} as IUseMaterialReactTable,
-);
-
-interface ProviderProps extends MaterialReactTableProps {
-  children: React.ReactNode;
-}
+const MaterialReactTableContext = (<D extends {}>() =>
+  createContext<UseMaterialReactTable<D>>(
+    {} as UseMaterialReactTable<D>,
+  ) as Context<UseMaterialReactTable<D>>)();
 
-export const MaterialReactTableProvider: FC<ProviderProps> = ({
+export const MaterialReactTableProvider = <D extends {}>({
   children,
   columns,
   data,
-  options,
+  surpressOverrideWarnings,
   ...rest
-}) => {
+}: PropsWithChildren<MaterialReactTableProps<D>>) => {
   const tableInstance = useTable(
     { columns, data },
+    useFlexLayout,
+    useResizeColumns,
+    useFilters,
+    useGlobalFilter,
     useSortBy,
     useExpanded,
     usePagination,
+    useRowSelect,
   );
 
+  const mrtCalcs = useMRTCalcs({ tableInstance });
+
+  if (process.env.NODE_ENV !== 'production' && !surpressOverrideWarnings) {
+    showOverrideWarnings(rest);
+  }
+
   return (
     <MaterialReactTableContext.Provider
+      //@ts-ignore
       value={{
-        options: { ...defaultOptions, ...options },
+        columns,
+        data,
         tableInstance,
+        ...mrtCalcs,
         ...rest,
       }}
     >
@@ -53,5 +72,8 @@ export const MaterialReactTableProvider: FC<ProviderProps> = ({
   );
 };
 
-export const useMaterialReactTable = (): IUseMaterialReactTable =>
-  useContext(MaterialReactTableContext);
+export const useMaterialReactTable = <
+  D extends {},
+>(): UseMaterialReactTable<D> =>
+  //@ts-ignore
+  useContext<UseMaterialReactTable<D>>(MaterialReactTableContext);

package/src/utils/localization.ts

@@ -0,0 +1,29 @@
+export interface MRT_Localization {
+  columnActionMenuButtonTitle?: string;
+  columnActionMenuItemHideColumn?: string;
+  columnActionMenuItemSortAsc?: string;
+  columnActionMenuItemClearSort?: string;
+  columnActionMenuItemSortDesc?: string;
+  expandAllButtonTitle?: string;
+  expandButtonTitle?: string;
+  filterTextFieldClearButtonTitle?: string;
+  filterTextFieldPlaceholder?: string;
+  searchTextFieldClearButtonTitle?: string;
+  searchTextFieldPlaceholder?: string;
+  showHideColumnsButtonTitle?: string;
+}
+
+export const defaultLocalization: MRT_Localization = {
+  columnActionMenuButtonTitle: 'Column Actions',
+  columnActionMenuItemHideColumn: 'Hide column',
+  columnActionMenuItemSortAsc: 'Sort ascending',
+  columnActionMenuItemClearSort: 'Clear sorting',
+  columnActionMenuItemSortDesc: 'Sort descending',
+  expandAllButtonTitle: 'Expand all',
+  expandButtonTitle: 'Expand',
+  filterTextFieldClearButtonTitle: 'Clear filter',
+  filterTextFieldPlaceholder: 'Filter',
+  searchTextFieldClearButtonTitle: 'Clear search',
+  searchTextFieldPlaceholder: 'Search',
+  showHideColumnsButtonTitle: 'Show/Hide columns'
+};

package/src/utils/overrideWarnings.ts

@@ -0,0 +1,41 @@
+export const showOverrideWarnings = (props: any) => {
+  if (props.OverrideTableBodyCellComponent) {
+    showWarning('TableCell', 'props');
+  }
+  if (props.OverrideTableBodyComponent) {
+    showWarning('TableBody', 'tableBodyProps');
+  }
+  if (props.OverrideTableBodyRowComponent) {
+    showWarning('TableRow', 'props');
+  }
+  if (props.OverrideTableDetailPanelComponent) {
+    showWarning('Detail Panel', 'tableDetailPanelProps');
+  }
+  if (props.OverrideTableFooterComponent) {
+    showWarning('TableFooter', 'tableFooterProps');
+  }
+  if (props.OverrideTableFooterCellComponent) {
+    showWarning('TableCell', 'props');
+  }
+  if (props.OverrideTableFooterRowComponent) {
+    showWarning('TableRow', 'props');
+  }
+  if (props.OverrideTableHeadComponent) {
+    showWarning('TableHead', 'tableHeadProps');
+  }
+  if (props.OverrideTableHeadRowComponent) {
+    showWarning('TableRow', 'props');
+  }
+  if (props.OverrideTablePaginationComponent) {
+    showWarning('', 'props');
+  }
+  if (props.OverrideTableToolbarComponent) {
+    showWarning('TableBodyCell', 'props');
+  }
+};
+
+const showWarning = (componentName: string, propsName: string) => {
+  console.warn(
+    `Caution.\nYou are overriding the built-in Mui ${componentName} Component in material-react-table.\n\nYou should only use this as a last resort!\n\nConsider customizing the Mui ${componentName} Component instead with ${propsName}.`,
+  );
+};

package/src/utils/useMRTCalcs.tsx

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import { TableInstance } from 'react-table';
+
+export interface UseMRTCalcs {
+  anyRowsCanExpand: boolean;
+  anyRowsExpanded: boolean;
+  maxColumnDepth: number;
+}
+
+interface Props<D extends {}> {
+  tableInstance: TableInstance<D>;
+}
+
+export const useMRTCalcs = <D extends {}>({
+  tableInstance,
+}: Props<D>): UseMRTCalcs => {
+  const anyRowsCanExpand = useMemo(
+    () => tableInstance.rows.some((row) => row.canExpand),
+    [tableInstance.rows],
+  );
+
+  const anyRowsExpanded = useMemo(
+    () => tableInstance.rows.some((row) => row.isExpanded),
+    [tableInstance.rows],
+  );
+
+  const maxColumnDepth = useMemo(() => {
+    let maxDepth = 1;
+    tableInstance.columns.forEach((column) => {
+      if (column.columns?.length) {
+        maxDepth = Math.max(maxDepth, column.columns.length);
+      }
+    });
+    return maxDepth - 1;
+  }, [tableInstance.columns]);
+
+  return {
+    anyRowsCanExpand,
+    anyRowsExpanded,
+    maxColumnDepth,
+  };
+};

package/dist/defaults.d.ts

@@ -1,2 +0,0 @@
-import { MaterialReactTableOptions } from '.';
-export declare const defaultOptions: MaterialReactTableOptions;

package/src/MRT_Table.tsx

@@ -1,20 +0,0 @@
-import React, { FC } from 'react';
-import { Table } from '@mui/material';
-import { MRT_TableHead } from './MRT_TableHead';
-import { MRT_TableBody } from './MRT_TableBody';
-import { MRT_TableFooter } from './MRT_TableFooter';
-import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {}
-
-export const MRT_Table: FC<Props> = () => {
-  const { tableInstance, tableProps, options } = useMaterialReactTable();
-
-  return (
-    <Table stickyHeader {...tableProps} {...tableInstance.getTableProps()}>
-      {options.showHead && <MRT_TableHead />}
-      <MRT_TableBody />
-      {options.showFooter && <MRT_TableFooter />}
-    </Table>
-  );
-};

package/src/MRT_TableBody.tsx

@@ -1,19 +0,0 @@
-import React, { FC } from 'react';
-import { TableBody } from '@mui/material';
-import { MRT_TableBodyRow } from './MRT_TableBodyRow';
-import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {}
-
-export const MRT_TableBody: FC<Props> = () => {
-  const { tableInstance } = useMaterialReactTable();
-
-  return (
-    <TableBody {...tableInstance.getTableBodyProps()}>
-      {tableInstance.page.map((row, index) => {
-        tableInstance.prepareRow(row);
-        return <MRT_TableBodyRow key={`${index}-${row.id}`} row={row} />;
-      })}
-    </TableBody>
-  );
-};

package/src/MRT_TableBodyRow.tsx

@@ -1,27 +0,0 @@
-import React, { FC } from 'react';
-import { 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_TableExpandButton } from './MRT_TableExpandButton';
-
-interface Props {
-  row: Row<object>;
-}
-
-export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
-  const { renderDetailPanel } = useMaterialReactTable();
-
-  return (
-    <>
-      <TableRow {...row.getRowProps()}>
-        {renderDetailPanel && <MRT_TableExpandButton row={row} />}
-        {row.cells.map((cell, index) => (
-          <MRT_TableBodyCell key={`${index}-${cell.value}`} cell={cell} />
-        ))}
-      </TableRow>
-      {renderDetailPanel && <MRT_TableDetailPanel row={row} />}
-    </>
-  );
-};