Data fetching · resource + fetch
Async data the reactive way: resource() → { data, loading, error, refetch }.
Loading…
ID | Name | Username | Email | City | Company |
|---|---|---|---|---|---|
| No data | |||||
0 rows
Usage
import { resource } from "./index.js";import { DataGrid } from "./components/grid.js"; // resource() wraps an async fn into { data, loading, error, refetch }.const users = resource(() => fetch("https://jsonplaceholder.typicode.com/users").then((r) => r.json())); Button({ label: "Refetch", onClick: () => users.refetch() }); // derived columns: value(row) computes a cell from nested fields.const cols = [ { field: "name", header: "Name", width: 170 }, { field: "city", header: "City", value: (r) => r.address?.city },]; // pass the getter so the grid re-renders as data arrives.DataGrid({ rows: () => users.data() || [], columns: cols, pageSize: 5 })