feat: add headerRowColor, oddRowColor, evenRowColor style properties to TableWidgetV2#41551
feat: add headerRowColor, oddRowColor, evenRowColor style properties to TableWidgetV2#41551
Conversation
…to TableWidgetV2 Add widget-level row color style properties that allow users to customize header, odd, and even row background colors via the Style tab color pickers. Colors are applied via CSS classes on the TableWrapper styled component, with correct priority below selected-row/hover/cell-level overrides. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
WalkthroughAdds optional color customization for table header and rows by introducing RowColorStyles (headerRowColor, headerTextColor, oddRowColor, evenRowColor) and propagating those props through types, widget config, components, and styled wrappers. Also cleans up an unused expression and refactors row className computation. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/21889061048. |
|
Deploy-Preview-URL: https://ce-41551.dp.appsmith.com |
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/21904907756. |
|
Deploy-Preview-URL: https://ce-41551.dp.appsmith.com |
…s to TableWidgetV2 Expose rowIndex broadly at the row level and to JS Objects: - Per-row background/text color via expressions (string or string[]) - hoveredRowIndex meta property with throttled hover handlers - hoveredRow derived property for accessing hovered row data - rowIndices derived property for accessing row indices from JS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/21911371114. |
|
Deploy-Preview-URL: https://ce-41551.dp.appsmith.com |
…owIndices to TableWidgetV2" This reverts commit c5d68d0.
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/21913708102. |
|
Deploy-Preview-URL: https://ce-41551.dp.appsmith.com |
salevine
requested review from
vivek-appsmith
and removed request for
a team
salevine
added
ok-to-test
ashit-rath
changed the title
| const rowClassName = [ | ||
| "tr", | ||
| props.row.index % 2 === 0 ? "odd-row" : "even-row", | ||
| isRowSelected && "selected-row", | ||
| props.className, | ||
| isAddRowInProgress && props.index === 0 && "new-row", | ||
| ] | ||
| .filter(Boolean) | ||
| .join(" "); |
| cachedTableData: Array<Record<string, unknown>>; | ||
| } | ||
|
|
||
| export interface TableProviderProps extends TableProps { |
There was a problem hiding this comment.
Why did we removed this? Is it not being used anywhere?
There was a problem hiding this comment.
This removal was intentional -- TableProviderProps in this file was a dead duplicate.
There are two definitions of TableProviderProps in the codebase:
types.ts(removed) -- only hadchildrenandcurrentPageIndexTableContext.tsx(kept) -- has those same two fields plus 13 more (pageCount,pageOptions,isHeaderVisible,headerGroups,prepareRow, etc.)
The TableContext.tsx version is the one that's actually used everywhere. No file in the codebase ever imported TableProviderProps from types.ts -- the only import is from TableContext.tsx (in Actions.test.tsx).
Infinite scroll is not affected. The endOfData and cachedTableData properties live on TableProps, which was not changed here. They still flow through the full component chain:
widget/index.tsx → component/index.tsx → TableProvider → useInfiniteScroll
So this just removes dead code -- no functionality is impacted.
…ction Replace manual array filter/join with the classnames library, as suggested in code review. Co-authored-by: Cursor <cursoragent@cursor.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🤖 Fix all issues with AI agents
Verify each finding against the current code and only fix it if needed.
In
`@app/client/src/widgets/TableWidgetV2/component/TableBodyCoreComponents/Row.tsx`:
- Around line 117-127: The cell className construction in the Row component uses
template literals; update it to use the shared classNames helper for consistency
by replacing the current conditional/template logic (references: Row component,
columns, cellIndex, StickyType.RIGHT) with a classNames call that applies "td"
and "hidden-cell" when columns[cellIndex].isHidden, and conditionally adds
"sticky-right-modifier" when the prior column is sticky RIGHT and hidden; keep
identical boolean conditions and class names but centralize via classNames for
consistency with the rest of the codebase.
🧹 Nitpick comments (1)
🤖 Fix all nitpicks with AI agents
Verify each finding against the current code and only fix it if needed. In `@app/client/src/widgets/TableWidgetV2/component/TableBodyCoreComponents/Row.tsx`: - Around line 117-127: The cell className construction in the Row component uses template literals; update it to use the shared classNames helper for consistency by replacing the current conditional/template logic (references: Row component, columns, cellIndex, StickyType.RIGHT) with a classNames call that applies "td" and "hidden-cell" when columns[cellIndex].isHidden, and conditionally adds "sticky-right-modifier" when the prior column is sticky RIGHT and hidden; keep identical boolean conditions and class names but centralize via classNames for consistency with the rest of the codebase.app/client/src/widgets/TableWidgetV2/component/TableBodyCoreComponents/Row.tsx (1)
117-127: Optional: cell className could also useclassNamesfor consistency.The cell
classNameconstruction here still uses template literals. Consider migrating toclassNamesfor uniformity, but no rush — it's existing code.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/client/src/widgets/TableWidgetV2/component/TableBodyCoreComponents/Row.tsx` around lines 117 - 127, The cell className construction in the Row component uses template literals; update it to use the shared classNames helper for consistency by replacing the current conditional/template logic (references: Row component, columns, cellIndex, StickyType.RIGHT) with a classNames call that applies "td" and "hidden-cell" when columns[cellIndex].isHidden, and conditionally adds "sticky-right-modifier" when the prior column is sticky RIGHT and hidden; keep identical boolean conditions and class names but centralize via classNames for consistency with the rest of the codebase.
|
This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected. |
4 participants
Add widget-level row color style properties that allow users to customize header, odd, and even row background colors via the Style tab color pickers. Colors are applied via CSS classes on the TableWrapper styled component, with correct priority below selected-row/hover/cell-level overrides.
Description
Alternate row colors on tables
Fixes #
8923or
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags="@tag.All"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/22078556344
Commit: 5f7961b
Cypress dashboard.
Tags:
@tag.AllSpec:
Mon, 16 Feb 2026 23:08:48 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
Release Notes
New Features
Refactor