Component Library

Find a component

Search the library by name or tag.

Data Table

Notion's database as a component: every property type, a property menu behind each heading, a sort and filter builder, group-by, per-column calculations, CSV export and virtualised rows.

tabledatasortingfilteringgroupingvirtualisedapp@tanstack/react-virtual@dnd-kit/core@dnd-kit/sortabledate-fns

Note

Files preview on hover, the card following the cursor. Sort and filter are built in the bar under the toolbar rather than only per column: a chip says what is applied, and the popover behind it edits the rules — column, condition, value, joined by one And/Or across the set, the way Notion's simple mode works. Conditions are offered per type, so a number gets > and ≥ and a checkbox gets is-checked rather than a list of text comparisons that mean nothing to it. Each column can carry any icon from lucide — around eighteen hundred — chosen from the button at the top of its property menu, and every one of them draws itself on rather than sitting still. That is derived rather than hand-authored: each shape is given a normalised path length so one dash sweep fits every glyph, which is the only way it works for the whole set. Every Notion property type except Formula and Relation, which were excluded, and Rollup, which cannot exist without them — a rollup summarises values reached through a relation, so with no relations there is nothing to reach. The column heading opens Notion's property menu: rename in place, change type, filter, sort, group, wrap and hide. Text filters carry the full condition set (is, is not, contains, does not contain, starts with, ends with, is empty, is not empty) rather than only "contains". Person columns take a name, a person object, a comma-joined string or a list of any of those — faces overlap, each carries a hover card with the name and email, and the rest collapse into a +N. Date columns edit through the calendar rather than the browser\'s native date field, and filter by dragging a range across a month; both read the calendar date the value names rather than converting through a moment, which moves every date back a day west of UTC. Ported from GustFlow — table view only, Kanban and Calendar dropped, domain badges collapsed into one tone-mapped Badge. Rows identify themselves through `rowId`, which defaults to `row.id`; pass your own if your data is keyed on something else, or selection silently does nothing. Paged at `pageSize` rows; `paginated={false}` hands the whole set to the virtualiser instead. Grouped rows are not virtualised, because the group headers stick — so each group stops at 200 rows and offers the rest.

1280px