Skip to content

feat: Table full-row inline editing with batch save - #4759

Draft
ernst-dev wants to merge 1 commit into
mainfrom
feat/table-row-edit
Draft

feat: Table full-row inline editing with batch save#4759
ernst-dev wants to merge 1 commit into
mainfrom
feat/table-row-edit

Conversation

@ernst-dev

Copy link
Copy Markdown
Member

Description

Implements row-level batch inline editing for the Table component, resolving #4181.

When rowEditingConfig is set, an action column is appended to the table with an Edit button per row. Clicking Edit puts all columns that have editConfig into edit state simultaneously. A single Save commits all changes via the new submitRowEdit(item, newValues) callback (receives the original item and a Map<columnKey, newValue> of changed cells). Cancel reverts without saving.

The existing per-cell immediate-save path (submitEdit) is fully preserved and unaffected.

New API:

  • TableProps.rowEditingConfig (RowEditingConfig<T>) — enables row-edit mode; optional disabledReason fn for per-row disable
  • TableProps.submitRowEdit (SubmitRowEditFunction<T>) — batch save callback; return a Promise to show loading state
  • TableProps.AriaLabels: activateRowEditLabel, cancelRowEditLabel, submitRowEditLabel, submittingRowEditText

Files changed:

  • src/table/interfaces.tsx — new types
  • src/table/use-row-editing.ts — row-edit state hook
  • src/table/row-editing/RowEditActionCell component + styles
  • src/table/internal.tsx — wiring
  • src/table/thead.tsx — action column header
  • src/table/__tests__/table-row-edit.test.tsx — 8 unit tests (all passing)
  • pages/table/row-edit.page.tsx — dev page

Related links, issue #, if available: Closes #4181

How has this been tested?

  • 8 unit tests in src/table/__tests__/table-row-edit.test.tsx (all pass)
  • Existing table-editable.test.tsx tests still pass
  • Dev page at pages/table/row-edit.page.tsx
Review checklist

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible — rowEditingConfig is opt-in; existing submitEdit / per-cell path unchanged.
  • Changes were manually tested for accessibility.

Security

  • No URL handling.

Testing

  • Changes are covered with new unit tests.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

Adds a row-level edit mode to the Table component via a new
`rowEditingConfig` prop. When set, an action column is appended with
Edit / Save / Cancel buttons per row. Clicking Edit puts all columns
that have `editConfig` into edit state simultaneously; Save calls the
new `submitRowEdit(item, newValues)\ callback with a Map of changed
column values; Cancel reverts without saving.

The existing per-cell immediate-save path (via `submitEdit`) is fully
preserved and unaffected when `rowEditingConfig` is absent.

New API surface:
- `TableProps.rowEditingConfig` (RowEditingConfig<T>) - enables row mode
- `TableProps.submitRowEdit` (SubmitRowEditFunction<T>) - batch save cb
- `TableProps.RowEditingConfig.disabledReason` - per-row disable fn
- `TableProps.AriaLabels.activateRowEditLabel` / cancelRowEditLabel /
  submitRowEditLabel / submittingRowEditText

Closes #4181
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request]: Table: Support full-row inline editing mode with batch save

1 participant