feat: add multi-line textarea variant for inline cell editing (#1354)

[pardeep1916P]

Summary

Closes #1354

This PR adds a textarea variant to the inline cell editor types for editing multi-line text in place.

Proposed API

editor: { type: 'textarea'; placeholder?: string; rows?: number }

Key Changes & Design Details

1. Type Definition: Added { type: 'textarea'; placeholder?: string; rows?: number } to CellEditor union in src/types.ts.
2. Keyboard Semantics:
   • Enter: Inserts a newline without committing (standard <textarea> behavior).
   • Ctrl+Enter or Cmd+Enter (Meta+Enter) or blur: Commits the edit and calls onCellEdit.
   • Escape: Cancels the edit and restores original value without firing onCellEdit.
3. Layout & Styling:
   • Renders .rdt_editTextarea within the cell.
   • Full-bleed styling inherits cell dimensions and naturally expands row height while editing without overlay popups.
   • Includes support for dense rows (.rdt_rowDense).
4. Shared Validation & Error Handling:
   • Works with the existing validate / onCellEdit pipeline, including aria-invalid, inline error tooltip, and autofocus/refocus handling.
5. Documentation:
   • Updated apps/docs/src/pages/docs/inline-editing.astro and apps/docs/src/pages/docs/api.astro with examples and API references.

Verification

• Added unit tests in src/__tests__/inlineEditing.test.tsx covering:
  • Renders textarea with default (3) and custom rows/placeholder.
  • Commits on blur, Ctrl+Enter, and Cmd/Meta+Enter.
  • Enter inserts newlines without early commit.
  • Escape cancels cleanly without calling onCellEdit.
  • Column validate function rejection and inline tooltip.
• Ran test suite: npm test — 725 of 725 tests passed across 23 test files.
• Ran typecheck: npm run typecheck — 0 errors.

[netlify]

✅ Deploy Preview for react-data-table-component ready!

Name	Link
🔨 Latest commit	07e1246
🔍 Latest deploy log	https://app.netlify.com/projects/react-data-table-component/deploys/6ac62433a8f481000851bef2
😎 Deploy Preview	https://deploy-preview-1397--react-data-table-component.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Copilot review overview

🟡 Changes recommended

The documentation has a critical parse/build issue, and additional API, test, and changelog updates remain.

Review effort: Lite
Findings: 1 · 2

Open (3)

• Fix escaped CodeBlock template literal delimiter · New
• Document textarea variant and rows option in API reference · New
• Add textarea editor variant to CHANGELOG · New

What changed in this PR

Adds a multi-line textarea variant for inline cell editing, including keyboard behavior, validation, styling, tests, and documentation.

Changes:

• Adds textarea editor configuration and rendering.
• Supports newline entry, modifier-key/blur commits, and Escape cancellation.
• Adds styling, validation coverage, tests, and documentation.

File	Summary	Findings
src/​types.ts	Adds the textarea editor type.	Nit (2 votes): Add a CHANGELOG.md entry.
src/​hooks/​useCellEdit.ts	Implements textarea keyboard semantics.	No findings.
src/​DataTable.css	Styles textarea editors and dense rows.	No findings.
src/​components/​CellEditor.tsx	Renders and wires textarea editors.	No findings.
src/​__tests__/​inlineEditing.test.tsx	Tests textarea behavior and validation.	Moderate (1 vote): Exercise actual newline insertion or limit the assertion to the no-commit behavior.
apps/​docs/​src/​pages/​docs/​inline-editing.astro	Documents textarea usage and styling.	Critical (4 votes): Fix the escaped closing template-literal delimiter causing parse/build failure. Nit (1 vote): Correct the Enter-key commit description.
apps/​docs/​src/​pages/​docs/​api.astro	Documents the textarea CSS class.	Nit (4 votes): Document the textarea variant and rows option in the API reference.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[jbetancur]

Thanks for this, it's a clean implementation and the keyboard behavior is what we talked about in #1354.

Two things before I merge:

1. feat: add accessibility improvements and new tests #1399 just landed and labels every inline editor by its column header ({...labelProps} in CellEditor.tsx). Can you merge master and spread {...labelProps} on the textarea too? Right now it would ship without an accessible name. If you can, also add a textarea case next to the "cell editor open" test in src/__tests__/accessibility.test.tsx so axe covers it.

2. I just released an 8.11.0. Can you update the changelog to 8.12.0 since this is a new feature? eg ### New features heading?

Optional, but it'd be nice to add a textarea column (notes or similar) to apps/docs/src/components/demos/InlineEditingDemo.tsx so people can try it on the docs page.

[pardeep1916P]

Thanks for the review @jbetancur! I've addressed all the feedback:

• Merged upstream/master.
• Added {...labelProps} to <textarea> in CellEditor.tsx and added accessibility tests in accessibility.test.tsx.
• Updated CHANGELOG.md to list the feature under 8.12.0.
• Added a notes textarea column to the InlineEditingDemo in the documentation.

All 753 tests and typechecks are passing green.

[jbetancur]

@pardeep1916P played around with this some more. What I originally pictured was more of a popover, since right now the textarea is stuck at the column width and a fixed height. Opening a long note can actually make the cell shorter than the text.

That said, this is a good first pass, so let's keep it inline here and I'll we can add the popover as a feature in a future version. A few tweaks to make the inline version feel better:

1. Grow the textarea to fit its content, with rows as the minimum. In CellEditor.tsx:

   useIsomorphicLayoutEffect(() => {
   	const el = inputRef.current;
   	if (editing && el instanceof HTMLTextAreaElement) {
   		el.style.height = 'auto';
   		el.style.height = `${el.scrollHeight}px`;
   	}
   }, [editing, editValue, inputRef]);

   In the CSS, switch resize: vertical to resize: none since the drag handle fights the auto-size. It also needs a cap so a really long note scrolls instead of stretching the row off screen:

   max-height: var(--rdt-cell-edit-textarea-max-height, 240px);
   overflow-y: auto;

   Worth adding that variable to the "Customizable variables" table on the inline editing docs page too.

2. Chrome starts the caret at the beginning of a textarea, so typing goes in front of the existing note. In the focus effect in useCellEdit.ts:

   const el = inputRef.current;
   el?.focus();
   if (el instanceof HTMLTextAreaElement) {
   	el.setSelectionRange(el.value.length, el.value.length);
   }

   A quick test for that would be nice.

3. In the demo, drop wrap on Notes so rows stay the same height and long notes just get an ellipsis. You see the full text once you're editing. grow: 2 with maxWidth: '150px' keeps it from pushing Remote off the edge.

[pardeep1916P]

Updated!

• Auto-grow: Added useIsomorphicLayoutEffect in CellEditor.tsx to automatically expand the textarea height to fit its content (el.scrollHeight), capped at max-height: var(--rdt-cell-edit-textarea-max-height, 240px) with overflow-y: auto and resize: none.
• Caret positioning: Added el.setSelectionRange(el.value.length, el.value.length) in useCellEdit.ts so the caret automatically lands at the end of the text on open.
• Demo styling: Removed wrap on Notes, set grow: 2 and maxWidth: '150px' in InlineEditingDemo.tsx.
• Documentation: Documented --rdt-cell-edit-textarea-max-height in the CSS variables tables.
• Tests: Added unit tests in inlineEditing.test.tsx verifying caret position and auto-growth.

All 755 tests are passing.