material-react-table 0.4.5 → 0.4.8

package/src/body/MRT_TableDetailPanel.tsx

@@ -5,8 +5,8 @@ import {
   TableCell as MuiTableCell,
   TableRow,
 } from '@mui/material';
-import { Row } from 'react-table';
 import { useMRT } from '../useMRT';
+import { MRT_Row } from '..';
 
 const TableCell = styled(MuiTableCell, {
   shouldForwardProp: (prop) => prop !== 'isExpanded',
@@ -18,16 +18,16 @@ const TableCell = styled(MuiTableCell, {
 }));
 
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
   const {
-    tableInstance,
-    renderDetailPanel,
-    muiTableDetailPanelProps,
     muiTableBodyRowProps,
+    muiTableDetailPanelProps,
     onDetailPanelClick,
+    renderDetailPanel,
+    tableInstance,
   } = useMRT();
 
   const mTableBodyRowProps =
@@ -37,27 +37,20 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
 
   const tableRowProps = {
     ...mTableBodyRowProps,
-    ...row.getToggleRowExpandedProps(),
+    ...row.getRowProps(),
     style: {
-      ...row.getToggleRowExpandedProps().style,
+      ...row.getRowProps().style,
       ...(mTableBodyRowProps?.style ?? {}),
     },
   };
 
-  const mTableDetailPanelProps =
+  const tableCellProps =
     muiTableDetailPanelProps instanceof Function
       ? muiTableDetailPanelProps(row)
       : muiTableDetailPanelProps;
 
-  const tableCellProps = {
-    ...mTableDetailPanelProps,
-    style: {
-      ...(mTableDetailPanelProps?.style ?? {}),
-    },
-  };
-
   return (
-    <TableRow hover {...tableRowProps}>
+    <TableRow {...tableRowProps}>
       <TableCell
         colSpan={tableInstance.visibleColumns.length + 10}
         isExpanded={row.isExpanded}

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,9 +1,7 @@
 import React, { FC } from 'react';
 import { IconButton, styled, Tooltip } from '@mui/material';
-import SaveIcon from '@mui/icons-material/Save';
-import CancelIcon from '@mui/icons-material/Cancel';
 import { useMRT } from '../useMRT';
-import { Row } from 'react-table';
+import { MRT_Row } from '..';
 
 const EditActionButtonWrappers = styled('div')({
   display: 'flex',
@@ -11,11 +9,12 @@ const EditActionButtonWrappers = styled('div')({
 });
 
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
   const {
+    icons: { CancelIcon, SaveIcon },
     localization,
     setCurrentEditingRow,
     onRowEditSubmit,
@@ -34,17 +33,17 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
 
   return (
     <EditActionButtonWrappers>
-      <Tooltip arrow title={localization?.rowActionButtonCancel ?? ''}>
+      <Tooltip arrow title={localization.rowActionButtonCancel}>
         <IconButton
-          aria-label={localization?.rowActionButtonCancel}
+          aria-label={localization.rowActionButtonCancel}
           onClick={handleCancel}
         >
           <CancelIcon />
         </IconButton>
       </Tooltip>
-      <Tooltip arrow title={localization?.rowActionButtonSave ?? ''}>
+      <Tooltip arrow title={localization.rowActionButtonSave}>
         <IconButton
-          aria-label={localization?.rowActionButtonSave}
+          aria-label={localization.rowActionButtonSave}
           color="info"
           onClick={handleSave}
         >

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,21 +1,18 @@
 import React, { FC } from 'react';
-import { IconButton, styled } from '@mui/material';
-import MuiArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import { IconButton } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 
-const ArrowRightIcon = styled(MuiArrowRightIcon, {
-  shouldForwardProp: (prop) => prop !== 'rotation',
-})<{ rotation?: number }>(({ rotation }) => ({
-  transform: `rotate(${rotation}deg)`,
-  transition: 'transform 0.2s',
-}));
-
 interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
-  const { tableInstance, localization, anyRowsExpanded, densePadding } =
-    useMRT();
+  const {
+    tableInstance,
+    localization,
+    anyRowsExpanded,
+    densePadding,
+    icons: { DoubleArrowDownIcon },
+  } = useMRT();
 
   return (
     <MRT_TableButtonCell
@@ -24,14 +21,16 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
       {...tableInstance.getToggleAllRowsExpandedProps()}
     >
       <IconButton
-        aria-label={localization?.expandAllButtonTitle}
-        title={localization?.expandAllButtonTitle}
+        aria-label={localization.expandAllButtonTitle}
+        title={localization.expandAllButtonTitle}
       >
-        <ArrowRightIcon
-          fontSize="small"
-          rotation={
-            tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
-          }
+        <DoubleArrowDownIcon
+          style={{
+            transform: `rotate(${
+              tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
+            }deg)`,
+            transition: 'transform 0.2s',
+          }}
         />
       </IconButton>
     </MRT_TableButtonCell>

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,9 +1,8 @@
 import React, { FC } from 'react';
 import { IconButton, styled } from '@mui/material';
-import { Row } from 'react-table';
-import MuiExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useMRT } from '../useMRT';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+import { MRT_Row } from '..';
 
 const TableCell = styled(MRT_TableButtonCell, {
   shouldForwardProp: (prop) => prop !== 'depth',
@@ -12,37 +11,37 @@ const TableCell = styled(MRT_TableButtonCell, {
   textAlign: 'left',
 }));
 
-const ExpandMoreIcon = styled(MuiExpandMoreIcon, {
-  shouldForwardProp: (prop) => prop !== 'rotation',
-})<{ rotation?: number }>(({ rotation }) => ({
-  transform: `rotate(${rotation}deg)`,
-  transition: 'transform 0.2s',
-}));
-
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
-  const { localization, densePadding, renderDetailPanel } = useMRT();
+  const {
+    densePadding,
+    icons: { ExpandMoreIcon },
+    localization,
+    renderDetailPanel,
+  } = useMRT();
 
   return (
     <TableCell size="small" densePadding={densePadding} depth={row.depth}>
       <IconButton
-        aria-label={localization?.expandButtonTitle}
+        aria-label={localization.expandButtonTitle}
         disabled={!row.canExpand && !renderDetailPanel}
-        title={localization?.expandButtonTitle}
+        title={localization.expandButtonTitle}
         {...row.getToggleRowExpandedProps()}
       >
         <ExpandMoreIcon
-          fontSize={row.canExpand || renderDetailPanel ? 'medium' : 'small'}
-          rotation={
-            !row.canExpand && !renderDetailPanel
-              ? -90
-              : row.isExpanded
-              ? -180
-              : 0
-          }
+          style={{
+            transform: `rotate(${
+              !row.canExpand && !renderDetailPanel
+                ? -90
+                : row.isExpanded
+                ? -180
+                : 0
+            }deg)`,
+            transition: 'transform 0.2s',
+          }}
         />
       </IconButton>
     </TableCell>

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,23 +1,26 @@
 import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import FilterListIcon from '@mui/icons-material/Fullscreen';
-import FilterListOffIcon from '@mui/icons-material/FullscreenExit';
 
 interface Props extends IconButtonProps {}
 
 export const MRT_FullScreenToggleButton: FC<Props> = ({ ...rest }) => {
-  const { localization, setFullScreen, fullScreen } = useMRT();
+  const {
+    fullScreen,
+    icons: { FullscreenExitIcon, FullscreenIcon },
+    localization,
+    setFullScreen,
+  } = useMRT();
 
   return (
-    <Tooltip arrow title={localization?.toggleFullScreenButtonTitle ?? ''}>
+    <Tooltip arrow title={localization.toggleFullScreenButtonTitle}>
       <IconButton
-        aria-label={localization?.toggleFilterButtonTitle}
+        aria-label={localization.toggleFilterButtonTitle}
         onClick={() => setFullScreen(!fullScreen)}
         size="small"
         {...rest}
       >
-        {fullScreen ? <FilterListOffIcon /> : <FilterListIcon />}
+        {fullScreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
       </IconButton>
     </Tooltip>
   );

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -8,9 +8,9 @@ import {
   Divider,
   IconButtonProps,
 } from '@mui/material';
-import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
+import { MRT_ColumnInstance } from '..';
 
 const MenuButtons = styled('div')({
   display: 'flex',
@@ -21,7 +21,11 @@ const MenuButtons = styled('div')({
 interface Props extends IconButtonProps {}
 
 export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
-  const { tableInstance, localization } = useMRT();
+  const {
+    tableInstance,
+    localization,
+    icons: { ViewColumnIcon },
+  } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -31,9 +35,9 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
 
   return (
     <>
-      <Tooltip arrow title={localization?.showHideColumnsButtonTitle ?? ''}>
+      <Tooltip arrow title={localization.showHideColumnsButtonTitle}>
         <IconButton
-          aria-label={localization?.showHideColumnsButtonTitle}
+          aria-label={localization.showHideColumnsButtonTitle}
           onClick={handleClick}
           size="small"
           {...rest}
@@ -54,17 +58,17 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
             }
             onClick={() => tableInstance.toggleHideAllColumns(true)}
           >
-            {localization?.columnShowHideMenuHideAll}
+            {localization.columnShowHideMenuHideAll}
           </Button>
           <Button
             disabled={tableInstance.getToggleHideAllColumnsProps().checked}
             onClick={() => tableInstance.toggleHideAllColumns(false)}
           >
-            {localization?.columnShowHideMenuShowAll}
+            {localization.columnShowHideMenuShowAll}
           </Button>
         </MenuButtons>
         <Divider />
-        {tableInstance.columns.map((column, index) => (
+        {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
           <MRT_ShowHideColumnsMenu
             key={`${index}-${column.id}`}
             column={column}

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -1,9 +1,8 @@
 import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { useMRT } from '../useMRT';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
-import { HeaderGroup } from 'react-table';
+import { MRT_HeaderGroup } from '..';
 
 const IconButton = styled(MuiIconButton)({
   opacity: 0.5,
@@ -17,11 +16,14 @@ const IconButton = styled(MuiIconButton)({
 });
 
 interface Props {
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
 }
 
 export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
-  const { localization } = useMRT();
+  const {
+    localization,
+    icons: { MoreVertIcon },
+  } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -37,10 +39,10 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
         arrow
         enterDelay={1000}
         enterNextDelay={1000}
-        title={localization?.columnActionMenuButtonTitle ?? ''}
+        title={localization.columnActionMenuButtonTitle}
       >
         <IconButton
-          aria-label={localization?.columnActionMenuButtonTitle}
+          aria-label={localization.columnActionMenuButtonTitle}
           onClick={handleClick}
           size="small"
         >

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,18 +1,21 @@
 import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import DensityMediumIcon from '@mui/icons-material/DensityMedium';
-import DensitySmallIcon from '@mui/icons-material/DensitySmall';
 
 interface Props extends IconButtonProps {}
 
 export const MRT_ToggleDensePaddingButton: FC<Props> = ({ ...rest }) => {
-  const { densePadding, setDensePadding, localization } = useMRT();
+  const {
+    densePadding,
+    setDensePadding,
+    localization,
+    icons: { DensityMediumIcon, DensitySmallIcon },
+  } = useMRT();
 
   return (
-    <Tooltip arrow title={localization?.toggleDensePaddingSwitchTitle ?? ''}>
+    <Tooltip arrow title={localization.toggleDensePaddingSwitchTitle}>
       <IconButton
-        aria-label={localization?.toggleDensePaddingSwitchTitle}
+        aria-label={localization.toggleDensePaddingSwitchTitle}
         onClick={() => setDensePadding(!densePadding)}
         size="small"
         {...rest}

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,18 +1,21 @@
 import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import FilterListIcon from '@mui/icons-material/FilterList';
-import FilterListOffIcon from '@mui/icons-material/FilterListOff';
 
 interface Props extends IconButtonProps {}
 
 export const MRT_ToggleFiltersButton: FC<Props> = ({ ...rest }) => {
-  const { localization, setShowFilters, showFilters } = useMRT();
+  const {
+    localization,
+    setShowFilters,
+    showFilters,
+    icons: { FilterListIcon, FilterListOffIcon },
+  } = useMRT();
 
   return (
-    <Tooltip arrow title={localization?.toggleFilterButtonTitle ?? ''}>
+    <Tooltip arrow title={localization.toggleFilterButtonTitle}>
       <IconButton
-        aria-label={localization?.toggleFilterButtonTitle}
+        aria-label={localization.toggleFilterButtonTitle}
         onClick={() => setShowFilters(!showFilters)}
         size="small"
         {...rest}

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,12 +1,10 @@
 import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import EditIcon from '@mui/icons-material/Edit';
 import { useMRT } from '../useMRT';
-import { Row } from 'react-table';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
 import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+import { MRT_Row } from '..';
 
 const IconButton = styled(MuiIconButton)({
   opacity: 0.5,
@@ -20,18 +18,19 @@ const IconButton = styled(MuiIconButton)({
 });
 
 interface Props {
-  row: Row;
+  row: MRT_Row;
 }
 
 export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   const {
     currentEditingRow,
     densePadding,
+    enableRowEditing,
+    icons: { EditIcon, MoreHorizIcon },
     localization,
     renderRowActionMenuItems,
-    enableRowEditing,
-    setCurrentEditingRow,
     renderRowActions,
+    setCurrentEditingRow,
     tableInstance,
   } = useMRT();
 
@@ -58,7 +57,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
         <Tooltip
           placement="right"
           arrow
-          title={localization?.rowActionMenuItemEdit ?? ''}
+          title={localization.rowActionMenuItemEdit}
         >
           <IconButton onClick={handleEdit}>
             <EditIcon />
@@ -67,8 +66,8 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
       ) : renderRowActionMenuItems ? (
         <>
           <IconButton
-            aria-label={localization?.rowActionMenuButtonTitle}
-            title={localization?.rowActionMenuButtonTitle}
+            aria-label={localization.rowActionMenuButtonTitle}
+            title={localization.rowActionMenuButtonTitle}
             onClick={handleOpenRowActionMenu}
             size="small"
           >

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -1,14 +1,17 @@
 import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import SearchIcon from '@mui/icons-material/Search';
-import SearchOffIcon from '@mui/icons-material/SearchOff';
 
 interface Props extends IconButtonProps {}
 
 export const MRT_ToggleSearchButton: FC<Props> = ({ ...rest }) => {
-  const { localization, setShowSearch, showSearch, muiSearchTextFieldProps } =
-    useMRT();
+  const {
+    icons: { SearchIcon, SearchOffIcon },
+    localization,
+    muiSearchTextFieldProps,
+    setShowSearch,
+    showSearch,
+  } = useMRT();
 
   const handleToggleSearch = () => {
     setShowSearch(!showSearch);
@@ -24,7 +27,7 @@ export const MRT_ToggleSearchButton: FC<Props> = ({ ...rest }) => {
   };
 
   return (
-    <Tooltip arrow title={localization?.toggleSearchButtonTitle ?? ''}>
+    <Tooltip arrow title={localization.toggleSearchButtonTitle}>
       <IconButton size="small" onClick={handleToggleSearch} {...rest}>
         {showSearch ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>

package/src/footer/MRT_TableFooter.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {}
 
@@ -10,7 +11,7 @@ export const MRT_TableFooter: FC<Props> = () => {
 
   return (
     <TableFooter {...muiTableFooterProps}>
-      {tableInstance.footerGroups.map((footerGroup) => (
+      {tableInstance.footerGroups.map((footerGroup: MRT_HeaderGroup) => (
         <MRT_TableFooterRow
           key={footerGroup.getFooterGroupProps().key}
           footerGroup={footerGroup}

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { styled, TableCell as MuiTableCell } from '@mui/material';
-import { HeaderGroup } from 'react-table';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 const TableCell = styled(MuiTableCell, {
   shouldForwardProp: (prop) =>
@@ -16,7 +16,7 @@ const TableCell = styled(MuiTableCell, {
 );
 
 interface Props {
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
 }
 
 export const MRT_TableFooterCell: FC<Props> = ({ column }) => {

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { TableRow } from '@mui/material';
-import { HeaderGroup } from 'react-table';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {
-  footerGroup: HeaderGroup;
+  footerGroup: MRT_HeaderGroup;
 }
 
 export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
@@ -53,7 +53,7 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup }) => {
         />
       )}
       {enableSelection && <MRT_TableSpacerCell width="1rem" />}
-      {footerGroup.headers.map((column) => (
+      {footerGroup.headers.map((column: MRT_HeaderGroup) => (
         <MRT_TableFooterCell
           key={column.getFooterProps().key}
           column={column}

package/src/head/MRT_TableHead.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { useMRT } from '../useMRT';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {}
 
@@ -15,7 +16,7 @@ export const MRT_TableHead: FC<Props> = () => {
 
   return (
     <TableHead {...tableHeadProps}>
-      {tableInstance.headerGroups.map((headerGroup) => (
+      {tableInstance.headerGroups.map((headerGroup: MRT_HeaderGroup) => (
         <MRT_TableHeadRow
           key={headerGroup.getHeaderGroupProps().key}
           headerGroup={headerGroup}

package/src/head/MRT_TableHeadCell.tsx

@@ -7,10 +7,10 @@ import {
   Collapse,
   Tooltip,
 } from '@mui/material';
-import { HeaderGroup } from 'react-table';
 import { useMRT } from '../useMRT';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
+import { MRT_HeaderGroup } from '..';
 
 export const MRT_StyledTableHeadCell = styled(MuiTableCell, {
   shouldForwardProp: (prop) =>
@@ -52,7 +52,7 @@ const Divider = styled(MuiDivider)({
 });
 
 interface Props {
-  column: HeaderGroup;
+  column: MRT_HeaderGroup;
 }
 
 export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
@@ -92,15 +92,15 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
 
   const sortTooltip = column.isSorted
     ? column.isSortedDesc
-      ? localization?.columnActionMenuItemClearSort ?? ''
-      : localization?.columnActionMenuItemSortDesc?.replace(
+      ? localization.columnActionMenuItemClearSort
+      : localization.columnActionMenuItemSortDesc?.replace(
           '{column}',
           column.Header as string,
-        ) ?? ''
-    : localization?.columnActionMenuItemSortAsc?.replace(
+        )
+    : localization.columnActionMenuItemSortAsc?.replace(
         '{column}',
         column.Header as string,
-      ) ?? '';
+      );
 
   return (
     <MRT_StyledTableHeadCell

package/src/head/MRT_TableHeadCellActions.tsx

@@ -12,7 +12,7 @@ export const MRT_TableHeadCellActions: FC<Props> = () => {
       densePadding={densePadding}
       style={{ textAlign: 'center' }}
     >
-      {localization?.actionsHeadColumnTitle}
+      {localization.actionsHeadColumnTitle}
     </MRT_StyledTableHeadCell>
   );
 };

package/src/head/MRT_TableHeadRow.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useMemo } from 'react';
 import { TableRow } from '@mui/material';
-import { HeaderGroup } from 'react-table';
 import {
   MRT_StyledTableHeadCell,
   MRT_TableHeadCell,
@@ -10,9 +9,10 @@ import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 import { MRT_TableHeadCellActions } from './MRT_TableHeadCellActions';
+import { MRT_HeaderGroup } from '..';
 
 interface Props {
-  headerGroup: HeaderGroup;
+  headerGroup: MRT_HeaderGroup;
 }
 
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
@@ -81,7 +81,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
           <MRT_TableSpacerCell width="1rem" />
         )
       ) : null}
-      {headerGroup.headers.map((column: HeaderGroup) => (
+      {headerGroup.headers.map((column: MRT_HeaderGroup) => (
         <MRT_TableHeadCell key={column.getHeaderProps().key} column={column} />
       ))}
       {(enableRowActions || enableRowEditing) &&