feat(packages/ui): auto-enhance markdown tables with sorting and per-column filters - #143
feat(packages/ui): auto-enhance markdown tables with sorting and per-column filters#143zrosenbauer wants to merge 3 commits into
Conversation
…column filters Override the intrinsic markdown table element so every table with >=5 rows becomes an interactive AdvancedTable: click-to-sort headers (numeric columns auto-detected), per-column text-contains filter popovers (react-aria), and sort/filter state persisted to localStorage with easy clearing. Natural column widths are measured once and locked so filtering never reflows the table. Built on @tanstack/react-table; rich cell content (code, links) is preserved while plain text drives sort/filter. Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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 |
…rder Two visual defects in the auto-enhanced tables: - The clear-all button rendered conditionally above the table, pushing content down when it appeared. Replace it with an always-present toolbar row that carries a muted row count on the left and slots the clear button into the same fixed-height strip on the right, so toggling state never reflows the table. - The inner table inherited its own border + border-radius + overflow from the base `html table` rule, drawing a second rounded outline nested inside the scroll wrapper's card border. Neutralize the inner border/radius so the wrapper is the single source of card chrome. Co-Authored-By: Claude <noreply@anthropic.com>
# Conflicts: # pnpm-lock.yaml
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
1 participant
Summary
Auto-enhances markdown tables across the docs site into interactive tables — no author markup required. Any table with ≥5 rows is upgraded in place with click-to-sort headers and per-column filter popovers; shorter tables fall back to Rspress's default rendering.
Built on @tanstack/react-table (headless engine) + react-aria-components popovers (already in the stack). Rich cell content (code spans, links) is preserved while a parallel plain-text projection drives sort/filter.
Changes
enhanced-markdown-table.tsx— overrides the intrinsictableMDX element via the theme'sDocLayout→DocContentcomponents map, so every markdown table flows through it.advanced-table.parse.ts— parses a rendered<table>'s React children into{columns, rows}, extracts plain text for sort/filter, and auto-detects numeric columns.advanced-table.tsx— the interactive table: TanStack sorting + per-columnincludesStringfilters, react-aria filter popovers, sort/filter state persisted tolocalStoragewith a "Clear all" toolbar, and a one-time column-width measurement locked astable-layout: fixedpercentages so filtering never reflows the table.advanced-table.css— component styles, using the repo's small-control radius tokens; includes a specificity override for Rspress'stable { margin: 1.5rem 0 }base rule.Testing
Verified end-to-end in a real browser (headless Chrome) on
/concepts/themesand/reference/configuration:ico→ 5 rows to 2)Gate:
tsgotypecheck, oxlint, oxfmt, 10 parse unit tests,pnpm build— all green.TODO — before marking ready
Styling
arcadetheme visual FX pass (border-trace / neon) on the new controlsVerify
aria-sortlocalStoragedisabled / private mode.changeset/) for the releasemainbefore mergeRelated issues
None.