useDocyrusDataTable

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-hooks-use-docyrus-data-table

pnpm add @docyrus/app-utils @docyrus/api-client @tanstack/react-query @tanstack/react-table @react-querybuilder/core

A port of the web hook with the same options and result. It builds its own useReactTable instance (no grid editing controller) whose cells render through the native value renderers, and returns table + tableProps for the headless native DataTable, a toolbar, and a view node that switches between the table and a card gallery. It shares the saved views, list-params, export and bulk-action engine with useDocyrusDataGrid.

Overview

• Columns — one column per schema field whose cell is the field's value renderer (VALUE_RENDERER_MAP); object values group by a stable key. inferColumnsFromData derives columns from the rows when there is no schema.
• Items query — GET /v1/apps/{appSlug}/data-sources/{dataSourceSlug}/items (or collection.list) with a flat columns list, expand, orderBy (sorting is manual for server data), filters (saved view + toolbar chips + listParams.filters), debounced filterKeyword, limit / offset / fullCount in standard paging.
• Saved views — DataGridViewSelect in the toolbar; the active view is applied like the grid hook (reserved columns pinned left). pinLeadingColumns pins select / actions / __* columns on view-less tables.
• Display mode — enableDisplayMenu adds the table / gallery toggle; view renders DataTable or the native DataGridGallery (legacy cardConfig adapted with adaptLegacyCardConfig, pull-to-refresh → records reload).
• Bulk actions — selection bar inside toolbar (update / delete / export / email / message + extraBulkActions).
• Persistence — persistState per active view (search, filters, sort, grouping, display mode, column layout, page size).

Usage

import { View } from 'react-native';

import { useDocyrusClient } from '@docyrus/signin/react-native';

import { useDocyrusDataTable } from '@/hooks/docyrus-native/use-docyrus-data-table';

export function OrganizationsTable() {
  const client = useDocyrusClient();
  const { toolbar, view } = useDocyrusDataTable({
    client: client!,
    appSlug: 'base',
    dataSourceSlug: 'organization',
    enableDisplayMenu: true,
    persistState: true,
    cardConfig: { titleField: 'name', descriptionField: 'email' },
    onRowClick: row => console.log(row.original)
  });

  return (
    <View className="flex-1">
      {toolbar}
      {view}
    </View>
  );
}

Render <DataTable table={table} {...tableProps} /> yourself instead of view when you don't need the gallery toggle.

API Reference

Options (UseDocyrusDataTableOptions<TData>)

Every useDocyrusDataViewSelect option is accepted and forwarded, plus:

Result (UseDocyrusDataTableResult<TData>)

All useDocyrusDataViewSelect result fields except gridViewSelectProps, plus:

Native deltas

• view renders the native headless DataTable or the native DataGridGallery (FlashList of DataGalleryCards, pull-to-refresh wired to the records reload).
• Email / phone value renderers open the native compose dialogs from client (like web); a host override (onBulkEmail / renderEmailComposeDialog, or the message pair) wins through onComposeEmail / onSendMessage.
• Bulk actions: same native engine as the grid hook (update / email / message open the native dialogs; export via ActionSheet + share sheet).
• User / relation option loaders resolve relation targets through the shared inventory (web table fetches /v1/apps/data-sources).
• Side filters default to a sheet trigger (presentation: 'inline' for the web column); the vertical-tabs sidePanel opens its view list as a bottom sheet on phones.

Type Exports