SatoriUI

Data table

A customers table with status filter tabs, search, row selection with select-all and paging. Works on any rows you pass.

Customers
9 accounts, 4 paying.
CustomerStatusMRR
KFKettle & Fernops@kettleandfern.comActive$490
FFieldnotehello@fieldnote.appTrial—
HCHarbor & Cobilling@harbor.coPast due$490
QSQuill Studioteam@quill.studioCancelled—
PParallelfinance@parallel.devActive$1,490
MSMoss & Stonehi@mossandstone.comActive$49

9 shown

Page 1 of 2

Installation

  1. 1. Install a design system if the project does not have one yet: Cueit, Skita or Folio.

  2. 2. Add the block. It installs to components/satori-ui/blocks/ with the shadcn/ui primitives it uses.

    npx shadcn@latest add @satoriui/data-table-01

  3. 3. Render it inside the system's scope. With the scope class on <html> there is nothing more to do. To try another system, change the class.

    app/page.tsx
    import { DataTable01 } from "@/components/satori-ui/blocks/data-table-01";
    export default function Page() {
      return <DataTable01 />;
    }

How it adapts

It is built from shadcn/ui primitives, Avatar, Badge, Button, Card, Checkbox, Input, Table and Tabs, which every design system re-skins.

For what shadcn has no name for, it uses 2 of the shared contract utilities. Every system defines them identically and sets the variables they read.

ds-meta
Small values
ds-small
Secondary copy
Next blockSettings