Data
Tables, lists, trees and timelines for showing records. Each collection has the same loading, empty and error states, and every interactive one runs on React Aria for keyboard, selection and screen reader support. Built to WCAG 2.2 AA as a target.
11 pages, 12 exports
- Table
- DataTable
- BulkActionBar
- SortHeader
- List
- ListItem
- VirtualList
- TreeView
- TreeRow
- Timeline
- TimelineItem
- KeyValueList
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { Table, DataTable, BulkActionBar, SortHeader, … } from '@skribly/ui/data'Pages in this groupLink to the section Pages in this group
- TableA read-only table on native table markup with a caption, row headers and optional sorting. Pick it for reports and summaries; on a phone it either scrolls in its own box or stacks each row into a labelled card.Table
- DataTable with bulk actionsAn interactive grid for records people select, sort and open: a sticky header, numeric and action columns, and a selected row marked with a tint and a leading rule. BulkActionBar sits above it and acts on the selection.DataTable, BulkActionBar
- DataTable statesThe same three states every collection in this group shows in place of its rows: nothing to show, loading and a blocking error.DataTable
- SortHeaderThe label and direction arrow of a sortable column. DataTable and Table use it already; use it alone for a custom header, with onSort when it should be a button.SortHeader
- ListAn interactive list of records with an icon, title, description, trailing meta and row actions. Pick it over a table when each record reads as one line of text rather than as columns.List, ListItem
- List reorderingPass React Aria drag and drop hooks to let people reorder items by mouse, touch or keyboard.List, ListItem
- List statesEmpty, loading and error states shown in place of the items, the same as in tables and trees.List
- VirtualListA List that renders only what is on screen, for thousands of results such as a file search. Give it a height; items are measured, so wrapped text and the compact density still fit.VirtualList
- TreeViewA hierarchy such as files or nested sections, with a folder icon that opens, badges and row actions. Pick it when depth matters; use List for flat records.TreeView, TreeRow
- TimelineAn ordered history of events with who and when, such as the changes to a record or the steps of a deploy. Each tone has its own icon and a word, never colour alone.Timeline, TimelineItem
- KeyValueListLabelled facts about one thing, such as account or server details. The inline layout puts labels beside values when there is room and stacks them on a phone; columns fits more facts on wide screens.KeyValueList