material-react-table 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/head/MRT_TableHeadCell.tsx

@@ -2,6 +2,7 @@ import { type DragEvent, useMemo } from 'react';
 import Box from '@mui/material/Box';
 import TableCell from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
+import { type Theme } from '@mui/material/styles';
 import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
@@ -9,7 +10,6 @@ import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { getCommonCellStyles } from '../column.utils';
-import { type Theme } from '@mui/material/styles';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
@@ -26,6 +26,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
   const {
     getState,
     options: {
+      columnFilterDisplayMode,
       enableColumnActions,
       enableColumnDragging,
       enableColumnOrdering,
@@ -50,7 +51,10 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
 
   const tableCellProps = {
     ...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
-    ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
+      column,
+      table,
+    }),
   };
 
   const showColumnActions =
@@ -205,14 +209,14 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
             <Box
               className="Mui-TableHeadCell-Content-Wrapper"
               sx={{
+                '&:hover': {
+                  textOverflow: 'clip',
+                },
                 minWidth: `${Math.min(columnDef.header?.length ?? 0, 5)}ch`,
                 overflow: columnDefType === 'data' ? 'hidden' : undefined,
                 textOverflow: 'ellipsis',
                 whiteSpace:
                   (columnDef.header?.length ?? 0) < 20 ? 'nowrap' : 'normal',
-                '&:hover': {
-                  textOverflow: 'clip',
-                },
               }}
               title={columnDefType === 'data' ? columnDef.header : undefined}
             >
@@ -256,7 +260,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
           )}
         </Box>
       )}
-      {column.getCanFilter() && (
+      {columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (
         <MRT_TableHeadCellFilterContainer header={header} table={table} />
       )}
     </TableCell>

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -1,8 +1,8 @@
 import { type MouseEvent, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -18,6 +18,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
 }: Props<TData>) => {
   const {
     options: {
+      columnFilterDisplayMode,
       icons: { MoreVertIcon },
       localization,
       muiColumnActionsButtonProps,
@@ -26,7 +27,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
   const { column } = header;
   const { columnDef } = column;
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
     event.stopPropagation();
@@ -60,15 +61,17 @@ export const MRT_TableHeadCellColumnActionsButton = <
           size="small"
           {...iconButtonProps}
           sx={(theme) => ({
+            '&:hover': {
+              opacity: 1,
+            },
             height: '2rem',
             m: '-8px -4px',
             opacity: 0.5,
-            transform: 'scale(0.85) translateX(-4px)',
+            transform: `scale(0.85) ${
+              columnFilterDisplayMode !== 'popover' ? 'translateX(-4px)' : ''
+            }`,
             transition: 'opacity 150ms',
             width: '2rem',
-            '&:hover': {
-              opacity: 1,
-            },
             ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -1,8 +1,8 @@
 import Collapse from '@mui/material/Collapse';
-import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
-import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
+import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
+import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -16,18 +16,25 @@ export const MRT_TableHeadCellFilterContainer = <
   header,
   table,
 }: Props<TData>) => {
-  const { getState } = table;
+  const {
+    getState,
+    options: { columnFilterDisplayMode },
+  } = table;
   const { showColumnFilters } = getState();
   const { column } = header;
   const { columnDef } = column;
 
   return (
-    <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
+    <Collapse
+      in={showColumnFilters || columnFilterDisplayMode === 'popover'}
+      mountOnEnter
+      unmountOnExit
+    >
       {columnDef.filterVariant === 'checkbox' ? (
         <MRT_FilterCheckbox column={column} table={table} />
       ) : columnDef.filterVariant === 'range-slider' ? (
         <MRT_FilterRangeSlider header={header} table={table} />
-      ) : columnDef.filterVariant === 'range' ||
+      ) : columnDef.filterVariant?.includes('range') ||
         ['between', 'betweenInclusive', 'inNumberRange'].includes(
           columnDef._filterFn,
         ) ? (

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -1,8 +1,10 @@
-import { type MouseEvent } from 'react';
+import { type MouseEvent, useState } from 'react';
 import Box from '@mui/material/Box';
 import Grow from '@mui/material/Grow';
 import IconButton from '@mui/material/IconButton';
+import Popover from '@mui/material/Popover';
 import Tooltip from '@mui/material/Tooltip';
+import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -11,13 +13,14 @@ interface Props<TData extends Record<string, any>> {
 }
 
 export const MRT_TableHeadCellFilterLabel = <
-  TData extends Record<string, any>,
+  TData extends Record<string, any> = {},
 >({
   header,
   table,
 }: Props<TData>) => {
   const {
     options: {
+      columnFilterDisplayMode,
       icons: { FilterAltIcon },
       localization,
     },
@@ -27,71 +30,113 @@ export const MRT_TableHeadCellFilterLabel = <
   const { column } = header;
   const { columnDef } = column;
 
+  const filterValue = column.getFilterValue();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const isFilterActive =
+    (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
+    (!!filterValue && !Array.isArray(filterValue));
+
   const isRangeFilter =
-    ['range', 'ranger-slider'].includes(columnDef.filterVariant ?? '') ||
+    columnDef.filterVariant?.includes('range') ||
     ['between', 'betweenInclusive', 'inNumberRange'].includes(
       columnDef._filterFn,
     );
   const currentFilterOption = columnDef._filterFn;
-  const filterTooltip = localization.filteringByColumn
-    .replace('{column}', String(columnDef.header))
-    .replace(
-      '{filterType}',
-      // @ts-ignore
-      localization[
-        `filter${
-          currentFilterOption?.charAt(0)?.toUpperCase() +
-          currentFilterOption?.slice(1)
-        }`
-      ],
-    )
-    .replace(
-      '{filterValue}',
-      `"${
-        Array.isArray(column.getFilterValue())
-          ? (column.getFilterValue() as [string, string]).join(
-              `" ${isRangeFilter ? localization.and : localization.or} "`,
-            )
-          : (column.getFilterValue() as string)
-      }"`,
-    )
-    .replace('" "', '');
+  const filterTooltip =
+    columnFilterDisplayMode === 'popover' && !isFilterActive
+      ? localization.filterByColumn?.replace(
+          '{column}',
+          String(columnDef.header),
+        )
+      : localization.filteringByColumn
+          .replace('{column}', String(columnDef.header))
+          .replace(
+            '{filterType}',
+            currentFilterOption
+              ? // @ts-ignore
+                localization[
+                  `filter${
+                    currentFilterOption?.charAt(0)?.toUpperCase() +
+                    currentFilterOption?.slice(1)
+                  }`
+                ]
+              : '',
+          )
+          .replace(
+            '{filterValue}',
+            `"${
+              Array.isArray(filterValue)
+                ? (filterValue as [string, string]).join(
+                    `" ${isRangeFilter ? localization.and : localization.or} "`,
+                  )
+                : (filterValue as string)
+            }"`,
+          )
+          .replace('" "', '');
 
   return (
-    <Grow
-      unmountOnExit
-      in={
-        (!!column.getFilterValue() && !isRangeFilter) ||
-        (isRangeFilter && // @ts-ignore
-          (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
-      }
-    >
-      <Box component="span" sx={{ flex: '0 0' }}>
-        <Tooltip arrow placement="top" title={filterTooltip}>
-          <IconButton
-            disableRipple
-            onClick={(event: MouseEvent<HTMLButtonElement>) => {
-              setShowColumnFilters(true);
-              queueMicrotask(() => {
-                filterInputRefs.current[`${column.id}-0`]?.focus();
-                filterInputRefs.current[`${column.id}-0`]?.select();
-              });
-              event.stopPropagation();
-            }}
-            size="small"
-            sx={{
-              height: '12px',
-              m: 0,
-              opacity: 0.8,
-              p: '2px',
-              transform: 'scale(0.66)',
-              width: '12px',
-            }}
-          >
-            <FilterAltIcon />
-          </IconButton>
-        </Tooltip>
-      </Box>
-    </Grow>
+    <>
+      <Grow
+        in={
+          columnFilterDisplayMode === 'popover' ||
+          (!!filterValue && !isRangeFilter) ||
+          (isRangeFilter && // @ts-ignore
+            (!!filterValue?.[0] || !!filterValue?.[1]))
+        }
+        unmountOnExit
+      >
+        <Box component="span" sx={{ flex: '0 0' }}>
+          <Tooltip arrow placement="top" title={filterTooltip}>
+            <IconButton
+              disableRipple
+              onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                if (columnFilterDisplayMode === 'popover') {
+                  setAnchorEl(event.currentTarget);
+                } else {
+                  setShowColumnFilters(true);
+                }
+                queueMicrotask(() => {
+                  filterInputRefs.current[`${column.id}-0`]?.focus();
+                  filterInputRefs.current[`${column.id}-0`]?.select();
+                });
+                event.stopPropagation();
+              }}
+              sx={{
+                height: '16px',
+                opacity: 0.8,
+                p: '8px',
+                transform: 'scale(0.75)',
+                width: '16px',
+              }}
+            >
+              <FilterAltIcon />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      </Grow>
+      <Popover
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          horizontal: 'center',
+          vertical: 'top',
+        }}
+        onClose={(event) => {
+          //@ts-ignore
+          event.stopPropagation();
+          setAnchorEl(null);
+        }}
+        open={!!anchorEl}
+        transformOrigin={{
+          horizontal: 'center',
+          vertical: 'bottom',
+        }}
+      >
+        <Box sx={{ p: '1rem' }}>
+          <MRT_TableHeadCellFilterContainer header={header} table={table} />
+        </Box>
+      </Popover>
+    </>
   );
 };

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -22,7 +22,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends Record<string, any>>({
     setHoveredColumn,
   } = table;
   const { columnDef } = column;
-  const { hoveredColumn, draggingColumn, columnOrder } = getState();
+  const { columnOrder, draggingColumn, hoveredColumn } = getState();
 
   const iconButtonProps = {
     ...parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table }),
@@ -62,8 +62,8 @@ export const MRT_TableHeadCellGrabHandle = <TData extends Record<string, any>>({
   return (
     <MRT_GrabHandleButton
       iconButtonProps={iconButtonProps}
-      onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
       table={table}
     />
   );

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -33,23 +33,23 @@ export const MRT_TableHeadCellResizeHandle = <
       }}
       onMouseDown={header.getResizeHandler()}
       onTouchStart={header.getResizeHandler()}
-      sx={(theme) => ({
-        cursor: 'col-resize',
-        mr: density === 'compact' ? '-0.75rem' : '-1rem',
-        position: 'absolute',
-        right: '4px',
-        px: '4px',
-        '&:active > hr': {
-          backgroundColor: theme.palette.info.main,
-          opacity: 1,
-        },
-      })}
       style={{
         transform:
           column.getIsResizing() && columnResizeMode === 'onEnd'
             ? `translateX(${getState().columnSizingInfo.deltaOffset ?? 0}px)`
             : undefined,
       }}
+      sx={(theme) => ({
+        '&:active > hr': {
+          backgroundColor: theme.palette.info.main,
+          opacity: 1,
+        },
+        cursor: 'col-resize',
+        mr: density === 'compact' ? '-0.75rem' : '-1rem',
+        position: 'absolute',
+        px: '4px',
+        right: '4px',
+      })}
     >
       <Divider
         className="Mui-TableHeadCell-ResizeHandle-Divider"

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -1,8 +1,8 @@
 import Badge from '@mui/material/Badge';
+import { type TableCellProps } from '@mui/material/TableCell';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
-import { type TableCellProps } from '@mui/material/TableCell';
 
 interface Props<TData extends Record<string, any>> {
   header: MRT_Header<TData>;
@@ -41,25 +41,25 @@ export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
         overlap="circular"
       >
         <TableSortLabel
-          aria-label={sortTooltip}
+          IconComponent={ArrowDownwardIcon}
           active={!!column.getIsSorted()}
+          aria-label={sortTooltip}
           direction={
             column.getIsSorted()
               ? (column.getIsSorted() as 'asc' | 'desc')
               : undefined
           }
+          onClick={(e) => {
+            e.stopPropagation();
+            header.column.getToggleSortingHandler()?.(e);
+          }}
           sx={{
             flex: '0 0',
-            width: '2.4ch',
             transform:
               tableCellProps?.align !== 'right'
                 ? 'translateX(-0.5ch)'
                 : undefined,
-          }}
-          IconComponent={ArrowDownwardIcon}
-          onClick={(e) => {
-            e.stopPropagation();
-            header.column.getToggleSortingHandler()?.(e);
+            width: '2.4ch',
           }}
         />
       </Badge>

package/src/head/MRT_TableHeadRow.tsx

@@ -1,13 +1,13 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableRow from '@mui/material/TableRow';
 import { alpha, lighten } from '@mui/material/styles';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import { type VirtualItem } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Header,
   type MRT_HeaderGroup,
   type MRT_TableInstance,
 } from '../types';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   headerGroup: MRT_HeaderGroup<TData>;

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -1,29 +1,29 @@
 import { type RefObject, useMemo } from 'react';
-import { showExpandColumn } from '../column.utils';
-import { MRT_TableBodyRowPinButton } from '../body/MRT_TableBodyRowPinButton';
 import { MRT_TableBodyRowGrabHandle } from '../body';
+import { MRT_TableBodyRowPinButton } from '../body/MRT_TableBodyRowPinButton';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
+import { showExpandColumn } from '../column.utils';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import {
   type MRT_ColumnDef,
   type MRT_ColumnOrderState,
-  type MRT_GroupingState,
   type MRT_DefinedTableOptions,
+  type MRT_GroupingState,
   type MRT_Row,
 } from '../types';
 
 interface Params<TData extends Record<string, any>> {
-  creatingRow: MRT_Row<TData> | null;
   columnOrder: MRT_ColumnOrderState;
+  creatingRow: MRT_Row<TData> | null;
   grouping: MRT_GroupingState;
   tableOptions: MRT_DefinedTableOptions<TData>;
 }
 
 export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
-  creatingRow,
   columnOrder,
+  creatingRow,
   grouping,
   tableOptions,
 }: Params<TData>) => {

package/src/hooks/useMRT_Effects.ts

@@ -12,10 +12,10 @@ export const useMRT_Effects = <TData extends Record<string, any> = {}>(
   const {
     globalFilter,
     isFullScreen,
-    pagination,
-    sorting,
     isLoading,
+    pagination,
     showSkeletons,
+    sorting,
   } = getState();
 
   const isMounted = useRef(false);
@@ -38,8 +38,8 @@ export const useMRT_Effects = <TData extends Record<string, any> = {}>(
         if (!previousTop.current) return;
         //restore scroll position
         window.scrollTo({
-          top: -1 * (previousTop.current as number),
           behavior: 'instant',
+          top: -1 * (previousTop.current as number),
         });
       }
     }

package/src/hooks/useMRT_TableInstance.ts

@@ -19,16 +19,14 @@ import {
   getDefaultColumnOrderIds,
   prepareColumns,
 } from '../column.utils';
-import { useMRT_DisplayColumns } from './useMRT_DisplayColumns';
-import { useMRT_Effects } from './useMRT_Effects';
 import {
   type MRT_Cell,
   type MRT_Column,
   type MRT_ColumnDef,
+  type MRT_ColumnFilterFnsState,
   type MRT_ColumnOrderState,
   type MRT_DefinedTableOptions,
   type MRT_DensityState,
-  type MRT_ColumnFilterFnsState,
   type MRT_FilterOption,
   type MRT_GroupingState,
   type MRT_Row,
@@ -36,6 +34,8 @@ import {
   type MRT_TableState,
   type MRT_Updater,
 } from '../types';
+import { useMRT_DisplayColumns } from './useMRT_DisplayColumns';
+import { useMRT_Effects } from './useMRT_Effects';
 
 export const useMRT_TableInstance: <TData extends Record<string, any>>(
   tableOptions: MRT_DefinedTableOptions<TData>,
@@ -104,10 +104,10 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     initialState.grouping ?? [],
   );
   const [hoveredColumn, setHoveredColumn] = useState<
-    MRT_Column<TData> | { id: string } | null
+    { id: string } | MRT_Column<TData> | null
   >(initialState.hoveredColumn ?? null);
   const [hoveredRow, setHoveredRow] = useState<
-    MRT_Row<TData> | { id: string } | null
+    { id: string } | MRT_Row<TData> | null
   >(initialState.hoveredRow ?? null);
   const [isFullScreen, setIsFullScreen] = useState<boolean>(
     initialState?.isFullScreen ?? false,
@@ -207,9 +207,9 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     getSortedRowModel: tableOptions.enableSorting
       ? getSortedRowModel()
       : undefined,
+    getSubRows: (row) => row?.subRows,
     onColumnOrderChange: setColumnOrder,
     onGroupingChange: setGrouping,
-    getSubRows: (row) => row?.subRows,
     ...tableOptions,
     //@ts-ignore
     columns: columnDefs,
@@ -217,9 +217,9 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     globalFilterFn: tableOptions.filterFns?.[globalFilterFn ?? 'fuzzy'],
     initialState,
     state: {
-      creatingRow,
       columnFilterFns,
       columnOrder,
+      creatingRow,
       density,
       draggingColumn,
       draggingRow,
@@ -248,23 +248,24 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     searchInputRef,
     // @ts-ignore
     tableContainerRef,
+    // @ts-ignore
+    tableFooterRef,
     tableHeadCellRefs,
     // @ts-ignore
+    tableHeadRef,
+    // @ts-ignore
     tablePaperRef,
     // @ts-ignore
     topToolbarRef,
-    // @ts-ignore
-    tableFooterRef,
-    // @ts-ignore
-    tableHeadRef,
   };
 
   const setCreatingRow = (row: MRT_Updater<MRT_Row<TData> | null | true>) => {
+    let _row = row;
     if (row === true) {
-      table.setCreatingRow(createRow(table));
-    } else {
-      _setCreatingRow(row as MRT_Row<TData> | null);
+      _row = createRow(table);
     }
+    tableOptions?.onCreatingRowChange?.(_row as MRT_Row<TData> | null) ??
+      _setCreatingRow(_row as MRT_Row<TData> | null);
   };
 
   table.setCreatingRow = setCreatingRow;

package/src/hooks/useMRT_TableOptions.ts

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 import { MRT_AggregationFns } from '../aggregationFns';
-import { MRT_FilterFns } from '../filterFns';
-import { MRT_SortingFns } from '../sortingFns';
 import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from '../column.utils';
-import { MRT_Localization_EN } from '../locales/en';
+import { MRT_FilterFns } from '../filterFns';
 import { MRT_Default_Icons } from '../icons';
+import { MRT_Localization_EN } from '../locales/en';
+import { MRT_SortingFns } from '../sortingFns';
 import { type MRT_DefinedTableOptions, type MRT_TableOptions } from '../types';
 
 export const useMRT_TableOptions: <TData extends Record<string, any>>(

package/src/icons.ts

@@ -13,8 +13,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
-import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -36,7 +36,6 @@ export interface MRT_Icons {
   DensityLargeIcon: any;
   DensityMediumIcon: any;
   DensitySmallIcon: any;
-  KeyboardDoubleArrowDownIcon: any;
   DragHandleIcon: any;
   DynamicFeedIcon: any;
   EditIcon: any;
@@ -46,6 +45,7 @@ export interface MRT_Icons {
   FilterListOffIcon: any;
   FullscreenExitIcon: any;
   FullscreenIcon: any;
+  KeyboardDoubleArrowDownIcon: any;
   MoreHorizIcon: any;
   MoreVertIcon: any;
   PushPinIcon: any;