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

package/src/useMaterialReactTable.tsx

@@ -1,57 +1,96 @@
-import React, { createContext, FC, useContext } from 'react';
+import React, {
+  Context,
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useState,
+} from 'react';
 import {
+  PluginHook,
   TableInstance,
   useExpanded,
+  useFilters,
+  useFlexLayout,
+  useGlobalFilter,
+  useGroupBy,
   usePagination,
+  useResizeColumns,
+  useRowSelect,
   useSortBy,
   useTable,
 } from 'react-table';
-import {
-  MaterialReactTableOptionalProps,
-  MaterialReactTableOptions,
-  MaterialReactTableProps,
-} from '.';
-import { defaultOptions } from './defaults';
-
-interface IUseMaterialReactTable extends MaterialReactTableOptionalProps {
-  tableInstance: TableInstance<object>;
-  options: MaterialReactTableOptions;
-}
-
-const MaterialReactTableContext = createContext<IUseMaterialReactTable>(
-  {} as IUseMaterialReactTable,
-);
+import { MaterialReactTableProps } from './MaterialReactTable';
+import { UseMRTCalcs, useMRTCalcs } from './utils/useMRTCalcs';
 
-interface ProviderProps extends MaterialReactTableProps {
-  children: React.ReactNode;
+export interface UseMaterialReactTable<D extends {}>
+  extends MaterialReactTableProps<D>,
+    UseMRTCalcs {
+      currentEditingRowId: string | null;
+  densePadding: boolean;
+  setCurrentEditingRowId: (currentRowEditingId: string | null) => void;
+  setDensePadding: (densePadding: boolean) => void;
+  setShowFilters: (showFilters: boolean) => void;
+  showFilters: boolean;
+  tableInstance: TableInstance<D>;
 }
 
-export const MaterialReactTableProvider: FC<ProviderProps> = ({
-  children,
-  columns,
-  data,
-  options,
-  ...rest
-}) => {
-  const tableInstance = useTable(
-    { columns, data },
+const MaterialReactTableContext = (<D extends {}>() =>
+  createContext<UseMaterialReactTable<D>>(
+    {} as UseMaterialReactTable<D>,
+  ) as Context<UseMaterialReactTable<D>>)();
+
+export const MaterialReactTableProvider = <D extends {}>(
+  props: PropsWithChildren<MaterialReactTableProps<D>>,
+) => {
+  const hooks: PluginHook<D>[] = [
+    useResizeColumns,
+    useFilters,
+    useGlobalFilter,
+    useGroupBy,
     useSortBy,
     useExpanded,
     usePagination,
+    useRowSelect,
+  ];
+
+  if (props.enableColumnResizing) hooks.unshift(useFlexLayout);
+
+  const tableInstance = useTable<D>(props, ...hooks);
+
+  const mrtCalcs = useMRTCalcs({ tableInstance });
+
+  const [showFilters, setShowFilters] = useState<boolean>(
+    props.defaultShowFilters ?? false,
+  );
+  const [densePadding, setDensePadding] = useState<boolean>(
+    props.defaultDensePadding ?? false,
+  );
+  const [currentEditingRowId, setCurrentEditingRowId] = useState<string | null>(
+    null,
   );
 
   return (
     <MaterialReactTableContext.Provider
       value={{
-        options: { ...defaultOptions, ...options },
+        ...mrtCalcs,
+        ...props,
+        densePadding,
+        setDensePadding,
+        setShowFilters,
+        currentEditingRowId,
+        setCurrentEditingRowId,
+        showFilters,
+        // @ts-ignore
         tableInstance,
-        ...rest,
       }}
     >
-      {children}
+      {props.children}
     </MaterialReactTableContext.Provider>
   );
 };
 
-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,49 @@
+export interface MRT_Localization {
+  actionsHeadColumnTitle: string;
+  columnActionMenuButtonTitle: string;
+  columnActionMenuItemClearSort: string;
+  columnActionMenuItemGroupBy: string;
+  columnActionMenuItemHideColumn: string;
+  columnActionMenuItemSortAsc: string;
+  columnActionMenuItemSortDesc: string;
+  columnActionMenuItemUnGroupBy: string;
+  expandAllButtonTitle: string;
+  expandButtonTitle: string;
+  filterTextFieldClearButtonTitle: string;
+  filterTextFieldPlaceholder: string;
+  rowActionMenuButtonTitle: string;
+  rowActionsColumnTitle: string;
+  rowActionButtonSave: string;
+  rowActionButtonCancel: string;
+  rowActionMenuItemEdit: string;
+  searchTextFieldClearButtonTitle: string;
+  searchTextFieldPlaceholder: string;
+  showHideColumnsButtonTitle: string;
+  toggleDensePaddingSwitchTitle: string;
+  toggleFilterButtonTitle: string;
+}
+
+export const defaultLocalization: MRT_Localization = {
+  actionsHeadColumnTitle: 'Actions',
+  columnActionMenuButtonTitle: 'Column Actions',
+  columnActionMenuItemClearSort: 'Clear sorting',
+  columnActionMenuItemGroupBy: 'Group by column',
+  columnActionMenuItemHideColumn: 'Hide column',
+  columnActionMenuItemSortAsc: 'Sort ascending',
+  columnActionMenuItemSortDesc: 'Sort descending',
+  columnActionMenuItemUnGroupBy: 'Ungroup column',
+  expandAllButtonTitle: 'Expand all',
+  expandButtonTitle: 'Expand',
+  filterTextFieldClearButtonTitle: 'Clear filter',
+  filterTextFieldPlaceholder: 'Filter',
+  rowActionMenuButtonTitle: 'Row Actions',
+  rowActionsColumnTitle: 'Actions',
+  rowActionMenuItemEdit: 'Edit',
+  rowActionButtonSave: 'Save',
+  rowActionButtonCancel: 'Cancel',
+  searchTextFieldClearButtonTitle: 'Clear search',
+  searchTextFieldPlaceholder: 'Search',
+  showHideColumnsButtonTitle: 'Show/Hide columns',
+  toggleDensePaddingSwitchTitle: 'Toggle dense padding',
+  toggleFilterButtonTitle: 'Toggle filters',
+};

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_TableBodyCell.tsx

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

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} />}
-    </>
-  );
-};

package/src/MRT_TableContainer.tsx

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

package/src/MRT_TableDetailPanel.tsx

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

package/src/MRT_TableExpandButton.tsx

@@ -1,25 +0,0 @@
-import React, { FC } from 'react';
-import { IconButton, TableCell } from '@mui/material';
-import { Row } from 'react-table';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-// import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {
-  row: Row<object>;
-}
-
-export const MRT_TableExpandButton: FC<Props> = ({ row }) => {
-  return (
-    <TableCell style={{ width: '2rem' }} size="small" variant="head">
-      <IconButton onClick={() => row.toggleRowExpanded()} size="small">
-        <ArrowForwardIosIcon
-          fontSize="small"
-          style={{
-            transform: row.isExpanded ? 'rotate(90deg)' : 'rotate(0)',
-            transition: 'transform 0.2s',
-          }}
-        />
-      </IconButton>
-    </TableCell>
-  );
-};

package/src/MRT_TableFooter.tsx

@@ -1,31 +0,0 @@
-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 { tableInstance, tableFooterProps, options } = useMaterialReactTable();
-
-  const hasFooterGroups = tableInstance.columns.some(
-    (c) => c.depth === 0 && !!c.Footer,
-  );
-
-  return (
-    <TableFooter {...tableFooterProps}>
-      {hasFooterGroups &&
-        tableInstance.footerGroups.map((footerGroup, index) => (
-          <MRT_TableFooterRow
-            key={`${index}-${footerGroup.id}`}
-            footerGroup={footerGroup}
-          />
-        ))}
-      {options.enablePagination === true ||
-        (['bottom', 'both'].includes(options.enablePagination.toString()) && (
-          <MRT_TablePagination />
-        ))}
-    </TableFooter>
-  );
-};

package/src/MRT_TableFooterCell.tsx

@@ -1,25 +0,0 @@
-import React, { FC } from 'react';
-import { styled, TableCell as MuiTableCell } from '@mui/material';
-import { HeaderGroup } from 'react-table';
-
-const TableCell = styled(MuiTableCell)({
-  fontWeight: 'bold',
-});
-
-interface Props {
-  column: HeaderGroup;
-}
-
-export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
-  const isParentHeader = (column?.columns?.length ?? 0) > 0;
-
-  return (
-    <TableCell
-      align={isParentHeader ? 'center' : 'left'}
-      variant="head"
-      {...column.getFooterProps()}
-    >
-      {column.render('Footer')}
-    </TableCell>
-  );
-};

package/src/MRT_TableFooterRow.tsx

@@ -1,22 +0,0 @@
-import React, { FC } from 'react';
-import { TableCell, TableRow } from '@mui/material';
-import { HeaderGroup } from 'react-table';
-import { MRT_TableFooterCell } from './MRT_TableFooterCell';
-import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {
-  footerGroup: HeaderGroup<object>;
-}
-
-export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
-  const { renderDetailPanel } = useMaterialReactTable();
-
-  return (
-    <TableRow {...footerGroup.getFooterGroupProps()}>
-      {renderDetailPanel && <TableCell style={{ width: '2rem' }} />}
-      {footerGroup.headers.map((column, index) => (
-        <MRT_TableFooterCell key={`${index}-${column.id}`} column={column} />
-      ))}
-    </TableRow>
-  );
-};

package/src/MRT_TableHeadCell.tsx

@@ -1,27 +0,0 @@
-import React, { FC } from 'react';
-import { TableCell, TableSortLabel } from '@mui/material';
-import { HeaderGroup } from 'react-table';
-
-interface Props {
-  column: HeaderGroup;
-}
-
-export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
-  const isParentHeader = (column?.columns?.length ?? 0) > 0;
-
-  return (
-    <TableCell
-      align={isParentHeader ? 'center' : 'left'}
-      style={{ fontWeight: 'bold !important' }}
-      variant="head"
-      {...column.getHeaderProps(column.getSortByToggleProps())}
-    >
-      <TableSortLabel
-        active={column.isSorted}
-        direction={column.isSortedDesc && column.isSortedDesc ? 'desc' : 'asc'}
-      >
-        {column.render('Header')}
-      </TableSortLabel>
-    </TableCell>
-  );
-};

package/src/MRT_TableHeadRow.tsx

@@ -1,22 +0,0 @@
-import React, { FC } from 'react';
-import { TableCell, TableRow } from '@mui/material';
-import { HeaderGroup } from 'react-table';
-import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {
-  headerGroup: HeaderGroup<object>;
-}
-
-export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
-  const { renderDetailPanel } = useMaterialReactTable();
-
-  return (
-    <TableRow {...headerGroup.getHeaderGroupProps()}>
-      {renderDetailPanel && <TableCell style={{ width: '2rem' }} />}
-      {headerGroup.headers.map((column, index) => (
-        <MRT_TableHeadCell key={`${index}-${column.id}`} column={column} />
-      ))}
-    </TableRow>
-  );
-};

package/src/MRT_TablePagination.tsx

@@ -1,34 +0,0 @@
-import React, { ChangeEvent, FC } from 'react';
-import { TablePagination, TableRow } from '@mui/material';
-import { useMaterialReactTable } from './useMaterialReactTable';
-
-interface Props {}
-
-export const MRT_TablePagination: FC<Props> = () => {
-  const { tableInstance, tablePaginationProps } = useMaterialReactTable();
-
-  const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
-    tableInstance.setPageSize(+event.target.value);
-    tableInstance.gotoPage(0);
-  };
-
-  return (
-    <TableRow>
-      <TablePagination
-        colSpan={tableInstance.visibleColumns.length + 10}
-        count={tableInstance.rows.length}
-        onPageChange={(_, newPage) => tableInstance.gotoPage(newPage)}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-        page={tableInstance.state.pageIndex}
-        rowsPerPage={tableInstance.state.pageSize}
-        showFirstButton={
-          tableInstance.rows.length / tableInstance.state.pageSize > 2
-        }
-        showLastButton={
-          tableInstance.rows.length / tableInstance.state.pageSize > 2
-        }
-        {...tablePaginationProps}
-      />
-    </TableRow>
-  );
-};

package/src/defaults.ts

@@ -1,11 +0,0 @@
-import { MaterialReactTableOptions } from '.';
-
-export const defaultOptions: MaterialReactTableOptions = {
-  enableFilters: false,
-  enablePagination: 'bottom',
-  enableSearch: true,
-  enableSorting: true,
-  showFooter: true,
-  showHead: true,
-  showToolbar: true,
-};