material-react-table 0.3.1 → 0.3.5

package/src/useMRT.tsx

@@ -0,0 +1,112 @@
+import React, {
+  Context,
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  PluginHook,
+  Row,
+  TableInstance,
+  useExpanded,
+  useFilters,
+  useFlexLayout,
+  useGlobalFilter,
+  useGroupBy,
+  usePagination,
+  useResizeColumns,
+  useRowSelect,
+  useSortBy,
+  useTable,
+} from 'react-table';
+import { MaterialReactTableProps } from './MaterialReactTable';
+
+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;
+  showSearch: boolean;
+  tableInstance: TableInstance<D>;
+}
+
+const MaterialReactTableContext = (<D extends {}>() =>
+  createContext<UseMRT<D>>({} as UseMRT<D>) as Context<UseMRT<D>>)();
+
+export const MaterialReactTableProvider = <D extends {}>(
+  props: PropsWithChildren<MaterialReactTableProps<D>>,
+) => {
+  const hooks: PluginHook<D>[] = [
+    useFilters,
+    useGlobalFilter,
+    useGroupBy,
+    useSortBy,
+    useExpanded,
+    usePagination,
+    useRowSelect,
+  ];
+
+  if (props.enableColumnResizing)
+    hooks.unshift(useResizeColumns, useFlexLayout);
+
+  const tableInstance = useTable<D>(props, ...hooks);
+
+  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={{
+        ...props,
+        anyRowsCanExpand,
+        anyRowsExpanded,
+        currentEditingRow,
+        densePadding,
+        setCurrentEditingRow,
+        setDensePadding,
+        fullScreen,
+        setFullScreen,
+        setShowFilters,
+        setShowSearch,
+        showFilters,
+        showSearch,
+        //@ts-ignore
+        tableInstance,
+      }}
+    >
+      {props.children}
+    </MaterialReactTableContext.Provider>
+  );
+};
+
+export const useMRT = <D extends {}>(): UseMRT<D> =>
+  //@ts-ignore
+  useContext<UseMRT<D>>(MaterialReactTableContext);

package/src/utils/localization.ts

@@ -7,43 +7,61 @@ export interface MRT_Localization {
   columnActionMenuItemSortAsc: string;
   columnActionMenuItemSortDesc: string;
   columnActionMenuItemUnGroupBy: string;
+  columnShowHideMenuHideAll: string;
+  columnShowHideMenuShowAll: string;
   expandAllButtonTitle: string;
   expandButtonTitle: string;
   filterTextFieldClearButtonTitle: string;
   filterTextFieldPlaceholder: string;
-  rowActionMenuButtonTitle: string;
-  rowActionsColumnTitle: string;
-  rowActionButtonSave: 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;
+  toggleFullScreenButtonTitle: string;
+  toggleSearchButtonTitle: string;
+  toolbarAlertSelectionMessage: string;
+  toolbarAlertGroupedByMessage: string;
+  toolbarAlertGroupedThenByMessage: 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',
+  columnActionMenuItemGroupBy: 'Group by {column}',
+  columnActionMenuItemHideColumn: 'Hide {column} column',
+  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',
-  filterTextFieldPlaceholder: 'Filter',
+  filterTextFieldPlaceholder: 'Filter by {column}',
+  rowActionButtonCancel: 'Cancel',
+  rowActionButtonSave: 'Save',
   rowActionMenuButtonTitle: 'Row Actions',
-  rowActionsColumnTitle: 'Actions',
   rowActionMenuItemEdit: 'Edit',
-  rowActionButtonSave: 'Save',
-  rowActionButtonCancel: 'Cancel',
+  rowActionsColumnTitle: 'Actions',
   searchTextFieldClearButtonTitle: 'Clear search',
   searchTextFieldPlaceholder: 'Search',
+  selectAllCheckboxTitle: 'Select all',
+  selectCheckboxTitle: 'Select row',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
   toggleFilterButtonTitle: 'Toggle filters',
+  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/useMaterialReactTable.d.ts

@@ -1,15 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { TableInstance } from 'react-table';
-import { MaterialReactTableProps } from './MaterialReactTable';
-import { UseMRTCalcs } from './utils/useMRTCalcs';
-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 declare const MaterialReactTableProvider: <D extends {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;
-export declare const useMaterialReactTable: <D extends {}>() => UseMaterialReactTable<D>;

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/useMaterialReactTable.tsx

@@ -1,96 +0,0 @@
-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 { MaterialReactTableProps } from './MaterialReactTable';
-import { UseMRTCalcs, useMRTCalcs } from './utils/useMRTCalcs';
-
-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>;
-}
-
-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={{
-        ...mrtCalcs,
-        ...props,
-        densePadding,
-        setDensePadding,
-        setShowFilters,
-        currentEditingRowId,
-        setCurrentEditingRowId,
-        showFilters,
-        // @ts-ignore
-        tableInstance,
-      }}
-    >
-      {props.children}
-    </MaterialReactTableContext.Provider>
-  );
-};
-
-export const useMaterialReactTable = <
-  D extends {},
->(): UseMaterialReactTable<D> =>
-  //@ts-ignore
-  useContext<UseMaterialReactTable<D>>(MaterialReactTableContext);

package/src/utils/useMRTCalcs.tsx

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