Skip to content

feat: add configurable grid row coloring - #3652

Open
WhyRoy wants to merge 2 commits into
teableio:developfrom
WhyRoy:feat/grid-row-coloring
Open

WhyRoy wants to merge 2 commits into
teableio:developfrom
WhyRoy:feat/grid-row-coloring

Conversation

@WhyRoy

@WhyRoy WhyRoy commented Sep 15, 2026

Copy link
Copy Markdown

Description

Add configurable row coloring and conditional styling for grid views.

This allows users to improve visual scanning by applying background colors to
records based on select field values or configurable field-based conditions.
The styling is stored as part of the grid view options and is preserved when
the view is reloaded.

Background

Our organization uses the Teable Community Edition to manage structured
business records.

For operational tables with many records, users need to distinguish important
states quickly, such as pending, approved, rejected, or overdue records.
Displaying row colors based on business values makes the grid easier to scan
and reduces the need to open each record individually.

This feature provides a reusable way to configure row styling directly in a
grid view.

Changes

  • Add a grid style panel for row appearance settings.
  • Support striped rows.
  • Support row colors based on single-select and multiple-select field values.
  • Support conditional row color rules based on field values.
  • Preserve rule order, with the first matching rule taking precedence.
  • Load hidden fields required by row-color rules when necessary.
  • Persist row-color settings in grid view options.
  • Apply row colors consistently across grid rendering layers.
  • Add localized labels for the new controls.
  • Add schema and utility tests for row-color configuration and color matching.

User Workflow

  1. Open a grid view.
  2. Open the grid style settings.
  3. Enable striped rows or configure row-color rules.
  4. Select a field or define conditional rules.
  5. Apply the changes.
  6. Reload the view and verify that the configuration is preserved.

Testing

  • Repository lint-staged checks passed before commit.
  • Added unit tests for row-color rules, select-field matching, and view option
    validation.
  • Manual browser verification is recommended for the complete settings,
    persistence, reload, and rendering workflow.
  • Verified that grid style options can be saved successfully through the v2
    update view options API.
  • Verified that row-color settings persist after reloading the view.

Screenshot

Screenshot From 2026-09-15 23-05-48

@CLAassistant

CLAassistant commented Sep 15, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@CLAassistant

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.


why@123 seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

@WhyRoy
WhyRoy force-pushed the feat/grid-row-coloring branch from 5d78b69 to 447ba4c Compare September 15, 2026 15:21
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.

2 participants