Skip to content

Add cellClassName prop to DataTable component with column meta support#2197

Merged
rSnapkoOpenOps merged 1 commit intomainfrom
feat/update-data-table
Apr 6, 2026
Merged

Add cellClassName prop to DataTable component with column meta support#2197
rSnapkoOpenOps merged 1 commit intomainfrom
feat/update-data-table

Conversation

@rSnapkoOpenOps
Copy link
Copy Markdown
Collaborator

Fixes OPS-3928

@linear
Copy link
Copy Markdown

linear bot commented Apr 6, 2026

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud bot commented Apr 6, 2026

Comment on lines +334 to +336
const meta = header.column.columnDef.meta as
| { className?: string }
| undefined;
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code was in the ee version, I didn't add it.


return (
<TableHead key={header.id}>
<TableHead key={header.id} className={meta?.className}>
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only change I've added

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds support for styling DataTable cells via a new cellClassName prop and per-column meta.className, enabling consumers to control cell/header presentation without custom renderers.

Changes:

  • Added optional cellClassName prop to DataTable and applied it to body cells.
  • Added support for reading columnDef.meta.className to apply per-column classes to header and body cells.
  • Added a Storybook story demonstrating global cell background styling.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
packages/ui-components/src/ui/data-table.tsx Introduces cellClassName prop and applies column meta-based class names to header/body cells.
packages/ui-components/src/stories/data-table.stories.tsx Adds MutedBackground story to showcase cellClassName.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@rSnapkoOpenOps rSnapkoOpenOps marked this pull request as ready for review April 6, 2026 10:27
@rSnapkoOpenOps rSnapkoOpenOps merged commit 0539cf6 into main Apr 6, 2026
29 checks passed
@rSnapkoOpenOps rSnapkoOpenOps deleted the feat/update-data-table branch April 6, 2026 13:07
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.

3 participants