feat: visually distinguish null, empty, whitespace, NaN, and Infinity in table cells

[kirangadhave]

Closes #9155

Summary

• Null values render as None in an italic muted pill
• Empty strings render as blank in cells, <empty> in filter dropdown
• Whitespace-only strings show visible markers: ␣ (space), → (tab), ↵ (newline)
• NaN renders as NaN, Infinity as inf/-inf — all in italic muted pills
• String "NaN"/"Infinity" in numeric columns detected correctly via column type context
• Filter-by-values dropdown uses the same sentinel rendering

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	Apr 16, 2026 6:09pm

[Copilot]

Pull request overview

This PR enhances the frontend data-table rendering to visually distinguish sentinel-like values (null, empty string, whitespace-only strings, NaN, and ±Infinity) in both table cells and the filter-by-values UI, addressing #9155.

Changes:

• Added sentinel detection (detectSentinel) including numeric-special-string handling gated by numeric column context.
• Introduced a SentinelCell renderer to display sentinel values with consistent pill styling and whitespace markers.
• Updated table cell rendering + filter-by-values dropdown to use sentinel rendering; added unit tests for detection and rendering.

Reviewed changes

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

Show a summary per file

File	Description
frontend/src/components/data-table/utils.ts	Adds detectSentinel to identify null/empty/whitespace/NaN/Infinity (with numeric-column option).
frontend/src/components/data-table/types.ts	Introduces sentinel union types and isNumericType helper for numeric checks.
frontend/src/components/data-table/sentinel-cell.tsx	New component to render sentinel pills and whitespace markers with tooltip/aria text.
frontend/src/components/data-table/columns.tsx	Uses sentinel detection to render sentinel pills in table cells.
frontend/src/components/data-table/column-header.tsx	Uses sentinel rendering in filter-by-values dropdown, with numeric type context.
frontend/src/components/data-table/tests/utils.test.ts	Adds unit tests covering sentinel detection behavior.
frontend/src/components/data-table/tests/sentinel-cell.test.tsx	Adds unit tests for sentinel pill rendering and accessibility attributes.

[Light2Dark]

I think you made a nice notebook to show the different values, I think it can be added under marimo/_smoke_tests

Also, I expect this to make a release highlight, could you share an image of the new changes.

[Light2Dark]

@kirangadhave you may also want to look at marimo/_smoke_tests/tables/nans.py, there are some other NaN-like values (pd.NA, pd.NaT). Not saying we need to handle them, but just bringing to your attention. There's also np.inf, np.nan. Not sure if they have the same values 🥲

And marimo/_smoke_tests/tables/complex_types.py there's some Decimal nans

[Light2Dark]

This is a nice implementation! I think works for alot of whitespace types. And the attention to aria-label stuff is great, I will remember it too.

side note, i dont think we need to fix this (obscure whitespace chars) but dang haha. I can add this to a smoke test somewhere

[kirangadhave]

And the attention to aria-label stuff is great, I will remember it too.

I have it my global CLAUDE.md, to remind me about accessibility when reviewing my work

[Light2Dark]

Mind adding a picture too? (We can use for release notes)