material-react-table 0.33.5 → 0.34.1

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

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,8 +1,8 @@
 import React, {
   Dispatch,
   DragEvent,
-  FC,
   SetStateAction,
+  useRef,
   useState,
 } from 'react';
 import {
@@ -18,23 +18,25 @@ import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { reorderColumn } from '../column.utils';
 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 const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
+export const MRT_ShowHideColumnsMenuItems = <
+  TData extends Record<string, any> = {},
+>({
   allColumns,
   currentHoveredColumn,
   setCurrentHoveredColumn,
   column,
   isSubMenu,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     getState,
     options: {
@@ -54,9 +56,9 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     (columnDefType === 'group' &&
       column.getLeafColumns().some((col) => col.getIsVisible()));
 
-  const handleToggleColumnHidden = (column: MRT_Column) => {
+  const handleToggleColumnHidden = (column: MRT_Column<TData>) => {
     if (columnDefType === 'group') {
-      column?.columns?.forEach?.((childColumn: MRT_Column) => {
+      column?.columns?.forEach?.((childColumn: MRT_Column<TData>) => {
         childColumn.toggleVisibility(!switchChecked);
       });
     } else {
@@ -64,7 +66,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     }
   };
 
-  const menuItemRef = React.useRef<HTMLElement>(null);
+  const menuItemRef = useRef<HTMLElement>(null);
 
   const [isDragging, setIsDragging] = useState(false);
 
@@ -172,7 +174,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           )}
         </Box>
       </MenuItem>
-      {column.columns?.map((c: MRT_Column, i) => (
+      {column.columns?.map((c: MRT_Column<TData>, i) => (
         <MRT_ShowHideColumnsMenuItems
           allColumns={allColumns}
           column={c}

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { Box } from '@mui/material';
 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';
-import { MRT_TableInstance } from '..';
-import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
+import type { MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
@@ -37,11 +37,6 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ table }) => {
       }}
     >
       {renderToolbarInternalActions?.({
-        MRT_FullScreenToggleButton,
-        MRT_ShowHideColumnsButton,
-        MRT_ToggleDensePaddingButton,
-        MRT_ToggleFiltersButton,
-        MRT_ToggleGlobalFilterButton,
         table,
       }) ?? (
         <>