Best way to implement edit cell in expand/virtual table

[WojakGra]

Hi,
What is the best way to add input for editing in a cell?

This is my current implementation, where I have expand and virtualization in the table.

[WojakGra]

import { TextInput } from '@mantine/core'
import { useEffect, useState } from 'react'
import type { RevisionLibrary } from '../../../../services/types'
import type { RevisionLibraryTableCellProps } from './RevisionLibraryTableCellProps'

const EditableNameCell = ({ cellContext, onMutate }: RevisionLibraryTableCellProps) => {
  const cellValue = cellContext.row.original[cellContext.column.id as keyof RevisionLibrary] as string
  const [value, setValue] = useState(cellValue)
  useEffect(() => {
    setValue(cellValue)
  }, [cellValue])

  const onBlur = () => {
    if (cellValue === value) {
      return
    }

    const newData = { ...cellContext.row.original, [cellContext.column.id]: value }
    if (newData._id) {
      onMutate(
        { revisionLibraryId: newData._id, payload: newData },
        {
          onError: () => {
            setValue(cellValue)
          },
        }
      )
    }
  }

  return (
    <TextInput
      variant="unstyled"
      size="xs"
      autoComplete="off"
      value={value}
      onBlur={onBlur}
      onChange={(e) => setValue(e.target.value)}
      style={{ flexGrow: 1 }}
    />
  )
}

export default EditableNameCell

export const createColumns = ({
  revisionId,
  onMutate,
  onAdd,
  onLibraryOpen,
}: ColumnConfig): ColumnDef<RevisionLibrary>[] => [
  ...
  {
    accessorKey: 'name',
    header: 'Nazwa',
    size: 350,
    cell: (cellContext) => <EditableNameCell cellContext={cellContext} onMutate={onMutate} />,
  },
  ...
]

[amasen02]

When combining editable cells with virtualization and expanding rows, two major gotchas occur with a naive useState + onBlur pattern:

1. Virtualization unmount gotcha: Virtual rows unmount immediately when scrolled out of view. If a user types and scrolls away before blurring the input, onBlur never fires, and uncommitted edits are lost.
2. Expanding rows gotcha: In tables with subRows, passing rowIndex or relying on array indexes fails because subrow paths differ from top-level indices. You must key mutations by the record's unique ID (_id).

Here is the robust, production-tested architecture for TanStack Table + Virtualization + Expanding rows:

---

1. Leverage table.options.meta for Data Updates

Instead of drilling onMutate through column definition closures, declare an updateData handler on the table's meta. This allows column definitions to remain statically memoized:

// Extend TanStack Table types
declare module '@tanstack/react-table' {
  interface TableMeta<TData extends RowData> {
    updateData: (id: string, columnId: string, value: unknown) => Promise<void> | void;
  }
}

// In your table component:
const table = useReactTable({
  data,
  columns,
  getRowId: (row) => row._id, // Critical for expanding subrows
  meta: {
    updateData: async (rowId, columnId, value) => {
      // 1. Optimistically update local table state
      setData((old) =>
        updateRowRecursively(old, rowId, (row) => ({ ...row, [columnId]: value }))
      );

      // 2. Persist to server
      try {
        await onMutate({ revisionLibraryId: rowId, payload: { [columnId]: value } });
      } catch (err) {
        // Roll back on failure
        setData(previousData);
      }
    },
  },
});

---

2. Safeguard Edits Against Virtualization Unmounts

Add an Enter key listener and flush pending changes if the cell unmounts while dirty:

import { useEffect, useRef, useState } from 'react';
import { TextInput } from '@mantine/core';
import { CellContext } from '@tanstack/react-table';

export function EditableTextCell<TData>({
  getValue,
  row,
  column,
  table,
}: CellContext<TData, string>) {
  const initialValue = getValue();
  const [value, setValue] = useState(initialValue);
  const isDirty = useRef(false);

  // Sync state if external row data updates
  useEffect(() => {
    setValue(initialValue);
    isDirty.current = false;
  }, [initialValue]);

  const commit = () => {
    if (!isDirty.current || value === initialValue) return;
    isDirty.current = false;
    table.options.meta?.updateData(row.id, column.id, value);
  };

  // Flush pending changes if the virtual row unmounts while editing
  useEffect(() => {
    return () => {
      if (isDirty.current) {
        commit();
      }
    };
  }, [value]);

  return (
    <TextInput
      variant="unstyled"
      size="xs"
      value={value ?? ''}
      onChange={(e) => {
        isDirty.current = true;
        setValue(e.currentTarget.value);
      }}
      onBlur={commit}
      onKeyDown={(e) => {
        if (e.key === 'Enter') {
          e.currentTarget.blur();
        } else if (e.key === 'Escape') {
          isDirty.current = false;
          setValue(initialValue);
          e.currentTarget.blur();
        }
      }}
      style={{ flexGrow: 1 }}
    />
  );
}

---

3. Clean Column Definition

Now column definitions don't need closure re-creation or prop-drilling:

export const columns: ColumnDef<RevisionLibrary>[] = [
  {
    accessorKey: 'name',
    header: 'Nazwa',
    size: 350,
    cell: EditableTextCell,
  },
];

Why this works:

• Virtual scrolling does not discard in-progress edits.
• Pressing Enter saves immediately, Escape cancels.
• Subrows and parent rows update accurately using row.id rather than array indices.

[WojakGra]

// Flush pending changes if the virtual row unmounts while editing
useEffect(() => {
  return () => {
    if (isDirty.current) {
      commit();
    }
  };
}, [value]);

Without any debounce, the value is always sent to server instantly