feat(table): port full COSS table set (variants + data tables) - #34
Merged
Conversation
Match the COSS UI table docs (coss.com/ui/docs/components/table):
Core Table component:
- Add variant prop ('default' | 'card') with data-slot/data-variant
attribute targeting, porting COSS's exact card-variant styling
(border-separate rounded surfaces, translucent hover/selected states)
New Frame component (Frame/FramePanel/FrameFooter) — muted app-surface
framing used by the data-table examples.
Demos (all 5 COSS examples):
- Table01: basic default table (badges, footer, caption)
- Table02: card variant, standalone
- Table03: card table wrapped in a Frame
- Table04: data table with row selection (Vue-reactive port of the
TanStack example, using our Checkbox with indeterminate select-all)
- Table05: full data table with column sorting + pagination + range
select (flight board; Vue-reactive, no TanStack dependency)
type-check, lint and build pass; verified in-browser (card surfaces,
row selection, sorting, pagination all functional).
Deploying originui-vue with
|
| Latest commit: |
0f53c52
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://f793b898.originui-vue.pages.dev |
| Branch Preview URL: | https://feat-coss-table-variants.originui-vue.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Expands the Table component to cover every example from the COSS UI table docs, instead of adding new component types.
Core Table component
variantprop (default|card) withdata-slot/data-variantattribute targeting — ported from COSS's exact classes.border-separaterounded row surfaces, per-cell border/radius logic, and translucentcolor-mixhover/selected states.TableHeader/Body/Footer/Row/Head/Cell/Caption) carry the COSSdata-slotmarkers so footer cell padding, card corners, etc. cascade correctly.New Frame component
Frame/FramePanel/FrameFooter— the muted app-surface framing wrapper the COSS data-table examples sit in.Demos — all 5 COSS examples
The two interactive examples (Table04 selection, Table05 sorting/pagination) are Vue-reactive reimplementations of COSS's TanStack React examples — same behavior and visuals, but with plain Vue
refs and our existingCheckbox/Button/SelectNativecomponents, so no@tanstack/vue-tabledependency is added.Verification