material-react-table 0.3.0 → 0.3.4

package/src/useMaterialReactTable.tsx

@@ -1,10 +1,7 @@
-import React, {
-  Context,
-  createContext,
-  PropsWithChildren,
-  useContext,
-} from 'react';
+import React, { Context, createContext, PropsWithChildren, useContext, useState } from 'react';
 import {
+  PluginHook,
+  Row,
   TableInstance,
   useExpanded,
   useFilters,
@@ -19,42 +16,30 @@ import {
 } from 'react-table';
 import { MaterialReactTableProps } from './MaterialReactTable';
 import { UseMRTCalcs, useMRTCalcs } from './utils/useMRTCalcs';
-import { showoverrideWarnings } from './utils/overrideWarnings';
 
 export interface UseMaterialReactTable<D extends {}>
   extends MaterialReactTableProps<D>,
     UseMRTCalcs {
+  currentEditingRow: Row<D> | null;
+  densePadding: boolean;
+  setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
+  setDensePadding: (densePadding: boolean) => void;
+  setShowFilters: (showFilters: boolean) => void;
+  setShowSearch: (showSearch: boolean) => void;
+  showFilters: boolean;
+  showSearch: boolean;
   tableInstance: TableInstance<D>;
 }
 
 const MaterialReactTableContext = (<D extends {}>() =>
-  createContext<UseMaterialReactTable<D>>(
-    {} as UseMaterialReactTable<D>,
-  ) as Context<UseMaterialReactTable<D>>)();
+  createContext<UseMaterialReactTable<D>>({} as UseMaterialReactTable<D>) as Context<
+    UseMaterialReactTable<D>
+  >)();
 
-export const MaterialReactTableProvider = <D extends {}>({
-  children,
-  columns,
-  data,
-  defaultColumn,
-  getRowId,
-  getSubRows,
-  initialState,
-  stateReducer,
-  surpressoverrideWarnings,
-  ...rest
-}: PropsWithChildren<MaterialReactTableProps<D>>) => {
-  const tableInstance = useTable<D>(
-    {
-      columns,
-      data,
-      defaultColumn,
-      getRowId,
-      getSubRows,
-      initialState,
-      stateReducer,
-    },
-    useFlexLayout,
+export const MaterialReactTableProvider = <D extends {}>(
+  props: PropsWithChildren<MaterialReactTableProps<D>>,
+) => {
+  const hooks: PluginHook<D>[] = [
     useResizeColumns,
     useFilters,
     useGlobalFilter,
@@ -63,30 +48,41 @@ export const MaterialReactTableProvider = <D extends {}>({
     useExpanded,
     usePagination,
     useRowSelect,
-  );
+  ];
+
+  if (props.enableColumnResizing) hooks.unshift(useFlexLayout);
+
+  const tableInstance = useTable<D>(props, ...hooks);
 
   const mrtCalcs = useMRTCalcs({ tableInstance });
 
-  if (process.env.NODE_ENV !== 'production' && !surpressoverrideWarnings) {
-    showoverrideWarnings(rest);
-  }
+  const [showSearch, setShowSearch] = useState(props.defaultShowSearchTextField ?? false);
+  const [showFilters, setShowFilters] = useState<boolean>(props.defaultShowFilters ?? false);
+  const [densePadding, setDensePadding] = useState<boolean>(props.defaultDensePadding ?? false);
+  const [currentEditingRow, setCurrentEditingRow] = useState<Row | null>(null);
 
   return (
     <MaterialReactTableContext.Provider
       value={{
-        //@ts-ignore
-        tableInstance,
         ...mrtCalcs,
-        ...rest,
+        ...props,
+        currentEditingRow,
+        densePadding,
+        setCurrentEditingRow,
+        setDensePadding,
+        setShowFilters,
+        setShowSearch,
+        showFilters,
+        showSearch,
+        // @ts-ignore
+        tableInstance,
       }}
     >
-      {children}
+      {props.children}
     </MaterialReactTableContext.Provider>
   );
 };
 
-export const useMaterialReactTable = <
-  D extends {},
->(): UseMaterialReactTable<D> =>
+export const useMaterialReactTable = <D extends {}>(): UseMaterialReactTable<D> =>
   //@ts-ignore
   useContext<UseMaterialReactTable<D>>(MaterialReactTableContext);

package/src/utils/localization.ts

@@ -1,33 +1,55 @@
 export interface MRT_Localization {
-  columnActionMenuButtonTitle?: string;
-  columnActionMenuItemHideColumn?: string;
-  columnActionMenuItemSortAsc?: string;
-  columnActionMenuItemClearSort?: string;
-  columnActionMenuItemSortDesc?: string;
-  columnActionMenuItemGroupBy?: string;
-  columnActionMenuItemUnGroupBy?: string;
-  expandAllButtonTitle?: string;
-  expandButtonTitle?: string;
-  filterTextFieldClearButtonTitle?: string;
-  filterTextFieldPlaceholder?: string;
-  searchTextFieldClearButtonTitle?: string;
-  searchTextFieldPlaceholder?: string;
-  showHideColumnsButtonTitle?: string;
+  actionsHeadColumnTitle: string;
+  columnActionMenuButtonTitle: string;
+  columnActionMenuItemClearSort: string;
+  columnActionMenuItemGroupBy: string;
+  columnActionMenuItemHideColumn: string;
+  columnActionMenuItemSortAsc: string;
+  columnActionMenuItemSortDesc: string;
+  columnActionMenuItemUnGroupBy: string;
+  expandAllButtonTitle: string;
+  expandButtonTitle: string;
+  filterTextFieldClearButtonTitle: string;
+  filterTextFieldPlaceholder: string;
+  rowActionButtonCancel: string;
+  rowActionButtonSave: string;
+  rowActionMenuButtonTitle: string;
+  rowActionMenuItemEdit: string;
+  rowActionsColumnTitle: string;
+  searchTextFieldClearButtonTitle: string;
+  searchTextFieldPlaceholder: string;
+  selectAllCheckboxTitle: string;
+  selectCheckboxTitle: string;
+  showHideColumnsButtonTitle: string;
+  toggleDensePaddingSwitchTitle: string;
+  toggleFilterButtonTitle: string;
+  toggleSearchButtonTitle: string;
 }
 
 export const defaultLocalization: MRT_Localization = {
+  actionsHeadColumnTitle: 'Actions',
   columnActionMenuButtonTitle: 'Column Actions',
-  columnActionMenuItemHideColumn: 'Hide column',
-  columnActionMenuItemSortAsc: 'Sort ascending',
   columnActionMenuItemClearSort: 'Clear sorting',
-  columnActionMenuItemSortDesc: 'Sort descending',
-  columnActionMenuItemGroupBy: 'Group by column',
-  columnActionMenuItemUnGroupBy: 'Ungroup column',
+  columnActionMenuItemGroupBy: 'Group by {column}',
+  columnActionMenuItemHideColumn: 'Hide {column} column',
+  columnActionMenuItemSortAsc: 'Sort by {column} ascending',
+  columnActionMenuItemSortDesc: 'Sort by {column} descending',
+  columnActionMenuItemUnGroupBy: 'Ungroup by {column}',
   expandAllButtonTitle: 'Expand all',
   expandButtonTitle: 'Expand',
   filterTextFieldClearButtonTitle: 'Clear filter',
-  filterTextFieldPlaceholder: 'Filter',
+  filterTextFieldPlaceholder: 'Filter by {column}',
+  rowActionButtonCancel: 'Cancel',
+  rowActionButtonSave: 'Save',
+  rowActionMenuButtonTitle: 'Row Actions',
+  rowActionMenuItemEdit: 'Edit',
+  selectCheckboxTitle: 'Select row',
+  rowActionsColumnTitle: 'Actions',
   searchTextFieldClearButtonTitle: 'Clear search',
   searchTextFieldPlaceholder: 'Search',
+  selectAllCheckboxTitle: 'Select all',
   showHideColumnsButtonTitle: 'Show/Hide columns',
+  toggleDensePaddingSwitchTitle: 'Toggle dense padding',
+  toggleFilterButtonTitle: 'Toggle filters',
+  toggleSearchButtonTitle: 'Toggle search'
 };

package/src/utils/useMRTCalcs.tsx

@@ -11,9 +11,7 @@ interface Props<D extends {}> {
   tableInstance: TableInstance<D>;
 }
 
-export const useMRTCalcs = <D extends {}>({
-  tableInstance,
-}: Props<D>): UseMRTCalcs => {
+export const useMRTCalcs = <D extends {}>({ tableInstance }: Props<D>): UseMRTCalcs => {
   const anyRowsCanExpand = useMemo(
     () => tableInstance.rows.some((row) => row.canExpand),
     [tableInstance.rows],

package/dist/utils/overrideWarnings.d.ts

@@ -1 +0,0 @@
-export declare const showoverrideWarnings: (props: any) => void;

package/src/footer/MRT_TablePagination.tsx

@@ -1,42 +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,
-    overrideTablePaginationComponent,
-  } = useMaterialReactTable();
-
-  const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
-    tableInstance.setPageSize(+event.target.value);
-    tableInstance.gotoPage(0);
-  };
-
-  if (overrideTablePaginationComponent) {
-    return <>{overrideTablePaginationComponent(tableInstance)}</>;
-  }
-
-  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/toolbar/MRT_Toolbar.tsx

@@ -1,39 +0,0 @@
-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/utils/overrideWarnings.ts

@@ -1,41 +0,0 @@
-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}.`,
-  );
-};