CogniSyncTable
A table arranges structured data in rows and columns so people can scan, compare, and act on records.
Patterns
Cell tools & content
Reference matrix aligned with Figma cell variants (avatar, stack, switch, checkbox, document icons, loading, chips).
Variant reference
Variant | Preview |
|---|---|
| Switch | |
| Checkbox | |
| Avatar | |
| Avatar group | ABC+2 |
| Icon · books | |
| Icon · document | |
| Icon · book | |
| Icon · single file | |
| Icon · document stack | |
| Documents row | Q3 ReportAppendix |
| Loading | |
| Hover | Row hover is shown on the full example below — move the pointer over a body row. |
Composition
Full table
Header row with select-all column, annotated column titles, mixed cell content, and trailing tool column. Hover any body row to see the hover state.
Kitchen sink
Owner | Name | Status | Channel | Summary | ||
|---|---|---|---|---|---|---|
Cell text | Cell text | Cell text | Cell text | Cell text | ||
Accept terms and conditions You agree to our Terms of Service and Privacy Policy. | Accept terms and conditions You agree to our Terms of Service and Privacy Policy. | Badge | Badge | Accept terms and conditions You agree to our Terms of Service and Privacy Policy. | ||
Header
Optional controls
Enable the sort affordance and trailing chevron when a column supports multi-state sorting or a dropdown filter.
Sortable column header
Sorted column |
|---|
Body cells inherit row hover from TableRow. |