Data Grid View Select

Overview

DataGridViewSelect combines a view selector and a view editor into a single component. Users can switch between saved views to instantly apply column visibility, ordering, pinning, sorting, grouping, and filter configurations to a @tanstack/react-table instance.

When editable is enabled, users get full view management: create new views, edit existing ones via a dialog with a dual-box column picker, rename, reorder, delete, and hide/unhide views through a context menu.

The DataGridViewEditor sub-component is also exported separately for standalone use outside of the view selector.

Installation

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

npx shadcn@latest add badge button collapsible command dialog dropdown-menu input label popover select sortable tabs textarea

pnpm add @tanstack/react-table react-querybuilder

Usage

import {
  DataGridViewSelect,
  DataGridViewEditor
} from "@docyrus/ui/components/data-grid-view-select";
import type {
  DataGridViewSelectProps,
  DataGridViewSelectVariant,
  DataGridViewEditorProps
} from "@docyrus/ui/components/data-grid-view-select";
import type { SavedDataGridView } from "@docyrus/ui/components/data-grid";

<DataGridViewSelect
  table={table}
  variant="horizontal-tabs"
  views={views}
  activeViewId={activeViewId}
  onViewChange={(view) => {
    setActiveViewId(view.id);
    applyViewToTable(table, view);
  }}
  editable
  onViewSave={handleSave}
  onViewDelete={handleDelete}
  onViewCreate={handleCreate}
  onViewHide={handleHide}
  onViewUnhide={handleUnhide}
  hiddenViewIds={hiddenViewIds}
  fields={fields}
/>

Variants

Editable Mode

When editable={true}, the component adds:

• Context menu on each view tab/item with Rename, Edit, Duplicate, Hide, and Delete actions
• Add button (+) to create a new view from a blank template or duplicate the active view
• View Editor Dialog with sections:
  • General — name, description, row height, display mode
  • Columns — dual-box column picker (available / visible) with drag-to-reorder
  • Sorting — sort by column + direction
  • Row Grouping — pick a groupable column (the field types listed by useDocyrusDataGrid); honors defaultRowGroupingColumn
  • Paging — toggle the standard paging footer, pick the mode (standard / virtual-scroll), and choose a page size from the DATA_GRID_PAGE_SIZE_OPTIONS set (25 / 50 / 100 / 200 / 250 / 500, default 50)
  • Filters — react-querybuilder query builder (when fields is provided)
  • Row / Cell Color Rules — JSONata-driven conditional coloring

Column Picker

The view editor includes a dual-box column picker. Available (hidden) columns appear on the left; visible columns appear on the right with drag-and-drop reordering. Columns with meta.group set on their column definition are displayed under collapsible group headers.

Standalone Editor

DataGridViewEditor can be used independently as a dialog for editing a single view:

import { DataGridViewEditor } from "@docyrus/ui/components/data-grid-view-select";

<DataGridViewEditor
  table={table}
  value={currentView}
  onSave={handleSave}
  onDelete={handleDelete}
  fields={fields}
  trigger={<Button>Edit View</Button>}
/>

API Reference

DataGridViewSelectProps

DataGridViewEditorProps