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

package/src/buttons/MRT_ExpandButton.tsx

@@ -2,13 +2,14 @@ import { type MouseEvent } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ExpandButton = <TData extends Record<string, any> = {}>({
+export const MRT_ExpandButton = <TData extends Record<string, any>>({
   row,
   table,
 }: Props<TData>) => {
@@ -23,10 +24,10 @@ export const MRT_ExpandButton = <TData extends Record<string, any> = {}>({
   } = table;
   const { density } = getState();
 
-  const iconButtonProps =
-    muiExpandButtonProps instanceof Function
-      ? muiExpandButtonProps({ table, row })
-      : muiExpandButtonProps;
+  const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
+    row,
+    table,
+  });
 
   const canExpand = row.getCanExpand();
   const isExpanded = row.getIsExpanded();
@@ -58,9 +59,7 @@ export const MRT_ExpandButton = <TData extends Record<string, any> = {}>({
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',
-            ...(iconButtonProps?.sx instanceof Function
-              ? iconButtonProps.sx(theme)
-              : (iconButtonProps?.sx as any)),
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}
         >

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -2,16 +2,17 @@ import { type DragEventHandler } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type IconButtonProps } from '@mui/material/IconButton';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   iconButtonProps?: IconButtonProps;
   onDragStart: DragEventHandler<HTMLButtonElement>;
   onDragEnd: DragEventHandler<HTMLButtonElement>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
+export const MRT_GrabHandleButton = <TData extends Record<string, any>>({
   iconButtonProps,
   onDragEnd,
   onDragStart,
@@ -56,9 +57,7 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
           '&:active': {
             cursor: 'grabbing',
           },
-          ...(iconButtonProps?.sx instanceof Function
-            ? iconButtonProps?.sx(theme)
-            : (iconButtonProps?.sx as any)),
+          ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
         })}
         title={undefined}
       >

package/src/buttons/MRT_RowPinButton.tsx

@@ -0,0 +1,74 @@
+import { useState, type MouseEvent } from 'react';
+import { type RowPinningPosition } from '@tanstack/react-table';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
+
+interface Props<TData extends Record<string, any>> {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+  pinningPosition: RowPinningPosition;
+}
+
+export const MRT_RowPinButton = <TData extends Record<string, any>>({
+  row,
+  table,
+  pinningPosition,
+}: Props<TData>) => {
+  const {
+    options: {
+      icons: { PushPinIcon, CloseIcon },
+      localization,
+      rowPinningDisplayMode,
+    },
+  } = table;
+
+  const isPinned = row.getIsPinned();
+
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
+  const handleTogglePin = (event: MouseEvent<HTMLButtonElement>) => {
+    setTooltipOpened(false);
+    event.stopPropagation();
+    row.pin(isPinned ? false : pinningPosition);
+  };
+
+  return (
+    <Tooltip
+      arrow
+      open={tooltipOpened}
+      enterDelay={1000}
+      enterNextDelay={1000}
+      title={isPinned ? localization.unpin : localization.pin}
+    >
+      <IconButton
+        aria-label={localization.pin}
+        onClick={handleTogglePin}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
+        size="small"
+        sx={{
+          height: '24px',
+          width: '24px',
+        }}
+      >
+        {isPinned ? (
+          <CloseIcon />
+        ) : (
+          <PushPinIcon
+            fontSize="small"
+            style={{
+              transform: `rotate(${
+                rowPinningDisplayMode === 'sticky'
+                  ? 135
+                  : pinningPosition === 'top'
+                  ? 180
+                  : 0
+              }deg)`,
+            }}
+          />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -5,14 +5,11 @@ import Tooltip from '@mui/material/Tooltip';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}>
-  extends IconButtonProps {
+interface Props<TData extends Record<string, any>> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsButton = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_ShowHideColumnsButton = <TData extends Record<string, any>>({
   table,
   ...rest
 }: Props<TData>) => {

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

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

package/src/buttons/MRT_ToggleFiltersButton.tsx

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

package/src/buttons/{MRT_FullScreenToggleButton.tsx → MRT_ToggleFullScreenButton.tsx}

@@ -2,15 +2,13 @@ import IconButton from '@mui/material/IconButton';
 import { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
+import { useState } from 'react';
 
-interface Props<TData extends Record<string, any> = {}>
-  extends IconButtonProps {
+interface Props<TData extends Record<string, any>> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FullScreenToggleButton = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_ToggleFullScreenButton = <TData extends Record<string, any>>({
   table,
   ...rest
 }: Props<TData>) => {
@@ -24,15 +22,24 @@ export const MRT_FullScreenToggleButton = <
   } = table;
   const { isFullScreen } = getState();
 
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
   const handleToggleFullScreen = () => {
+    setTooltipOpened(false);
     setIsFullScreen(!isFullScreen);
   };
 
   return (
-    <Tooltip arrow title={rest?.title ?? localization.toggleFullScreen}>
+    <Tooltip
+      open={tooltipOpened}
+      arrow
+      title={rest?.title ?? localization.toggleFullScreen}
+    >
       <IconButton
         aria-label={localization.showHideFilters}
         onClick={handleToggleFullScreen}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
         {...rest}
         title={undefined}
       >

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -1,15 +1,13 @@
-import IconButton from '@mui/material/IconButton';
-import { type IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}>
-  extends IconButtonProps {
+interface Props<TData extends Record<string, any>> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleGlobalFilterButton = <
-  TData extends Record<string, any> = {},
+  TData extends Record<string, any>,
 >({
   table,
   ...rest

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -4,6 +4,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 const commonIconButtonStyles = {
   height: '2rem',
@@ -16,14 +17,14 @@ const commonIconButtonStyles = {
   },
 };
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   cell: MRT_Cell<TData>;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleRowActionMenuButton = <
-  TData extends Record<string, any> = {},
+  TData extends Record<string, any>,
 >({
   cell,
   row,
@@ -32,7 +33,8 @@ export const MRT_ToggleRowActionMenuButton = <
   const {
     getState,
     options: {
-      editingMode,
+      createDisplayMode,
+      editDisplayMode,
       enableEditing,
       icons: { EditIcon, MoreHorizIcon },
       localization,
@@ -42,7 +44,14 @@ export const MRT_ToggleRowActionMenuButton = <
     setEditingRow,
   } = table;
 
-  const { editingRow } = getState();
+  const { creatingRow, editingRow } = getState();
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
+
+  const showEditActionButtons =
+    (isCreating && createDisplayMode === 'row') ||
+    (isEditing && editDisplayMode === 'row');
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -60,14 +69,12 @@ export const MRT_ToggleRowActionMenuButton = <
 
   return (
     <>
-      {renderRowActions ? (
+      {renderRowActions && !showEditActionButtons ? (
         renderRowActions({ cell, row, table })
-      ) : row.id === editingRow?.id && editingMode === 'row' ? (
+      ) : showEditActionButtons ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&
-        (enableEditing instanceof Function
-          ? enableEditing(row)
-          : enableEditing) ? (
+        parseFromValuesOrFunc(enableEditing, row) ? (
         <Tooltip placement="right" arrow title={localization.edit}>
           <IconButton
             aria-label={localization.edit}
@@ -97,9 +104,9 @@ export const MRT_ToggleRowActionMenuButton = <
           <MRT_RowActionMenu
             anchorEl={anchorEl}
             handleEdit={handleStartEditMode}
-            row={row as any}
+            row={row}
             setAnchorEl={setAnchorEl}
-            table={table as any}
+            table={table}
           />
         </>
       ) : null}

package/src/buttons/index.ts

@@ -0,0 +1,13 @@
+export * from './MRT_ColumnPinningButtons';
+export * from './MRT_CopyButton';
+export * from './MRT_EditActionButtons';
+export * from './MRT_ExpandAllButton';
+export * from './MRT_ExpandButton';
+export * from './MRT_GrabHandleButton';
+export * from './MRT_RowPinButton';
+export * from './MRT_ShowHideColumnsButton';
+export * from './MRT_ToggleDensePaddingButton';
+export * from './MRT_ToggleFiltersButton';
+export * from './MRT_ToggleFullScreenButton';
+export * from './MRT_ToggleGlobalFilterButton';
+export * from './MRT_ToggleRowActionMenuButton';

package/src/column.utils.ts

@@ -1,12 +1,18 @@
+import { type ReactNode } from 'react';
+import {
+  type Row,
+  type Renderable,
+  flexRender as _flexRender,
+  createRow as _createRow,
+} from '@tanstack/react-table';
 import { alpha, lighten } from '@mui/material/styles';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_SortingFns } from './sortingFns';
-import { type Row } from '@tanstack/react-table';
 import { type TableCellProps } from '@mui/material/TableCell';
 import { type Theme } from '@mui/material/styles';
 import {
-  type MaterialReactTableProps,
+  type MRT_TableOptions,
   type MRT_Column,
   type MRT_ColumnDef,
   type MRT_ColumnOrderState,
@@ -16,14 +22,15 @@ import {
   type MRT_GroupingState,
   type MRT_Header,
   type MRT_TableInstance,
+  type MRT_Row,
 } from './types';
 
-export const getColumnId = <TData extends Record<string, any> = {}>(
+export const getColumnId = <TData extends Record<string, any>>(
   columnDef: MRT_ColumnDef<TData>,
 ): string =>
   columnDef.id ?? columnDef.accessorKey?.toString?.() ?? columnDef.header;
 
-export const getAllLeafColumnDefs = <TData extends Record<string, any> = {}>(
+export const getAllLeafColumnDefs = <TData extends Record<string, any>>(
   columns: MRT_ColumnDef<TData>[],
 ): MRT_ColumnDef<TData>[] => {
   const allLeafColumnDefs: MRT_ColumnDef<TData>[] = [];
@@ -40,7 +47,7 @@ export const getAllLeafColumnDefs = <TData extends Record<string, any> = {}>(
   return allLeafColumnDefs;
 };
 
-export const prepareColumns = <TData extends Record<string, any> = {}>({
+export const prepareColumns = <TData extends Record<string, any>>({
   aggregationFns,
   columnDefs,
   columnFilterFns,
@@ -49,13 +56,12 @@ export const prepareColumns = <TData extends Record<string, any> = {}>({
   sortingFns,
 }: {
   aggregationFns: typeof MRT_AggregationFns &
-    MaterialReactTableProps<TData>['aggregationFns'];
+    MRT_TableOptions<TData>['aggregationFns'];
   columnDefs: MRT_ColumnDef<TData>[];
   columnFilterFns: { [key: string]: MRT_FilterOption };
   defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
-  filterFns: typeof MRT_FilterFns & MaterialReactTableProps<TData>['filterFns'];
-  sortingFns: typeof MRT_SortingFns &
-    MaterialReactTableProps<TData>['sortingFns'];
+  filterFns: typeof MRT_FilterFns & MRT_TableOptions<TData>['filterFns'];
+  sortingFns: typeof MRT_SortingFns & MRT_TableOptions<TData>['sortingFns'];
 }): MRT_DefinedColumnDef<TData>[] =>
   columnDefs.map((columnDef) => {
     //assign columnId
@@ -88,8 +94,8 @@ export const prepareColumns = <TData extends Record<string, any> = {}>({
           leafRows: Row<TData>[],
           childRows: Row<TData>[],
         ) =>
-          aggFns.map((fn) =>
-            aggregationFns[fn]?.(columnId, leafRows, childRows),
+          aggFns.map(
+            (fn) => aggregationFns[fn]?.(columnId, leafRows, childRows),
           );
       }
 
@@ -97,7 +103,7 @@ export const prepareColumns = <TData extends Record<string, any> = {}>({
       if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
         columnDef.filterFn =
           filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
-        (columnDef as MRT_DefinedColumnDef)._filterFn =
+        (columnDef as MRT_DefinedColumnDef<TData>)._filterFn =
           columnFilterFns[columnDef.id];
       }
 
@@ -115,7 +121,7 @@ export const prepareColumns = <TData extends Record<string, any> = {}>({
     return columnDef;
   }) as MRT_DefinedColumnDef<TData>[];
 
-export const reorderColumn = <TData extends Record<string, any> = {}>(
+export const reorderColumn = <TData extends Record<string, any>>(
   draggedColumn: MRT_Column<TData>,
   targetColumn: MRT_Column<TData>,
   columnOrder: MRT_ColumnOrderState,
@@ -132,8 +138,8 @@ export const reorderColumn = <TData extends Record<string, any> = {}>(
   return newColumnOrder;
 };
 
-export const showExpandColumn = <TData extends Record<string, any> = {}>(
-  props: MaterialReactTableProps<TData>,
+export const showExpandColumn = <TData extends Record<string, any>>(
+  props: MRT_TableOptions<TData>,
   grouping?: MRT_GroupingState,
 ) =>
   !!(
@@ -142,17 +148,18 @@ export const showExpandColumn = <TData extends Record<string, any> = {}>(
     props.renderDetailPanel
   );
 
-export const getLeadingDisplayColumnIds = <
-  TData extends Record<string, any> = {},
->(
-  props: MaterialReactTableProps<TData>,
+export const getLeadingDisplayColumnIds = <TData extends Record<string, any>>(
+  props: MRT_TableOptions<TData>,
 ) =>
   [
+    props.enableRowPinning &&
+      !props.rowPinningDisplayMode?.startsWith('select') &&
+      'mrt-row-pin',
     (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
     props.positionActionsColumn === 'first' &&
       (props.enableRowActions ||
         (props.enableEditing &&
-          ['row', 'modal'].includes(props.editingMode ?? ''))) &&
+          ['row', 'modal'].includes(props.editDisplayMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'first' &&
       showExpandColumn(props) &&
@@ -161,26 +168,22 @@ export const getLeadingDisplayColumnIds = <
     props.enableRowNumbers && 'mrt-row-numbers',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
-export const getTrailingDisplayColumnIds = <
-  TData extends Record<string, any> = {},
->(
-  props: MaterialReactTableProps<TData>,
+export const getTrailingDisplayColumnIds = <TData extends Record<string, any>>(
+  props: MRT_TableOptions<TData>,
 ) =>
   [
     props.positionActionsColumn === 'last' &&
       (props.enableRowActions ||
         (props.enableEditing &&
-          ['row', 'modal'].includes(props.editingMode ?? ''))) &&
+          ['row', 'modal'].includes(props.editDisplayMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'last' &&
       showExpandColumn(props) &&
       'mrt-row-expand',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
-export const getDefaultColumnOrderIds = <
-  TData extends Record<string, any> = {},
->(
-  props: MaterialReactTableProps<TData>,
+export const getDefaultColumnOrderIds = <TData extends Record<string, any>>(
+  props: MRT_TableOptions<TData>,
 ) => {
   const leadingDisplayCols: string[] = getLeadingDisplayColumnIds(props);
   const trailingDisplayCols: string[] = getTrailingDisplayColumnIds(props);
@@ -194,9 +197,7 @@ export const getDefaultColumnOrderIds = <
   return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
 };
 
-export const getDefaultColumnFilterFn = <
-  TData extends Record<string, any> = {},
->(
+export const getDefaultColumnFilterFn = <TData extends Record<string, any>>(
   columnDef: MRT_ColumnDef<TData>,
 ): MRT_FilterOption => {
   if (columnDef.filterVariant === 'multi-select') return 'arrIncludesSome';
@@ -213,24 +214,24 @@ export const getDefaultColumnFilterFn = <
   return 'fuzzy';
 };
 
-export const getIsFirstColumn = (
-  column: MRT_Column,
-  table: MRT_TableInstance,
+export const getIsFirstColumn = <TData extends Record<string, any>>(
+  column: MRT_Column<TData>,
+  table: MRT_TableInstance<TData>,
 ) => {
   return table.getVisibleLeafColumns()[0].id === column.id;
 };
 
-export const getIsLastColumn = (
-  column: MRT_Column,
-  table: MRT_TableInstance,
+export const getIsLastColumn = <TData extends Record<string, any>>(
+  column: MRT_Column<TData>,
+  table: MRT_TableInstance<TData>,
 ) => {
   const columns = table.getVisibleLeafColumns();
   return columns[columns.length - 1].id === column.id;
 };
 
-export const getIsLastLeftPinnedColumn = (
-  table: MRT_TableInstance,
-  column: MRT_Column,
+export const getIsLastLeftPinnedColumn = <TData extends Record<string, any>>(
+  table: MRT_TableInstance<TData>,
+  column: MRT_Column<TData>,
 ) => {
   return (
     column.getIsPinned() === 'left' &&
@@ -238,27 +239,57 @@ export const getIsLastLeftPinnedColumn = (
   );
 };
 
-export const getIsFirstRightPinnedColumn = (column: MRT_Column) => {
+export const getIsFirstRightPinnedColumn = <TData extends Record<string, any>>(
+  column: MRT_Column<TData>,
+) => {
   return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
 };
 
-export const getTotalRight = (table: MRT_TableInstance, column: MRT_Column) => {
+export const getTotalRight = <TData extends Record<string, any>>(
+  table: MRT_TableInstance<TData>,
+  column: MRT_Column<TData>,
+) => {
   return table
     .getRightLeafHeaders()
     .slice(column.getPinnedIndex() + 1)
     .reduce((acc, col) => acc + col.getSize(), 0);
 };
 
-export const getCommonCellStyles = ({
+export const getCanRankRows = <TData extends Record<string, any>>(
+  table: MRT_TableInstance<TData>,
+) => {
+  const { options, getState } = table;
+  const {
+    manualExpanding,
+    manualFiltering,
+    manualGrouping,
+    manualSorting,
+    enableGlobalFilterRankedResults,
+  } = options;
+  const { globalFilterFn, expanded } = getState();
+
+  return (
+    !manualExpanding &&
+    !manualFiltering &&
+    !manualGrouping &&
+    !manualSorting &&
+    enableGlobalFilterRankedResults &&
+    globalFilterFn === 'fuzzy' &&
+    expanded !== true &&
+    !Object.values(expanded).some(Boolean)
+  );
+};
+
+export const getCommonCellStyles = <TData extends Record<string, any>>({
   column,
   header,
   table,
   tableCellProps,
   theme,
 }: {
-  column: MRT_Column;
-  header?: MRT_Header;
-  table: MRT_TableInstance;
+  column: MRT_Column<TData>;
+  header?: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
   tableCellProps: TableCellProps;
   theme: Theme;
 }) => {
@@ -328,9 +359,7 @@ export const getCommonCellStyles = ({
       ? 'none'
       : `padding 150ms ease-in-out`,
     ...(!table.options.enableColumnResizing && widthStyles), //let devs pass in width styles if column resizing is disabled
-    ...(tableCellProps?.sx instanceof Function
-      ? tableCellProps.sx(theme)
-      : (tableCellProps?.sx as any)),
+    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
     ...(table.options.enableColumnResizing && widthStyles), //don't let devs pass in width styles if column resizing is enabled
   };
 };
@@ -357,4 +386,32 @@ export const MRT_DefaultDisplayColumn = {
   enableSorting: false,
 } as const;
 
+export const parseFromValuesOrFunc = <T, U>(
+  fn: T | ((arg: U) => T) | undefined,
+  arg: U,
+): T | undefined => (fn instanceof Function ? fn(arg) : fn);
+
 export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
+
+export const flexRender = _flexRender as (
+  Comp: Renderable<any>,
+  props: any,
+) => ReactNode | JSX.Element;
+
+export const createRow = <TData extends Record<string, any>>(
+  table: MRT_TableInstance<TData>,
+  originalRow?: TData,
+): MRT_Row<TData> =>
+  _createRow(
+    table as any,
+    'mrt-row-create',
+    originalRow ??
+      Object.assign(
+        {},
+        ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
+          [getColumnId(col)]: '',
+        })),
+      ),
+    -1,
+    0,
+  ) as MRT_Row<TData>;