material-react-table 0.33.6 → 0.34.0

package/dist/esm/menus/MRT_FilterOptionMenu.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import type { MRT_Header, MRT_TableInstance } from '..';
 import { MRT_Localization } from '../localization';
 export declare const internalFilterOptions: (localization: MRT_Localization) => {
@@ -7,12 +6,12 @@ export declare const internalFilterOptions: (localization: MRT_Localization) =>
     label: string;
     divider: boolean;
 }[];
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;
     header?: MRT_Header;
     onSelect?: () => void;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
-    table: MRT_TableInstance;
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_FilterOptionMenu: FC<Props>;
+export declare const MRT_FilterOptionMenu: <TData extends Record<string, any> = {}>({ anchorEl, header, onSelect, setAnchorEl, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/esm/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,10 +1,9 @@
-import { FC } from 'react';
 import type { MRT_TableInstance } from '..';
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;
     isSubMenu?: boolean;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
-    table: MRT_TableInstance;
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_ShowHideColumnsMenu: FC<Props>;
+export declare const MRT_ShowHideColumnsMenu: <TData extends Record<string, any> = {}>({ anchorEl, isSubMenu, setAnchorEl, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/esm/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -1,12 +1,12 @@
-import { Dispatch, FC, SetStateAction } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import type { MRT_Column, MRT_TableInstance } from '..';
-interface Props {
-    allColumns: MRT_Column[];
-    column: MRT_Column;
-    currentHoveredColumn: MRT_Column | null;
+interface Props<TData extends Record<string, any> = {}> {
+    allColumns: MRT_Column<TData>[];
+    column: MRT_Column<TData>;
+    currentHoveredColumn: MRT_Column<TData> | null;
     isSubMenu?: boolean;
-    setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
-    table: MRT_TableInstance;
+    setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_ShowHideColumnsMenuItems: FC<Props>;
+export declare const MRT_ShowHideColumnsMenuItems: <TData extends Record<string, any> = {}>({ allColumns, currentHoveredColumn, setCurrentHoveredColumn, column, isSubMenu, table, }: Props<TData>) => JSX.Element;
 export {};

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { MaterialReactTableProps } from '..';
 export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => JSX.Element;

package/dist/esm/toolbar/MRT_ToolbarInternalButtons.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
 }

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import { Dispatch, SetStateAction, ReactNode, FocusEvent, ChangeEvent, DragEvent, FC } from 'react';
+import { Dispatch, SetStateAction, ReactNode, FocusEvent, ChangeEvent, DragEvent } from 'react';
 import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, ToolbarProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
-import { VirtualizerOptions } from '@tanstack/react-virtual';
+import { Options } from 'react-virtual';
 import * as _tanstack_table_core from '@tanstack/table-core';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 
@@ -652,23 +652,8 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    renderToolbarInternalActions?: ({ table, MRT_ToggleGlobalFilterButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
-        table: MRT_TableInstance<TData>;
-        MRT_ToggleGlobalFilterButton: FC<IconButtonProps & {
-            table: MRT_TableInstance<TData>;
-        }>;
-        MRT_ToggleFiltersButton: FC<IconButtonProps & {
-            table: MRT_TableInstance<TData>;
-        }>;
-        MRT_ShowHideColumnsButton: FC<IconButtonProps & {
-            table: MRT_TableInstance<TData>;
-        }>;
-        MRT_ToggleDensePaddingButton: FC<IconButtonProps & {
-            table: MRT_TableInstance<TData>;
-        }>;
-        MRT_FullScreenToggleButton: FC<IconButtonProps & {
-            table: MRT_TableInstance<TData>;
-        }>;
+    renderToolbarInternalActions?: ({ table, }: {
+        table: MRT_TableInstance<TData>;
     }) => ReactNode;
     renderTopToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
@@ -678,10 +663,40 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
     tableId?: string;
-    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | (({ table, }: {
+    virtualizerProps?: Partial<Options<HTMLDivElement>> | (({ table, }: {
         table: MRT_TableInstance<TData>;
-    }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
+    }) => Partial<Options<HTMLDivElement>>);
 };
 declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 
-export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_Localization, MRT_Row, MRT_RowModel, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MaterialReactTableProps, _default as default };
+interface Props$5<TData extends Record<string, any> = {}> extends IconButtonProps {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_FullScreenToggleButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$5<TData>) => JSX.Element;
+
+interface Props$4<TData extends Record<string, any> = {}> {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_GlobalFilterTextField: <TData extends Record<string, any> = {}>({ table, }: Props$4<TData>) => JSX.Element;
+
+interface Props$3<TData extends Record<string, any> = {}> extends IconButtonProps {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_ShowHideColumnsButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$3<TData>) => JSX.Element;
+
+interface Props$2<TData extends Record<string, any> = {}> extends IconButtonProps {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_ToggleDensePaddingButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$2<TData>) => JSX.Element;
+
+interface Props$1<TData extends Record<string, any> = {}> extends IconButtonProps {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_ToggleFiltersButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props$1<TData>) => JSX.Element;
+
+interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {
+    table: MRT_TableInstance<TData>;
+}
+declare const MRT_ToggleGlobalFilterButton: <TData extends Record<string, any> = {}>({ table, ...rest }: Props<TData>) => JSX.Element;
+
+export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_Localization, MRT_Row, MRT_RowModel, MRT_ShowHideColumnsButton, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTableProps, _default as default };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.33.6",
+  "version": "0.34.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.",
@@ -55,7 +55,7 @@
     "@emotion/styled": "^11.10.0",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.9.3",
+    "@mui/material": "^5.10.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.4",
@@ -68,7 +68,7 @@
     "@storybook/addon-storysource": "^6.5.10",
     "@storybook/addons": "^6.5.10",
     "@storybook/react": "^6.5.10",
-    "@types/react": "^18.0.15",
+    "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "^8.2.5",
     "eslint": "^8.21.0",
@@ -95,7 +95,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
-    "@tanstack/react-table": "8.5.10",
-    "@tanstack/react-virtual": "^3.0.0-beta.17"
+    "@tanstack/react-table": "8.5.11",
+    "react-virtual": "^2.10.4"
   }
 }

package/src/MaterialReactTable.tsx

@@ -2,7 +2,6 @@ import React, {
   ChangeEvent,
   Dispatch,
   DragEvent,
-  FC,
   FocusEvent,
   ReactNode,
   SetStateAction,
@@ -41,7 +40,8 @@ import type {
   TableOptions,
   TableState,
 } from '@tanstack/react-table';
-import type { VirtualizerOptions } from '@tanstack/react-virtual';
+import type { Options as VirtualizerOptions } from 'react-virtual';
+// import type { VirtualizerOptions } from '@tanstack/react-virtual';
 import { MRT_AggregationFns } from './aggregationFns';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FilterFns } from './filterFns';
@@ -779,28 +779,8 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     }) => ReactNode;
     renderToolbarInternalActions?: ({
       table,
-      MRT_ToggleGlobalFilterButton,
-      MRT_ToggleFiltersButton,
-      MRT_ShowHideColumnsButton,
-      MRT_ToggleDensePaddingButton,
-      MRT_FullScreenToggleButton,
     }: {
       table: MRT_TableInstance<TData>;
-      MRT_ToggleGlobalFilterButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
-      MRT_ToggleFiltersButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
-      MRT_ShowHideColumnsButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
-      MRT_ToggleDensePaddingButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
-      MRT_FullScreenToggleButton: FC<
-        IconButtonProps & { table: MRT_TableInstance<TData> }
-      >;
     }) => ReactNode;
     renderTopToolbarCustomActions?: ({
       table,
@@ -813,12 +793,19 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     state?: Partial<MRT_TableState<TData>>;
     tableId?: string;
     virtualizerProps?:
-      | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
+      | Partial<VirtualizerOptions<HTMLDivElement>>
       | (({
           table,
         }: {
           table: MRT_TableInstance<TData>;
-        }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
+        }) => Partial<VirtualizerOptions<HTMLDivElement>>);
+    // virtualizerProps?:
+    //   | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
+    //   | (({
+    //       table,
+    //     }: {
+    //       table: MRT_TableInstance<TData>;
+    //     }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
   };
 
 export default <TData extends Record<string, any> = {}>({

package/src/body/MRT_TableBody.tsx

@@ -1,5 +1,6 @@
 import React, { FC, RefObject, useMemo } from 'react';
-import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
+import { useVirtual } from 'react-virtual';
+// import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
@@ -23,7 +24,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
       virtualizerProps,
     },
   } = table;
-  const { density, globalFilter, pagination, sorting } = getState();
+  const { globalFilter, pagination, sorting } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
@@ -61,28 +62,47 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
     globalFilter,
   ]);
 
-  const rowVirtualizer: Virtualizer = enableRowVirtualization
-    ? useVirtualizer({
-        count: rows.length,
-        estimateSize: () => (density === 'compact' ? 20 : 50),
-        getScrollElement: () => tableContainerRef.current as HTMLDivElement,
-        overscan: 10,
+  const rowVirtualizer = enableRowVirtualization
+    ? useVirtual({
+        size: rows.length,
+        parentRef: tableContainerRef,
+        overscan: 15,
         ...vProps,
       })
     : ({} as any);
 
+  // const rowVirtualizer: Virtualizer = enableRowVirtualization
+  //   ? useVirtualizer({
+  //       count: rows.length,
+  //       estimateSize: () => (density === 'compact' ? 25 : 50),
+  //       getScrollElement: () => tableContainerRef.current as HTMLDivElement,
+  //       overscan: 15,
+  //       ...vProps,
+  //     })
+  //   : ({} as any);
+
   const virtualRows = enableRowVirtualization
-    ? rowVirtualizer.getVirtualItems()
+    ? rowVirtualizer.virtualItems
     : [];
 
+  // const virtualRows = enableRowVirtualization
+  //   ? rowVirtualizer.getVirtualItems()
+  //   : [];
+
   let paddingTop = 0;
   let paddingBottom = 0;
   if (enableRowVirtualization) {
     paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
     paddingBottom = !!virtualRows.length
-      ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+      ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
       : 0;
   }
+  // if (enableRowVirtualization) {
+  //   paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
+  //   paddingBottom = !!virtualRows.length
+  //     ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+  //     : 0;
+  // }
 
   return (
     <TableBody {...tableBodyProps}>
@@ -91,7 +111,6 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
           <td style={{ height: `${paddingTop}px` }} />
         </tr>
       )}
-      {/* @ts-ignore */}
       {(enableRowVirtualization ? virtualRows : rows).map(
         (rowOrVirtualRow: any, rowIndex: number) => {
           const row = enableRowVirtualization

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -1,13 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { Box, IconButton, Tooltip } from '@mui/material';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
-interface Props {
-  column: MRT_Column;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  column: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ColumnPinningButtons: FC<Props> = ({ column, table }) => {
+export const MRT_ColumnPinningButtons = <
+  TData extends Record<string, any> = {},
+>({
+  column,
+  table,
+}: Props<TData>) => {
   const {
     options: {
       icons: { PushPinIcon },

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FullScreenToggleButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_FullScreenToggleButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -1,20 +1,20 @@
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
-import React, { DragEventHandler, FC } from 'react';
+import React, { DragEventHandler } from 'react';
 import { MRT_TableInstance } from '..';
 
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
   iconButtonProps?: IconButtonProps;
   onDragStart: DragEventHandler<HTMLButtonElement>;
   onDragEnd: DragEventHandler<HTMLButtonElement>;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GrabHandleButton: FC<Props> = ({
+export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
   iconButtonProps,
   onDragEnd,
   onDragStart,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     options: {
       icons: { DragHandleIcon },

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,13 +1,19 @@
-import React, { FC, MouseEvent, useState } from 'react';
+import React, { MouseEvent, useState } from 'react';
 import { IconButton, Tooltip, IconButtonProps } from '@mui/material';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_ShowHideColumnsButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     options: {
       icons: { ViewColumnIcon },

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleDensePaddingButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_ToggleDensePaddingButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_ToggleFiltersButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleGlobalFilterButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_ToggleGlobalFilterButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/index.tsx

@@ -3,7 +3,21 @@ export default MaterialReactTable;
 export * from './MaterialReactTable';
 
 import type { MRT_Icons } from './icons';
-export type { MRT_Icons };
-
 import type { MRT_Localization } from './localization';
-export type { MRT_Localization };
+export type { MRT_Localization, MRT_Icons };
+
+import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
+import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
+import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
+import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
+import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
+import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
+
+export {
+  MRT_FullScreenToggleButton,
+  MRT_GlobalFilterTextField,
+  MRT_ShowHideColumnsButton,
+  MRT_ToggleDensePaddingButton,
+  MRT_ToggleFiltersButton,
+  MRT_ToggleGlobalFilterButton,
+};

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -1,6 +1,5 @@
 import React, {
   ChangeEvent,
-  FC,
   MouseEvent,
   useCallback,
   useState,
@@ -16,11 +15,15 @@ import {
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { MRT_TableInstance } from '..';
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GlobalFilterTextField: FC<Props> = ({ table }) => {
+export const MRT_GlobalFilterTextField = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+}: Props<TData>) => {
   const {
     getState,
     setGlobalFilter,

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box, Menu, MenuItem } from '@mui/material';
 import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
 import { MRT_Localization } from '../localization';
@@ -97,21 +97,21 @@ export const internalFilterOptions = (
   },
 ];
 
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
   anchorEl: HTMLElement | null;
   header?: MRT_Header;
   onSelect?: () => void;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterOptionMenu: FC<Props> = ({
+export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
   anchorEl,
   header,
   onSelect,
   setAnchorEl,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,22 +1,24 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import type { MRT_Column, MRT_TableInstance } from '..';
 import { getDefaultColumnOrderIds } from '../column.utils';
 
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsMenu: FC<Props> = ({
+export const MRT_ShowHideColumnsMenu = <
+  TData extends Record<string, any> = {},
+>({
   anchorEl,
   isSubMenu,
   setAnchorEl,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     getAllColumns,
     getAllLeafColumns,
@@ -60,10 +62,10 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     getCenterLeafColumns(),
     getLeftLeafColumns(),
     getRightLeafColumns(),
-  ]) as MRT_Column[];
+  ]) as MRT_Column<TData>[];
 
   const [currentHoveredColumn, setCurrentHoveredColumn] =
-    useState<MRT_Column | null>(null);
+    useState<MRT_Column<TData> | null>(null);
 
   return (
     <Menu