DataGrid

DataGrid — составной компонент для навигации по строкам и ячейкам сетки с клавиатуры.

Обзор

Стилизация DataGrid намеренно минимальна. Основная сложность — в поведении и композиции, а не в большом наборе локальных переменных компонента.

Публичные CSS-переменные

Текущая реализация корня не предоставляет стабильного набора переменных --data-grid-*. Стили в основном задаются содержимым ячеек и строк, а также окружающей раскладкой.

Design

Build

Ship

Done

Review

Planned

Переменная	Значение	Влияет на
общий поток строккорень сетки	—	—
ширина, высота, локальные отступы`DataGridCell`	—	—

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Корень

Стили DataGrid для корня объявляют только базовую раскладку сетки.

Ячейки

Основная визуальная настройка происходит на уровне ячеек — через локальные стили или кастомное дочернее содержимое, а не через задокументированные переменные корня.

Взаимодействие состояний и вариантов

перенос и исключения — контракты поведения, а не варианты стилизации
видимость активной ячейки больше зависит от содержимого и стилей фокуса, чем от токенов корня

Примеры

Настройка размера ячеек в месте использования

Фиксированные ячейки 44px задаются в месте использования: строка задаёт grid-auto-columns, ячейка — свою высоту, а :focus-visible сохраняет видимость активной ячейки. Классы описаны в таблице стилей примеров ниже.

LTRRTL

cell-size-tuning-at-usage-site.tsx · 25 строк

import {
  DataGrid,
  DataGridCell,
  DataGridRow,
  DataGridRowGroup,
} from '@vega-ui/react';
import './examples.css';

const keys = [['7', '8', '9'], ['4', '5', '6'], ['1', '2', '3']];

export default function CellSizeTuningAtUsageSite() {
  return (

Таблица стилей примеров

Общая для примеров DataGrid: рамки, оформление заголовков, кольцо фокуса, приглушённый вид исключённых ячеек и липкая строка заголовков.

.dataGridSheet {
  border: 1px solid var(--separator-opaque);
  border-radius: var(--radius-3);
  overflow: hidden;
  background: var(--surface-primary);
  font-size: var(--font-size-2);
  font-variant-numeric: tabular-nums;
  color: var(--label-primary);
}

.dataGridSheet [role='row'] + [role='row'] {
  border-block-start: 1px solid var(--separator-non-opaque);
}

.dataGridSheet [role='gridcell'],
.dataGridSheet [role='columnheader'],
.dataGridSheet [role='rowheader'] {
  min-block-size: var(--spacing-20);
  padding-inline: var(--spacing-4);
  outline-offset: -2px;
}

.dataGridSheet [role='columnheader'],
.dataGridSheet [role='rowheader'] {
  color: var(--label-secondary);
  font-weight: 500;
}

.dataGridSheet [role='rowheader'],
.dataGridSheetWideFirst [role='columnheader']:first-child {
  justify-content: flex-start;
}

.dataGridSheet :focus-visible {
  outline: 2px solid var(--focus-color);
}

.dataGridSheet [aria-disabled='true'] {
  color: var(--label-quaternary);
  background: var(--fills-quaternary);
}

.dataGridSheetWideFirst [role='row'] {
  grid-template-columns: 120px;
}

.dataGridScroll {
  max-block-size: 280px;
  overflow: auto;
  scroll-padding-block-start: var(--spacing-20);
}

.dataGridStickyRow {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--surface-primary);
}

.dataGridDays {
  inline-size: fit-content;
}

.dataGridDays [role='gridcell'],
.dataGridDays [role='rowheader'] {
  min-block-size: var(--spacing-14);
  padding: 0;
  font-size: var(--font-size-1);
}

.dataGridDays [role='rowheader'] {
  padding-inline: var(--spacing-4);
}

.dataGridDays [role='row'] {
  grid-auto-columns: var(--spacing-14);
  grid-template-columns: var(--spacing-24);
}

.dataGridCompact {
  inline-size: fit-content;
}

.dataGridCompact [role='row'] {
  grid-auto-columns: 44px;
}

.dataGridCompact [role='gridcell'] {
  block-size: 44px;
  padding: 0;
}

.dataGridScrollX {
  overflow-x: auto;
  scroll-padding-inline-start: var(--spacing-24);
  border: 1px solid var(--separator-opaque);
  border-radius: var(--radius-3);
}

.dataGridScrollX .dataGridSheet {
  overflow: visible;
  border: none;
  border-radius: 0;
}

.dataGridDays [role='rowheader'] {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--surface-primary);
}

Не переопределяйте

не выдумывайте незадокументированные хуки --data-grid-*, как будто это публичный API
не перестилизовывайте ячейки настолько агрессивно, что пропадает видимость активной ячейки