DataGridViewSelect

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-data-grid-view-select

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

DataGridViewSelect drives the TanStack table of a data grid (from useDataGrid, useDocyrusDataGrid or your own useReactTable): selecting a view applies it with applyViewToTable (visibility, order, pinning, sorting, filters, grouping, row height, display mode, column options). The public API mirrors web @docyrus/ui 1:1 — useDocyrusDataViewSelect returns a ready-made gridViewSelectProps object for it.

Mobile adaptations:

• Active-view menu — long-press a tab (or the view chip), or tap its ⋯: an ActionSheet with Configure, Rename, Hide, Hidden views, Add view after / before, Duplicate view, Delete (confirmed with DeleteConfirmDialog) and Manage all views. System views (isSystem) only offer Hide, Hidden views and Manage all views.
• View editor — a full-screen page sheet with an accordion of sections instead of the web two-pane dialog.
• Manage all views — a bottom sheet with up / down reorder, hide / unhide and delete.
• Add view — the + button (and the picker sheet's Add view row) opens a quick "name this view" sheet that saves the grid's current layout (captureViewSnapshot); Configure all settings… opens the full editor instead.
• vertical-tabs (web side panel) renders a trigger chip that opens a picker sheet listing every view.

Usage

import { useDataGrid, DataGrid } from '@/components/docyrus-native/data-grid';
import { DataGridViewSelect, type SavedDataGridView } from '@/components/docyrus-native/data-grid-view-select';

function DealsPage() {
  const grid = useDataGrid({ data, columns });
  const [views, setViews] = useState<SavedDataGridView[]>(initialViews);
  const [activeViewId, setActiveViewId] = useState('all');

  return (
    <>
      <DataGridViewSelect
        table={grid.table}
        variant="horizontal-tabs"
        maxVisibleViews={4}
        views={views}
        activeViewId={activeViewId}
        onViewChange={view => setActiveViewId(view.id)}
        onViewCreate={(view, position) => setViews(prev => insertAt(prev, view, position))}
        onViewSave={view => setViews(prev => prev.map(v => (v.id === view.id ? view : v)))}
        onViewDelete={id => setViews(prev => prev.filter(v => v.id !== id))}
        onViewReorder={ids => setViews(prev => ids.map(id => prev.find(v => v.id === id)!))}
        fields={queryBuilderFields}
        editable />
      <DataGrid {...grid} />
    </>
  );
}

With a Docyrus data source, spread the hook output instead:

const { gridViewSelectProps } = useDocyrusDataViewSelect({ client, appSlug: 'base', dataSourceSlug: 'deal' });

<DataGridViewSelect table={grid.table} {...gridViewSelectProps} variant="horizontal-tabs" editable />

Standalone editor

import { DataGridViewEditor } from '@/components/docyrus-native/data-grid-view-select';

<DataGridViewEditor
  table={table}
  fields={fields}
  onSave={view => createView(view)}
  trigger={<Text>New view…</Text>} />

API Reference

DataGridViewSelect

DataGridViewEditor

The full-screen editor (web ViewEditorDialog). DataGridViewSelect mounts it for you; use it directly for custom triggers.

Editor sections

Everything except Gallery View is a draft emitted only on Save (the Save button needs a name).

SavedDataGridView

DataGridAdvancedFilter

The grid toolbar's AND / OR filter lives in the data-grid package (@/components/docyrus-native/data-grid) and shares this editor's query builder. See the DataGrid page.

Translations

All copy goes through useUiTranslation() with the web keys — ui.dataGridView.* (e.g. selectView, addView, configure, hideView, hiddenViews, addViewAfter, addViewBefore, duplicateView, deleteView, manageAllViews, editView, newView, saveView, saving, general, columns, sorting, rowGrouping, paging, inlineEditing, form, filters, galleryView, rowColorRules, cellColorRules, …) plus native-only keys renameView, createView, configureAllSettings, moreViews, more, moveUp, moveDown, columnOptions, color, customColorPlaceholder, apply, viewObjectName, deleteViewTitle, rowColorRulesHint, cellColorRulesHint, manageAllViewsDescriptionNative.

Breaking changes (native)

Type Exports

Also exported: buildDraftColumns(table, view?) — the editor's column list builder.