# useLocalDataSourceDataGrid
URL: /docs/web/hooks/use-local-data-source-data-grid

Wire a LocalDataSource object into the Docyrus DataGrid hook stack, including toolbar search, filters, sorting, grouping, saved views, and local CRUD.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/hooks-use-local-data-source-data-grid
```

**Dependencies:**
- [@tanstack/react-query](https://tanstack.com/query/latest)
- [@tanstack/react-table](https://tanstack.com/table/latest)
- [jsonata](https://www.npmjs.com/package/jsonata)

## Overview

`useLocalDataSourceDataGrid` connects a [`LocalDataSource`](/docs/web/hooks/use-local-data-source) to the same grid workflow used by [`useDocyrusDataGrid`](/docs/web/hooks/use-docyrus-data-grid). It gives local JSON data the standard Docyrus grid experience:

- Automatic columns from local field metadata.
- Toolbar search, filter, group, sort, row height, field visibility, display controls, and reload.
- `DataGridViewSelect` with developer-provided `systemViews`.
- Local list queries using the same `filterKeyword`, `filters`, `formulas`, `calculations`, `orderBy`, `limit`, and `offset` behavior exposed by `LocalDataSource.list`.
- Inline change save and bulk delete/update through the local collection methods.

The hook disables server export by default because the records are local. Use `useDataExport` for browser-side export flows.

## Usage

```tsx
'use client';

import { useState } from 'react';

import { DataGrid, type SavedDataGridView } from '@docyrus/ui/components/data-grid';
import { useLocalDataSource } from '@docyrus/ui/library/hooks/use-local-data-source';
import { useLocalDataSourceDataGrid } from '@docyrus/ui/library/hooks/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' },
  { slug: 'weighted_amount', name: 'Weighted Amount', type: 'field-money', readOnly: true }
];

const views: Array
), [addRow]);

useLocalDataSourceDataGrid({
  dataSource,
  listParams,
  systemViews,
  toolbarEndContent
});
```

## API Reference

### Parameters

`useLocalDataSourceDataGrid(options)` accepts:

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `dataSource` | `LocalDataSource<TData>` | — | Local data source from `useLocalDataSource` or `createLocalDataSource`. Required. |
| `listParams` | `LocalDataSourceQueryParams` | — | Query params passed to `dataSource.list` after the active view/search/filter state is merged by `useDocyrusDataGrid`. |
| `systemViews` | `Array<SavedDataGridView>` | — | Developer-defined views shown in `DataGridViewSelect`. These are local and not persisted to a backend. |
| `defaultRowGroupingColumn` | `string` | — | Field slug used for initial grouping when the active view does not define grouping. |
| `enableServerExportMenu` | `boolean` | `false` | Server export menu is disabled by default for local data. |
| `...gridOptions` | `Omit<UseDocyrusDataGridOptions, 'client' \| 'appSlug' \| 'dataSourceSlug' \| 'collection' \| 'listParams'>` | — | All other supported `useDocyrusDataGrid` options, including toolbar toggles, column mapping, row actions, side filters, pivot filters, formatting, and change tracking. |

### Return Value

The hook returns `UseDocyrusDataGridResult<TData>`.

| Property | Description |
|----------|-------------|
| `table` | TanStack Table instance for `<DataGrid>`. |
| `gridProps` | Props to spread onto `<DataGrid>`. |
| `toolbar` | Pre-wired toolbar with view select, search, filters, grouping, sorting, fields, display, reload, and custom toolbar slots. |
| `items` | Current local rows returned by `dataSource.list`. |
| `resolvedListParams` | Merged local query params sent to `dataSource.list`. |
| `reload` | Refetch local rows and refresh view metadata. |
| `views` / `activeViewId` / `setActiveViewId` | Local/system view state exposed by the underlying data-grid view hook. |

## Playground

See the local demo in the playground at `apps/playground/src/pages/local-data-source-page.tsx`.