Edit Mode

[barbinbrad]

I'm looking for advice on how to approach Edit Mode:

The way I see it, a cell needs two definitions -- 1/ for when it's in "display mode" and 2/ for when it's in "edit mode".

In edit mode, it may have complex components with a lot of state. It's possible that an edit component may have its own mutation method.

^ All that to say that I want to avoid rendering all of the edit mode components at once.

I can think of a couple ideas, and I'm willing to do this on a fork -- but just looking for advice on direction from community.

Idea 1: ColumDef

const columns = useMemo<ColumnDef<typeof rows[number]>[]>(() => {
      return [
        {
          accessorKey: "name",
          header: "Full Name",
          cell: (item) => 
             item.getIsEditMode()  // don't think anything like this exists
               ? ( item.getValue() )
               :  ( <Input defaultValue={item.getValue()} onBlur={() updateTextField(item)} /> )      
        },
       {
          accessorKey: "birthday",
          header: "Birthday",
          cell: (item) =>
             item.getIsEditMode()  
               ? ( item.getValue() )
               :  ( <Date defaultValue={item.getValue()} onBlur={() updateDateField(item)} /> )
        },
     ]
}

Idea 2: meta

declare module '@tanstack/react-table' {
  interface TableMeta<TData extends RowData> {
    editableComponents: Record<string, JSX.Element>
  }
}



const Table = () => {

const [editingCell, setEditingCell] = useState({row: 0, column: 0});
const renderEditableComponent = (id?: string, value: unknown, data: unknown) => {
  if(table.options.meta?[id]) {
    const Component = table.options.meta[id];
    return <Component value={value} data={data} />
  } 
  return <Fallback value={value}/>
}

return (
  row.getVisibleCells().map((cell, columnIndex) => {
    const isEditing =
      editingCell?.row === rowIndex &&
      editingCell?.column ===
        columnIndex + pinnedColumns;

    return (
      <td>
        { isEditing 
          ? flexRender(
              cell.column.columnDef.cell,
              cell.getContext()
          )
          :  renderEditableComponent(
             cell.column.columnDef.id,
             cell.getContext()
          )
       }
      </td>
)
};