material-react-table 1.5.7 → 1.5.9

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/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.7",
+  "version": "1.5.9",
   "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/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/inputs/MRT_FilterTextField.tsx

@@ -242,7 +242,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         onChange={handleChange}
         onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
         select={isSelectFilter || isMultiSelectFilter}
-        value={filterValue}
+        value={filterValue ?? ''}
         variant="standard"
         InputProps={{
           startAdornment: showChangeModeButton ? (

package/src/table/MRT_Table.tsx

@@ -127,6 +127,7 @@ export const MRT_Table: FC<Props> = ({ table }) => {
       stickyHeader={enableStickyHeader || isFullScreen}
       {...tableProps}
       sx={(theme) => ({
+        borderCollapse: 'separate',
         display: layoutMode === 'grid' ? 'grid' : 'table',
         tableLayout:
           layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined,

package/src/table/MRT_TableRoot.tsx

@@ -314,7 +314,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     setShowAlertBanner: props.onShowAlertBannerChange ?? setShowAlertBanner,
     setShowFilters: props.onShowFiltersChange ?? setShowFilters,
     setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
-    setShowToolbarDropZone: props.onShowToolbarDropZoneChange ?? setShowToolbarDropZone,
+    setShowToolbarDropZone:
+      props.onShowToolbarDropZoneChange ?? setShowToolbarDropZone,
   } as MRT_TableInstance<TData>;
 
   if (props.tableInstanceRef) {

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: {

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: {