Examples

People page

A second object list — People — over the same AppShell + Sidebar + DataTable composition, proving the CRUD surface generalises.

The Companies page rebuilt for a different object — People — with nothing changed but the columns and rows. Same App Shell, same Sidebar, same view bar and DataTable grid; the grid is schema-driven, so a new object is just a new columns + data pair. Hover an entity cell for its "open preview" icon to peek a record, or click its name to see the full Record Page.

Composition

The only difference from the Companies example is the data:

const peopleColumns: DataTableColumn<Person>[] = [
  { key: "person", header: "Name", type: "entity", icon: User },
  { key: "email", header: "Email", type: "url", icon: Mail },
  { key: "company", header: "Company", icon: Building2 },
  { key: "title", header: "Title", icon: Briefcase },
  { key: "location", header: "Location", icon: MapPin },
  { key: "phone", header: "Phone", icon: Phone },
];

<DataTable columns={peopleColumns} data={peopleRows} />;

Everything else — sort, filter, inline edit, selection, the bulk bar, the peek panel — comes for free because it's driven by the column types, not the object.

On this page