@thedatagrid/client

Canonical client for THE DataGrid Protocol (TDGP, tdgp/1) — an isomorphic fetch client plus ready-made grid bindings:

• @thedatagrid/client — createTdgpClient(): query, filter-values, catalog, discovery, SSE streams
• @thedatagrid/client/ag-grid — createAgGridServerSideDatasource(): an AG Grid Server-Side Row Model datasource (grouping, aggregations, pivoting, filtering, sorting, pagination — all server-side)
• @thedatagrid/client/infinite — createInfiniteDataFn(): a data function for Infinite Table's <DataSource>

Works in browsers, Node 18+, and edge runtimes. The grid bindings use structural types only — no ag-grid or @infinite-table dependency.

• Full protocol reference: thedatagrid.com/protocol
• Protocol explorer: explorer.thedatagrid.com - explores data exposed by the TDGP server at data.thedatagrid.com
• Live public TDGP server to play with: data.thedatagrid.com

Install

npm install @thedatagrid/client

Quick start

import { createTdgpClient } from '@thedatagrid/client';

const client = createTdgpClient({ url: 'https://data.thedatagrid.com' });

const response = await client.query('developers-10k', {
  process: { group: 'server' },
  groupBy: [{ field: 'country' }],
  groupKeys: [],
  aggregations: [{ id: 'avgSalary', field: 'salary', fn: 'avg' }],
});

AG Grid Server-Side Row Model

import { createTdgpClient } from '@thedatagrid/client';
import { createAgGridServerSideDatasource } from '@thedatagrid/client/ag-grid';

const client = createTdgpClient({ url: 'https://data.thedatagrid.com' });

const serverSideDatasource = createAgGridServerSideDatasource({
  client,
  dataset: 'developers-10k',
});

<AgGridReact rowModelType="serverSide" serverSideDatasource={serverSideDatasource} />;

Infinite Table

import { createTdgpClient } from '@thedatagrid/client';
import { createInfiniteDataFn } from '@thedatagrid/client/infinite';

const client = createTdgpClient({ url: 'https://data.thedatagrid.com' });
const data = createInfiniteDataFn({ client, dataset: 'developers-10k' });

<DataSource<Developer> primaryKey="id" data={data} lazyLoad>
  {/* ... */}
</DataSource>;

License

MIT