Data fetching · resource + fetch

Async data the reactive way: resource() → { data, loading, error, refetch }.

Loading…
0 rows
ID
Name
Username
Email
City
Company
No data
0 rows

Usage

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