@cutting/material-react-table 5.0.0-beta.2 → 5.1.0

package/src/components/buttons/MRT_EditActionButtons.tsx

@@ -1,18 +1,10 @@
-import { Box, type BoxProps } from '@mui/material';
-import { Button } from '@mui/material';
-import { CircularProgress } from '@mui/material';
-import { IconButton } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { Box, type BoxProps, Button, CircularProgress, IconButton, Tooltip } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 
-import {
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_EditValues, type MRT_Row, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_EditActionButtonsProps<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';
@@ -23,7 +15,7 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
   table,
   variant = 'icon',
   ...rest
-}: MRT_EditActionButtonsProps<TData>) => {
+}: MRT_EditActionButtonsProps<TData>): JSX.Element => {
   const {
     options: {
       icons: { CancelIcon, SaveIcon },
@@ -50,7 +42,7 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
       onEditingRowCancel?.({ row, table });
       setEditingRow(null);
     }
-    row._valuesCache = {} as any; //reset values cache
+    row._valuesCache = {}; //reset values cache
   };
 
   const handleSubmitRow = () => {
@@ -58,26 +50,23 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
     Object.values(editInputRefs.current ?? {})
       .filter((inputRef) => row.id === inputRef?.name?.split('_')?.[0])
       ?.forEach((input) => {
-        if (
-          input.value !== undefined &&
-          Object.hasOwn(row?._valuesCache as object, input.name)
-        ) {
+        if (input.value !== undefined && Object.hasOwn(row?._valuesCache as object, input.name)) {
           row._valuesCache[input.name] = input.value;
         }
       });
-    if (isCreating)
+    if (isCreating) {
       onCreatingRowSave?.({
         exitCreatingMode: () => setCreatingRow(null),
         row,
         table,
-        values: row._valuesCache,
+        values: row._valuesCache as MRT_EditValues<TData>,
       });
-    else if (isEditing) {
+    } else if (isEditing) {
       onEditingRowSave?.({
         exitEditingMode: () => setEditingRow(null),
         row,
         table,
-        values: row?._valuesCache,
+        values: row._valuesCache as MRT_EditValues<TData>,
       });
     }
   };
@@ -88,7 +77,7 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
       sx={(theme) => ({
         display: 'flex',
         gap: '0.75rem',
-        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as CSSObject),
       })}
     >
       {variant === 'icon' ? (
@@ -98,15 +87,9 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
               <CancelIcon />
             </IconButton>
           </Tooltip>
-          {((isCreating && onCreatingRowSave) ||
-            (isEditing && onEditingRowSave)) && (
+          {((isCreating && onCreatingRowSave) || (isEditing && onEditingRowSave)) && (
             <Tooltip title={localization.save}>
-              <IconButton
-                aria-label={localization.save}
-                color="info"
-                disabled={isSaving}
-                onClick={handleSubmitRow}
-              >
+              <IconButton aria-label={localization.save} color="info" disabled={isSaving} onClick={handleSubmitRow}>
                 {isSaving ? <CircularProgress size={18} /> : <SaveIcon />}
               </IconButton>
             </Tooltip>
@@ -117,12 +100,7 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
           <Button onClick={handleCancel} sx={{ minWidth: '100px' }}>
             {localization.cancel}
           </Button>
-          <Button
-            disabled={isSaving}
-            onClick={handleSubmitRow}
-            sx={{ minWidth: '100px' }}
-            variant="contained"
-          >
+          <Button disabled={isSaving} onClick={handleSubmitRow} sx={{ minWidth: '100px' }} variant="contained">
             {isSaving && <CircularProgress color="inherit" size={18} />}
             {localization.save}
           </Button>

package/src/components/buttons/MRT_ExpandAllButton.tsx

@@ -1,19 +1,18 @@
-import { IconButton, type IconButtonProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { IconButton, type IconButtonProps, Tooltip } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_ExpandAllButtonProps<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
-}: MRT_ExpandAllButtonProps<TData>) => {
+}: MRT_ExpandAllButtonProps<TData>): JSX.Element => {
   const {
     getCanSomeRowsExpand,
     getIsAllRowsExpanded,
@@ -40,33 +39,26 @@ export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
   return (
     <Tooltip
       {...getCommonTooltipProps()}
-      title={
-        iconButtonProps?.title ??
-        (isAllRowsExpanded ? localization.collapseAll : localization.expandAll)
-      }
+      title={iconButtonProps?.title ?? (isAllRowsExpanded ? localization.collapseAll : localization.expandAll)}
     >
       <span>
         <IconButton
           aria-label={localization.expandAll}
-          disabled={
-            isLoading || (!renderDetailPanel && !getCanSomeRowsExpand())
-          }
+          disabled={isLoading || (!renderDetailPanel && !getCanSomeRowsExpand())}
           onClick={() => toggleAllRowsExpanded(!isAllRowsExpanded)}
           {...iconButtonProps}
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             mt: density !== 'compact' ? '-0.25rem' : undefined,
             width: density === 'compact' ? '1.75rem' : '2.25rem',
-            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as CSSObject),
           })}
           title={undefined}
         >
           {iconButtonProps?.children ?? (
             <KeyboardDoubleArrowDownIcon
               style={{
-                transform: `rotate(${
-                  isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0
-                }deg)`,
+                transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
                 transition: 'transform 150ms',
               }}
             />

package/src/components/buttons/MRT_ExpandButton.tsx

@@ -1,18 +1,12 @@
-import { IconButton, type IconButtonProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+import { IconButton, type IconButtonProps, Tooltip } from '@mui/material';
+import { type CSSObject, useTheme } from '@mui/material/styles';
 import { type MouseEvent } from 'react';
 
-import {
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Row, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_ExpandButtonProps<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>;
@@ -22,7 +16,7 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
   row,
   staticRowIndex,
   table,
-}: MRT_ExpandButtonProps<TData>) => {
+}: MRT_ExpandButtonProps<TData>): JSX.Element => {
   const theme = useTheme();
   const {
     options: {
@@ -56,10 +50,7 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
     <Tooltip
       disableHoverListener={!canExpand && !detailPanel}
       {...getCommonTooltipProps()}
-      title={
-        iconButtonProps?.title ??
-        (isExpanded ? localization.collapse : localization.expand)
-      }
+      title={iconButtonProps?.title ?? (isExpanded ? localization.collapse : localization.expand)}
     >
       <span>
         <IconButton
@@ -70,11 +61,9 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             opacity: !canExpand && !detailPanel ? 0.3 : 1,
-            [theme.direction === 'rtl' || positionExpandColumn === 'last'
-              ? 'mr'
-              : 'ml']: `${row.depth * 16}px`,
+            [theme.direction === 'rtl' || positionExpandColumn === 'last' ? 'mr' : 'ml']: `${row.depth * 16}px`,
             width: density === 'compact' ? '1.75rem' : '2.25rem',
-            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as CSSObject),
           })}
           title={undefined}
         >
@@ -83,8 +72,7 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
               style={{
                 transform: `rotate(${
                   !canExpand && !renderDetailPanel
-                    ? positionExpandColumn === 'last' ||
-                      theme.direction === 'rtl'
+                    ? positionExpandColumn === 'last' || theme.direction === 'rtl'
                       ? 90
                       : -90
                     : isExpanded

package/src/components/buttons/MRT_GrabHandleButton.tsx

@@ -1,13 +1,12 @@
-import { IconButton, type IconButtonProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { IconButton, type IconButtonProps, Tooltip } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 import { type DragEventHandler } from 'react';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_GrabHandleButtonProps<TData extends MRT_RowData>
-  extends IconButtonProps {
+export interface MRT_GrabHandleButtonProps<TData extends MRT_RowData> extends IconButtonProps {
   iconButtonProps?: IconButtonProps;
   location?: 'column' | 'row';
   onDragEnd: DragEventHandler<HTMLButtonElement>;
@@ -19,7 +18,7 @@ export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
   location,
   table,
   ...rest
-}: MRT_GrabHandleButtonProps<TData>) => {
+}: MRT_GrabHandleButtonProps<TData>): JSX.Element => {
   const {
     options: {
       icons: { DragHandleIcon },
@@ -28,10 +27,7 @@ export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
   } = table;
 
   return (
-    <Tooltip
-      {...getCommonTooltipProps('top')}
-      title={rest?.title ?? localization.move}
-    >
+    <Tooltip {...getCommonTooltipProps('top')} title={rest?.title ?? localization.move}>
       <IconButton
         aria-label={rest.title ?? localization.move}
         disableRipple
@@ -55,7 +51,7 @@ export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
           opacity: location === 'row' ? 1 : 0.5,
           p: '2px',
           transition: 'all 150ms ease-in-out',
-          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as CSSObject),
         })}
         title={undefined}
       >

package/src/components/buttons/MRT_RowPinButton.tsx

@@ -1,18 +1,13 @@
-import { IconButton, type IconButtonProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { IconButton, type IconButtonProps, Tooltip } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 import { type RowPinningPosition } from '@tanstack/react-table';
 import { type MouseEvent, useState } from 'react';
 
-import {
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Row, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_RowPinButtonProps<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>;
@@ -23,7 +18,7 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
   row,
   table,
   ...rest
-}: MRT_RowPinButtonProps<TData>) => {
+}: MRT_RowPinButtonProps<TData>): JSX.Element => {
   const {
     options: {
       icons: { CloseIcon, PushPinIcon },
@@ -43,11 +38,7 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
   };
 
   return (
-    <Tooltip
-      {...getCommonTooltipProps()}
-      open={tooltipOpened}
-      title={isPinned ? localization.unpin : localization.pin}
-    >
+    <Tooltip {...getCommonTooltipProps()} open={tooltipOpened} title={isPinned ? localization.unpin : localization.pin}>
       <IconButton
         aria-label={localization.pin}
         onBlur={() => setTooltipOpened(false)}
@@ -60,7 +51,7 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
         sx={(theme) => ({
           height: '24px',
           width: '24px',
-          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as CSSObject),
         })}
       >
         {isPinned ? (
@@ -69,13 +60,7 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
           <PushPinIcon
             fontSize="small"
             style={{
-              transform: `rotate(${
-                rowPinningDisplayMode === 'sticky'
-                  ? 135
-                  : pinningPosition === 'top'
-                    ? 180
-                    : 0
-              }deg)`,
+              transform: `rotate(${rowPinningDisplayMode === 'sticky' ? 135 : pinningPosition === 'top' ? 180 : 0}deg)`,
             }}
           />
         )}

package/src/components/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,19 +1,17 @@
-import { IconButton, type IconButtonProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { IconButton, type IconButtonProps, Tooltip } from '@mui/material';
 import { type MouseEvent, useState } from 'react';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 
-export interface MRT_ShowHideColumnsButtonProps<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
-}: MRT_ShowHideColumnsButtonProps<TData>) => {
+}: MRT_ShowHideColumnsButtonProps<TData>): JSX.Element => {
   const {
     options: {
       icons: { ViewColumnIcon },
@@ -30,22 +28,11 @@ export const MRT_ShowHideColumnsButton = <TData extends MRT_RowData>({
   return (
     <>
       <Tooltip title={rest?.title ?? localization.showHideColumns}>
-        <IconButton
-          aria-label={localization.showHideColumns}
-          onClick={handleClick}
-          {...rest}
-          title={undefined}
-        >
+        <IconButton aria-label={localization.showHideColumns} onClick={handleClick} {...rest} title={undefined}>
           <ViewColumnIcon />
         </IconButton>
       </Tooltip>
-      {anchorEl && (
-        <MRT_ShowHideColumnsMenu
-          anchorEl={anchorEl}
-          setAnchorEl={setAnchorEl}
-          table={table}
-        />
-      )}
+      {anchorEl && <MRT_ShowHideColumnsMenu anchorEl={anchorEl} setAnchorEl={setAnchorEl} table={table} />}
     </>
   );
 };

package/src/components/buttons/MRT_ToggleDensePaddingButton.test.tsx

@@ -11,27 +11,19 @@ interface Person {
 
 const data: Person[] = [{ name: 'Alice' }];
 
-const columns = (): MRT_ColumnDef<Person>[] => [
-  { accessorKey: 'name', header: 'Name' },
-];
+const columns = (): MRT_ColumnDef<Person>[] => [{ accessorKey: 'name', header: 'Name' }];
 
 const bodyCellPadding = (container: HTMLElement) =>
-  getComputedStyle(
-    container.querySelector('tbody td') as HTMLElement,
-  ).getPropertyValue('padding');
+  getComputedStyle(container.querySelector('tbody td') as HTMLElement).getPropertyValue('padding');
 
 describe('density toggle', () => {
   test('changes body cell padding when clicked', async () => {
     const user = userEvent.setup();
-    const { container } = render(
-      <MaterialReactTable columns={columns()} data={data} />,
-    );
+    const { container } = render(<MaterialReactTable columns={columns()} data={data} />);
 
     const before = bodyCellPadding(container);
 
-    await user.click(
-      container.querySelector('[aria-label="Toggle density"]') as HTMLElement,
-    );
+    await user.click(container.querySelector('[aria-label="Toggle density"]') as HTMLElement);
 
     expect(bodyCellPadding(container)).not.toBe(before);
   });

package/src/components/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,17 +1,15 @@
-import { IconButton, type IconButtonProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { IconButton, type IconButtonProps, Tooltip } from '@mui/material';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-export interface MRT_ToggleDensePaddingButtonProps<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
-}: MRT_ToggleDensePaddingButtonProps<TData>) => {
+}: MRT_ToggleDensePaddingButtonProps<TData>): JSX.Element => {
   const {
     options: {
       icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon },
@@ -22,12 +20,7 @@ export const MRT_ToggleDensePaddingButton = <TData extends MRT_RowData>({
   const { density } = table.state;
 
   const handleToggleDensePadding = () => {
-    const nextDensity =
-      density === 'comfortable'
-        ? 'compact'
-        : density === 'compact'
-          ? 'spacious'
-          : 'comfortable';
+    const nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
     setDensity(nextDensity);
   };
 

package/src/components/buttons/MRT_ToggleFiltersButton.test.tsx

@@ -11,27 +11,18 @@ interface Person {
 
 const data: Person[] = [{ name: 'Alice' }];
 
-const columns = (): MRT_ColumnDef<Person>[] => [
-  { accessorKey: 'name', header: 'Name' },
-];
+const columns = (): MRT_ColumnDef<Person>[] => [{ accessorKey: 'name', header: 'Name' }];
 
-const filterInputCount = (container: HTMLElement) =>
-  container.querySelectorAll('thead input').length;
+const filterInputCount = (container: HTMLElement) => container.querySelectorAll('thead input').length;
 
 describe('filters toggle', () => {
   test('reveals the column filter inputs when clicked', async () => {
     const user = userEvent.setup();
-    const { container } = render(
-      <MaterialReactTable columns={columns()} data={data} />,
-    );
+    const { container } = render(<MaterialReactTable columns={columns()} data={data} />);
 
     expect(filterInputCount(container)).toBe(0);
 
-    await user.click(
-      container.querySelector(
-        '[aria-label="Show/Hide filters"]',
-      ) as HTMLElement,
-    );
+    await user.click(container.querySelector('[aria-label="Show/Hide filters"]') as HTMLElement);
 
     expect(filterInputCount(container)).toBeGreaterThan(0);
   });

package/src/components/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,17 +1,15 @@
-import { IconButton, type IconButtonProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { IconButton, type IconButtonProps, Tooltip } from '@mui/material';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-export interface MRT_ToggleFiltersButtonProps<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
-}: MRT_ToggleFiltersButtonProps<TData>) => {
+}: MRT_ToggleFiltersButtonProps<TData>): JSX.Element => {
   const {
     options: {
       icons: { FilterListIcon, FilterListOffIcon },

package/src/components/buttons/MRT_ToggleFullScreenButton.test.tsx

@@ -11,25 +11,17 @@ interface Person {
 
 const data: Person[] = [{ name: 'Alice' }];
 
-const columns = (): MRT_ColumnDef<Person>[] => [
-  { accessorKey: 'name', header: 'Name' },
-];
+const columns = (): MRT_ColumnDef<Person>[] => [{ accessorKey: 'name', header: 'Name' }];
 
 describe('full screen toggle', () => {
   test('fixes the table paper to the viewport when clicked', async () => {
     const user = userEvent.setup();
-    const { container } = render(
-      <MaterialReactTable columns={columns()} data={data} />,
-    );
+    const { container } = render(<MaterialReactTable columns={columns()} data={data} />);
 
     const paper = container.firstElementChild as HTMLElement;
     expect(getComputedStyle(paper).position).not.toBe('fixed');
 
-    await user.click(
-      container.querySelector(
-        '[aria-label="Toggle full screen"]',
-      ) as HTMLElement,
-    );
+    await user.click(container.querySelector('[aria-label="Toggle full screen"]') as HTMLElement);
 
     expect(getComputedStyle(paper).position).toBe('fixed');
   });

package/src/components/buttons/MRT_ToggleFullScreenButton.tsx

@@ -1,18 +1,16 @@
-import { IconButton, type IconButtonProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { IconButton, type IconButtonProps, Tooltip } from '@mui/material';
 import { useState } from 'react';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-export interface MRT_ToggleFullScreenButtonProps<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
-}: MRT_ToggleFullScreenButtonProps<TData>) => {
+}: MRT_ToggleFullScreenButtonProps<TData>): JSX.Element => {
   const {
     options: {
       icons: { FullscreenExitIcon, FullscreenIcon },
@@ -30,10 +28,7 @@ export const MRT_ToggleFullScreenButton = <TData extends MRT_RowData>({
   };
 
   return (
-    <Tooltip
-      open={tooltipOpened}
-      title={rest?.title ?? localization.toggleFullScreen}
-    >
+    <Tooltip open={tooltipOpened} title={rest?.title ?? localization.toggleFullScreen}>
       <IconButton
         aria-label={localization.toggleFullScreen}
         onBlur={() => setTooltipOpened(false)}

package/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -1,17 +1,15 @@
-import { IconButton, type IconButtonProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { IconButton, type IconButtonProps, Tooltip } from '@mui/material';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-export interface MRT_ToggleGlobalFilterButtonProps<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
-}: MRT_ToggleGlobalFilterButtonProps<TData>) => {
+}: MRT_ToggleGlobalFilterButtonProps<TData>): JSX.Element => {
   const {
     options: {
       icons: { SearchIcon, SearchOffIcon },