material-react-table 1.0.0-beta.0 → 1.0.0-beta.11

package/src/table/MRT_TablePaper.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 import { Paper } from '@mui/material';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
@@ -12,20 +12,17 @@ interface Props {
 export const MRT_TablePaper: FC<Props> = ({ table }) => {
   const {
     getState,
-    options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps },
+    options: {
+      enableBottomToolbar,
+      enableTopToolbar,
+      muiTablePaperProps,
+      renderBottomToolbar,
+      renderTopToolbar,
+    },
+    refs: { tablePaperRef },
   } = table;
   const { isFullScreen } = getState();
 
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      if (isFullScreen) {
-        document.body.style.height = '100vh';
-      } else {
-        document.body.style.height = 'auto';
-      }
-    }
-  }, [isFullScreen]);
-
   const tablePaperProps =
     muiTablePaperProps instanceof Function
       ? muiTablePaperProps({ table })
@@ -35,6 +32,13 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
     <Paper
       elevation={2}
       {...tablePaperProps}
+      ref={(ref: HTMLDivElement) => {
+        tablePaperRef.current = ref;
+        if (tablePaperProps?.ref) {
+          //@ts-ignore
+          tablePaperProps.ref.current = ref;
+        }
+      }}
       sx={(theme) => ({
         transition: 'all 0.2s ease-in-out',
         ...(tablePaperProps?.sx instanceof Function
@@ -43,17 +47,27 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
       })}
       style={{
         ...tablePaperProps?.style,
-        height: isFullScreen ? '100vh' : undefined,
-        margin: isFullScreen ? '0' : undefined,
-        maxHeight: isFullScreen ? '100vh' : undefined,
-        maxWidth: isFullScreen ? '100vw' : undefined,
-        padding: isFullScreen ? '0' : undefined,
-        width: isFullScreen ? '100vw' : undefined,
+        ...(isFullScreen
+          ? {
+              height: '100vh',
+              margin: 0,
+              maxHeight: '100vh',
+              maxWidth: '100vw',
+              padding: 0,
+              width: '100vw',
+            }
+          : {}),
       }}
     >
-      {enableTopToolbar && <MRT_TopToolbar table={table} />}
+      {enableTopToolbar &&
+        (renderTopToolbar instanceof Function
+          ? renderTopToolbar({ table })
+          : renderTopToolbar ?? <MRT_TopToolbar table={table} />)}
       <MRT_TableContainer table={table} />
-      {enableBottomToolbar && <MRT_BottomToolbar table={table} />}
+      {enableBottomToolbar &&
+        (renderBottomToolbar instanceof Function
+          ? renderBottomToolbar({ table })
+          : renderBottomToolbar ?? <MRT_BottomToolbar table={table} />)}
     </Paper>
   );
 };

package/src/table/MRT_TableRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   TableState,
   getCoreRowModel,
@@ -34,17 +34,19 @@ import type {
   MRT_TableInstance,
   MRT_TableState,
   MaterialReactTableProps,
+  MRT_Localization,
 } from '..';
 import { MRT_EditRowModal } from '../body/MRT_EditRowModal';
 
 export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
-  props: MaterialReactTableProps<TData>,
+  props: MaterialReactTableProps<TData> & { localization: MRT_Localization },
 ) => {
   const bottomToolbarRef = useRef<HTMLDivElement>(null);
   const editInputRefs = useRef<Record<string, HTMLInputElement>>({});
   const filterInputRefs = useRef<Record<string, HTMLInputElement>>({});
   const searchInputRef = useRef<HTMLInputElement>(null);
   const tableContainerRef = useRef<HTMLDivElement>(null);
+  const tablePaperRef = useRef<HTMLDivElement>(null);
   const topToolbarRef = useRef<HTMLDivElement>(null);
 
   const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
@@ -122,7 +124,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       (
         [
           columnOrder.includes('mrt-row-drag') && {
-            header: props.localization?.move,
+            header: props.localization.move,
             size: 60,
             ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-drag'],
@@ -136,7 +138,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
                 table={table as any}
               />
             ),
-            header: props.localization?.actions,
+            header: props.localization.actions,
             size: 70,
             ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-actions'],
@@ -151,7 +153,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
                 props.enableExpandAll ? (
                   <MRT_ExpandAllButton table={table as any} />
                 ) : null,
-              header: props.localization?.expand,
+              header: props.localization.expand,
               size: 60,
               ...props.defaultDisplayColumn,
               ...props.displayColumnDefOptions?.['mrt-row-expand'],
@@ -165,7 +167,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               props.enableSelectAll ? (
                 <MRT_SelectCheckbox selectAll table={table as any} />
               ) : null,
-            header: props.localization?.select,
+            header: props.localization.select,
             size: 60,
             ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-select'],
@@ -173,8 +175,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
           },
           columnOrder.includes('mrt-row-numbers') && {
             Cell: ({ row }) => row.index + 1,
-            Header: () => props.localization?.rowNumber,
-            header: props.localization?.rowNumbers,
+            Header: () => props.localization.rowNumber,
+            header: props.localization.rowNumbers,
             size: 60,
             ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-numbers'],
@@ -292,6 +294,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       filterInputRefs,
       searchInputRef,
       tableContainerRef,
+      tablePaperRef,
       topToolbarRef,
     },
     setColumnFilterFns: props.onFilterFnsChange ?? setColumnFilterFns,
@@ -313,6 +316,24 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     props.tableInstanceRef.current = table;
   }
 
+  const initialBodyHeight = useRef<string>();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      initialBodyHeight.current = document.body.style.height;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      if (table.getState().isFullScreen) {
+        document.body.style.height = '100vh';
+      } else {
+        document.body.style.height = initialBodyHeight.current as string;
+      }
+    }
+  }, [table.getState().isFullScreen]);
+
   return (
     <>
       <Dialog
@@ -321,13 +342,15 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         disablePortal
         fullScreen
         keepMounted={false}
-        onClose={() => setIsFullScreen(false)}
-        open={isFullScreen}
+        onClose={() => table.setIsFullScreen(false)}
+        open={table.getState().isFullScreen}
         transitionDuration={400}
       >
         <MRT_TablePaper table={table as any} />
       </Dialog>
-      {!isFullScreen && <MRT_TablePaper table={table as any} />}
+      {!table.getState().isFullScreen && (
+        <MRT_TablePaper table={table as any} />
+      )}
       {editingRow && props.editingMode === 'modal' && (
         <MRT_EditRowModal row={editingRow as any} table={table} open />
       )}

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -50,7 +50,10 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
         ({
           ...commonToolbarStyles({ theme }),
           bottom: isFullScreen ? '0' : undefined,
-          boxShadow: `-3px 0 6px ${alpha(theme.palette.common.black, 0.1)}`,
+          boxShadow: `0 1px 2px -1px ${alpha(
+            theme.palette.common.black,
+            0.1,
+          )} inset`,
           left: 0,
           position: isFullScreen ? 'fixed' : 'relative',
           right: 0,
@@ -62,14 +65,17 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
     >
       <MRT_LinearProgressBar isTopToolbar={false} table={table} />
       {positionToolbarAlertBanner === 'bottom' && (
-        <MRT_ToolbarAlertBanner table={table} />
+        <MRT_ToolbarAlertBanner
+          stackAlertBanner={stackAlertBanner}
+          table={table}
+        />
       )}
       {['both', 'bottom'].includes(positionToolbarDropZone ?? '') && (
         <MRT_ToolbarDropZone table={table} />
       )}
       <Box
         sx={{
-          alignItems: 'flex-start',
+          alignItems: 'center',
           boxSizing: 'border-box',
           display: 'flex',
           justifyContent: 'space-between',

package/src/toolbar/MRT_TablePagination.tsx

@@ -1,13 +1,16 @@
-import React, { ChangeEvent, FC } from 'react';
+import React, { ChangeEvent } from 'react';
 import { TablePagination } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  table: MRT_TableInstance<TData>;
   position: 'top' | 'bottom';
 }
 
-export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
+export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
+  table,
+  position,
+}: Props<TData>) => {
   const {
     getPrePaginationRowModel,
     getState,
@@ -58,7 +61,7 @@ export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
           enableToolbarInternalActions &&
           !showGlobalFilter
             ? '3.5rem'
-            : '-0.25rem',
+            : undefined,
         position: 'relative',
         zIndex: 2,
         ...(tablePaginationProps?.sx instanceof Function

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -3,7 +3,7 @@ import { Alert, AlertTitle, Box, Chip, Collapse } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  stackAlertBanner?: boolean;
+  stackAlertBanner: boolean;
   table: MRT_TableInstance;
 }
 
@@ -19,6 +19,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
       localization,
       muiToolbarAlertBannerProps,
       muiToolbarAlertBannerChipProps,
+      positionToolbarAlertBanner,
     },
   } = table;
   const { grouping, showAlertBanner } = getState();
@@ -78,6 +79,11 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
           left: 0,
           p: 0,
           position: 'relative',
+          mb: stackAlertBanner
+            ? 0
+            : positionToolbarAlertBanner === 'bottom'
+            ? '-1rem'
+            : undefined,
           right: 0,
           top: 0,
           width: '100%',

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { Box } from '@mui/material';
 import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
@@ -7,11 +7,15 @@ import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
 import type { MRT_TableInstance } from '..';
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarInternalButtons: FC<Props> = ({ table }) => {
+export const MRT_ToolbarInternalButtons = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+}: Props<TData>) => {
   const {
     options: {
       enableColumnFilters,

package/src/toolbar/MRT_TopToolbar.tsx

@@ -13,6 +13,7 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   backgroundColor: lighten(theme.palette.background.default, 0.04),
   backgroundImage: 'none',
   display: 'grid',
+  flexWrap: 'wrap-reverse',
   minHeight: '3.5rem',
   overflow: 'hidden',
   p: '0 !important',
@@ -102,7 +103,13 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
         )}
         {renderTopToolbarCustomActions?.({ table }) ?? <span />}
         {enableToolbarInternalActions ? (
-          <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexWrap: 'wrap-reverse',
+              justifyContent: 'flex-end',
+            }}
+          >
             {enableGlobalFilter && positionGlobalFilter === 'right' && (
               <MRT_GlobalFilterTextField table={table} />
             )}

package/dist/cjs/localization.d.ts

@@ -1,82 +0,0 @@
-export interface MRT_Localization {
-    actions: string;
-    and: string;
-    cancel: string;
-    changeFilterMode: string;
-    changeSearchMode: string;
-    clearFilter: string;
-    clearSearch: string;
-    clearSort: string;
-    clickToCopy: string;
-    columnActions: string;
-    copiedToClipboard: string;
-    dropToGroupBy: string;
-    edit: string;
-    expand: string;
-    expandAll: string;
-    filterArrIncludes: string;
-    filterArrIncludesAll: string;
-    filterArrIncludesSome: string;
-    filterBetween: string;
-    filterBetweenInclusive: string;
-    filterByColumn: string;
-    filterContains: string;
-    filterEmpty: string;
-    filterEndsWith: string;
-    filterEquals: string;
-    filterEqualsString: string;
-    filterFuzzy: string;
-    filterGreaterThan: string;
-    filterGreaterThanOrEqualTo: string;
-    filterInNumberRange: string;
-    filterIncludesString: string;
-    filterIncludesStringSensitive: string;
-    filterLessThan: string;
-    filterLessThanOrEqualTo: string;
-    filterMode: string;
-    filterNotEmpty: string;
-    filterNotEquals: string;
-    filterStartsWith: string;
-    filterWeakEquals: string;
-    filteringByColumn: string;
-    grab: string;
-    groupByColumn: string;
-    groupedBy: string;
-    hideAll: string;
-    hideColumn: string;
-    max: string;
-    min: string;
-    move: string;
-    or: string;
-    pinToLeft: string;
-    pinToRight: string;
-    resetColumnSize: string;
-    resetOrder: string;
-    rowActions: string;
-    rowNumber: string;
-    rowNumbers: string;
-    save: string;
-    search: string;
-    select: string;
-    selectedCountOfRowCountRowsSelected: string;
-    showAll: string;
-    showAllColumns: string;
-    showHideColumns: string;
-    showHideFilters: string;
-    showHideSearch: string;
-    sortByColumnAsc: string;
-    sortByColumnDesc: string;
-    sortedByColumnAsc: string;
-    sortedByColumnDesc: string;
-    thenBy: string;
-    toggleDensity: string;
-    toggleFullScreen: string;
-    toggleSelectAll: string;
-    toggleSelectRow: string;
-    toggleVisibility: string;
-    ungroupByColumn: string;
-    unpin: string;
-    unpinAll: string;
-    unsorted: string;
-}
-export declare const MRT_DefaultLocalization_EN: MRT_Localization;

package/dist/esm/localization.d.ts

@@ -1,82 +0,0 @@
-export interface MRT_Localization {
-    actions: string;
-    and: string;
-    cancel: string;
-    changeFilterMode: string;
-    changeSearchMode: string;
-    clearFilter: string;
-    clearSearch: string;
-    clearSort: string;
-    clickToCopy: string;
-    columnActions: string;
-    copiedToClipboard: string;
-    dropToGroupBy: string;
-    edit: string;
-    expand: string;
-    expandAll: string;
-    filterArrIncludes: string;
-    filterArrIncludesAll: string;
-    filterArrIncludesSome: string;
-    filterBetween: string;
-    filterBetweenInclusive: string;
-    filterByColumn: string;
-    filterContains: string;
-    filterEmpty: string;
-    filterEndsWith: string;
-    filterEquals: string;
-    filterEqualsString: string;
-    filterFuzzy: string;
-    filterGreaterThan: string;
-    filterGreaterThanOrEqualTo: string;
-    filterInNumberRange: string;
-    filterIncludesString: string;
-    filterIncludesStringSensitive: string;
-    filterLessThan: string;
-    filterLessThanOrEqualTo: string;
-    filterMode: string;
-    filterNotEmpty: string;
-    filterNotEquals: string;
-    filterStartsWith: string;
-    filterWeakEquals: string;
-    filteringByColumn: string;
-    grab: string;
-    groupByColumn: string;
-    groupedBy: string;
-    hideAll: string;
-    hideColumn: string;
-    max: string;
-    min: string;
-    move: string;
-    or: string;
-    pinToLeft: string;
-    pinToRight: string;
-    resetColumnSize: string;
-    resetOrder: string;
-    rowActions: string;
-    rowNumber: string;
-    rowNumbers: string;
-    save: string;
-    search: string;
-    select: string;
-    selectedCountOfRowCountRowsSelected: string;
-    showAll: string;
-    showAllColumns: string;
-    showHideColumns: string;
-    showHideFilters: string;
-    showHideSearch: string;
-    sortByColumnAsc: string;
-    sortByColumnDesc: string;
-    sortedByColumnAsc: string;
-    sortedByColumnDesc: string;
-    thenBy: string;
-    toggleDensity: string;
-    toggleFullScreen: string;
-    toggleSelectAll: string;
-    toggleSelectRow: string;
-    toggleVisibility: string;
-    ungroupByColumn: string;
-    unpin: string;
-    unpinAll: string;
-    unsorted: string;
-}
-export declare const MRT_DefaultLocalization_EN: MRT_Localization;