material-react-table 1.5.6 → 1.5.8

package/dist/esm/types/index.d.ts

@@ -16,4 +16,6 @@ import { MRT_ToolbarAlertBanner } from './toolbar/MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './toolbar/MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
 import { MRT_ToggleRowActionMenuButton } from './buttons/MRT_ToggleRowActionMenuButton';
-export { MRT_CopyButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_ToggleRowActionMenuButton, };
+import { MRT_TopToolbar } from './toolbar/MRT_TopToolbar';
+import { MRT_BottomToolbar } from './toolbar/MRT_BottomToolbar';
+export { MRT_CopyButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_ToggleRowActionMenuButton, MRT_TopToolbar, MRT_BottomToolbar, };

package/dist/esm/types/table/MRT_TableRoot.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_FilterOption, MRT_Row, MRT_TableInstance, MRT_TableState, MaterialReactTableProps, MRT_Localization } from '..';
+import type { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_FilterOption, MRT_Localization, MRT_Row, MRT_TableInstance, MRT_TableState, MaterialReactTableProps } from '..';
 export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: Omit<Partial<import("@tanstack/react-table").TableOptions<TData>>, "state" | "data" | "onStateChange" | "initialState" | "getRowId" | "columns" | "defaultColumn" | "globalFilterFn" | "enableRowSelection" | "expandRowsFn"> & {
     columnFilterModeOptions?: (string & MRT_FilterOption)[] | null | undefined;
     columns: MRT_ColumnDef<TData>[];

package/dist/esm/types/toolbar/MRT_BottomToolbar.d.ts

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_TableInstance } from '..';
-interface Props {
-    table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_BottomToolbar: FC<Props>;
+export declare const MRT_BottomToolbar: <TData extends Record<string, any> = {}>({ table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/esm/types/toolbar/MRT_LinearProgressBar.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_TableInstance } from '..';
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
     isTopToolbar: boolean;
-    table: MRT_TableInstance;
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_LinearProgressBar: FC<Props>;
+export declare const MRT_LinearProgressBar: <TData extends Record<string, any> = {}>({ isTopToolbar, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/esm/types/toolbar/MRT_TopToolbar.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_TableInstance } from '..';
 import type { Theme } from '@mui/material/styles';
 export declare const commonToolbarStyles: ({ theme }: {
@@ -15,8 +15,8 @@ export declare const commonToolbarStyles: ({ theme }: {
     transition: string;
     zIndex: number;
 };
-interface Props {
-    table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_TopToolbar: FC<Props>;
+export declare const MRT_TopToolbar: <TData extends Record<string, any> = {}>({ table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/index.d.ts

@@ -835,14 +835,14 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Part
 };
 declare const MaterialReactTable: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 
-interface Props$c<TData extends Record<string, any> = {}> {
+interface Props$e<TData extends Record<string, any> = {}> {
     cell: MRT_Cell<TData>;
     children: ReactNode;
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_CopyButton: <TData extends Record<string, any> = {}>({ cell, children, table, }: Props$c<TData>) => JSX.Element;
+declare const MRT_CopyButton: <TData extends Record<string, any> = {}>({ cell, children, table, }: Props$e<TData>) => JSX.Element;
 
-interface Props$b<TData extends Record<string, any> = {}> {
+interface Props$d<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;
     header?: MRT_Header<TData>;
     onSelect?: () => void;
@@ -850,65 +850,75 @@ interface Props$b<TData extends Record<string, any> = {}> {
     setFilterValue?: (filterValue: any) => void;
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_FilterOptionMenu: <TData extends Record<string, any> = {}>({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }: Props$b<TData>) => JSX.Element;
+declare const MRT_FilterOptionMenu: <TData extends Record<string, any> = {}>({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }: Props$d<TData>) => JSX.Element;
+
+interface Props$c<TData extends Record<string, any> = {}> extends IconButtonProps {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_FullScreenToggleButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$c<TData>) => JSX.Element;
+
+interface Props$b<TData extends Record<string, any> = {}> {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_GlobalFilterTextField: <TData extends Record<string, any> = {}>({ table, }: Props$b<TData>) => JSX.Element;
 
 interface Props$a<TData extends Record<string, any> = {}> extends IconButtonProps {
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_FullScreenToggleButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$a<TData>) => JSX.Element;
+declare const MRT_ShowHideColumnsButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$a<TData>) => JSX.Element;
 
 interface Props$9<TData extends Record<string, any> = {}> {
+    position?: 'top' | 'bottom';
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_GlobalFilterTextField: <TData extends Record<string, any> = {}>({ table, }: Props$9<TData>) => JSX.Element;
+declare const MRT_TablePagination: <TData extends Record<string, any> = {}>({ table, position, }: Props$9<TData>) => JSX.Element;
 
 interface Props$8<TData extends Record<string, any> = {}> extends IconButtonProps {
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_ShowHideColumnsButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$8<TData>) => JSX.Element;
+declare const MRT_ToggleDensePaddingButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$8<TData>) => JSX.Element;
 
-interface Props$7<TData extends Record<string, any> = {}> {
-    position?: 'top' | 'bottom';
+interface Props$7<TData extends Record<string, any> = {}> extends IconButtonProps {
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_TablePagination: <TData extends Record<string, any> = {}>({ table, position, }: Props$7<TData>) => JSX.Element;
+declare const MRT_ToggleFiltersButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$7<TData>) => JSX.Element;
 
 interface Props$6<TData extends Record<string, any> = {}> extends IconButtonProps {
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_ToggleDensePaddingButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$6<TData>) => JSX.Element;
+declare const MRT_ToggleGlobalFilterButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$6<TData>) => JSX.Element;
 
-interface Props$5<TData extends Record<string, any> = {}> extends IconButtonProps {
+interface Props$5<TData extends Record<string, any> = {}> {
+    stackAlertBanner: boolean;
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_ToggleFiltersButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$5<TData>) => JSX.Element;
+declare const MRT_ToolbarAlertBanner: <TData extends Record<string, any> = {}>({ stackAlertBanner, table, }: Props$5<TData>) => JSX.Element;
 
-interface Props$4<TData extends Record<string, any> = {}> extends IconButtonProps {
+interface Props$4<TData extends Record<string, any> = {}> {
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_ToggleGlobalFilterButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$4<TData>) => JSX.Element;
+declare const MRT_ToolbarDropZone: <TData extends Record<string, any> = {}>({ table, }: Props$4<TData>) => JSX.Element;
 
 interface Props$3<TData extends Record<string, any> = {}> {
-    stackAlertBanner: boolean;
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_ToolbarAlertBanner: <TData extends Record<string, any> = {}>({ stackAlertBanner, table, }: Props$3<TData>) => JSX.Element;
+declare const MRT_ToolbarInternalButtons: <TData extends Record<string, any> = {}>({ table, }: Props$3<TData>) => JSX.Element;
 
 interface Props$2<TData extends Record<string, any> = {}> {
+    cell: MRT_Cell<TData>;
+    row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_ToolbarDropZone: <TData extends Record<string, any> = {}>({ table, }: Props$2<TData>) => JSX.Element;
+declare const MRT_ToggleRowActionMenuButton: <TData extends Record<string, any> = {}>({ cell, row, table, }: Props$2<TData>) => JSX.Element;
 
 interface Props$1<TData extends Record<string, any> = {}> {
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_ToolbarInternalButtons: <TData extends Record<string, any> = {}>({ table, }: Props$1<TData>) => JSX.Element;
+declare const MRT_TopToolbar: <TData extends Record<string, any> = {}>({ table, }: Props$1<TData>) => JSX.Element;
 
 interface Props<TData extends Record<string, any> = {}> {
-    cell: MRT_Cell<TData>;
-    row: MRT_Row<TData>;
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_ToggleRowActionMenuButton: <TData extends Record<string, any> = {}>({ cell, row, table, }: Props<TData>) => JSX.Element;
+declare const MRT_BottomToolbar: <TData extends Record<string, any> = {}>({ table, }: Props<TData>) => JSX.Element;
 
-export { DensityState, MRT_AggregationFn, MRT_AggregationOption, MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TablePagination, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MaterialReactTableProps, MaterialReactTable as default };
+export { DensityState, MRT_AggregationFn, MRT_AggregationOption, MRT_BottomToolbar, MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_CopyButton, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_InternalFilterOption, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TablePagination, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTableProps, MaterialReactTable as default };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.6",
+  "version": "1.5.8",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/body/MRT_TableBodyRow.tsx

@@ -165,5 +165,5 @@ export const MRT_TableBodyRow: FC<Props> = ({
 
 export const Memo_MRT_TableBodyRow = memo(
   MRT_TableBodyRow,
-  (prev, next) => prev.row === next.row,
+  (prev, next) => (prev.row === next.row && prev.rowIndex === next.rowIndex),
 );

package/src/index.tsx

@@ -18,6 +18,8 @@ import { MRT_ToolbarAlertBanner } from './toolbar/MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './toolbar/MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
 import { MRT_ToggleRowActionMenuButton } from './buttons/MRT_ToggleRowActionMenuButton';
+import { MRT_TopToolbar } from './toolbar/MRT_TopToolbar';
+import { MRT_BottomToolbar } from './toolbar/MRT_BottomToolbar';
 
 export {
   MRT_CopyButton,
@@ -33,4 +35,6 @@ export {
   MRT_ToolbarDropZone,
   MRT_ToolbarInternalButtons,
   MRT_ToggleRowActionMenuButton,
+  MRT_TopToolbar,
+  MRT_BottomToolbar,
 };

package/src/table/MRT_TableRoot.tsx

@@ -32,11 +32,11 @@ import type {
   MRT_Column,
   MRT_ColumnDef,
   MRT_FilterOption,
+  MRT_Localization,
   MRT_Row,
   MRT_TableInstance,
   MRT_TableState,
   MaterialReactTableProps,
-  MRT_Localization,
 } from '..';
 
 export const MRT_TableRoot = <TData extends Record<string, any> = {}>(

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -10,11 +10,15 @@ import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { commonToolbarStyles } from './MRT_TopToolbar';
 import type { MRT_TableInstance } from '..';
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
+export const MRT_BottomToolbar = <
+  TData extends Record<string, any> = {},
+  >({
+      table,
+    }: Props<TData>) => {
   const {
     getState,
     options: {
@@ -42,11 +46,13 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
     <Toolbar
       variant="dense"
       {...toolbarProps}
-      ref={(ref: HTMLDivElement) => {
-        bottomToolbarRef.current = ref;
-        if (toolbarProps?.ref) {
-          // @ts-ignore
-          toolbarProps.ref.current = ref;
+      ref={(node: HTMLDivElement) => {
+        if (node) {
+          bottomToolbarRef.current = node;
+          if (toolbarProps?.ref) {
+            // @ts-ignore
+            toolbarProps.ref.current = node;
+          }
         }
       }}
       sx={(theme) =>

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -1,14 +1,19 @@
-import React, { FC } from 'react';
+import React from 'react';
 import Collapse from '@mui/material/Collapse';
 import LinearProgress from '@mui/material/LinearProgress';
 import type { MRT_TableInstance } from '..';
 
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
   isTopToolbar: boolean;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_LinearProgressBar: FC<Props> = ({ isTopToolbar, table }) => {
+export const MRT_LinearProgressBar = <
+  TData extends Record<string, any> = {},
+  >({
+      isTopToolbar,
+      table,
+    }: Props<TData>) => {
   const {
     options: { muiLinearProgressProps },
     getState,

package/src/toolbar/MRT_TopToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -25,11 +25,15 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   zIndex: 1,
 });
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TopToolbar: FC<Props> = ({ table }) => {
+export const MRT_TopToolbar = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: {