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

package/src/body/MRT_TableBodyCell.tsx

@@ -1,25 +1,26 @@
 import {
-  memo,
   type DragEvent,
   type MouseEvent,
   type RefObject,
+  memo,
   useEffect,
   useMemo,
   useState,
 } from 'react';
+import { type VirtualItem } from '@tanstack/react-virtual';
 import Skeleton from '@mui/material/Skeleton';
 import TableCell from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
-import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
-import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
+import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
+import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import {
   getCommonCellStyles,
   getIsFirstColumn,
   getIsLastColumn,
+  parseFromValuesOrFunc,
 } from '../column.utils';
-import { type VirtualItem } from '@tanstack/react-virtual';
+import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -53,8 +54,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
       enableGrouping,
       enableRowNumbers,
       layoutMode,
-      muiTableBodyCellProps,
       muiSkeletonProps,
+      muiTableBodyCellProps,
       rowNumberMode,
     },
     refs: { editInputRefs },
@@ -63,13 +64,13 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   } = table;
   const {
     creatingRow,
+    density,
     draggingColumn,
     draggingRow,
     editingCell,
     editingRow,
     hoveredColumn,
     hoveredRow,
-    density,
     isLoading,
     showSkeletons,
   } = getState();
@@ -77,25 +78,27 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const mTableCellBodyProps =
-    muiTableBodyCellProps instanceof Function
-      ? muiTableBodyCellProps({ cell, column, row, table })
-      : muiTableBodyCellProps;
-
-  const mcTableCellBodyProps =
-    columnDef.muiTableBodyCellProps instanceof Function
-      ? columnDef.muiTableBodyCellProps({ cell, column, row, table })
-      : columnDef.muiTableBodyCellProps;
-
   const tableCellProps = {
-    ...mTableCellBodyProps,
-    ...mcTableCellBodyProps,
+    ...parseFromValuesOrFunc(muiTableBodyCellProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
   };
 
-  const skeletonProps =
-    muiSkeletonProps instanceof Function
-      ? muiSkeletonProps({ cell, column, row, table })
-      : muiSkeletonProps;
+  const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
+    cell,
+    column,
+    row,
+    table,
+  });
 
   const [skeletonWidth, setSkeletonWidth] = useState(100);
   useEffect(() => {
@@ -126,6 +129,10 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
 
     return borderStyle
       ? {
+          borderBottom:
+            isDraggingRow || isHoveredRow || isLastRow
+              ? borderStyle
+              : undefined,
           borderLeft:
             isDraggingColumn ||
             isHoveredColumn ||
@@ -138,24 +145,18 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
             ((isDraggingRow || isHoveredRow) && isLastColumn)
               ? borderStyle
               : undefined,
-          borderBottom:
-            isDraggingRow || isHoveredRow || isLastRow
-              ? borderStyle
-              : undefined,
           borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
         }
       : undefined;
   }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
 
   const isEditable =
-    (enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
-    (columnDef.enableEditing instanceof Function
-      ? columnDef.enableEditing(row)
-      : columnDef.enableEditing) !== false;
+    parseFromValuesOrFunc(enableEditing, row) &&
+    parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
 
   const isEditing =
     isEditable &&
-    !['modal', 'custom'].includes(editDisplayMode as string) &&
+    !['custom', 'modal'].includes(editDisplayMode as string) &&
     (editDisplayMode === 'table' ||
       editingRow?.id === row.id ||
       editingCell?.id === cell.id) &&
@@ -199,9 +200,16 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
         }
       }}
       {...tableCellProps}
-      onDragEnter={handleDragEnter}
       onDoubleClick={handleDoubleClick}
+      onDragEnter={handleDragEnter}
       sx={(theme) => ({
+        '&:hover': {
+          outline: ['cell', 'table'].includes(editDisplayMode ?? '')
+            ? `1px solid ${theme.palette.text.secondary}`
+            : undefined,
+          outlineOffset: '-1px',
+          textOverflow: 'clip',
+        },
         alignItems: layoutMode === 'grid' ? 'center' : undefined,
         cursor:
           isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit',
@@ -232,21 +240,15 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
               }rem`
             : undefined,
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
-        whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
+        whiteSpace:
+          row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
-        '&:hover': {
-          outline: ['table', 'cell'].includes(editDisplayMode ?? '')
-            ? `1px solid ${theme.palette.text.secondary}`
-            : undefined,
-          outlineOffset: '-1px',
-          textOverflow: 'clip',
-        },
         ...getCommonCellStyles({
           column,
           table,
-          theme,
           tableCellProps,
+          theme,
         }),
         ...draggingBorders,
       })}
@@ -273,8 +275,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
             !row.getIsGrouped()) ? (
           columnDef.Cell?.({
             cell,
-            renderedCellValue: cell.renderValue() as any,
             column,
+            renderedCellValue: cell.renderValue() as any,
             row,
             table,
           })

package/src/body/MRT_TableBodyCellValue.tsx

@@ -1,8 +1,8 @@
 import { type ReactNode } from 'react';
 import Box from '@mui/material/Box';
 import { darken, lighten } from '@mui/material/styles';
-import highlightWords from 'highlight-words';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import highlightWords from 'highlight-words';
 
 const allowedTypes = ['string', 'number'];
 
@@ -46,7 +46,7 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
   const isGroupedValue = renderedCellValue !== undefined;
 
   if (!isGroupedValue) {
-    renderedCellValue = cell.renderValue() as number | string | ReactNode;
+    renderedCellValue = cell.renderValue() as ReactNode | number | string;
   }
 
   if (
@@ -62,10 +62,10 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
         column.getCanGlobalFilter()))
   ) {
     const chunks = highlightWords?.({
-      text: renderedCellValue?.toString() as string,
-      query: (filterValue ?? globalFilter ?? '').toString(),
       matchExactly:
         (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
+      query: (filterValue ?? globalFilter ?? '').toString(),
+      text: renderedCellValue?.toString() as string,
     });
     if (chunks?.length > 1 || chunks?.[0]?.match) {
       renderedCellValue = (
@@ -101,8 +101,8 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
   if (columnDef.Cell && !isGroupedValue) {
     renderedCellValue = columnDef.Cell({
       cell,
-      renderedCellValue,
       column,
+      renderedCellValue,
       row,
       table,
     });

package/src/body/MRT_TableBodyRow.tsx

@@ -1,15 +1,23 @@
-import { type DragEvent, memo, useRef } from 'react';
+import { type DragEvent, memo, useMemo, useRef } from 'react';
+import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
 import TableRow from '@mui/material/TableRow';
-import { type Theme, alpha, darken, lighten } from '@mui/material/styles';
-import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
+import {
+  type Theme,
+  alpha,
+  darken,
+  lighten,
+  useTheme,
+} from '@mui/material/styles';
+import { MRT_TableBodyCell, Memo_MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
-import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   measureElement?: (element: HTMLTableRowElement) => void;
   numRows: number;
+  pinnedRowIds?: string[];
   row: MRT_Row<TData>;
   rowIndex: number;
   table: MRT_TableInstance<TData>;
@@ -23,6 +31,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
   columnVirtualizer,
   measureElement,
   numRows,
+  pinnedRowIds,
   row,
   rowIndex,
   table,
@@ -31,24 +40,70 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
   virtualPaddingRight,
   virtualRow,
 }: Props<TData>) => {
+  const theme = useTheme();
+
   const {
     getState,
     options: {
       enableRowOrdering,
+      enableRowPinning,
+      enableStickyFooter,
+      enableStickyHeader,
       layoutMode,
       memoMode,
       muiTableBodyRowProps,
       renderDetailPanel,
+      rowPinningDisplayMode,
     },
+    refs: { tableFooterRef, tableHeadRef },
     setHoveredRow,
   } = table;
-  const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } =
-    getState();
+  const {
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    hoveredRow,
+    isFullScreen,
+    rowPinning,
+  } = getState();
+
+  const isPinned = enableRowPinning && row.getIsPinned();
 
-  const tableRowProps =
-    muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, staticRowIndex: rowIndex, table })
-      : muiTableBodyRowProps;
+  const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+    row,
+    staticRowIndex: rowIndex,
+    table,
+  });
+
+  const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
+    if (
+      !enableRowPinning ||
+      !rowPinningDisplayMode?.includes('sticky') ||
+      !pinnedRowIds ||
+      !row.getIsPinned()
+    )
+      return [];
+    return [
+      [...pinnedRowIds].reverse().indexOf(row.id),
+      pinnedRowIds.indexOf(row.id),
+    ];
+  }, [pinnedRowIds, rowPinning]);
+
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+
+  const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme as any);
+
+  const rowHeight =
+    // @ts-ignore
+    parseInt(tableRowProps?.style?.height ?? sx?.height, 10) ||
+    (density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69);
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableRowOrdering && draggingRow) {
@@ -63,24 +118,21 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
       <TableRow
         data-index={virtualRow?.index}
         onDragEnter={handleDragEnter}
-        selected={row.getIsSelected()}
         ref={(node: HTMLTableRowElement) => {
           if (node) {
             rowRef.current = node;
             measureElement?.(node);
           }
         }}
+        selected={row.getIsSelected()}
         {...tableRowProps}
+        style={{
+          transform: virtualRow
+            ? `translateY(${virtualRow?.start}px)`
+            : undefined,
+          ...tableRowProps?.style,
+        }}
         sx={(theme: Theme) => ({
-          backgroundColor: lighten(theme.palette.background.default, 0.06),
-          boxSizing: 'border-box',
-          display: layoutMode === 'grid' ? 'flex' : 'table-row',
-          opacity:
-            draggingRow?.id === row.id || hoveredRow?.id === row.id ? 0.5 : 1,
-          position: virtualRow ? 'absolute' : undefined,
-          transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
-          top: virtualRow ? 0 : undefined,
-          width: '100%',
           '&:hover td': {
             backgroundColor:
               tableRowProps?.hover !== false
@@ -91,16 +143,52 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
                   : `${darken(theme.palette.background.default, 0.05)}`
                 : undefined,
           },
-          ...(tableRowProps?.sx instanceof Function
-            ? tableRowProps.sx(theme)
-            : (tableRowProps?.sx as any)),
-        })}
-        style={{
-          transform: virtualRow
-            ? `translateY(${virtualRow?.start}px)`
+          backgroundColor: `${lighten(
+            theme.palette.background.default,
+            0.06,
+          )} !important`,
+          bottom:
+            !virtualRow && bottomPinnedIndex !== undefined && isPinned
+              ? `${
+                  bottomPinnedIndex * rowHeight +
+                  (enableStickyFooter ? tableFooterHeight - 1 : 0)
+                }px`
+              : undefined,
+          boxSizing: 'border-box',
+          display: layoutMode === 'grid' ? 'flex' : 'table-row',
+          opacity: isPinned
+            ? 0.98
+            : draggingRow?.id === row.id || hoveredRow?.id === row.id
+            ? 0.5
+            : 1,
+          position: virtualRow
+            ? 'absolute'
+            : rowPinningDisplayMode?.includes('sticky') && isPinned
+            ? 'sticky'
             : undefined,
-          ...tableRowProps?.style,
-        }}
+          td: {
+            backgroundColor: row.getIsSelected()
+              ? alpha(theme.palette.primary.main, 0.2)
+              : isPinned
+              ? alpha(theme.palette.primary.main, 0.1)
+              : undefined,
+          },
+          top: virtualRow
+            ? 0
+            : topPinnedIndex !== undefined && isPinned
+            ? `${
+                topPinnedIndex * rowHeight +
+                (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
+              }px`
+            : undefined,
+          transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
+          width: '100%',
+          zIndex:
+            rowPinningDisplayMode?.includes('sticky') && isPinned
+              ? 1
+              : undefined,
+          ...(sx as any),
+        })}
       >
         {virtualPaddingLeft ? (
           <td style={{ display: 'flex', width: virtualPaddingLeft }} />

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -1,5 +1,6 @@
 import { type DragEvent, type RefObject } from 'react';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -17,10 +18,10 @@ export const MRT_TableBodyRowGrabHandle = <TData extends Record<string, any>>({
     options: { muiRowDragHandleProps },
   } = table;
 
-  const iconButtonProps =
-    muiRowDragHandleProps instanceof Function
-      ? muiRowDragHandleProps({ row, table })
-      : muiRowDragHandleProps;
+  const iconButtonProps = parseFromValuesOrFunc(muiRowDragHandleProps, {
+    row,
+    table,
+  });
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
     iconButtonProps?.onDragStart?.(event);
@@ -37,8 +38,8 @@ export const MRT_TableBodyRowGrabHandle = <TData extends Record<string, any>>({
   return (
     <MRT_GrabHandleButton
       iconButtonProps={iconButtonProps}
-      onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
       table={table}
     />
   );

package/src/body/MRT_TableBodyRowPinButton.tsx

@@ -0,0 +1,46 @@
+import Box from '@mui/material/Box';
+import { MRT_RowPinButton } from '../buttons/MRT_RowPinButton';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
+
+interface Props<TData extends Record<string, any>> {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBodyRowPinButton = <TData extends Record<string, any>>({
+  row,
+  table,
+}: Props<TData>) => {
+  const {
+    getState,
+    options: { enableRowPinning, rowPinningDisplayMode },
+  } = table;
+  const { density } = getState();
+
+  const canPin = parseFromValuesOrFunc(enableRowPinning, row as any);
+
+  if (!canPin) return null;
+
+  if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: density === 'compact' ? 'row' : 'column',
+        }}
+      >
+        <MRT_RowPinButton pinningPosition="top" row={row} table={table} />
+        <MRT_RowPinButton pinningPosition="bottom" row={row} table={table} />
+      </Box>
+    );
+  }
+
+  return (
+    <MRT_RowPinButton
+      pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'}
+      row={row}
+      table={table}
+    />
+  );
+};

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,9 +1,10 @@
 import { type RefObject } from 'react';
+import { type VirtualItem } from '@tanstack/react-virtual';
 import Collapse from '@mui/material/Collapse';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
-import { type VirtualItem } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -22,31 +23,28 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
   virtualRow,
 }: Props<TData>) => {
   const {
-    getVisibleLeafColumns,
     getState,
+    getVisibleLeafColumns,
     options: {
       layoutMode,
-      muiTableBodyRowProps,
       muiDetailPanelProps,
+      muiTableBodyRowProps,
       renderDetailPanel,
     },
   } = table;
   const { isLoading } = getState();
 
-  const tableRowProps =
-    muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({
-          isDetailPanel: true,
-          row,
-          staticRowIndex: rowIndex,
-          table,
-        })
-      : muiTableBodyRowProps;
+  const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+    isDetailPanel: true,
+    row,
+    staticRowIndex: rowIndex,
+    table,
+  });
 
-  const tableCellProps =
-    muiDetailPanelProps instanceof Function
-      ? muiDetailPanelProps({ row, table })
-      : muiDetailPanelProps;
+  const tableCellProps = parseFromValuesOrFunc(muiDetailPanelProps, {
+    row,
+    table,
+  });
 
   return (
     <TableRow
@@ -63,9 +61,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
           : undefined,
         width: '100%',
         zIndex: virtualRow ? 2 : undefined,
-        ...(tableRowProps?.sx instanceof Function
-          ? tableRowProps.sx(theme)
-          : (tableRowProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}
     >
       <TableCell
@@ -82,9 +78,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 150ms ease-in-out',
           width: `${table.getTotalSize()}px`,
-          ...(tableCellProps?.sx instanceof Function
-            ? tableCellProps.sx(theme)
-            : (tableCellProps?.sx as any)),
+          ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
         })}
       >
         {renderDetailPanel && (

package/src/body/index.ts

@@ -3,4 +3,5 @@ export * from './MRT_TableBodyCell';
 export * from './MRT_TableBodyCellValue';
 export * from './MRT_TableBodyRow';
 export * from './MRT_TableBodyRowGrabHandle';
-export * from './MRT_TableDetailPanel';
+export * from './MRT_TableBodyRowPinButton';
+export * from './MRT_TableDetailPanel';

package/src/buttons/MRT_CopyButton.tsx

@@ -1,6 +1,7 @@
 import { type MouseEvent, type ReactNode, useState } from 'react';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -29,24 +30,19 @@ export const MRT_CopyButton = <TData extends Record<string, any>>({
     setTimeout(() => setCopied(false), 4000);
   };
 
-  const mTableBodyCellCopyButtonProps =
-    muiCopyButtonProps instanceof Function
-      ? muiCopyButtonProps({ cell, column, row, table })
-      : muiCopyButtonProps;
-
-  const mcTableBodyCellCopyButtonProps =
-    columnDef.muiCopyButtonProps instanceof Function
-      ? columnDef.muiCopyButtonProps({
-          cell,
-          column,
-          row,
-          table,
-        })
-      : columnDef.muiCopyButtonProps;
-
   const buttonProps = {
-    ...mTableBodyCellCopyButtonProps,
-    ...mcTableBodyCellCopyButtonProps,
+    ...parseFromValuesOrFunc(muiCopyButtonProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
   };
 
   return (
@@ -78,9 +74,7 @@ export const MRT_CopyButton = <TData extends Record<string, any>>({
           minWidth: 'unset',
           textAlign: 'inherit',
           textTransform: 'inherit',
-          ...(buttonProps?.sx instanceof Function
-            ? buttonProps.sx(theme)
-            : (buttonProps?.sx as any)),
+          ...(parseFromValuesOrFunc(buttonProps?.sx, theme) as any),
         })}
         title={undefined}
       >