material-react-table 1.0.0-beta.7 → 1.0.0-rc.0

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,21 +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 })
@@ -44,24 +40,34 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
         }
       }}
       sx={(theme) => ({
-        transition: 'all 0.2s ease-in-out',
+        transition: 'all 0.1s ease-in-out',
         ...(tablePaperProps?.sx instanceof Function
           ? tablePaperProps?.sx(theme)
           : (tablePaperProps?.sx as any)),
       })}
       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,11 +34,12 @@ 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>>({});
@@ -123,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'],
@@ -137,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'],
@@ -152,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'],
@@ -166,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'],
@@ -174,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'],
@@ -315,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

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,

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> = {}> {
   position: 'top' | 'bottom';
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
+export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
+  table,
+  position,
+}: Props<TData>) => {
   const {
     getPrePaginationRowModel,
     getState,
@@ -16,6 +19,7 @@ export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
     options: {
       muiTablePaginationProps,
       enableToolbarInternalActions,
+      localization,
       rowCount,
     },
   } = table;
@@ -38,12 +42,21 @@ export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
 
   return (
     <TablePagination
-      SelectProps={{
-        sx: { m: '0 1rem 0 1ch' },
-        MenuProps: { MenuListProps: { disablePadding: true } },
-      }}
       component="div"
       count={totalRowCount}
+      getItemAriaLabel={(type) =>
+        type === 'first'
+          ? localization.goToFirstPage
+          : type === 'last'
+          ? localization.goToLastPage
+          : type === 'next'
+          ? localization.goToNextPage
+          : localization.goToPreviousPage
+      }
+      labelDisplayedRows={({ from, to, count }) =>
+        `${from}-${to} ${localization.of} ${count}`
+      }
+      labelRowsPerPage={localization.rowsPerPage}
       onPageChange={(_: any, newPage: number) => setPageIndex(newPage)}
       onRowsPerPageChange={handleChangeRowsPerPage}
       page={pageIndex}
@@ -52,7 +65,31 @@ export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
       showFirstButton={showFirstLastPageButtons}
       showLastButton={showFirstLastPageButtons}
       {...tablePaginationProps}
+      SelectProps={{
+        sx: { m: '0 1rem 0 1ch' },
+        MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } },
+        ...tablePaginationProps?.SelectProps,
+      }}
       sx={(theme) => ({
+        '& .MuiTablePagination-toolbar': {
+          display: 'flex',
+          alignItems: 'center',
+        },
+        '& .MuiTablePagination-selectLabel': {
+          m: '0 -1px',
+        },
+        '&. MuiInputBase-root': {
+          m: '0 1px',
+        },
+        '& . MuiTablePagination-select': {
+          m: '0 1px',
+        },
+        '& .MuiTablePagination-displayedRows': {
+          m: '0 1px',
+        },
+        '& .MuiTablePagination-actions': {
+          m: '0 1px',
+        },
         mt:
           position === 'top' &&
           enableToolbarInternalActions &&

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -20,6 +20,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
       muiToolbarAlertBannerProps,
       muiToolbarAlertBannerChipProps,
       positionToolbarAlertBanner,
+      rowCount,
     },
   } = table;
   const { grouping, showAlertBanner } = getState();
@@ -43,7 +44,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
           )
           ?.replace(
             '{rowCount}',
-            getPrePaginationRowModel().rows.length.toString(),
+            (rowCount ?? getPrePaginationRowModel().rows.length).toString(),
           )
       : null;
 

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,10 +13,11 @@ 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',
-  transition: 'all 0.2s ease-in-out',
+  transition: 'all 0.1s ease-in-out',
   zIndex: 1,
 });
 

package/dist/cjs/localization.d.ts

@@ -1,84 +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;
-    noRecordsToDisplay: string;
-    noResultsFound: 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,84 +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;
-    noRecordsToDisplay: string;
-    noResultsFound: 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;