material-react-table 0.3.0 → 0.3.1

package/src/useMaterialReactTable.tsx

@@ -3,8 +3,10 @@ import React, {
   createContext,
   PropsWithChildren,
   useContext,
+  useState,
 } from 'react';
 import {
+  PluginHook,
   TableInstance,
   useExpanded,
   useFilters,
@@ -19,11 +21,16 @@ 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 {
+      currentEditingRowId: string | null;
+  densePadding: boolean;
+  setCurrentEditingRowId: (currentRowEditingId: string | null) => void;
+  setDensePadding: (densePadding: boolean) => void;
+  setShowFilters: (showFilters: boolean) => void;
+  showFilters: boolean;
   tableInstance: TableInstance<D>;
 }
 
@@ -32,29 +39,10 @@ const MaterialReactTableContext = (<D extends {}>() =>
     {} 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,24 +51,40 @@ 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 [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={{
-        //@ts-ignore
-        tableInstance,
         ...mrtCalcs,
-        ...rest,
+        ...props,
+        densePadding,
+        setDensePadding,
+        setShowFilters,
+        currentEditingRowId,
+        setCurrentEditingRowId,
+        showFilters,
+        // @ts-ignore
+        tableInstance,
       }}
     >
-      {children}
+      {props.children}
     </MaterialReactTableContext.Provider>
   );
 };

package/src/utils/localization.ts

@@ -1,33 +1,49 @@
 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;
+  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',
-  columnActionMenuItemClearSort: 'Clear sorting',
   columnActionMenuItemSortDesc: 'Sort descending',
-  columnActionMenuItemGroupBy: 'Group by column',
   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/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}.`,
-  );
-};