Data tables

Studio collections
Select all rows		Status
Select Afternoon light	Afternoon light	Draft	8
Select Everyday objects	Everyday objects	Published	4
Select Letter & form	Letter & form	In review	12
Select Material studies	Material studies	Published	6

0 selected

Empty table

Usage

Keep column labels concise and numbers aligned. Sorting and selection are controlled by the application. A table can scroll horizontally while the surrounding page reflows.

Exports / DataTable

Patterns

React

import { DataTable } from "./folio";

<DataTable label="Collections" rows={[{ id: "01", name: "Material studies", works: 12 }]}
  columns={[
    { key: "name", label: "Collection", render: (row) => row.name },
    { key: "works", label: "Works", align: "end", render: (row) => row.works },
  ]} />