@kissesses/mantine-react-table-open 9.0.3

package/src/hooks/useMRT_TableInstance.ts

@@ -0,0 +1,314 @@
+import { useMemo, useRef, useState } from 'react';
+
+import { useReactTable } from '@tanstack/react-table';
+
+import {
+  type MRT_Cell,
+  type MRT_Column,
+  type MRT_ColumnDef,
+  type MRT_ColumnFilterFnsState,
+  type MRT_ColumnOrderState,
+  type MRT_ColumnSizingInfoState,
+  type MRT_DefinedTableOptions,
+  type MRT_DensityState,
+  type MRT_FilterOption,
+  type MRT_GroupingState,
+  type MRT_PaginationState,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+  type MRT_TableInstance,
+  type MRT_TableState,
+  type MRT_Updater,
+} from '../types';
+import {
+  getAllLeafColumnDefs,
+  getColumnId,
+  getDefaultColumnFilterFn,
+  prepareColumns,
+} from '../utils/column.utils';
+import {
+  getDefaultColumnOrderIds,
+  showRowActionsColumn,
+  showRowDragColumn,
+  showRowExpandColumn,
+  showRowNumbersColumn,
+  showRowPinningColumn,
+  showRowSelectionColumn,
+  showRowSpacerColumn,
+} from '../utils/displayColumn.utils';
+import { createRow } from '../utils/tanstack.helpers';
+import { getMRT_RowActionsColumnDef } from './display-columns/getMRT_RowActionsColumnDef';
+import { getMRT_RowDragColumnDef } from './display-columns/getMRT_RowDragColumnDef';
+import { getMRT_RowExpandColumnDef } from './display-columns/getMRT_RowExpandColumnDef';
+import { getMRT_RowNumbersColumnDef } from './display-columns/getMRT_RowNumbersColumnDef';
+import { getMRT_RowPinningColumnDef } from './display-columns/getMRT_RowPinningColumnDef';
+import { getMRT_RowSelectColumnDef } from './display-columns/getMRT_RowSelectColumnDef';
+import { getMRT_RowSpacerColumnDef } from './display-columns/getMRT_RowSpacerColumnDef';
+import { useMRT_Effects } from './useMRT_Effects';
+
+/**
+ * The MRT hook that wraps the TanStack useReactTable hook and adds additional functionality
+ * @param definedTableOptions - table options with proper defaults set
+ * @returns the MRT table instance
+ */
+export const useMRT_TableInstance = <TData extends MRT_RowData>(
+  definedTableOptions: MRT_DefinedTableOptions<TData>,
+): MRT_TableInstance<TData> => {
+  'use no memo';
+  const lastSelectedRowId = useRef<null | string>(null);
+  const bottomToolbarRef = useRef<HTMLDivElement | null>(null);
+  const editInputRefs = useRef<Record<string, HTMLInputElement>>({});
+  const filterInputRefs = useRef<Record<string, HTMLInputElement>>({});
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const tableContainerRef = useRef<HTMLDivElement | null>(null);
+  const tableHeadCellRefs = useRef<Record<string, HTMLTableCellElement>>({});
+  const tablePaperRef = useRef<HTMLDivElement | null>(null);
+  const topToolbarRef = useRef<HTMLDivElement | null>(null);
+  const tableHeadRef = useRef<HTMLTableSectionElement | null>(null);
+  const tableFooterRef = useRef<HTMLTableSectionElement | null>(null);
+
+  //transform initial state with proper column order
+  const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
+    const initState = definedTableOptions.initialState ?? {};
+    initState.columnOrder =
+      initState.columnOrder ??
+      getDefaultColumnOrderIds({
+        ...definedTableOptions,
+        state: {
+          ...definedTableOptions.initialState,
+          ...definedTableOptions.state,
+        },
+      } as MRT_StatefulTableOptions<TData>);
+    initState.globalFilterFn = definedTableOptions.globalFilterFn ?? 'fuzzy';
+    return initState;
+  }, []);
+
+  definedTableOptions.initialState = initialState;
+
+  const [creatingRow, _setCreatingRow] = useState<MRT_Row<TData> | null>(
+    initialState.creatingRow ?? null,
+  );
+  const [columnFilterFns, setColumnFilterFns] =
+    useState<MRT_ColumnFilterFnsState>(() =>
+      Object.assign(
+        {},
+        ...getAllLeafColumnDefs(
+          definedTableOptions.columns as MRT_ColumnDef<TData>[],
+        ).map((col) => ({
+          [getColumnId(col)]:
+            col.filterFn instanceof Function
+              ? (col.filterFn.name ?? 'custom')
+              : (col.filterFn ??
+                initialState?.columnFilterFns?.[getColumnId(col)] ??
+                getDefaultColumnFilterFn(col)),
+        })),
+      ),
+    );
+  const [columnOrder, onColumnOrderChange] = useState<MRT_ColumnOrderState>(
+    initialState.columnOrder ?? [],
+  );
+  const [columnSizingInfo, onColumnSizingInfoChange] =
+    useState<MRT_ColumnSizingInfoState>(
+      initialState.columnSizingInfo ?? ({} as MRT_ColumnSizingInfoState),
+    );
+  const [density, setDensity] = useState<MRT_DensityState>(
+    initialState?.density ?? 'md',
+  );
+  const [draggingColumn, setDraggingColumn] =
+    useState<MRT_Column<TData> | null>(initialState.draggingColumn ?? null);
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<TData> | null>(
+    initialState.draggingRow ?? null,
+  );
+  const [editingCell, setEditingCell] = useState<MRT_Cell<TData> | null>(
+    initialState.editingCell ?? null,
+  );
+  const [editingRow, setEditingRow] = useState<MRT_Row<TData> | null>(
+    initialState.editingRow ?? null,
+  );
+  const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
+    initialState.globalFilterFn ?? 'fuzzy',
+  );
+  const [grouping, onGroupingChange] = useState<MRT_GroupingState>(
+    initialState.grouping ?? [],
+  );
+  const [hoveredColumn, setHoveredColumn] = useState<null | Partial<
+    MRT_Column<TData>
+  >>(initialState.hoveredColumn ?? null);
+  const [hoveredRow, setHoveredRow] = useState<null | Partial<MRT_Row<TData>>>(
+    initialState.hoveredRow ?? null,
+  );
+  const [isFullScreen, setIsFullScreen] = useState<boolean>(
+    initialState?.isFullScreen ?? false,
+  );
+  const [pagination, onPaginationChange] = useState<MRT_PaginationState>(
+    initialState?.pagination ?? { pageIndex: 0, pageSize: 10 },
+  );
+  const [showAlertBanner, setShowAlertBanner] = useState<boolean>(
+    initialState?.showAlertBanner ?? false,
+  );
+  const [showColumnFilters, setShowColumnFilters] = useState<boolean>(
+    initialState?.showColumnFilters ?? false,
+  );
+  const [showGlobalFilter, setShowGlobalFilter] = useState<boolean>(
+    initialState?.showGlobalFilter ?? false,
+  );
+  const [showToolbarDropZone, setShowToolbarDropZone] = useState<boolean>(
+    initialState?.showToolbarDropZone ?? false,
+  );
+
+  definedTableOptions.state = {
+    columnFilterFns,
+    columnOrder,
+    columnSizingInfo,
+    creatingRow,
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    globalFilterFn,
+    grouping,
+    hoveredColumn,
+    hoveredRow,
+    isFullScreen,
+    pagination,
+    showAlertBanner,
+    showColumnFilters,
+    showGlobalFilter,
+    showToolbarDropZone,
+    ...definedTableOptions.state,
+  };
+
+  //The table options now include all state needed to help determine column visibility and order logic
+  const statefulTableOptions =
+    definedTableOptions as MRT_StatefulTableOptions<TData>;
+
+  //don't recompute columnDefs while resizing column or dragging column/row
+  const columnDefsRef = useRef<MRT_ColumnDef<TData>[]>([]);
+  statefulTableOptions.columns =
+    statefulTableOptions.state.columnSizingInfo.isResizingColumn ||
+    statefulTableOptions.state.draggingColumn ||
+    statefulTableOptions.state.draggingRow
+      ? columnDefsRef.current
+      : prepareColumns({
+          columnDefs: [
+            ...([
+              showRowPinningColumn(statefulTableOptions) &&
+                getMRT_RowPinningColumnDef(statefulTableOptions),
+              showRowDragColumn(statefulTableOptions) &&
+                getMRT_RowDragColumnDef(statefulTableOptions),
+              showRowActionsColumn(statefulTableOptions) &&
+                getMRT_RowActionsColumnDef(statefulTableOptions),
+              showRowExpandColumn(statefulTableOptions) &&
+                getMRT_RowExpandColumnDef(statefulTableOptions),
+              showRowSelectionColumn(statefulTableOptions) &&
+                getMRT_RowSelectColumnDef(statefulTableOptions),
+              showRowNumbersColumn(statefulTableOptions) &&
+                getMRT_RowNumbersColumnDef(statefulTableOptions),
+            ].filter(Boolean) as MRT_ColumnDef<TData>[]),
+            ...statefulTableOptions.columns,
+            ...([
+              showRowSpacerColumn(statefulTableOptions) &&
+                getMRT_RowSpacerColumnDef(statefulTableOptions),
+            ].filter(Boolean) as MRT_ColumnDef<TData>[]),
+          ],
+          tableOptions: statefulTableOptions,
+        });
+  columnDefsRef.current = statefulTableOptions.columns;
+
+  //if loading, generate blank rows to show skeleton loaders
+  statefulTableOptions.data = useMemo(
+    () =>
+      (statefulTableOptions.state.isLoading ||
+        statefulTableOptions.state.showSkeletons) &&
+      !statefulTableOptions.data.length
+        ? [
+            ...Array(
+              Math.min(statefulTableOptions.state.pagination.pageSize, 20),
+            ).fill(null),
+          ].map(() =>
+            Object.assign(
+              {},
+              ...getAllLeafColumnDefs(statefulTableOptions.columns).map(
+                (col) => ({
+                  [getColumnId(col)]: null,
+                }),
+              ),
+            ),
+          )
+        : statefulTableOptions.data,
+    [
+      statefulTableOptions.data,
+      statefulTableOptions.state.isLoading,
+      statefulTableOptions.state.showSkeletons,
+    ],
+  );
+
+  //@ts-ignore
+  const table = useReactTable({
+    onColumnOrderChange,
+    onColumnSizingInfoChange,
+    onGroupingChange,
+    onPaginationChange,
+    ...statefulTableOptions,
+    globalFilterFn: statefulTableOptions.filterFns?.[globalFilterFn ?? 'fuzzy'],
+  }) as MRT_TableInstance<TData>;
+
+  table.refs = {
+    bottomToolbarRef,
+    editInputRefs,
+    filterInputRefs,
+    lastSelectedRowId,
+    searchInputRef,
+    tableContainerRef,
+    tableFooterRef,
+    tableHeadCellRefs,
+    tableHeadRef,
+    tablePaperRef,
+    topToolbarRef,
+  };
+
+  table.setCreatingRow = (row: MRT_Updater<MRT_Row<TData> | null | true>) => {
+    let _row = row;
+    if (row === true) {
+      _row = createRow(table);
+    }
+    if (statefulTableOptions?.onCreatingRowChange) {
+      statefulTableOptions.onCreatingRowChange(_row as MRT_Row<TData> | null);
+    } else {
+      _setCreatingRow(_row as MRT_Row<TData> | null);
+    }
+  };
+  table.setColumnFilterFns =
+    statefulTableOptions.onColumnFilterFnsChange ?? setColumnFilterFns;
+  table.setDensity = statefulTableOptions.onDensityChange ?? setDensity;
+  table.setDraggingColumn =
+    statefulTableOptions.onDraggingColumnChange ?? setDraggingColumn;
+  table.setDraggingRow =
+    statefulTableOptions.onDraggingRowChange ?? setDraggingRow;
+  table.setEditingCell =
+    statefulTableOptions.onEditingCellChange ?? setEditingCell;
+  table.setEditingRow =
+    statefulTableOptions.onEditingRowChange ?? setEditingRow;
+  table.setGlobalFilterFn =
+    statefulTableOptions.onGlobalFilterFnChange ?? setGlobalFilterFn;
+  table.setHoveredColumn =
+    statefulTableOptions.onHoveredColumnChange ?? setHoveredColumn;
+  table.setHoveredRow =
+    statefulTableOptions.onHoveredRowChange ?? setHoveredRow;
+  table.setIsFullScreen =
+    statefulTableOptions.onIsFullScreenChange ?? setIsFullScreen;
+  table.setShowAlertBanner =
+    statefulTableOptions.onShowAlertBannerChange ?? setShowAlertBanner;
+  table.setShowColumnFilters =
+    statefulTableOptions.onShowColumnFiltersChange ?? setShowColumnFilters;
+  table.setShowGlobalFilter =
+    statefulTableOptions.onShowGlobalFilterChange ?? setShowGlobalFilter;
+  table.setShowToolbarDropZone =
+    statefulTableOptions.onShowToolbarDropZoneChange ?? setShowToolbarDropZone;
+
+  useMRT_Effects(table);
+
+  return table;
+};

package/src/hooks/useMRT_TableOptions.ts

@@ -0,0 +1,264 @@
+import { useMemo } from 'react';
+
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFacetedMinMaxValues,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+} from '@tanstack/react-table';
+
+import { useDirection } from '@mantine/core';
+
+import { MRT_AggregationFns } from '../fns/aggregationFns';
+import { MRT_FilterFns } from '../fns/filterFns';
+import { MRT_SortingFns } from '../fns/sortingFns';
+import { MRT_Default_Icons } from '../icons';
+import { MRT_Localization_EN } from '../locales/en';
+import {
+  type MRT_DefinedTableOptions,
+  type MRT_RowData,
+  type MRT_TableOptions,
+} from '../types';
+
+export const MRT_DefaultColumn = {
+  filterVariant: 'text',
+  maxSize: 1000,
+  minSize: 40,
+  size: 180,
+} as const;
+
+export const MRT_DefaultDisplayColumn = {
+  columnDefType: 'display',
+  enableClickToCopy: false,
+  enableColumnActions: false,
+  enableColumnDragging: false,
+  enableColumnFilter: false,
+  enableColumnOrdering: false,
+  enableEditing: false,
+  enableGlobalFilter: false,
+  enableGrouping: false,
+  enableHiding: false,
+  enableResizing: false,
+  enableSorting: false,
+} as const;
+
+export const useMRT_TableOptions: <TData extends MRT_RowData>(
+  tableOptions: MRT_TableOptions<TData>,
+) => MRT_DefinedTableOptions<TData> = <TData extends MRT_RowData>({
+  aggregationFns,
+  autoResetExpanded = false,
+  columnFilterDisplayMode = 'subheader',
+  columnResizeDirection,
+  columnResizeMode = 'onChange',
+  createDisplayMode = 'modal',
+  defaultColumn,
+  defaultDisplayColumn,
+  editDisplayMode = 'modal',
+  enableBatchRowSelection = true,
+  enableBottomToolbar = true,
+  enableColumnActions = true,
+  enableColumnFilters = true,
+  enableColumnOrdering = false,
+  enableColumnPinning = false,
+  enableColumnResizing = false,
+  enableColumnVirtualization,
+  enableDensityToggle = true,
+  enableExpandAll = true,
+  enableExpanding,
+  enableFacetedValues = false,
+  enableFilterMatchHighlighting = true,
+  enableFilters = true,
+  enableFullScreenToggle = true,
+  enableGlobalFilter = true,
+  enableGlobalFilterRankedResults = true,
+  enableGrouping = false,
+  enableHeaderActionsHoverReveal = false,
+  enableHiding = true,
+  enableMultiRowSelection = true,
+  enableMultiSort = true,
+  enablePagination = true,
+  enableRowPinning = false,
+  enableRowSelection = false,
+  enableRowVirtualization,
+  enableSelectAll = true,
+  enableSorting = true,
+  enableStickyHeader = false,
+  enableTableFooter = true,
+  enableTableHead = true,
+  enableToolbarInternalActions = true,
+  enableTopToolbar = true,
+  filterFns,
+  icons,
+  layoutMode,
+  localization,
+  manualFiltering,
+  manualGrouping,
+  manualPagination,
+  manualSorting,
+  paginationDisplayMode = 'default',
+  positionActionsColumn = 'first',
+  positionCreatingRow = 'top',
+  positionExpandColumn = 'first',
+  positionGlobalFilter = 'right',
+  positionPagination = 'bottom',
+  positionToolbarAlertBanner = 'top',
+  positionToolbarDropZone = 'top',
+  rowNumberDisplayMode = 'static',
+  rowPinningDisplayMode = 'sticky',
+  selectAllMode = 'page',
+  sortingFns,
+  ...rest
+}: MRT_TableOptions<TData>) => {
+  'use no memo';
+  const direction = useDirection();
+
+  icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
+  localization = useMemo(
+    () => ({
+      ...MRT_Localization_EN,
+      ...localization,
+    }),
+    [localization],
+  );
+  aggregationFns = useMemo(
+    () => ({ ...MRT_AggregationFns, ...aggregationFns }),
+    [],
+  );
+  filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
+  sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
+  defaultColumn = useMemo(
+    () => ({ ...MRT_DefaultColumn, ...defaultColumn }),
+    [defaultColumn],
+  );
+  defaultDisplayColumn = useMemo(
+    () => ({
+      ...MRT_DefaultDisplayColumn,
+      ...defaultDisplayColumn,
+    }),
+    [defaultDisplayColumn],
+  );
+  //cannot be changed after initialization
+  [enableColumnVirtualization, enableRowVirtualization] = useMemo(
+    () => [enableColumnVirtualization, enableRowVirtualization],
+    [],
+  );
+
+  if (!columnResizeDirection) {
+    columnResizeDirection = direction.dir || 'ltr';
+  }
+
+  layoutMode =
+    layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
+  if (
+    layoutMode === 'semantic' &&
+    (enableRowVirtualization || enableColumnVirtualization)
+  ) {
+    layoutMode = 'grid';
+  }
+
+  if (enableRowVirtualization) {
+    enableStickyHeader = true;
+  }
+
+  if (enablePagination === false && manualPagination === undefined) {
+    manualPagination = true;
+  }
+
+  if (!rest.data?.length) {
+    manualFiltering = true;
+    manualGrouping = true;
+    manualPagination = true;
+    manualSorting = true;
+  }
+
+  return {
+    aggregationFns,
+    autoResetExpanded,
+    columnFilterDisplayMode,
+    columnResizeDirection,
+    columnResizeMode,
+    createDisplayMode,
+    defaultColumn,
+    defaultDisplayColumn,
+    editDisplayMode,
+    enableBatchRowSelection,
+    enableBottomToolbar,
+    enableColumnActions,
+    enableColumnFilters,
+    enableColumnOrdering,
+    enableColumnPinning,
+    enableColumnResizing,
+    enableColumnVirtualization,
+    enableDensityToggle,
+    enableExpandAll,
+    enableExpanding,
+    enableFacetedValues,
+    enableFilterMatchHighlighting,
+    enableFilters,
+    enableFullScreenToggle,
+    enableGlobalFilter,
+    enableGlobalFilterRankedResults,
+    enableGrouping,
+    enableHeaderActionsHoverReveal,
+    enableHiding,
+    enableMultiRowSelection,
+    enableMultiSort,
+    enablePagination,
+    enableRowPinning,
+    enableRowSelection,
+    enableRowVirtualization,
+    enableSelectAll,
+    enableSorting,
+    enableStickyHeader,
+    enableTableFooter,
+    enableTableHead,
+    enableToolbarInternalActions,
+    enableTopToolbar,
+    filterFns,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel:
+      enableExpanding || enableGrouping ? getExpandedRowModel() : undefined,
+    getFacetedMinMaxValues: enableFacetedValues
+      ? getFacetedMinMaxValues()
+      : undefined,
+    getFacetedRowModel: enableFacetedValues ? getFacetedRowModel() : undefined,
+    getFacetedUniqueValues: enableFacetedValues
+      ? getFacetedUniqueValues()
+      : undefined,
+    getFilteredRowModel:
+      enableColumnFilters || enableGlobalFilter || enableFilters
+        ? getFilteredRowModel()
+        : undefined,
+    getGroupedRowModel: enableGrouping ? getGroupedRowModel() : undefined,
+    getPaginationRowModel: enablePagination
+      ? getPaginationRowModel()
+      : undefined,
+    getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
+    getSubRows: (row) => row?.subRows,
+    icons,
+    layoutMode,
+    localization,
+    manualFiltering,
+    manualGrouping,
+    manualPagination,
+    manualSorting,
+    paginationDisplayMode,
+    positionActionsColumn,
+    positionCreatingRow,
+    positionExpandColumn,
+    positionGlobalFilter,
+    positionPagination,
+    positionToolbarAlertBanner,
+    positionToolbarDropZone,
+    rowNumberDisplayMode,
+    rowPinningDisplayMode,
+    selectAllMode,
+    sortingFns,
+    ...rest,
+  } as MRT_DefinedTableOptions<TData>;
+};

package/src/hooks/useMantineReactTable.ts

@@ -0,0 +1,14 @@
+import {
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_TableOptions,
+} from '../types';
+import { useMRT_TableInstance } from './useMRT_TableInstance';
+import { useMRT_TableOptions } from './useMRT_TableOptions';
+
+export const useMantineReactTable = <TData extends MRT_RowData>(
+  tableOptions: MRT_TableOptions<TData>,
+): MRT_TableInstance<TData> => {
+  'use no memo';
+  return useMRT_TableInstance(useMRT_TableOptions(tableOptions));
+};

package/src/icons.ts

@@ -0,0 +1,73 @@
+import {
+  IconArrowAutofitContent,
+  IconArrowsSort,
+  IconBaselineDensityLarge,
+  IconBaselineDensityMedium,
+  IconBaselineDensitySmall,
+  IconBoxMultiple,
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronLeftPipe,
+  IconChevronRight,
+  IconChevronRightPipe,
+  IconChevronsDown,
+  IconCircleX,
+  IconClearAll,
+  IconColumns,
+  IconDeviceFloppy,
+  IconDots,
+  IconDotsVertical,
+  IconEdit,
+  IconEyeOff,
+  IconFilter,
+  IconFilterCog,
+  IconFilterOff,
+  IconGripHorizontal,
+  IconMaximize,
+  IconMinimize,
+  IconPinned,
+  IconPinnedOff,
+  IconSearch,
+  IconSearchOff,
+  IconSortAscending,
+  IconSortDescending,
+  IconX,
+} from '@tabler/icons-react';
+
+export const MRT_Default_Icons = {
+  IconArrowAutofitContent,
+  IconArrowsSort,
+  IconBaselineDensityLarge,
+  IconBaselineDensityMedium,
+  IconBaselineDensitySmall,
+  IconBoxMultiple,
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronLeftPipe,
+  IconChevronRight,
+  IconChevronRightPipe,
+  IconChevronsDown,
+  IconCircleX,
+  IconClearAll,
+  IconColumns,
+  IconDeviceFloppy,
+  IconDots,
+  IconDotsVertical,
+  IconEdit,
+  IconEyeOff,
+  IconFilter,
+  IconFilterCog,
+  IconFilterOff,
+  IconGripHorizontal,
+  IconMaximize,
+  IconMinimize,
+  IconPinned,
+  IconPinnedOff,
+  IconSearch,
+  IconSearchOff,
+  IconSortAscending,
+  IconSortDescending,
+  IconX,
+} as const;
+
+export type MRT_Icons = Record<keyof typeof MRT_Default_Icons, any>;