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 })