# Data Grid View Select
URL: /docs/web/components/data-grid-view-select

A view selector with integrated view editor for DataGrid. Supports dropdown, horizontal-tabs, and vertical-tabs variants with full CRUD operations on saved views.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useCallback, useState } from 'react';

import {
  DataGrid,
  type ColumnDef,
  type SavedDataGridView,
  applyViewToTable,
  getDataGridSelectColumn,
  getGeneratedViewId,
  useDataGrid

} from '@docyrus/ui/components/data-grid';
import {
  DataGridViewSelect,
  type DataGridViewSelectVariant
} from '@docyrus/ui/components/data-grid-view-select';
import { useMounted } from '@docyrus/ui/primitives/hooks/use-mounted';
import { cn } from '@docyrus/ui/primitives/lib/utils';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';
import { Switch } from '@docyrus/ui/primitives/ui/switch';
import { TooltipProvider } from '@docyrus/ui/primitives/ui/tooltip';

type Task = {
  id: number;
  title: string;
  assignee: string;
  status: 'Todo' | 'In Progress' | 'Done';
  priority: 'Low' | 'Medium' | 'High';
  dueDate: string;
  projectName: string;
  projectPhase: 'Discovery' | 'Development' | 'Testing' | 'Shipped';
};

const STATUS_OPTIONS = [{ value: 'Todo', label: 'Todo', color: '#94a3b8' }, { value: 'In Progress', label: 'In Progress', color: '#3b82f6' }, { value: 'Done', label: 'Done', color: '#22c55e' }];

const PRIORITY_OPTIONS = [{ value: 'Low', label: 'Low', color: '#94a3b8' }, { value: 'Medium', label: 'Medium', color: '#f59e0b' }, { value: 'High', label: 'High', color: '#f97316' }];

const PHASE_OPTIONS = [
  { value: 'Discovery', label: 'Discovery', color: '#a78bfa' },
  { value: 'Development', label: 'Development', color: '#3b82f6' },
  { value: 'Testing', label: 'Testing', color: '#f59e0b' },
  { value: 'Shipped', label: 'Shipped', color: '#22c55e' }
];

const TASKS: Task[] = [
  {
    id: 1, title: 'Fix login page crash', assignee: 'Alice', status: 'In Progress', priority: 'High', dueDate: '2026-02-15', projectName: 'Web App', projectPhase: 'Development'
  },
  {
    id: 2, title: 'Add dark mode toggle', assignee: 'Bob', status: 'Todo', priority: 'Medium', dueDate: '2026-03-01', projectName: 'Web App', projectPhase: 'Discovery'
  },
  {
    id: 3, title: 'Update API docs', assignee: 'Carol', status: 'Done', priority: 'Low', dueDate: '2026-01-20', projectName: 'Documentation', projectPhase: 'Shipped'
  },
  {
    id: 4, title: 'Improve search speed', assignee: 'David', status: 'In Progress', priority: 'High', dueDate: '2026-02-28', projectName: 'Backend API', projectPhase: 'Testing'
  },
  {
    id: 5, title: 'Write unit tests', assignee: 'Eve', status: 'Todo', priority: 'Medium', dueDate: '2026-03-10', projectName: 'Backend API', projectPhase: 'Development'
  },
  {
    id: 6, title: 'Design settings page', assignee: 'Alice', status: 'Todo', priority: 'Low', dueDate: '2026-03-20', projectName: 'Web App', projectPhase: 'Discovery'
  }
];

const columns: ColumnDef
                  
                    
                    
                  
                
              </div>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">editable</span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <div className="space-y-3">
        <div className="flex flex-wrap items-center gap-2">
          
        </div>

        
      </div>
    </div>
  );
}

export function DataGridViewSelectDemo() {
  const mounted = useMounted();

  if (!mounted) {
    return (
      <div className="flex h-80 w-full items-center justify-center rounded-lg border border-border bg-muted/30">
        <span className="text-sm text-muted-foreground">Loading...</span>
      </div>
    );
  }

  return (
    
  );
}
```

## 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

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

**Dependencies:**
- [@tanstack/react-table](https://www.npmjs.com/package/@tanstack/react-table)
- [lucide-react](https://www.npmjs.com/package/lucide-react)
- [react-querybuilder](https://www.npmjs.com/package/react-querybuilder)

## Usage

```tsx
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";

}
/>
```

## API Reference

### DataGridViewSelectProps

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `table` | `Table<TData>` | -- | TanStack Table instance. Required for reading column definitions. |
| `variant` | `"dropdown" \| "horizontal-tabs" \| "vertical-tabs"` | `"dropdown"` | Visual style of the view selector. |
| `views` | `Array<SavedDataGridView>` | -- | List of saved views to display. |
| `activeViewId` | `string` | -- | Controlled active view ID. |
| `defaultActiveViewId` | `string` | -- | Uncontrolled initial active view ID. |
| `onViewChange` | `(view: SavedDataGridView) => void` | -- | Called when the user selects a different view. |
| `onViewSave` | `(view: SavedDataGridView) => void` | -- | Called when a view is saved (edited) via the editor dialog. |
| `onViewDelete` | `(viewId: string) => void` | -- | Called when a view is deleted via context menu or editor. |
| `onViewCreate` | `(view: SavedDataGridView, position?: { afterViewId?: string; beforeViewId?: string }) => void` | -- | Called when a new view is created. Includes optional position hint. |
| `onViewHide` | `(viewId: string) => void` | -- | Called when a view is hidden via context menu. |
| `onViewUnhide` | `(viewId: string) => void` | -- | Called when a hidden view is unhidden. |
| `hiddenViewIds` | `Array<string>` | -- | List of view IDs that should be marked as hidden. |
| `fields` | `Array<FullField>` | -- | Field definitions for the filter section in the view editor. When provided, enables the filter builder. |
| `editable` | `boolean` | `false` | Enables view CRUD operations (add, edit, delete, hide/unhide, context menu). |
| `disabled` | `boolean` | -- | Disables the entire selector. |
| `placeholder` | `string` | -- | Placeholder text for the dropdown variant when no view is selected. |
| `className` | `string` | -- | Additional CSS class names. |

### DataGridViewEditorProps

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `table` | `Table<TData>` | -- | TanStack Table instance. |
| `open` | `boolean` | -- | Controlled open state. |
| `onOpenChange` | `(open: boolean) => void` | -- | Called when dialog open state changes. |
| `value` | `SavedDataGridView` | -- | The view to edit. When undefined, creates a new view. |
| `views` | `Array<SavedDataGridView>` | -- | List of all views (used for the view switcher inside the dialog). |
| `onSave` | `(view: SavedDataGridView) => void` | -- | Called when the user saves the view. |
| `onDelete` | `(viewId: string) => void` | -- | Called when the user deletes the view. |
| `onCancel` | `() => void` | -- | Called when the user cancels editing. |
| `onViewSwitch` | `(viewId: string) => void` | -- | Called when the user switches to another view from inside the dialog. |
| `fields` | `Array<FullField>` | -- | Field definitions for the filter section. |
| `disabled` | `boolean` | -- | Disables all form controls inside the editor. |
| `showDelete` | `boolean` | -- | Whether to show the delete button. |
| `trigger` | `ReactNode` | -- | Custom trigger element for the dialog. |