---
title: "Data"
description: "The data components of @arbol-ai/ui: Avatar, Badge, ColumnPicker, CountBadge, DataTable, FilterSelect, FoldingFilters, Kbd, Stat, StatusDot, Table, TanStack Query."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Data

- [Avatar](https://epidermis.getarbol.com/components/data/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](https://epidermis.getarbol.com/components/data/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](https://epidermis.getarbol.com/components/data/column-picker/): 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](https://epidermis.getarbol.com/components/data/count-badge/): 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](https://epidermis.getarbol.com/components/data/data-table/): 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](https://epidermis.getarbol.com/components/data/filter-select/): 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](https://epidermis.getarbol.com/components/data/folding-filters/): 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](https://epidermis.getarbol.com/components/data/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](https://epidermis.getarbol.com/components/data/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](https://epidermis.getarbol.com/components/data/status-dot/): 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](https://epidermis.getarbol.com/components/data/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](https://epidermis.getarbol.com/components/data/query-view/): 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.

Source: https://epidermis.getarbol.com/components/data/index.mdx