[IzumiSy]

Motivation

DataTable custom renderers control a cell's content, but cannot style the surrounding cell element. Tables that use background color to communicate row-dependent information cannot reproduce that presentation with a colored span: the cell's padding remains unpainted. Header renderers have the same limitation when a column needs header-level styling.

Related: https://github.com/tailor-inc/platform-planning/issues/2185

Design Decision

Separate content rendering from element customization

Add two column-level APIs: row-aware cellProps(row) for data-cell <td> elements and a static headerProps object for the column's <th>. Both support only className, style, and title.

Existing render(row) and header(ctx) continue to own content. Arbitrary events, refs, and cell spanning are deliberately not exposed, so consumers do not need to coordinate with DataTable's editing, selection, or context-menu behavior. Header props remain a plain object because this use case does not require row data or sort-state callbacks.

Preserve table-owned layout and state behavior

Merge consumer classes after built-in classes, and merge inline styles before the declared column width and computed sticky positioning. Explicit inline cell backgrounds remain visible during hover and selection; cells that do not opt in retain their existing appearance and behavior. CSS specificity still applies to class-based backgrounds, and pinned cells and headers require opaque backgrounds to hide scrolling content.

Alternatives considered

Allowing renderers to replace the entire cell element would transfer responsibility for pinning and interaction props to consumers. A style-only hook would solve the immediate background-color case but introduce a separate API for each additional presentation attribute. A narrowly scoped props object provides a single customization point without opening arbitrary DOM overrides.

Summary

• Add row-aware body-cell props and static header props across default and custom rendering paths, including truncated and editable cells.
• Cover style/class merging, left/right pinning and width precedence, property removal, and preservation of sorting and context menus with regression tests.
• Document the API boundaries and background-state behavior with a runnable example, regenerate documentation, and include a minor changeset.

[github-actions]

Code Metrics Report

	main (aaa4c6a)	#631 (9c5a5a3)	+/-
Coverage	89.2%	89.2%	+0.0%
Test Execution Time	2m7s	2m25s	+18s

Details

  |                     | main (aaa4c6a) | #631 (9c5a5a3) |  +/-  |
  |---------------------|----------------|----------------|-------|
+ | Coverage            |          89.2% |          89.2% | +0.0% |
  |   Files             |            226 |            226 |     0 |
  |   Lines             |           7239 |           7241 |    +2 |
+ |   Covered           |           6464 |           6466 |    +2 |
- | Test Execution Time |           2m7s |          2m25s |  +18s |

Code coverage of files in pull request scope (92.9% → 93.0%, patch 100.0%)

Files	Coverage	+/-	Patch Coverage	Status
packages/core/src/components/data-table/data-table.tsx	93.0%	+0.0%	100.0%	modified

---

Reported by octocov

[IzumiSy]

I would like to rebase this PR and cover footerProps as well once #633 gets merged.