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

package/src/buttons/MRT_ExpandButton.tsx

@@ -61,7 +61,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
                   ? -180
                   : 0
               }deg)`,
-              transition: 'transform 0.2s',
+              transition: 'transform 0.1s',
             }}
           />
         </IconButton>

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -46,7 +46,7 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
           m: 0,
           opacity: 0.5,
           p: '2px',
-          transition: 'all 0.2s ease-in-out',
+          transition: 'all 0.1s ease-in-out',
           '&:hover': {
             backgroundColor: 'transparent',
             opacity: 1,

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -8,7 +8,7 @@ const commonIconButtonStyles = {
   height: '2rem',
   ml: '10px',
   opacity: 0.5,
-  transition: 'opacity 0.2s',
+  transition: 'opacity 0.1s',
   width: '2rem',
   '&:hover': {
     opacity: 1,

package/src/column.utils.ts

@@ -164,8 +164,12 @@ export const getDefaultColumnFilterFn = <
   columnDef: MRT_ColumnDef<TData>,
 ): MRT_FilterOption => {
   if (columnDef.filterVariant === 'multi-select') return 'arrIncludesSome';
-  if (columnDef.filterVariant === 'select') return 'equals';
   if (columnDef.filterVariant === 'range') return 'betweenInclusive';
+  if (
+    columnDef.filterVariant === 'select' ||
+    columnDef.filterVariant === 'checkbox'
+  )
+    return 'equals';
   return 'fuzzy';
 };
 
@@ -204,7 +208,7 @@ export const getCommonCellStyles = ({
 }) => ({
   backgroundColor:
     column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-      ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
+      ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
       : 'inherit',
   backgroundImage: 'inherit',
   boxShadow: getIsLastLeftPinnedColumn(table, column)
@@ -229,7 +233,7 @@ export const getCommonCellStyles = ({
     column.getIsPinned() === 'right'
       ? `${getTotalRight(table, column)}px`
       : undefined,
-  transition: `all ${column.getIsResizing() ? 0 : '0.2s'} ease-in-out`,
+  transition: `all ${column.getIsResizing() ? 0 : '0.1s'} ease-in-out`,
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),
@@ -237,3 +241,24 @@ export const getCommonCellStyles = ({
   minWidth: `max(${column.getSize()}px, ${column.columnDef.minSize ?? 30}px)`,
   width: header?.getSize() ?? column.getSize(),
 });
+
+export const MRT_DefaultColumn = {
+  minSize: 40,
+  maxSize: 1000,
+  size: 180,
+};
+
+export const MRT_DefaultDisplayColumn: Partial<MRT_ColumnDef> = {
+  columnDefType: 'display',
+  enableClickToCopy: false,
+  enableColumnActions: false,
+  enableColumnDragging: false,
+  enableColumnFilter: false,
+  enableColumnOrdering: false,
+  enableEditing: false,
+  enableGlobalFilter: false,
+  enableGrouping: false,
+  enableHiding: false,
+  enableResizing: false,
+  enableSorting: false,
+};

package/src/footer/MRT_TableFooter.tsx

@@ -29,7 +29,7 @@ export const MRT_TableFooter: FC<Props> = ({ table }) => {
       sx={(theme) => ({
         backgroundColor: lighten(theme.palette.background.default, 0.06),
         bottom: stickFooter ? 0 : undefined,
-        opacity: stickFooter ? 0.95 : undefined,
+        opacity: stickFooter ? 0.97 : undefined,
         outline: stickFooter
           ? theme.palette.mode === 'light'
             ? `1px solid ${theme.palette.grey[300]}`

package/src/head/MRT_TableHead.tsx

@@ -10,7 +10,7 @@ interface Props {
 export const MRT_TableHead: FC<Props> = ({ table }) => {
   const {
     getHeaderGroups,
-    options: { muiTableHeadProps },
+    options: { enableStickyHeader, muiTableHeadProps },
   } = table;
 
   const tableHeadProps =
@@ -19,7 +19,15 @@ export const MRT_TableHead: FC<Props> = ({ table }) => {
       : muiTableHeadProps;
 
   return (
-    <TableHead {...tableHeadProps}>
+    <TableHead
+      {...tableHeadProps}
+      sx={(theme) => ({
+        opacity: enableStickyHeader ? 0.97 : undefined,
+        ...(tableHeadProps?.sx instanceof Function
+          ? tableHeadProps?.sx(theme)
+          : (tableHeadProps?.sx as any)),
+      })}
+    >
       {getHeaderGroups().map((headerGroup) => (
         <MRT_TableHeadRow
           headerGroup={headerGroup as any}

package/src/head/MRT_TableHeadCell.tsx

@@ -145,9 +145,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
           sx={{
             alignItems: 'flex-start',
             display: 'flex',
+            flexDirection:
+              tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
             justifyContent:
               tableCellProps?.align === 'right'
-                ? 'flex-end'
+                ? 'flex-start'
                 : columnDefType === 'group' ||
                   tableCellProps?.align === 'center'
                 ? 'center'
@@ -165,6 +167,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
                   ? 'pointer'
                   : undefined,
               display: 'flex',
+              flexDirection:
+                tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
               flexWrap: 'nowrap',
               m: tableCellProps?.align === 'center' ? 'auto' : undefined,
               pl:
@@ -177,7 +181,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
           >
             {headerElement}
             {column.getCanSort() && (
-              <MRT_TableHeadCellSortLabel header={header} table={table} />
+              <MRT_TableHeadCellSortLabel
+                header={header}
+                table={table}
+                tableCellProps={tableCellProps}
+              />
             )}
             {column.getCanFilter() && (
               <MRT_TableHeadCellFilterLabel header={header} table={table} />

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -66,7 +66,7 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
             height: '2rem',
             mt: '-0.2rem',
             opacity: 0.5,
-            transition: 'opacity 0.2s',
+            transition: 'opacity 0.1s',
             width: '2rem',
             '&:hover': {
               opacity: 1,

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -3,6 +3,7 @@ import { Collapse } from '@mui/material';
 import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_Header, MRT_TableInstance } from '..';
+import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
 
 interface Props {
   header: MRT_Header;
@@ -20,9 +21,12 @@ export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
 
   return (
     <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
-      {['between', 'betweenInclusive', 'inNumberRange'].includes(
-        columnDef._filterFn,
-      ) ? (
+      {columnDef.filterVariant === 'checkbox' ? (
+        <MRT_FilterCheckbox column={column} table={table} />
+      ) : columnDef.filterVariant === 'range' ||
+        ['between', 'betweenInclusive', 'inNumberRange'].includes(
+          columnDef._filterFn,
+        ) ? (
         <MRT_FilterRangeFields header={header} table={table} />
       ) : (
         <MRT_FilterTextField header={header} table={table} />

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -42,7 +42,11 @@ export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
     iconButtonProps?.onDragStart?.(event);
     setDraggingColumn(column);
-    event.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
+    event.dataTransfer.setDragImage(
+      tableHeadCellRef.current as HTMLElement,
+      0,
+      0,
+    );
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -32,7 +32,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
         position: 'absolute',
         right: '1px',
         touchAction: 'none',
-        transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
+        transition: column.getIsResizing() ? undefined : 'all 0.1s ease-in-out',
         userSelect: 'none',
         zIndex: 4,
         '&:active': {

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -1,13 +1,18 @@
 import React, { FC } from 'react';
-import { TableSortLabel, Tooltip } from '@mui/material';
+import { TableCellProps, TableSortLabel, Tooltip } from '@mui/material';
 import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
   table: MRT_TableInstance;
+  tableCellProps?: TableCellProps;
 }
 
-export const MRT_TableHeadCellSortLabel: FC<Props> = ({ header, table }) => {
+export const MRT_TableHeadCellSortLabel: FC<Props> = ({
+  header,
+  table,
+  tableCellProps,
+}) => {
   const {
     options: { localization },
   } = table;
@@ -32,7 +37,10 @@ export const MRT_TableHeadCellSortLabel: FC<Props> = ({ header, table }) => {
         }
         sx={{
           width: '2ch',
-          transform: 'translateX(-0.5ch)',
+          transform:
+            tableCellProps?.align !== 'right'
+              ? 'translateX(-0.5ch)'
+              : undefined,
         }}
       />
     </Tooltip>

package/src/index.tsx

@@ -3,23 +3,26 @@ export default MaterialReactTable;
 export * from './MaterialReactTable';
 
 import type { MRT_Icons } from './icons';
-import type { MRT_Localization } from './localization';
-export type { MRT_Localization, MRT_Icons };
+export type { MRT_Icons };
 
 import { MRT_CopyButton } from './buttons/MRT_CopyButton';
 import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
 import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
 import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
+import { MRT_TablePagination } from './toolbar/MRT_TablePagination';
 import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
+import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
 
 export {
+  MRT_CopyButton,
   MRT_FullScreenToggleButton,
   MRT_GlobalFilterTextField,
   MRT_ShowHideColumnsButton,
+  MRT_TablePagination,
   MRT_ToggleDensePaddingButton,
   MRT_ToggleFiltersButton,
   MRT_ToggleGlobalFilterButton,
-  MRT_CopyButton,
+  MRT_ToolbarInternalButtons,
 };

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -0,0 +1,96 @@
+import React, { FC } from 'react';
+import {
+  Checkbox,
+  CheckboxProps,
+  FormControlLabel,
+  Tooltip,
+} from '@mui/material';
+import type { MRT_Column, MRT_TableInstance } from '..';
+
+interface Props {
+  column: MRT_Column;
+  table: MRT_TableInstance;
+}
+
+export const MRT_FilterCheckbox: FC<Props> = ({ column, table }) => {
+  const {
+    getState,
+    options: { localization, muiTableHeadCellFilterCheckboxProps },
+  } = table;
+  const { density } = getState();
+  const { columnDef } = column;
+
+  const mTableHeadCellFilterCheckboxProps =
+    muiTableHeadCellFilterCheckboxProps instanceof Function
+      ? muiTableHeadCellFilterCheckboxProps({
+          column,
+          table,
+        })
+      : muiTableHeadCellFilterCheckboxProps;
+
+  const mcTableHeadCellFilterCheckboxProps =
+    columnDef.muiTableHeadCellFilterCheckboxProps instanceof Function
+      ? columnDef.muiTableHeadCellFilterCheckboxProps({
+          column,
+          table,
+        })
+      : columnDef.muiTableHeadCellFilterCheckboxProps;
+
+  const checkboxProps = {
+    ...mTableHeadCellFilterCheckboxProps,
+    ...mcTableHeadCellFilterCheckboxProps,
+  } as CheckboxProps;
+
+  const filterLabel = localization.filterByColumn?.replace(
+    '{column}',
+    columnDef.header,
+  );
+
+  return (
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
+      title={checkboxProps?.title ?? filterLabel}
+    >
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={column.getFilterValue() === 'true'}
+            indeterminate={column.getFilterValue() === undefined}
+            color={
+              column.getFilterValue() === undefined ? 'default' : 'primary'
+            }
+            size={density === 'compact' ? 'small' : 'medium'}
+            {...checkboxProps}
+            onClick={(e) => {
+              e.stopPropagation();
+              checkboxProps?.onClick?.(e);
+            }}
+            onChange={(e, checked) => {
+              column.setFilterValue(
+                column.getFilterValue() === undefined
+                  ? 'true'
+                  : column.getFilterValue() === 'true'
+                  ? 'false'
+                  : undefined,
+              );
+              checkboxProps?.onChange?.(e, checked);
+            }}
+            sx={(theme) => ({
+              height: '2.5rem',
+              width: '2.5rem',
+              ...(checkboxProps?.sx instanceof Function
+                ? checkboxProps.sx(theme)
+                : (checkboxProps?.sx as any)),
+            })}
+          />
+        }
+        disableTypography
+        label={checkboxProps.title ?? filterLabel}
+        sx={{ color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }}
+        title={undefined}
+      />
+    </Tooltip>
+  );
+};

package/src/inputs/MRT_FilterTextField.tsx

@@ -3,6 +3,7 @@ import React, {
   FC,
   MouseEvent,
   useCallback,
+  useEffect,
   useState,
 } from 'react';
 import {
@@ -117,10 +118,12 @@ export const MRT_FilterTextField: FC<Props> = ({
       (event: ChangeEvent<HTMLInputElement>) => {
         let value =
           textFieldProps.type === 'date'
-            ? new Date(event.target.value)
+            ? event.target.valueAsDate
+            : textFieldProps.type === 'number'
+            ? event.target.valueAsNumber
             : event.target.value;
         if (isRangeFilter) {
-          column.setFilterValue((old: [string, string | Date]) => {
+          column.setFilterValue((old: Array<string | Date | number | null>) => {
             const newFilterValues = old ?? ['', ''];
             newFilterValues[rangeFilterIndex as number] = value;
             return newFilterValues;
@@ -169,8 +172,16 @@ export const MRT_FilterTextField: FC<Props> = ({
     setAnchorEl(event.currentTarget);
   };
 
+  useEffect(() => {
+    if (column.getFilterValue() === undefined) {
+      handleClear();
+    }
+  }, [column.getFilterValue()]);
+
   if (columnDef.Filter) {
-    return <>{columnDef.Filter?.({ column, header, table })}</>;
+    return (
+      <>{columnDef.Filter?.({ column, header, rangeFilterIndex, table })}</>
+    );
   }
 
   return (
@@ -203,7 +214,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         }
         FormHelperTextProps={{
           sx: {
-            fontSize: '0.6rem',
+            fontSize: '0.75rem',
             lineHeight: '0.8rem',
             whiteSpace: 'nowrap',
           },
@@ -308,14 +319,13 @@ export const MRT_FilterTextField: FC<Props> = ({
         }}
         sx={(theme) => ({
           p: 0,
-          minWidth:
-            columnDef.filterVariant === 'range'
-              ? '90px'
-              : !filterChipLabel
-              ? '120px'
-              : 'auto',
+          minWidth: isRangeFilter
+            ? '100px'
+            : !filterChipLabel
+            ? '120px'
+            : 'auto',
           width: '100%',
-          '&	.MuiSelect-icon': {
+          '& .MuiSelect-icon': {
             mr: '1.5rem',
           },
           ...(textFieldProps?.sx instanceof Function

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -1,4 +1,10 @@
-import React, { ChangeEvent, MouseEvent, useCallback, useState } from 'react';
+import React, {
+  ChangeEvent,
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import {
   Collapse,
   debounce,
@@ -32,6 +38,11 @@ export const MRT_GlobalFilterTextField = <
   } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
+  const textFieldProps =
+    muiSearchTextFieldProps instanceof Function
+      ? muiSearchTextFieldProps({ table })
+      : muiSearchTextFieldProps;
+
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
 
@@ -56,10 +67,11 @@ export const MRT_GlobalFilterTextField = <
     setGlobalFilter(undefined);
   };
 
-  const textFieldProps =
-    muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ table })
-      : muiSearchTextFieldProps;
+  useEffect(() => {
+    if (globalFilter === undefined) {
+      handleClear();
+    }
+  }, [globalFilter]);
 
   return (
     <Collapse

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -42,10 +42,19 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
     >
       <Checkbox
         checked={
-          selectAll ? table.getIsAllRowsSelected() : row?.getIsSelected()
+          selectAll
+            ? selectAllMode === 'page'
+              ? table.getIsAllPageRowsSelected()
+              : table.getIsAllRowsSelected()
+            : row?.getIsSelected()
         }
         indeterminate={
-          selectAll ? table.getIsSomeRowsSelected() : row?.getIsSomeSelected()
+          selectAll
+            ? table.getIsSomeRowsSelected() &&
+              !(selectAllMode === 'page'
+                ? table.getIsAllPageRowsSelected()
+                : table.getIsAllRowsSelected())
+            : row?.getIsSomeSelected()
         }
         inputProps={{
           'aria-label': selectAll
@@ -53,11 +62,11 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
             : localization.toggleSelectRow,
         }}
         onChange={
-          !row
-            ? selectAllMode === 'all'
-              ? table.getToggleAllRowsSelectedHandler()
-              : table.getToggleAllPageRowsSelectedHandler()
-            : row.getToggleSelectedHandler()
+          row
+            ? row.getToggleSelectedHandler()
+            : selectAllMode === 'all'
+            ? table.getToggleAllRowsSelectedHandler()
+            : table.getToggleAllPageRowsSelectedHandler()
         }
         size={density === 'compact' ? 'small' : 'medium'}
         {...checkboxProps}

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -4,9 +4,9 @@ import type {
   MRT_FilterOption,
   MRT_Header,
   MRT_InternalFilterOption,
+  MRT_Localization,
   MRT_TableInstance,
 } from '..';
-import { MRT_Localization } from '../localization';
 
 export const mrtFilterOptions = (
   localization: MRT_Localization,

package/src/table/MRT_TablePaper.tsx

@@ -40,7 +40,7 @@ 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)),
@@ -59,13 +59,15 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
           : {}),
       }}
     >
-      {(enableTopToolbar && renderTopToolbar?.({ table })) ?? (
-        <MRT_TopToolbar table={table} />
-      )}
+      {enableTopToolbar &&
+        (renderTopToolbar instanceof Function
+          ? renderTopToolbar({ table })
+          : renderTopToolbar ?? <MRT_TopToolbar table={table} />)}
       <MRT_TableContainer table={table} />
-      {(enableBottomToolbar && renderBottomToolbar?.({ table })) ?? (
-        <MRT_BottomToolbar table={table} />
-      )}
+      {enableBottomToolbar &&
+        (renderBottomToolbar instanceof Function
+          ? renderBottomToolbar({ table })
+          : renderBottomToolbar ?? <MRT_BottomToolbar table={table} />)}
     </Paper>
   );
 };

package/src/table/MRT_TableRoot.tsx

@@ -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'],

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,