material-react-table 0.3.2 → 0.4.0

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -0,0 +1,102 @@
+import React, { FC, Fragment } from 'react';
+import {
+  Alert as MuiAlert,
+  Chip,
+  Collapse,
+  styled,
+  useMediaQuery,
+} from '@mui/material';
+import { useMRT } from '../useMRT';
+
+const Alert = styled(MuiAlert, {
+  shouldForwardProp: (prop) =>
+    prop !== 'displayAbsolute' && prop !== 'toolbarPosition',
+})<{ displayAbsolute?: boolean; toolbarPosition?: 'top' | 'bottom' }>(
+  ({ displayAbsolute, toolbarPosition }) => ({
+    borderRadius: 0,
+    fontSize: '1rem',
+    left: 0,
+    marginLeft: !displayAbsolute ? '-0.5rem' : undefined,
+    padding: toolbarPosition === 'bottom' ? '0 1rem' : '0.5rem 1.25rem',
+    position: displayAbsolute ? 'absolute' : 'relative',
+    right: 0,
+    top: 0,
+    width: `calc(100% - ${displayAbsolute ? '2.5rem' : '1.5rem'})`,
+    zIndex: 2,
+  }),
+);
+
+interface Props {}
+
+export const MRT_ToolbarAlertBanner: FC<Props> = () => {
+  const {
+    muiTableToolbarAlertBannerProps,
+    tableInstance,
+    positionToolbarAlertBanner,
+    positionToolbarActions,
+    localization,
+    renderToolbarCustomActions,
+  } = useMRT();
+
+  const isMobile = useMediaQuery('(max-width:720px)');
+
+  const alertProps =
+    muiTableToolbarAlertBannerProps instanceof Function
+      ? muiTableToolbarAlertBannerProps(tableInstance)
+      : muiTableToolbarAlertBannerProps;
+
+  const selectMessage =
+    tableInstance.selectedFlatRows.length > 0
+      ? localization?.toolbarAlertSelectionMessage
+          ?.replace(
+            '{selectedCount}',
+            tableInstance.selectedFlatRows.length.toString(),
+          )
+          ?.replace('{rowCount}', tableInstance.flatRows.length.toString())
+      : null;
+
+  const groupedByMessage =
+    tableInstance.state.groupBy.length > 0 ? (
+      <span>
+        {localization?.toolbarAlertGroupedByMessage}{' '}
+        {tableInstance.state.groupBy.map((columnId, index) => (
+          <Fragment key={`${index}-${columnId}`}>
+            {index > 0 ? localization?.toolbarAlertGroupedThenByMessage : ''}
+            <Chip
+              color="secondary"
+              label={
+                tableInstance.allColumns.find(
+                  (column) => column.id === columnId,
+                )?.Header
+              }
+              onDelete={() => tableInstance.toggleGroupBy(columnId, false)}
+            />
+          </Fragment>
+        ))}
+      </span>
+    ) : null;
+
+  const displayAbsolute = !(
+    isMobile ||
+    (positionToolbarAlertBanner === 'bottom' &&
+      positionToolbarActions === 'bottom') ||
+    (positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions)
+  );
+
+  return (
+    <Collapse
+      in={!!selectMessage || !!groupedByMessage}
+      timeout={displayAbsolute ? 0 : 200}
+    >
+      <Alert
+        displayAbsolute={displayAbsolute}
+        icon={false}
+        color="info"
+        {...alertProps}
+      >
+        {selectMessage}
+        {groupedByMessage}
+      </Alert>
+    </Collapse>
+  );
+};

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,13 +1,15 @@
 import React, { FC } from 'react';
 import { styled, Toolbar as MuiToolbar } from '@mui/material';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_TablePagination } from './MRT_TablePagination';
-import { MRT_ToolbarButtons } from './MRT_ToolbarButtons';
+import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
+import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 
 const Toolbar = styled(MuiToolbar)({
-  padding: 0,
   display: 'flex',
   justifyContent: 'space-between',
+  padding: '0 0.5rem !important',
+  overflowY: 'hidden',
 });
 
 interface Props {}
@@ -19,8 +21,9 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
     muiTableToolbarBottomProps,
     positionPagination,
     positionToolbarActions,
+    positionToolbarAlertBanner,
     tableInstance,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const toolbarProps =
     muiTableToolbarBottomProps instanceof Function
@@ -30,10 +33,11 @@ export const MRT_ToolbarBottom: FC<Props> = () => {
   return (
     <Toolbar variant="dense" {...toolbarProps}>
       {!hideToolbarActions && positionToolbarActions === 'bottom' ? (
-        <MRT_ToolbarButtons />
+        <MRT_ToolbarInternalButtons />
       ) : (
         <span />
       )}
+      {positionToolbarAlertBanner === 'bottom' && <MRT_ToolbarAlertBanner />}
       {!manualPagination &&
         ['bottom', 'both'].includes(positionPagination ?? '') && (
           <MRT_TablePagination />

package/src/toolbar/{MRT_ToolbarButtons.tsx → MRT_ToolbarInternalButtons.tsx}

@@ -2,8 +2,10 @@ import React, { FC } from 'react';
 import { styled } from '@mui/material';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
-import { useMaterialReactTable } from '../useMaterialReactTable';
+import { useMRT } from '../useMRT';
 import { MRT_DensePaddingSwitch } from '../inputs/MRT_DensePaddingSwitch';
+import { MRT_ToggleSearchButton } from '../buttons/MRT_ToggleSearchButton';
+import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
 
 const ToolbarButtonsContainer = styled('div')({
   display: 'flex',
@@ -13,15 +15,22 @@ const ToolbarButtonsContainer = styled('div')({
 
 interface Props {}
 
-export const MRT_ToolbarButtons: FC<Props> = () => {
-  const { disableFilters, disableColumnHiding, disableDensePaddingToggle } =
-    useMaterialReactTable();
+export const MRT_ToolbarInternalButtons: FC<Props> = () => {
+  const {
+    disableFilters,
+    disableColumnHiding,
+    disableDensePaddingToggle,
+    disableGlobalFilter,
+    disableFullScreenToggle,
+  } = useMRT();
 
   return (
     <ToolbarButtonsContainer>
+      {!disableGlobalFilter && <MRT_ToggleSearchButton />}
       {!disableFilters && <MRT_ToggleFiltersButton />}
       {!disableColumnHiding && <MRT_ShowHideColumnsButton />}
       {!disableDensePaddingToggle && <MRT_DensePaddingSwitch />}
+      {!disableFullScreenToggle && <MRT_FullScreenToggleButton />}
     </ToolbarButtonsContainer>
   );
 };

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -1,16 +1,18 @@
 import React, { FC } from 'react';
-import { styled, Toolbar as MuiToolbar, Typography } from '@mui/material';
+import { styled, Toolbar as MuiToolbar } from '@mui/material';
 import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
-import { useMaterialReactTable } from '../useMaterialReactTable';
-import { MRT_ToolbarButtons } from './MRT_ToolbarButtons';
+import { useMRT } from '../useMRT';
+import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_TablePagination } from './MRT_TablePagination';
+import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 
 const Toolbar = styled(MuiToolbar)({
   display: 'grid',
+  padding: '0 0.5rem !important',
 });
 
 const ToolbarTopRow = styled('div')({
-  padding: '0.5rem',
+  padding: '1rem 0.5rem',
   display: 'flex',
   justifyContent: 'space-between',
 });
@@ -18,6 +20,8 @@ const ToolbarTopRow = styled('div')({
 const ToolbarActionsContainer = styled('div')({
   display: 'flex',
   gap: '0.5rem',
+  position: 'relative',
+  zIndex: 3,
 });
 
 interface Props {}
@@ -27,13 +31,13 @@ export const MRT_ToolbarTop: FC<Props> = () => {
     disableGlobalFilter,
     hideToolbarActions,
     manualPagination,
-    muiTableTitleProps,
     muiTableToolbarTopProps,
     positionPagination,
     positionToolbarActions,
+    positionToolbarAlertBanner,
+    renderToolbarCustomActions,
     tableInstance,
-    title,
-  } = useMaterialReactTable();
+  } = useMRT();
 
   const toolbarProps =
     muiTableToolbarTopProps instanceof Function
@@ -42,18 +46,13 @@ export const MRT_ToolbarTop: FC<Props> = () => {
 
   return (
     <Toolbar variant="dense" {...toolbarProps}>
+      {positionToolbarAlertBanner === 'top' && <MRT_ToolbarAlertBanner />}
       <ToolbarTopRow>
-        {title ? (
-          <Typography variant="h5" {...muiTableTitleProps}>
-            {title}
-          </Typography>
-        ) : (
-          <span />
-        )}
+        {renderToolbarCustomActions?.(tableInstance) ?? <span />}
         <ToolbarActionsContainer>
           {!disableGlobalFilter && <MRT_SearchTextField />}
           {!hideToolbarActions && positionToolbarActions === 'top' && (
-            <MRT_ToolbarButtons />
+            <MRT_ToolbarInternalButtons />
           )}
         </ToolbarActionsContainer>
       </ToolbarTopRow>

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

@@ -3,6 +3,7 @@ import React, {
   createContext,
   PropsWithChildren,
   useContext,
+  useMemo,
   useState,
 } from 'react';
 import {
@@ -21,30 +22,30 @@ 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;
+  showSearch: boolean;
   tableInstance: TableInstance<D>;
 }
 
 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,
@@ -54,32 +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 [showFilters, setShowFilters] = useState<boolean>(
-    props.defaultShowFilters ?? false,
+  const anyRowsCanExpand = useMemo(
+    () => tableInstance.rows.some((row) => row.canExpand),
+    [tableInstance.rows],
   );
-  const [densePadding, setDensePadding] = useState<boolean>(
-    props.defaultDensePadding ?? false,
+  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,
-        currentEditingRow,
-        setCurrentEditingRow,
+        setShowSearch,
         showFilters,
-        // @ts-ignore
+        showSearch,
+        //@ts-ignore
         tableInstance,
       }}
     >
@@ -88,8 +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;
@@ -19,24 +21,32 @@ export interface MRT_Localization {
   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',
@@ -45,7 +55,13 @@ export const defaultLocalization: MRT_Localization = {
   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/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,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,
-  };
-};