DataTable

<DataTable data={people} columns={COLUMNS} label="People" height="28rem"
           selection="multiple" pageSize={20} pageJump
           facets={state.facets} filters={state.filters} pinned={state.pinned}
           sizes={state.sizes} hidden={state.hidden} order={state.order}
           views={state.views} view={state.view} density={state.density}
           onStateChange={(s) => save(s)} />

<!-- Filter groups: a rule with rules stands as one rule, joined inside by its own join. -->
filters = [
  { id: "r1", column: "salary", op: "gt", value: "150000" },
  { id: "g1", column: "", op: "contains", value: "", join: "or", rules: [
    { id: "r2", column: "level", op: "equals", value: "5" },
    { id: "r3", column: "level", op: "equals", value: "6" },
  ] },
];

<!-- group by team; numbers aggregate (sum, mean, min), headers group columns -->
<DataTable data={people} columns={[
  { key: "name", rowHeader: true },
  { header: "Work", id: "work", columns: [{ key: "team" }, { key: "role" }] },
  { header: "Pay", id: "pay", columns: [{ key: "level", type: "number" }, { key: "salary", type: "currency" }] },
]} grouping={state.grouping} columnResizeMode="onEnd" />

<DataTable data={payments} columns={COLUMNS} grouping={["status"]} groupedColumnMode="remove" />

const COLUMNS: DataTableColumn[] = [
  { key: "title", editable: true, validate: (v) => v ? "" : "A title is required" },
  { key: "priority", type: "tag", options: PRIORITIES, editable: true },
  { key: "estimate", type: "number", editable: true, summary: "sum" },
  { key: "due", type: "date", editable: true },
  { key: "done", type: "boolean", editable: true },
];

<!-- edits and added rows wait until Save; onSave gets them all -->
<DataTable data={state.tasks} columns={COLUMNS} changes={state.changes}
           addable newRow={() => ({ id: crypto.randomUUID(), title: "", estimate: 0, done: false })}
           onSave={(changes, newRows) => persist(changes, newRows)} />

<!-- editMode="direct": each edit writes the row at once (a LiveView updates for everyone) -->
<DataTable data={todos} columns={COLUMNS} editMode="direct" onCellEdit={(c) => log(c)} />

<DataTable data={FILES} columns={COLUMNS} subRows={(row) => row.children} expanded={state.open}
           selection="multiple" pagination={false} />

<DataTable data={payments} columns={COLUMNS} detail detailRow={state.open}>
  <div slot="detail">Payment {state.open?.id} to {state.open?.email}</div>
</DataTable>

<DataTable data={payments} columns={COLUMNS} rowPinning pinnedRows={state.pinnedRows} actions={ACTIONS} />

<!-- 10,000 rows, only the visible ones rendered -->
<DataTable data={rows} columns={COLUMNS} virtual pagination={false} height="24rem" rowHeight={40} />

// route: return new html({ payments: payments.view() });
<DataTable data={payments} columns={COLUMNS} editMode="direct" columnMenu={false}
           sorting={[{ id: "amount", desc: true }]} />
<!-- a LiveView patches rows in place; the table re-sorts and re-totals itself,
     and an edit calls payments.update(row) for every watching browser -->

<!-- manual: the server sorts and pages; the table shows what it is given -->
<DataTable data={state.rows} columns={COLUMNS} manual rowCount={state.total}
           page={state.page} pageSize={state.pageSize} sorting={state.sorting}
           loading={state.loading} onStateChange={() => fetchPage(state)} />

<DataTable data={payments} columns={COLUMNS} selection="single" selectOnClick
           selected={state.selected} canSelect={(row) => row.status !== "failed"}
           rowTone={(row) => row.status === "failed" ? "danger" : ""}
           onRowClick={(row) => preview(row)} onRowAction={(row) => open(row)} />

<button onclick={() => state.sorting = [{ id: "amount", desc: true }]}>Largest first</button>
<button onclick={() => state.search = "gmail"}>Search gmail</button>
<button onclick={() => state.page = 2}>Page 3</button>
<DataTable data={payments} columns={COLUMNS} sorting={state.sorting} search={state.search} page={state.page} />

<DataTable data={[]} columns={COLUMNS} emptyText="No payments yet." />
<DataTable data={payments} columns={COLUMNS} loading={state.loading} />