Data grid · ag-grid-style

import { DataGrid } from "./components/grid.js";

const columns = [
  { field: "id",     header: "ID",     width: 64,  align: "right" },
  { field: "name",   header: "Name",   width: 180, editable: true },
  { field: "salary", header: "Salary", align: "right", type: "number",
    editable: true, format: (v) => "$" + v.toLocaleString() },
  { field: "active", header: "Active", format: (v) => (v ? "✓" : "—") },
];

DataGrid({
  rows: people,            // array, or a signal/getter for live data
  columns,
  selectable: true,        // row checkboxes
  pageSize: 8,
  onSelectionChange: (rows) => selCount.set(rows.length),
  onCellEdit: (e) => toast(`${e.field}: ${e.oldValue} → ${e.value}`),
})

// `rowEdit`: entering a cell opens every editable cell of its row; Tab
// walks them, Enter or leaving the row saves them as one onRowEdit
// ({row, changes}), Escape drops them. Ctrl+Z takes an edit back.
DataGrid({ rows: people, columns, rowEdit: true, onRowEdit: (e) => api.save(e.row, e.changes) })

// No pages: the table holds the rows in view and a spacer for the rest,
// however many there are. `height` fixes the viewport; rows are one
// height (measured, or `rowHeight`).
// `filters` puts a box under every column: text "contains", a number or
// date box that takes `>10`, `<=5`, `10..20`, `2024-03`, a list for
// a column of options. `filter: true` on one column does it for that one.
// `layout` lets the reader drag a header into another place, pin it left
// or right or hide it from the ⋮ on it, and bring columns back from the
// Columns button; `columnState` is that layout as a signal, to keep.
// `csv` puts a CSV button beside Columns; `apiRef.csv()` is the same rows
// as a string, `apiRef.download("rows.csv")` hands the reader the file.
DataGrid({ rows: crowd, columns, pageSize: 0, height: 320, filters: true, layout: true, csv: true })

// A source: the grid asks for every page — {page, pageSize, sort, filters,
// quick, edge, groupBy, keys} — and shows what comes back. With `groupable`
// a header dragged onto the panel groups the rows: every level is one
// question with `groupBy` and the path down to it as `keys`, answered
// with {key, count, ...aggregates} or, at the last level, the rows.
DataGrid({ source: (ask) => fetch("/rows?" + toQuery(ask)).then((r) => r.json()),
  columns, pageSize: 10, filters: true, groupable: true, jump: true })

// Every word the grid says is in `strings` (STRINGS has the English):
DataGrid({ rows, columns, strings: { filter: "Süz…", noData: "Kayıt yok",
  rows: (n) => `${n} kayıt`, range: (a, b, n) => `${n} kayıttan ${a}–${b}` } })

// The sort, the filter and the page are signals — hand them in to hold
// them, or read them off apiRef. With `total`, the rows are taken as
// already sorted, filtered and cut to the page by whoever made them: the
// grid shows what it is given and says what the reader asked for.
const sort = signal(null), filter = signal(""), page = signal(1);
const res = resource(() => (sort(), filter(), page(),
  fetch(`/api/people?${new URLSearchParams({ sort: JSON.stringify(sort()), q: filter(), page: page() })}`).then((r) => r.json())));
DataGrid({ rows: () => res.data()?.rows || [], total: () => res.data()?.total, sort, filter, page, columns })