Skip to content
v2.5.0
English
Русский
Documentation

DataGridPicker

DataGridPicker is the visual picker layer built on top of DataGridSelectable.
StorybookSource

Overview

DataGridPicker adds a picker-specific visual layer on top of DataGridSelectable. The root itself has little direct CSS, but picker items and composed wrappers consume picker size and variant context.

Public CSS Variables

1 mo
6 mo
12 mo
VariableValueAffects
Item size.DataGridPickerItem
No visible change in this state
Radius ratio of an item.DataGridPickerItem
No visible change in this state
Item text color.DataGridPickerItem
No visible change in this state
Item background.DataGridPickerItem
No visible change in this state
Item background on hover.DataGridPickerItem
No visible change in this state
Item background while pressed.DataGridPickerItem
No visible change in this state
Text color of the selected item.DataGridPickerItem
No visible change in this state
Background of the selected item.DataGridPickerItem
No visible change in this state
Background of the selected item on hover.DataGridPickerItem
No visible change in this state
Background of the selected item while pressed.DataGridPickerItem
No visible change in this state
Background of items inside a selected range.DataGridPickerItem
No visible change in this state
Range item background on hover.DataGridPickerItem
No visible change in this state
Range item background while pressed.DataGridPickerItem
No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root mainly provides picker context rather than a heavy styling surface.

Items

DataGridPickerItem and related composed wrappers express the visible picker semantics such as active, selected, and disabled appearance.

State And Variant Interaction

  • size and variant flow through picker context to child parts.
  • Selected and active visuals depend on the picker item layer.
  • Scroller composition changes layout and paging, not the underlying color family.

Examples

Brand-colored picker matrix

variant='primary' switches the selected color to the brand palette and size='lg' enlarges every item through context. Each item reads --data-grid-picker-item-size and --data-grid-picker-item-br-ratio from its own element, so the round shape is set on the items, not on the root.

brand-colored-picker-matrix.tsx · 33 lines
import { type CSSProperties } from 'react';
import {
  DataGridPicker,
  DataGridPickerItem,
  DataGridPickerRow,
  DataGridPickerRowGroup,
} from '@vega-ui/react';

const amounts = [[5, 10, 15], [20, 50, 100]];
const roundItem = { '--data-grid-picker-item-br-ratio': 0.5 } as CSSProperties;

export default function BrandColoredPickerMatrix() {

Do Not Override

  • inventing a standalone root token API that is not present in source
  • styling picker cells in ways that hide active, selected, or disabled states
  • treating layout scope and paging logic as CSS concerns