@thedatagrid/client{" "}
+ next to Simple Table. Call{" "}
+ useTdgpTable in
+ React, Vue, Solid, or Angular,{" "}
+ createTdgpTable in
+ Svelte, or{" "}
+ mountTdgpTable in
+ vanilla JavaScript. Pass{" "}
+ tableProps to the
+ table (Angular uses the{" "}
+ tableProps input).
+ Page changes, sorts, and column filters become server requests. Pair with{" "}
+
+ isLoading
+ {" "}
+ (already set on{" "}
+ tableProps).
+
+ ),
+ codeByFramework: tdgpSnippets(),
+ },
+];
+
+const TDGP_PROPS: PropInfo[] = [
+ {
+ key: "client",
+ name: "client",
+ required: true,
+ description:
+ "A TDGP client with a query(dataset, request) method. createTdgpClient({ url }) from @thedatagrid/client matches this.",
+ type: "TdgpQueryClient",
+ example: `client={createTdgpClient({ url: "https://data.thedatagrid.com" })}`,
+ },
+ {
+ key: "dataset",
+ name: "dataset",
+ required: true,
+ description:
+ "Dataset name on the TDGP server. This is the route segment (POST /{dataset}/query), not a URL. The public catalog lists developers-10k.",
+ type: "string",
+ example: `dataset="developers-10k"`,
+ },
+ {
+ key: "columns",
+ name: "columns",
+ required: true,
+ description: "Column definitions for the table. Keep this array stable across renders.",
+ type: "ColumnDef[]",
+ example: `columns={columns}`,
+ },
+ {
+ key: "pageSize",
+ name: "pageSize",
+ required: false,
+ description:
+ "Rows per page. Sent to the server as limit (start is (page - 1) × pageSize). Defaults to 50.",
+ type: "number",
+ example: `pageSize={50}`,
+ },
+ {
+ key: "primaryKey",
+ name: "primaryKey",
+ required: false,
+ description:
+ "Field used as the row id for leaf rows. Read this from the dataset catalog (GET /datasets). The public developers-10k dataset uses id. If you omit it, the helper falls back to id.",
+ type: "string",
+ example: `primaryKey="id"`,
+ },
+ {
+ key: "groupBy",
+ name: "groupBy",
+ required: false,
+ description:
+ "Group on the server by these catalog field names. Expanding a group loads the next level, or the leaf rows when you have expanded every group field.",
+ type: "string[]",
+ example: `groupBy={["country", "stack"]}`,
+ },
+ {
+ key: "aggregations",
+ name: "aggregations",
+ required: false,
+ description:
+ "Server aggregations for grouped rows (sum, avg, min, max, count). Each id is copied onto the group row, so use a name that will not collide with a field (the protocol examples use avgSalary).",
+ type: "TdgpAggregation[]",
+ example: `aggregations={[{ id: "avgSalary", field: "salary", fn: "avg" }]}`,
+ },
+];
+
+const TdgpContent = () => {
+ return (
+ {pattern.body}
+
+ Pass{" "}
+ groupBy (field
+ names from the catalog) to load group rows first. Use the{" "}
+ columns from the
+ snapshot so the first group column can expand. Expanding a group fetches the next level
+ from the server.{" "}
+ totalCount at a
+ group level is the number of groups, not leaf rows. Pivot stays client-side — use{" "}
+
+ Pivot Tables
+ {" "}
+ on rows you already have.
+
+ Live rows from {TDGP_SERVER_URL} ({TDGP_DATASET}). This query returns + countries (not the 10k people). Next page loads more countries. Click + the arrow in the Country column to load stacks, then people. Sort and + column filters ask the server for a new slice. + {totalRowCount > 0 ? ` ${totalRowCount.toLocaleString()} rows on the server.` : ""} +
+ {error ? ( +{error}
+ ) : null} +