Data fetching · resource + fetch

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