Data | Arbol UI

Avatar: A person’s picture or an organization’s logo, with the name’s initials (or an icon) while there is none or it fails to load. It is decoration: always write the name beside it.
Badge: A status pill: the state of a record in a word, in the color of what that state means. It is text, not a control. The apps’ old variant names map to tones (see the component’s documentation).
ColumnPicker: Shows, hides and reorders the columns of a table: a checkbox per column, a handle to drag it (or move it with the keyboard), and a reset. useColumnState keeps the state as plain ids the app can save, and gives DataTable its visibility and order.
CountBadge: A number in a small pill: the total beside a title, the filters in use, the records waiting in a queue. Use a Badge for a status in words.
DataTable: A list driven by TanStack Table v9 and drawn by Table: sortable headers, column sizes, visibility and order, rows that open their record, an empty state, and a dimmed busy state while the next answer loads. Server-sorted lists pass manualSorting.
FilterSelect: One filter of a list: a button that says what it filters and what is applied, in the brand tint once it narrows the list, over a list of values with “All” first, counts and icons. Single or multiple selection; a search from eight options.
FoldingFilters: A list’s filters folded behind one “Filters · n” button on a phone; from the sm breakpoint they sit in the filter row. Narrow the window to see it fold.
Kbd: A key or a keyboard shortcut drawn as a key cap. It only shows the shortcut; the app handles the keys. Inside a menu item it is announced as the item’s shortcut.
Stat: Dashboard figures: Stat shows one number formatted for the locale with its change against the previous period (TrendDelta), a line of context, its definition behind an ⓘ and what it leads to; StatGrid lays them out by its own width; SummaryTile is a figure that also filters the list below it.
StatusDot: A small colored dot that says a status at a glance, optionally pulsing while something is live. Give it a label, visible or for screen readers only, so color is never the only sign.
Table: Records in rows and columns, in a rounded frame. Arrow keys move through it, rows open with a click, Enter or a tap, columns sort, and rows can be selected. Use DataTable when TanStack Table drives the list.
TanStack Query: The query entry: QueryView draws a query in the dashboard’s states, a skeleton or spinner before the first answer, an error with a retry, an empty state, and the data, dimmed while the next page loads. Each example has its own QueryClient and a pretend server.