material-react-table 2.10.0 → 2.11.0

package/locales/vi/index.js

@@ -10,6 +10,7 @@ const MRT_Localization_VI = {
     changeSearchMode: 'Thay đổi chế độ tìm kiếm',
     clearFilter: 'Xoá bộ lọc',
     clearSearch: 'Xoá ô tìm kiếm',
+    clearSelection: 'Xoá lựa chọn',
     clearSort: 'Huỷ sắp xếp',
     clickToCopy: 'Nhấn vào để sao chép',
     copy: 'Sao chép',

package/locales/zh-Hans/index.esm.js

@@ -6,6 +6,7 @@ const MRT_Localization_ZH_HANS = {
     changeSearchMode: '更改搜索模式',
     clearFilter: '清除过滤',
     clearSearch: '清除搜索',
+    clearSelection: '清除选择',
     clearSort: '清除排序',
     clickToCopy: '点击以复制',
     copy: '复制',

package/locales/zh-Hans/index.js

@@ -10,6 +10,7 @@ const MRT_Localization_ZH_HANS = {
     changeSearchMode: '更改搜索模式',
     clearFilter: '清除过滤',
     clearSearch: '清除搜索',
+    clearSelection: '清除选择',
     clearSort: '清除排序',
     clickToCopy: '点击以复制',
     copy: '复制',

package/locales/zh-Hant/index.esm.js

@@ -6,6 +6,7 @@ const MRT_Localization_ZH_HANT = {
     changeSearchMode: '更改搜尋模式',
     clearFilter: '清除過濾',
     clearSearch: '清除搜尋',
+    clearSelection: '清除選擇',
     clearSort: '清除排序',
     clickToCopy: '點擊以複製',
     copy: '複製',

package/locales/zh-Hant/index.js

@@ -10,6 +10,7 @@ const MRT_Localization_ZH_HANT = {
     changeSearchMode: '更改搜尋模式',
     clearFilter: '清除過濾',
     clearSearch: '清除搜尋',
+    clearSelection: '清除選擇',
     clearSort: '清除排序',
     clickToCopy: '點擊以複製',
     copy: '複製',

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.10.0",
+  "version": "2.11.0",
   "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.",
@@ -66,22 +66,22 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.4.0",
-    "@mui/icons-material": "^5.15.6",
-    "@mui/material": "^5.15.6",
-    "@mui/x-date-pickers": "^6.19.2",
+    "@mui/icons-material": "^5.15.7",
+    "@mui/material": "^5.15.7",
+    "@mui/x-date-pickers": "^6.19.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.0.2",
-    "@storybook/addon-a11y": "^7.6.10",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/addon-storysource": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/react": "^7.6.10",
-    "@storybook/react-vite": "^7.6.10",
+    "@storybook/addon-a11y": "^7.6.12",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-interactions": "^7.6.12",
+    "@storybook/addon-links": "^7.6.12",
+    "@storybook/addon-storysource": "^7.6.12",
+    "@storybook/blocks": "^7.6.12",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-vite": "^7.6.12",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.11.10",
-    "@types/react": "^18.2.48",
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.52",
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
@@ -99,7 +99,7 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.0.2",
-    "storybook": "^7.6.10",
+    "storybook": "^7.6.12",
     "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
@@ -115,9 +115,9 @@
     "react-dom": ">=18.0"
   },
   "dependencies": {
-    "@tanstack/match-sorter-utils": "8.11.7",
-    "@tanstack/react-table": "8.11.7",
-    "@tanstack/react-virtual": "3.0.2",
+    "@tanstack/match-sorter-utils": "8.11.8",
+    "@tanstack/react-table": "8.11.8",
+    "@tanstack/react-virtual": "3.0.4",
     "highlight-words": "1.2.2"
   }
 }

package/src/components/MaterialReactTable.tsx

@@ -11,18 +11,18 @@ type TableInstanceProp<TData extends MRT_RowData> = {
   table: MRT_TableInstance<TData>;
 };
 
-type Props<TData extends MRT_RowData> = Xor<
+export type MaterialReactTableProps<TData extends MRT_RowData> = Xor<
   TableInstanceProp<TData>,
   MRT_TableOptions<TData>
 >;
 
 const isTableInstanceProp = <TData extends MRT_RowData>(
-  props: Props<TData>,
+  props: MaterialReactTableProps<TData>,
 ): props is TableInstanceProp<TData> =>
   (props as TableInstanceProp<TData>).table !== undefined;
 
 export const MaterialReactTable = <TData extends MRT_RowData>(
-  props: Props<TData>,
+  props: MaterialReactTableProps<TData>,
 ) => {
   let table: MRT_TableInstance<TData>;
 

package/src/components/body/MRT_TableBody.tsx

@@ -13,7 +13,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableBodyProps {
+export interface MRT_TableBodyProps<TData extends MRT_RowData>
+  extends TableBodyProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
 }
@@ -22,7 +23,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableBodyProps<TData>) => {
   const {
     getBottomRows,
     getIsSomeRowsPinned,

package/src/components/body/MRT_TableBodyCell.tsx

@@ -23,7 +23,8 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 
-interface Props<TData extends MRT_RowData> extends TableCellProps {
+export interface MRT_TableBodyCellProps<TData extends MRT_RowData>
+  extends TableCellProps {
   cell: MRT_Cell<TData>;
   numRows?: number;
   rowRef: RefObject<HTMLTableRowElement>;
@@ -40,7 +41,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   staticRowIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableBodyCellProps<TData>) => {
   const theme = useTheme();
   const {
     getState,
@@ -298,6 +299,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
               renderedCellValue: cell.renderValue() as any,
               row,
               rowRef,
+              staticColumnIndex,
               staticRowIndex,
               table,
             })

package/src/components/body/MRT_TableBodyCellValue.tsx

@@ -10,9 +10,10 @@ import highlightWords from 'highlight-words';
 
 const allowedTypes = ['string', 'number'];
 
-interface Props<TData extends MRT_RowData> {
+export interface MRT_TableBodyCellValueProps<TData extends MRT_RowData> {
   cell: MRT_Cell<TData>;
   rowRef?: RefObject<HTMLTableRowElement>;
+  staticColumnIndex?: number;
   staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
 }
@@ -20,9 +21,10 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
   cell,
   rowRef,
+  staticColumnIndex,
   staticRowIndex,
   table,
-}: Props<TData>) => {
+}: MRT_TableBodyCellValueProps<TData>) => {
   const {
     getState,
     options: { enableFilterMatchHighlighting },
@@ -113,6 +115,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
       renderedCellValue,
       row,
       rowRef,
+      staticColumnIndex,
       staticRowIndex,
       table,
     });

package/src/components/body/MRT_TableBodyRow.tsx

@@ -1,6 +1,6 @@
 import { type DragEvent, memo, useMemo, useRef } from 'react';
 import { type VirtualItem } from '@tanstack/react-virtual';
-import TableRow from '@mui/material/TableRow';
+import TableRow, { type TableRowProps } from '@mui/material/TableRow';
 import {
   type Theme,
   alpha,
@@ -27,7 +27,8 @@ import {
 } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> {
+export interface MRT_TableBodyRowProps<TData extends MRT_RowData>
+  extends TableRowProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   numRows?: number;
   pinnedRowIds?: string[];
@@ -47,7 +48,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   staticRowIndex,
   table,
   virtualRow,
-}: Props<TData>) => {
+  ...rest
+}: MRT_TableBodyRowProps<TData>) => {
   const theme = useTheme();
 
   const {
@@ -87,11 +89,14 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   const isDraggingRow = draggingRow?.id === row.id;
   const isHoveredRow = hoveredRow?.id === row.id;
 
-  const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
-    row,
-    staticRowIndex,
-    table,
-  });
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(muiTableBodyRowProps, {
+      row,
+      staticRowIndex,
+      table,
+    }),
+    ...rest,
+  };
 
   const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
     if (

package/src/components/body/MRT_TableBodyRowGrabHandle.tsx

@@ -8,7 +8,8 @@ import {
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_TableBodyRowGrabHandleProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   row: MRT_Row<TData>;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
@@ -19,7 +20,7 @@ export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
   rowRef,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableBodyRowGrabHandleProps<TData>) => {
   const {
     options: { muiRowDragHandleProps },
   } = table;
@@ -50,7 +51,7 @@ export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
 
   return (
     <MRT_GrabHandleButton
-      iconButtonProps={iconButtonProps}
+      {...iconButtonProps}
       location="row"
       onDragEnd={handleDragEnd}
       onDragStart={handleDragStart}

package/src/components/body/MRT_TableBodyRowPinButton.tsx

@@ -8,7 +8,8 @@ import {
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_RowPinButton } from '../buttons/MRT_RowPinButton';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_TableBodyRowPinButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -17,7 +18,7 @@ export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
   row,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableBodyRowPinButtonProps<TData>) => {
   const {
     getState,
     options: { enableRowPinning, rowPinningDisplayMode },

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -12,7 +12,8 @@ import {
 import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableCellProps {
+export interface MRT_TableDetailPanelProps<TData extends MRT_RowData>
+  extends TableCellProps {
   parentRowRef: RefObject<HTMLTableRowElement>;
   row: MRT_Row<TData>;
   rowVirtualizer?: MRT_RowVirtualizer;
@@ -29,7 +30,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
   table,
   virtualRow,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableDetailPanelProps<TData>) => {
   const {
     getState,
     getVisibleLeafColumns,

package/src/components/buttons/MRT_ColumnPinningButtons.tsx

@@ -8,7 +8,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends BoxProps {
+export interface MRT_ColumnPinningButtonsProps<TData extends MRT_RowData>
+  extends BoxProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -17,7 +18,7 @@ export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
   column,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ColumnPinningButtonsProps<TData>) => {
   const {
     options: {
       icons: { PushPinIcon },

package/src/components/buttons/MRT_CopyButton.tsx

@@ -9,7 +9,8 @@ import {
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends ButtonProps {
+export interface MRT_CopyButtonProps<TData extends MRT_RowData>
+  extends ButtonProps {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -18,7 +19,7 @@ export const MRT_CopyButton = <TData extends MRT_RowData>({
   cell,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_CopyButtonProps<TData>) => {
   const {
     options: { localization, muiCopyButtonProps },
   } = table;

package/src/components/buttons/MRT_EditActionButtons.tsx

@@ -10,7 +10,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends BoxProps {
+export interface MRT_EditActionButtonsProps<TData extends MRT_RowData>
+  extends BoxProps {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
   variant?: 'icon' | 'text';
@@ -21,7 +22,7 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
   table,
   variant = 'icon',
   ...rest
-}: Props<TData>) => {
+}: MRT_EditActionButtonsProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/buttons/MRT_ExpandAllButton.tsx

@@ -4,14 +4,15 @@ import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ExpandAllButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ExpandAllButtonProps<TData>) => {
   const {
     getCanSomeRowsExpand,
     getIsAllRowsExpanded,

package/src/components/buttons/MRT_ExpandButton.tsx

@@ -10,7 +10,8 @@ import {
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ExpandButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   row: MRT_Row<TData>;
   staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
@@ -20,7 +21,7 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
   row,
   staticRowIndex,
   table,
-}: Props<TData>) => {
+}: MRT_ExpandButtonProps<TData>) => {
   const theme = useTheme();
   const {
     getState,

package/src/components/buttons/MRT_GrabHandleButton.tsx

@@ -5,7 +5,8 @@ import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_GrabHandleButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   iconButtonProps?: IconButtonProps;
   location?: 'column' | 'row';
   onDragEnd: DragEventHandler<HTMLButtonElement>;
@@ -14,13 +15,10 @@ interface Props<TData extends MRT_RowData> extends IconButtonProps {
 }
 
 export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
-  iconButtonProps,
   location,
-  onDragEnd,
-  onDragStart,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_GrabHandleButtonProps<TData>) => {
   const {
     options: {
       icons: { DragHandleIcon },
@@ -28,25 +26,21 @@ export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
     },
   } = table;
 
-  const _iconButtonProps = { ...iconButtonProps, ...rest };
-
   return (
     <Tooltip
       {...getCommonTooltipProps('top')}
-      title={_iconButtonProps?.title ?? localization.move}
+      title={rest?.title ?? localization.move}
     >
       <IconButton
-        aria-label={_iconButtonProps.title ?? localization.move}
+        aria-label={rest.title ?? localization.move}
         disableRipple
         draggable="true"
         size="small"
-        {..._iconButtonProps}
+        {...rest}
         onClick={(e) => {
           e.stopPropagation();
-          _iconButtonProps?.onClick?.(e);
+          rest?.onClick?.(e);
         }}
-        onDragEnd={onDragEnd}
-        onDragStart={onDragStart}
         sx={(theme) => ({
           '&:active': {
             cursor: 'grabbing',
@@ -57,10 +51,10 @@ export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
           },
           cursor: 'grab',
           m: '0 -0.1rem',
-          opacity: location === 'row' ? 1 : 0.3,
+          opacity: location === 'row' ? 1 : 0.5,
           p: '2px',
           transition: 'all 150ms ease-in-out',
-          ...(parseFromValuesOrFunc(_iconButtonProps?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
         })}
         title={undefined}
       >

package/src/components/buttons/MRT_RowPinButton.tsx

@@ -10,7 +10,8 @@ import {
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_RowPinButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   pinningPosition: RowPinningPosition;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
@@ -21,7 +22,7 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
   row,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_RowPinButtonProps<TData>) => {
   const {
     options: {
       icons: { CloseIcon, PushPinIcon },

package/src/components/buttons/MRT_ShowHideColumnsButton.tsx

@@ -4,14 +4,15 @@ import Tooltip from '@mui/material/Tooltip';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ShowHideColumnsButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ShowHideColumnsButton = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ShowHideColumnsButtonProps<TData>) => {
   const {
     options: {
       icons: { ViewColumnIcon },

package/src/components/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -2,14 +2,15 @@ import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ToggleDensePaddingButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleDensePaddingButton = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToggleDensePaddingButtonProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/buttons/MRT_ToggleFiltersButton.tsx

@@ -2,14 +2,15 @@ import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ToggleFiltersButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleFiltersButton = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToggleFiltersButtonProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/buttons/MRT_ToggleFullScreenButton.tsx

@@ -3,14 +3,15 @@ import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ToggleFullScreenButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleFullScreenButton = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToggleFullScreenButtonProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -2,14 +2,15 @@ import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ToggleGlobalFilterButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleGlobalFilterButton = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToggleGlobalFilterButtonProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -23,7 +23,8 @@ const commonIconButtonStyles = {
   width: '2rem',
 };
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ToggleRowActionMenuButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   cell: MRT_Cell<TData>;
   row: MRT_Row<TData>;
   staticRowIndex?: number;
@@ -36,7 +37,7 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
   staticRowIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToggleRowActionMenuButtonProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/footer/MRT_TableFooter.tsx

@@ -7,7 +7,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableFooterProps {
+export interface MRT_TableFooterProps<TData extends MRT_RowData>
+  extends TableFooterProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
 }
@@ -16,7 +17,7 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableFooterProps<TData>) => {
   const {
     getFooterGroups,
     getState,