material-react-table 1.15.0 → 2.0.0-alpha.0

package/src/MaterialReactTable.tsx

@@ -1,172 +1,35 @@
-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_Default_Icons } from './icons';
-import { MRT_Localization_EN } from './_locales/en';
-import { MRT_TableRoot } from './table/MRT_TableRoot';
-import { type MaterialReactTableProps } from './types';
-
-export { MRT_AggregationFns, MRT_FilterFns, MRT_SortingFns };
-
-export const MaterialReactTable = <TData extends Record<string, any> = {}>({
-  aggregationFns,
-  autoResetExpanded = false,
-  columnResizeMode = 'onChange',
-  defaultColumn,
-  defaultDisplayColumn,
-  editingMode = 'modal',
-  enableBottomToolbar = true,
-  enableColumnActions = true,
-  enableColumnFilters = true,
-  enableColumnOrdering = false,
-  enableColumnResizing = false,
-  enableDensityToggle = true,
-  enableExpandAll = true,
-  enableExpanding,
-  enableFilterMatchHighlighting = true,
-  enableFilters = true,
-  enableFullScreenToggle = true,
-  enableGlobalFilter = true,
-  enableGlobalFilterRankedResults = true,
-  enableGrouping = false,
-  enableHiding = true,
-  enableMultiRowSelection = true,
-  enableMultiSort = true,
-  enablePagination = true,
-  enablePinning = false,
-  enableRowSelection = false,
-  enableSelectAll = true,
-  enableSorting = true,
-  enableStickyHeader = false,
-  enableTableFooter = true,
-  enableTableHead = true,
-  enableToolbarInternalActions = true,
-  enableTopToolbar = true,
-  filterFns,
-  icons,
-  layoutMode = 'semantic',
-  localization,
-  manualFiltering,
-  manualGrouping,
-  manualPagination,
-  manualSorting,
-  positionActionsColumn = 'first',
-  positionExpandColumn = 'first',
-  positionGlobalFilter = 'right',
-  positionPagination = 'bottom',
-  positionToolbarAlertBanner = 'top',
-  positionToolbarDropZone = 'top',
-  rowNumberMode = 'original',
-  selectAllMode = 'page',
-  sortingFns,
-  ...rest
-}: MaterialReactTableProps<TData>) => {
-  const _icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
-  const _localization = useMemo(
-    () => ({
-      ...MRT_Localization_EN,
-      ...localization,
-    }),
-    [localization],
-  );
-  const _aggregationFns = useMemo(
-    () => ({ ...MRT_AggregationFns, ...aggregationFns }),
-    [],
-  );
-  const _filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
-  const _sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
-  const _defaultColumn = useMemo(
-    () => ({ ...MRT_DefaultColumn, ...defaultColumn }),
-    [defaultColumn],
-  );
-  const _defaultDisplayColumn = useMemo(
-    () => ({
-      ...MRT_DefaultDisplayColumn,
-      ...defaultDisplayColumn,
-    }),
-    [defaultDisplayColumn],
-  );
-
-  if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
-    layoutMode = 'grid';
-  }
-
-  if (rest.enableRowVirtualization) {
-    enableStickyHeader = true;
-  }
-
-  if (enablePagination === false && manualPagination === undefined) {
-    manualPagination = true;
-  }
+import { useMaterialReactTable } from './useMaterialReactTable';
+import { MRT_TablePaper } from './table/MRT_TablePaper';
+import {
+  type MRT_TableOptions,
+  type MRT_TableInstance,
+  type Xor,
+} from './types';
+
+type TableInstanceProp<TData extends Record<string, any> = {}> = {
+  table: MRT_TableInstance<TData>;
+};
 
-  if (!rest.data?.length) {
-    manualFiltering = true;
-    manualGrouping = true;
-    manualPagination = true;
-    manualSorting = true;
+type Props<TData extends Record<string, any> = {}> = Xor<
+  TableInstanceProp<TData>,
+  MRT_TableOptions<TData>
+>;
+
+const isTableInstanceProp = <TData extends Record<string, any> = {}>(
+  props: Props<TData>,
+): props is TableInstanceProp<TData> =>
+  (props as TableInstanceProp<TData>).table !== undefined;
+
+export const MaterialReactTable = <TData extends Record<string, any> = {}>(
+  props: Props<TData>,
+) => {
+  let table: MRT_TableInstance<TData>;
+
+  if (isTableInstanceProp(props)) {
+    table = props.table;
+  } else {
+    table = useMaterialReactTable(props);
   }
 
-  return (
-    <MRT_TableRoot
-      aggregationFns={_aggregationFns}
-      autoResetExpanded={autoResetExpanded}
-      columnResizeMode={columnResizeMode}
-      defaultColumn={_defaultColumn}
-      defaultDisplayColumn={_defaultDisplayColumn}
-      editingMode={editingMode}
-      enableBottomToolbar={enableBottomToolbar}
-      enableColumnActions={enableColumnActions}
-      enableColumnFilters={enableColumnFilters}
-      enableColumnOrdering={enableColumnOrdering}
-      enableColumnResizing={enableColumnResizing}
-      enableDensityToggle={enableDensityToggle}
-      enableExpandAll={enableExpandAll}
-      enableExpanding={enableExpanding}
-      enableFilterMatchHighlighting={enableFilterMatchHighlighting}
-      enableFilters={enableFilters}
-      enableFullScreenToggle={enableFullScreenToggle}
-      enableGlobalFilter={enableGlobalFilter}
-      enableGlobalFilterRankedResults={enableGlobalFilterRankedResults}
-      enableGrouping={enableGrouping}
-      enableHiding={enableHiding}
-      enableMultiRowSelection={enableMultiRowSelection}
-      enableMultiSort={enableMultiSort}
-      enablePagination={enablePagination}
-      enablePinning={enablePinning}
-      enableRowSelection={enableRowSelection}
-      enableSelectAll={enableSelectAll}
-      enableSorting={enableSorting}
-      enableStickyHeader={enableStickyHeader}
-      enableTableFooter={enableTableFooter}
-      enableTableHead={enableTableHead}
-      enableToolbarInternalActions={enableToolbarInternalActions}
-      enableTopToolbar={enableTopToolbar}
-      filterFns={_filterFns}
-      icons={_icons}
-      layoutMode={layoutMode}
-      localization={_localization}
-      manualFiltering={manualFiltering}
-      manualGrouping={manualGrouping}
-      manualPagination={manualPagination}
-      manualSorting={manualSorting}
-      positionActionsColumn={positionActionsColumn}
-      positionExpandColumn={positionExpandColumn}
-      positionGlobalFilter={positionGlobalFilter}
-      positionPagination={positionPagination}
-      positionToolbarAlertBanner={positionToolbarAlertBanner}
-      positionToolbarDropZone={positionToolbarDropZone}
-      rowNumberMode={rowNumberMode}
-      selectAllMode={selectAllMode}
-      sortingFns={_sortingFns}
-      {...rest}
-    />
-  );
+  return <MRT_TablePaper table={table} />;
 };
-
-/**
- * @deprecated Use named exports instead of default export (will be removed in v2)
- * @example import { MaterialReactTable } from 'material-react-table';
- */
-export default MaterialReactTable;

package/src/body/MRT_TableBody.tsx

@@ -10,21 +10,21 @@ import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props {
+interface Props<TData extends Record<string, any>> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableBody = ({
+export const MRT_TableBody = <TData extends Record<string, any>>({
   columnVirtualizer,
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getRowModel,
     getPrePaginationRowModel,
@@ -44,9 +44,7 @@ export const MRT_TableBody = ({
       muiTableBodyProps,
       renderEmptyRowsFallback,
       rowVirtualizerInstanceRef,
-      rowVirtualizerProps,
-      virtualizerInstanceRef,
-      virtualizerProps,
+      rowVirtualizerOptions,
     },
     refs: { tableContainerRef, tablePaperRef },
   } = table;
@@ -65,15 +63,10 @@ export const MRT_TableBody = ({
       ? muiTableBodyProps({ table })
       : muiTableBodyProps;
 
-  const vProps_old =
-    virtualizerProps instanceof Function
-      ? virtualizerProps({ table })
-      : virtualizerProps;
-
   const vProps =
-    rowVirtualizerProps instanceof Function
-      ? rowVirtualizerProps({ table })
-      : rowVirtualizerProps;
+    rowVirtualizerOptions instanceof Function
+      ? rowVirtualizerOptions({ table })
+      : rowVirtualizerOptions;
 
   const shouldRankResults = useMemo(
     () =>
@@ -130,7 +123,6 @@ export const MRT_TableBody = ({
             ? (element) => element?.getBoundingClientRect().height
             : undefined,
         overscan: 4,
-        ...vProps_old,
         ...vProps,
       })
     : undefined;
@@ -139,11 +131,6 @@ export const MRT_TableBody = ({
     rowVirtualizerInstanceRef.current = rowVirtualizer;
   }
 
-  //deprecated
-  if (virtualizerInstanceRef && rowVirtualizer) {
-    virtualizerInstanceRef.current = rowVirtualizer;
-  }
-
   const virtualRows = rowVirtualizer
     ? rowVirtualizer.getVirtualItems()
     : undefined;
@@ -197,7 +184,7 @@ export const MRT_TableBody = ({
             {(virtualRows ?? rows).map((rowOrVirtualRow, rowIndex) => {
               const row = rowVirtualizer
                 ? rows[rowOrVirtualRow.index]
-                : (rowOrVirtualRow as MRT_Row);
+                : (rowOrVirtualRow as MRT_Row<TData>);
               const props = {
                 columnVirtualizer,
                 measureElement: rowVirtualizer?.measureElement,
@@ -227,4 +214,4 @@ export const MRT_TableBody = ({
 export const Memo_MRT_TableBody = memo(
   MRT_TableBody,
   (prev, next) => prev.table.options.data === next.table.options.data,
-);
+) as typeof MRT_TableBody;

package/src/body/MRT_TableBodyCell.tsx

@@ -1,6 +1,6 @@
 import {
-  type DragEvent,
   memo,
+  type DragEvent,
   type MouseEvent,
   type RefObject,
   useEffect,
@@ -22,17 +22,17 @@ import {
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
-interface Props {
-  cell: MRT_Cell;
+interface Props<TData extends Record<string, any>> {
+  cell: MRT_Cell<TData>;
   measureElement?: (element: HTMLTableCellElement) => void;
   numRows: number;
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
   virtualCell?: VirtualItem;
 }
 
-export const MRT_TableBodyCell = ({
+export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   cell,
   measureElement,
   numRows,
@@ -40,12 +40,13 @@ export const MRT_TableBodyCell = ({
   rowRef,
   table,
   virtualCell,
-}: Props) => {
+}: Props<TData>) => {
   const theme = useTheme();
   const {
     getState,
     options: {
-      editingMode,
+      createDisplayMode,
+      editDisplayMode,
       enableClickToCopy,
       enableColumnOrdering,
       enableEditing,
@@ -53,7 +54,7 @@ export const MRT_TableBodyCell = ({
       enableRowNumbers,
       layoutMode,
       muiTableBodyCellProps,
-      muiTableBodyCellSkeletonProps,
+      muiSkeletonProps,
       rowNumberMode,
     },
     refs: { editInputRefs },
@@ -61,6 +62,7 @@ export const MRT_TableBodyCell = ({
     setHoveredColumn,
   } = table;
   const {
+    creatingRow,
     draggingColumn,
     draggingRow,
     editingCell,
@@ -91,25 +93,20 @@ export const MRT_TableBodyCell = ({
   };
 
   const skeletonProps =
-    muiTableBodyCellSkeletonProps instanceof Function
-      ? muiTableBodyCellSkeletonProps({ cell, column, row, table })
-      : muiTableBodyCellSkeletonProps;
+    muiSkeletonProps instanceof Function
+      ? muiSkeletonProps({ cell, column, row, table })
+      : muiSkeletonProps;
 
-  const [skeletonWidth, setSkeletonWidth] = useState(0);
-  useEffect(
-    () =>
-      setSkeletonWidth(
-        isLoading || showSkeletons
-          ? columnDefType === 'display'
-            ? column.getSize() / 2
-            : Math.round(
-                Math.random() * (column.getSize() - column.getSize() / 3) +
-                  column.getSize() / 3,
-              )
-          : 100,
-      ),
-    [],
-  );
+  const [skeletonWidth, setSkeletonWidth] = useState(100);
+  useEffect(() => {
+    if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
+    const size = column.getSize();
+    setSkeletonWidth(
+      columnDefType === 'display'
+        ? size / 2
+        : Math.round(Math.random() * (size - size / 3) + size / 3),
+    );
+  }, [isLoading, showSkeletons]);
 
   const draggingBorders = useMemo(() => {
     const isDraggingColumn = draggingColumn?.id === column.id;
@@ -158,15 +155,18 @@ export const MRT_TableBodyCell = ({
 
   const isEditing =
     isEditable &&
-    editingMode !== 'modal' &&
-    (editingMode === 'table' ||
+    !['modal', 'custom'].includes(editDisplayMode as string) &&
+    (editDisplayMode === 'table' ||
       editingRow?.id === row.id ||
       editingCell?.id === cell.id) &&
     !row.getIsGrouped();
 
+  const isCreating =
+    isEditable && createDisplayMode === 'row' && creatingRow?.id === row.id;
+
   const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
     tableCellProps?.onDoubleClick?.(event);
-    if (isEditable && editingMode === 'cell') {
+    if (isEditable && editDisplayMode === 'cell') {
       setEditingCell(cell);
       queueMicrotask(() => {
         const textField = editInputRefs.current[column.id];
@@ -203,7 +203,8 @@ export const MRT_TableBodyCell = ({
       onDoubleClick={handleDoubleClick}
       sx={(theme) => ({
         alignItems: layoutMode === 'grid' ? 'center' : undefined,
-        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit',
+        cursor:
+          isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit',
         justifyContent:
           layoutMode === 'grid' ? tableCellProps.align : undefined,
         overflow: 'hidden',
@@ -235,7 +236,7 @@ export const MRT_TableBodyCell = ({
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
         '&:hover': {
-          outline: ['table', 'cell'].includes(editingMode ?? '')
+          outline: ['table', 'cell'].includes(editDisplayMode ?? '')
             ? `1px solid ${theme.palette.text.secondary}`
             : undefined,
           outlineOffset: '-1px',
@@ -265,11 +266,7 @@ export const MRT_TableBodyCell = ({
           column.id === 'mrt-row-numbers' ? (
           rowIndex + 1
         ) : column.id === 'mrt-row-drag' ? (
-          <MRT_TableBodyRowGrabHandle
-            cell={cell}
-            rowRef={rowRef}
-            table={table}
-          />
+          <MRT_TableBodyRowGrabHandle row={row} rowRef={rowRef} table={table} />
         ) : columnDefType === 'display' &&
           (column.id === 'mrt-row-select' ||
             column.id === 'mrt-row-expand' ||
@@ -281,7 +278,7 @@ export const MRT_TableBodyCell = ({
             row,
             table,
           })
-        ) : isEditing ? (
+        ) : isCreating || isEditing ? (
           <MRT_EditCellTextField cell={cell} table={table} />
         ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
           columnDef.enableClickToCopy !== false ? (
@@ -302,4 +299,4 @@ export const MRT_TableBodyCell = ({
 export const Memo_MRT_TableBodyCell = memo(
   MRT_TableBodyCell,
   (prev, next) => next.cell === prev.cell,
-);
+) as typeof MRT_TableBodyCell;

package/src/body/MRT_TableBodyCellValue.tsx

@@ -6,12 +6,15 @@ import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
 const allowedTypes = ['string', 'number'];
 
-interface Props {
-  cell: MRT_Cell;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  cell: MRT_Cell<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableBodyCellValue = ({ cell, table }: Props) => {
+export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
+  cell,
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: { enableFilterMatchHighlighting },

package/src/body/MRT_TableBodyRow.tsx

@@ -6,20 +6,20 @@ import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props {
+interface Props<TData extends Record<string, any>> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   measureElement?: (element: HTMLTableRowElement) => void;
   numRows: number;
-  row: MRT_Row;
+  row: MRT_Row<TData>;
   rowIndex: number;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
   virtualRow?: VirtualItem;
 }
 
-export const MRT_TableBodyRow = ({
+export const MRT_TableBodyRow = <TData extends Record<string, any>>({
   columnVirtualizer,
   measureElement,
   numRows,
@@ -30,7 +30,7 @@ export const MRT_TableBodyRow = ({
   virtualPaddingLeft,
   virtualPaddingRight,
   virtualRow,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getState,
     options: {
@@ -108,7 +108,7 @@ export const MRT_TableBodyRow = ({
         {(virtualColumns ?? row.getVisibleCells()).map((cellOrVirtualCell) => {
           const cell = columnVirtualizer
             ? row.getVisibleCells()[(cellOrVirtualCell as VirtualItem).index]
-            : (cellOrVirtualCell as MRT_Cell);
+            : (cellOrVirtualCell as MRT_Cell<TData>);
           const props = {
             cell,
             measureElement: columnVirtualizer?.measureElement,
@@ -151,4 +151,4 @@ export const MRT_TableBodyRow = ({
 export const Memo_MRT_TableBodyRow = memo(
   MRT_TableBodyRow,
   (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex,
-);
+) as typeof MRT_TableBodyRow;

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -1,23 +1,26 @@
 import { type DragEvent, type RefObject } from 'react';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props {
-  cell: MRT_Cell;
+interface Props<TData extends Record<string, any>> {
+  row: MRT_Row<TData>;
   rowRef: RefObject<HTMLTableRowElement>;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }: Props) => {
+export const MRT_TableBodyRowGrabHandle = <TData extends Record<string, any>>({
+  row,
+  rowRef,
+  table,
+}: Props<TData>) => {
   const {
-    options: { muiTableBodyRowDragHandleProps },
+    options: { muiRowDragHandleProps },
   } = table;
-  const { row } = cell;
 
   const iconButtonProps =
-    muiTableBodyRowDragHandleProps instanceof Function
-      ? muiTableBodyRowDragHandleProps({ row, table })
-      : muiTableBodyRowDragHandleProps;
+    muiRowDragHandleProps instanceof Function
+      ? muiRowDragHandleProps({ row, table })
+      : muiRowDragHandleProps;
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
     iconButtonProps?.onDragStart?.(event);

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { type RefObject } from 'react';
 import Collapse from '@mui/material/Collapse';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
@@ -6,28 +6,28 @@ import { lighten } from '@mui/material/styles';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props {
-  parentRowRef: React.RefObject<HTMLTableRowElement>;
-  row: MRT_Row;
+interface Props<TData extends Record<string, any>> {
+  parentRowRef: RefObject<HTMLTableRowElement>;
+  row: MRT_Row<TData>;
   rowIndex: number;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
   virtualRow?: VirtualItem;
 }
 
-export const MRT_TableDetailPanel = ({
+export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
   parentRowRef,
   row,
   rowIndex,
   table,
   virtualRow,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getVisibleLeafColumns,
     getState,
     options: {
       layoutMode,
       muiTableBodyRowProps,
-      muiTableDetailPanelProps,
+      muiDetailPanelProps,
       renderDetailPanel,
     },
   } = table;
@@ -44,9 +44,9 @@ export const MRT_TableDetailPanel = ({
       : muiTableBodyRowProps;
 
   const tableCellProps =
-    muiTableDetailPanelProps instanceof Function
-      ? muiTableDetailPanelProps({ row, table })
-      : muiTableDetailPanelProps;
+    muiDetailPanelProps instanceof Function
+      ? muiDetailPanelProps({ row, table })
+      : muiDetailPanelProps;
 
   return (
     <TableRow

package/src/body/index.ts

@@ -0,0 +1,6 @@
+export * from './MRT_TableBody';
+export * from './MRT_TableBodyCell';
+export * from './MRT_TableBodyCellValue';
+export * from './MRT_TableBodyRow';
+export * from './MRT_TableBodyRowGrabHandle';
+export * from './MRT_TableDetailPanel';

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -3,14 +3,12 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ColumnPinningButtons = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_ColumnPinningButtons = <TData extends Record<string, any>>({
   column,
   table,
 }: Props<TData>) => {