material-react-table 0.3.4 → 0.4.2

package/src/{useMaterialReactTable.tsx → useMRT.tsx}

@@ -1,4 +1,11 @@
-import React, { Context, createContext, PropsWithChildren, useContext, useState } from 'react';
+import React, {
+  Context,
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 import {
   PluginHook,
   Row,
@@ -15,15 +22,16 @@ import {
   useTable,
 } from 'react-table';
 import { MaterialReactTableProps } from './MaterialReactTable';
-import { UseMRTCalcs, useMRTCalcs } from './utils/useMRTCalcs';
 
-export interface UseMaterialReactTable<D extends {}>
-  extends MaterialReactTableProps<D>,
-    UseMRTCalcs {
+export interface UseMRT<D extends {} = {}> extends MaterialReactTableProps<D> {
+  anyRowsCanExpand: boolean;
+  anyRowsExpanded: boolean;
   currentEditingRow: Row<D> | null;
   densePadding: boolean;
+  fullScreen: boolean;
   setCurrentEditingRow: (currentRowEditingId: Row<D> | null) => void;
   setDensePadding: (densePadding: boolean) => void;
+  setFullScreen: (fullScreen: boolean) => void;
   setShowFilters: (showFilters: boolean) => void;
   setShowSearch: (showSearch: boolean) => void;
   showFilters: boolean;
@@ -32,15 +40,12 @@ export interface UseMaterialReactTable<D extends {}>
 }
 
 const MaterialReactTableContext = (<D extends {}>() =>
-  createContext<UseMaterialReactTable<D>>({} as UseMaterialReactTable<D>) as Context<
-    UseMaterialReactTable<D>
-  >)();
+  createContext<UseMRT<D>>({} as UseMRT<D>) as Context<UseMRT<D>>)();
 
 export const MaterialReactTableProvider = <D extends {}>(
   props: PropsWithChildren<MaterialReactTableProps<D>>,
 ) => {
   const hooks: PluginHook<D>[] = [
-    useResizeColumns,
     useFilters,
     useGlobalFilter,
     useGroupBy,
@@ -50,31 +55,50 @@ export const MaterialReactTableProvider = <D extends {}>(
     useRowSelect,
   ];
 
-  if (props.enableColumnResizing) hooks.unshift(useFlexLayout);
+  if (props.enableColumnResizing)
+    hooks.unshift(useResizeColumns, useFlexLayout);
 
   const tableInstance = useTable<D>(props, ...hooks);
 
-  const mrtCalcs = useMRTCalcs({ tableInstance });
-
-  const [showSearch, setShowSearch] = useState(props.defaultShowSearchTextField ?? false);
-  const [showFilters, setShowFilters] = useState<boolean>(props.defaultShowFilters ?? false);
-  const [densePadding, setDensePadding] = useState<boolean>(props.defaultDensePadding ?? false);
+  const anyRowsCanExpand = useMemo(
+    () => tableInstance.rows.some((row) => row.canExpand),
+    [tableInstance.rows],
+  );
+  const anyRowsExpanded = useMemo(
+    () => tableInstance.rows.some((row) => row.isExpanded),
+    [tableInstance.rows],
+  );
   const [currentEditingRow, setCurrentEditingRow] = useState<Row | null>(null);
+  const [densePadding, setDensePadding] = useState(
+    props.defaultDensePadding ?? false,
+  );
+  const [fullScreen, setFullScreen] = useState(
+    props.defaultFullScreen ?? false,
+  );
+  const [showFilters, setShowFilters] = useState(
+    props.defaultShowFilters ?? false,
+  );
+  const [showSearch, setShowSearch] = useState(
+    props.defaultShowSearchTextField ?? false,
+  );
 
   return (
     <MaterialReactTableContext.Provider
       value={{
-        ...mrtCalcs,
         ...props,
+        anyRowsCanExpand,
+        anyRowsExpanded,
         currentEditingRow,
         densePadding,
         setCurrentEditingRow,
         setDensePadding,
+        fullScreen,
+        setFullScreen,
         setShowFilters,
         setShowSearch,
         showFilters,
         showSearch,
-        // @ts-ignore
+        //@ts-ignore
         tableInstance,
       }}
     >
@@ -83,6 +107,6 @@ export const MaterialReactTableProvider = <D extends {}>(
   );
 };
 
-export const useMaterialReactTable = <D extends {}>(): UseMaterialReactTable<D> =>
+export const useMRT = <D extends {}>(): UseMRT<D> =>
   //@ts-ignore
-  useContext<UseMaterialReactTable<D>>(MaterialReactTableContext);
+  useContext<UseMRT<D>>(MaterialReactTableContext);

package/src/utils/localization.ts

@@ -7,6 +7,8 @@ export interface MRT_Localization {
   columnActionMenuItemSortAsc: string;
   columnActionMenuItemSortDesc: string;
   columnActionMenuItemUnGroupBy: string;
+  columnShowHideMenuHideAll: string;
+  columnShowHideMenuShowAll: string;
   expandAllButtonTitle: string;
   expandButtonTitle: string;
   filterTextFieldClearButtonTitle: string;
@@ -23,7 +25,11 @@ export interface MRT_Localization {
   showHideColumnsButtonTitle: string;
   toggleDensePaddingSwitchTitle: string;
   toggleFilterButtonTitle: string;
+  toggleFullScreenButtonTitle: string;
   toggleSearchButtonTitle: string;
+  toolbarAlertSelectionMessage: string;
+  toolbarAlertGroupedByMessage: string;
+  toolbarAlertGroupedThenByMessage: string;
 }
 
 export const defaultLocalization: MRT_Localization = {
@@ -35,6 +41,8 @@ export const defaultLocalization: MRT_Localization = {
   columnActionMenuItemSortAsc: 'Sort by {column} ascending',
   columnActionMenuItemSortDesc: 'Sort by {column} descending',
   columnActionMenuItemUnGroupBy: 'Ungroup by {column}',
+  columnShowHideMenuHideAll: 'Hide all',
+  columnShowHideMenuShowAll: 'Show all',
   expandAllButtonTitle: 'Expand all',
   expandButtonTitle: 'Expand',
   filterTextFieldClearButtonTitle: 'Clear filter',
@@ -43,13 +51,17 @@ export const defaultLocalization: MRT_Localization = {
   rowActionButtonSave: 'Save',
   rowActionMenuButtonTitle: 'Row Actions',
   rowActionMenuItemEdit: 'Edit',
-  selectCheckboxTitle: 'Select row',
   rowActionsColumnTitle: 'Actions',
   searchTextFieldClearButtonTitle: 'Clear search',
   searchTextFieldPlaceholder: 'Search',
   selectAllCheckboxTitle: 'Select all',
+  selectCheckboxTitle: 'Select row',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
   toggleFilterButtonTitle: 'Toggle filters',
-  toggleSearchButtonTitle: 'Toggle search'
+  toggleFullScreenButtonTitle: 'Toggle full screen',
+  toggleSearchButtonTitle: 'Toggle search',
+  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',
+  toolbarAlertGroupedByMessage: 'Grouped by ',
+  toolbarAlertGroupedThenByMessage: ', then by ',
 };

package/dist/toolbar/MRT_ToolbarButtons.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-interface Props {
-}
-export declare const MRT_ToolbarButtons: FC<Props>;
-export {};

package/dist/utils/useMRTCalcs.d.ts

@@ -1,11 +0,0 @@
-import { TableInstance } from 'react-table';
-export interface UseMRTCalcs {
-    anyRowsCanExpand: boolean;
-    anyRowsExpanded: boolean;
-    maxColumnDepth: number;
-}
-interface Props<D extends {}> {
-    tableInstance: TableInstance<D>;
-}
-export declare const useMRTCalcs: <D extends {}>({ tableInstance }: Props<D>) => UseMRTCalcs;
-export {};

package/src/utils/useMRTCalcs.tsx

@@ -1,40 +0,0 @@
-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,
-  };
-};