[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 three column-level callbacks: row-aware cellProps(row) for data-cell <td> elements, headerProps(ctx) for the column's header <th>, and footerProps(ctx) for its footer <td>. All three support only className, style, and title, and may return undefined to keep the defaults.

Existing render(row), header(ctx), and footer continue to own content. headerProps receives the same HeaderRenderContext as header, allowing sort-dependent styling. footerProps receives the same FooterRenderContext as the footer renderer, including the current page's rows; it does not create a footer row by itself. 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.

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 body cells, headers, and footer cells 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 cellProps(row), context-aware headerProps(ctx), and footerProps(ctx) across default and custom rendering paths, including truncated and editable body 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 (eee5b85)	#631 (b84c9af)	+/-
Coverage	89.5%	89.5%	+0.0%
Test Execution Time	3m29s	3m29s	0s

Details

  |                     | main (eee5b85) | #631 (b84c9af) |  +/-  |
  |---------------------|----------------|----------------|-------|
+ | Coverage            |          89.5% |          89.5% | +0.0% |
  |   Files             |            236 |            236 |     0 |
  |   Lines             |           7512 |           7517 |    +5 |
+ |   Covered           |           6727 |           6732 |    +5 |
  | Test Execution Time |          3m29s |          3m29s |    0s |

Code coverage of files in pull request scope (93.7% → 93.8%, patch 100.0%)

Files	Coverage	+/-	Patch Coverage	Status
packages/core/src/components/data-table/data-table.tsx	93.8%	+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.

[IzumiSy]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Merged main and resolved the conflicts, preserving the cell/header props API alongside the new column-footer support. Merge commit: 726ded3.

[IzumiSy]

/review

[github-actions]

🚀 Code Review has started processing this issue comment

[Copilot]

🟢 Approval recommended

The implementation, tests, and documentation consistently support the callback APIs; only a non-blocking PR-description correction remains.

1 open issue

• Correct PR docs to describe the headerProps callback contract · New

What changed in this PR

Adds DataTable column customization for surrounding body, header, and footer elements, allowing full-cell styling without replacing content renderers.

Changes:

• Adds cellProps(row), headerProps(ctx), and footerProps(ctx) callbacks supporting classes, inline styles, and titles.
• Adds regression coverage for styling, property removal, pinning, width precedence, and existing interactions.
• Documents the APIs with runnable examples and includes a minor-release changeset.

File	Description
packages/​core/​src/​components/​data-table/​types.ts	Defines the three customization callbacks and their contracts.
packages/​core/​src/​components/​data-table/​data-table.tsx	Applies custom props to body, header, and footer cells.
packages/​core/​src/​components/​data-table/​data-table.test.tsx	Covers header sort context and preserved interactions.
packages/​core/​src/​components/​data-table/​data-table-styling.test.tsx	Adds styling, pinning, and lifecycle regression coverage.
docs/​components/​data-table.md	Updates generated API documentation and examples.
docs-src/​components/​data-table.docs.outline.md	Documents customization boundaries and behavior.
docs-src/​components/​data-table.docs.examples.tsx	Adds full-cell styling and styled-footer examples.
docs-manifest.json	Updates documentation generation hashes.
.changeset/​bright-cells-shine.md	Records the new APIs for a minor release.

_{Review effort: Balanced}

[IzumiSy]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Merged the latest main and resolved the documentation conflicts, preserving both the DataTable props API and aggregation support. Merge commit: 102538c.

[IzumiSy]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Merged the latest main and resolved the generated documentation manifest conflict by regenerating docs from the merged authored sources. Merge commit: c51f3a3.

[interacsean]

Left one loose thought comment, but I think let's go!

[interacsean]

Maybe something for the future: it seems there is no way to set the backgroundColor of a hover or selected state cell

[IzumiSy]

This is possible with the existing cellProps.className hook. For example, with Tailwind v4:

cellProps: () => ({
  className: `
    bg-orange-50!
    [tr:not([aria-selected=true]):hover_&]:bg-orange-200!
    [tr[aria-selected=true]_&]:bg-orange-300!
  `,
}),

This uses a light background normally, a darker one when hovering an unselected row, and another background while selected. Selection takes precedence even when hovering.

The arbitrary variants target the parent row’s state, and the ! modifiers override the built-in pinned-cell backgrounds.

The inline backgroundColor example in this doc is intended to preserve the same background across states. For state-specific backgrounds, they can be defined entirely in className instead—no separate CSS file or additional API is needed.

[interacsean]

Well my thoughts are while this is some handy CSS work, it is not ergonomic, it's not guided so if a consumer needed to do it, it would be on the dev/agent to work out how, and the aria-selected on the tr relies on something the appshell is doing internally.

Let's just leave it for now anyway