useLocalDataSourceDataGrid
Run the full useDocyrusDataGrid workflow — views, search, filters, grouping, sort, inline save, bulk delete — over an in-memory LocalDataSource. No backend, no sign-in.
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-hooks-use-local-data-source-data-gridpnpm add @tanstack/react-query @tanstack/react-table jsonataA verbatim port of the web adapter. It needs a QueryClientProvider above it (the grid hook uses TanStack Query even for local data) but no Docyrus client or sign-in.
Overview
useLocalDataSourceDataGrid connects a LocalDataSource to useDocyrusDataGrid:
dataSource.client(a stub client that answers the metadata / view calls) is the grid'sclient; the app / data-source slugs come from the local schema ('local'fallback).dataSource.list/updateMany/deleteManybecome the gridcollection, so the local query engine plays the/itemsendpoint —filterKeyword,filters,formulas(JSONata),calculations,orderBy,limit/offsetbehave like the server.- Columns come from the local field metadata;
systemViewsfeed the nativeDataGridViewSelect. - Inline change save and bulk delete write through the local collection.
- The server export menu is off by default (
enableServerExportMenu: false).
Usage
import { useMemo, useState } from 'react';
import { View } from 'react-native';
import { DataGrid, type SavedDataGridView } from '@/components/docyrus-native/data-grid';
import { useLocalDataSource } from '@/hooks/docyrus-native/use-local-data-source';
import { useLocalDataSourceDataGrid } from '@/hooks/docyrus-native/use-local-data-source-data-grid';
type Deal = { id: string; account: string; stage: string; amount: number; probability: number };
const FIELDS = [
{ slug: 'id', name: 'ID', type: 'field-identity', readOnly: true },
{ slug: 'account', name: 'Account', type: 'field-text' },
{ slug: 'stage', name: 'Stage', type: 'field-select' },
{ slug: 'amount', name: 'Amount', type: 'field-money' },
{ slug: 'probability', name: 'Probability', type: 'field-percent' }
];
const VIEWS: Array<SavedDataGridView> = [
{
id: 'all',
name: 'All',
columnOrder: ['account', 'stage', 'amount', 'probability'],
columnVisibility: { id: false },
columnPinning: { left: [], right: [] },
isDefault: true
}
];
export function LocalDealsGrid() {
const [rows, setRows] = useState<Array<Deal>>([
{ id: '1', account: 'Northwind Labs', stage: 'Proposal', amount: 120000, probability: 0.6 },
{ id: '2', account: 'Contoso Finance', stage: 'Discovery', amount: 80000, probability: 0.35 }
]);
const dataSource = useLocalDataSource<Deal>({
slug: 'deals',
appSlug: 'local',
name: 'Local Deals',
data: rows,
metadata: FIELDS,
onDataChange: setRows
});
const listParams = useMemo(() => ({ limit: 100 }), []);
const { table, gridProps, toolbar, pagingMode } = useLocalDataSourceDataGrid<Deal>({
dataSource,
systemViews: VIEWS,
listParams,
readOnly: false,
defaultRowGroupingColumn: 'stage'
});
return (
<View className="flex-1">
{toolbar}
<DataGrid table={table} {...gridProps} pagingMode={pagingMode} />
</View>
);
}Keep systemViews, listParams, toolbarStartContent and toolbarEndContent referentially stable (module constants or useMemo) — they take part in view and query synchronization.
API Reference
Options (UseLocalDataSourceDataGridOptions<TData>)
| Option | Type | Default | Description |
|---|---|---|---|
dataSource | LocalDataSource<TData> | — | From useLocalDataSource / createLocalDataSource. Required. |
listParams | LocalDataSourceQueryParams | — | Local query params merged over the view / search / filter params (formulas, calculations, …). |
enableServerExportMenu | boolean | false | Server export is off for local data. |
...gridOptions | Omit<UseDocyrusDataGridOptions<TData>, 'client' | 'appSlug' | 'dataSourceSlug' | 'collection' | 'listParams' | 'dataSource'> | — | Every other useDocyrusDataGrid option — systemViews, toolbar toggles, readOnly, trackChanges, bulkActions, persistState, … |
Result
UseDocyrusDataGridResult<TData> — see useDocyrusDataGrid (table, gridProps, toolbar, items, resolvedListParams, views, activeViewId, reload, …).
Native deltas
None beyond the ones useDocyrusDataGrid lists. Row ids from useLocalDataSource use the optional expo-crypto randomUUID when installed.
Type Exports
| Type | Description |
|---|---|
UseLocalDataSourceDataGridOptions | Hook options. |