VibeUI

Data Grid

Density Switch

Сетка с переключателем плотности: компактно, обычно и просторно меняют отступ, кегль и высоту строки разом, а на просторной плотности появляется примечание.

  • datagrid
  • density
  • settings
  • table

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/datagrid-027

Документы сделки

Плотность
Плотность меняет отступ, кегль и высоту строки одновременно
ДокументАвторИзменёнРазмер
Договор поставки 2026Ким12 марта412 КБ
Спецификация партии №14Лапина11 марта88 КБ
Акт сверки за февральМещеряков9 марта57 КБ
Регламент приёмкиГараев6 марта1,2 МБ
Протокол встречи 04.03Ким4 марта24 КБ

Плотность: обычно, высота строки ≈36 px, примечание скрыто

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «datagrid-027» (Density Switch) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/datagrid-027.json

Registry item: https://vibeui.ru/r/datagrid-027.json
Ставится в: components/vibeui/datagrid-027.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Сетка с переключателем плотности: компактно, обычно и просторно меняют отступ, кегль и высоту строки разом, а на просторной плотности появляется примечание.

Сетка с тремя уровнями плотности: отступ, кегль и высота строки меняются вместе. Ноль зависимостей, один файл.

## 3. Как использовать
import { Datagrid027 } from "@/components/vibeui/datagrid-027"

<Datagrid027 caption="Документы сделки" density="compact" />

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-datagrid-027-* и не подменять её токенами вашей темы
- переключатель радиокнопками в fieldset: это выбор одного из трёх, а не три кнопки
- смену кегля и интерлиньяжа вместе с отступом — одна высота строки плотности не делает
- переменные плотности на корне через data-density, а не отдельные правила для каждой ячейки
- текстовое дублирование состояния с role=status, иначе смена плотности нигде не объявляется
- светлую подложку сетки: на тёмной карточке каталога тёмный текст иначе пропадает

## 6. Можно менять
- подпись под шапкой через caption
- стартовую плотность через density: compact, regular или roomy
- список документов через rows
- акцентный цвет через accent

## 7. Правила
- Примечание показывается только на просторной плотности: это часть режима, а не отдельный переключатель.
- Компактный режим уменьшает кегль до 12 px — ниже опускаться не стоит, текст перестаёт читаться.
- Плотность живёт в состоянии и сбрасывается при перезагрузке: сохраняйте выбор пользователя сами.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/datagrid-027.json
https://vibeui.ru/r/datagrid-027.json

Компонент самодостаточен: один файл, без зависимостей, палитра в --vibeui-datagrid-027-*. Клиентский: useState хранит режим, который попадает в data-density на корне; три переменные — отступ, кегль и интерлиньяж — переопределяются одним селектором на режим, поэтому новых правил для ячеек не нужно. Плотность здесь не только про отступ: на просторном режиме показывается вторая строка с примечанием, которой в компактном нет, — иначе «просторно» это просто воздух. Переключатель собран радиокнопками внутри fieldset: это выбор одного из трёх, а не три независимые кнопки. Текущее состояние продублировано текстом с role=status.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

"use client"

import { useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Datagrid027Row = {
  id: string
  document: string
  author: string
  note: string
  size: string
  changed: string
}

export type Datagrid027Props = Omit<
  ComponentPropsWithoutRef<"section">,
  "children"
> & {
  rows?: Datagrid027Row[]
  caption?: string
  density?: "compact" | "regular" | "roomy"
  accent?: string
}

// Идея компонента: плотность — это не только отступ. Переключатель меняет
// сразу три переменные: вертикальный отступ, размер шрифта и высоту
// строки, а на просторной плотности показывает вторую строку с примечанием,
// которой в компактном режиме нет. Переключатель собран радиокнопками в
// fieldset: это выбор одного из трёх, а не три независимые кнопки.
const STYLES = `
:where([data-vibeui-block="datagrid-027"]){
--vibeui-datagrid-027-bg:oklch(1 0 0);
--vibeui-datagrid-027-fg:oklch(0.23 0.014 285);
--vibeui-datagrid-027-muted:oklch(0.55 0.014 285);
--vibeui-datagrid-027-border:oklch(0.92 0.006 285);
--vibeui-datagrid-027-head:oklch(0.975 0.003 285);
--vibeui-datagrid-027-accent:oklch(0.5 0.14 145);
--vibeui-datagrid-027-chip:oklch(0.96 0.03 145);
--vibeui-datagrid-027-pad:0.5rem;
--vibeui-datagrid-027-size:0.8125rem;
--vibeui-datagrid-027-lead:1.4;
--vibeui-datagrid-027-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="datagrid-027"]{
box-sizing:border-box;width:100%;max-width:50rem;margin:0 auto;
background:var(--vibeui-datagrid-027-bg);color:var(--vibeui-datagrid-027-fg);
border:1px solid var(--vibeui-datagrid-027-border);border-radius:0.875rem;
font-family:var(--vibeui-datagrid-027-font);overflow:hidden;
}
[data-vibeui-block="datagrid-027"] *{box-sizing:border-box}
[data-vibeui-block="datagrid-027"][data-density="compact"]{
--vibeui-datagrid-027-pad:0.25rem;--vibeui-datagrid-027-size:0.75rem;--vibeui-datagrid-027-lead:1.25;
}
[data-vibeui-block="datagrid-027"][data-density="roomy"]{
--vibeui-datagrid-027-pad:0.875rem;--vibeui-datagrid-027-size:0.875rem;--vibeui-datagrid-027-lead:1.55;
}
[data-vibeui-block="datagrid-027"] [data-part="bar"]{
display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;
padding:0.75rem 0.875rem;border-bottom:1px solid var(--vibeui-datagrid-027-border);
}
[data-vibeui-block="datagrid-027"] [data-part="title"]{margin:0;font-size:0.875rem;font-weight:650;margin-inline-end:auto}
[data-vibeui-block="datagrid-027"] [data-part="switch"]{
border:1px solid var(--vibeui-datagrid-027-border);border-radius:0.5rem;
margin:0;padding:0.1875rem;display:flex;gap:0.1875rem;
}
[data-vibeui-block="datagrid-027"] [data-part="switch"] legend{
padding:0 0.25rem;font-size:0.625rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
color:var(--vibeui-datagrid-027-muted);
}
[data-vibeui-block="datagrid-027"] [data-part="switch"] label{
display:inline-flex;align-items:center;gap:0.3125rem;cursor:pointer;
padding:0.25rem 0.5rem;border-radius:0.375rem;font-size:0.75rem;color:var(--vibeui-datagrid-027-muted);
}
[data-vibeui-block="datagrid-027"] [data-part="switch"] label:has(input:checked){
background:var(--vibeui-datagrid-027-chip);color:var(--vibeui-datagrid-027-accent);font-weight:600;
}
[data-vibeui-block="datagrid-027"] [data-part="switch"] input{accent-color:var(--vibeui-datagrid-027-accent);margin:0;width:0.8125rem;height:0.8125rem}
[data-vibeui-block="datagrid-027"] [data-part="switch"] input:focus-visible{outline:2px solid var(--vibeui-datagrid-027-accent);outline-offset:2px}
[data-vibeui-block="datagrid-027"] [data-part="scroll"]{overflow-x:auto}
[data-vibeui-block="datagrid-027"] [data-part="scroll"]:focus-visible{outline:2px solid var(--vibeui-datagrid-027-accent);outline-offset:-2px}
[data-vibeui-block="datagrid-027"] table{
width:100%;border-collapse:collapse;
font-size:var(--vibeui-datagrid-027-size);line-height:var(--vibeui-datagrid-027-lead);
}
[data-vibeui-block="datagrid-027"] caption{
padding:0.625rem 0.875rem;text-align:left;font-size:0.75rem;color:var(--vibeui-datagrid-027-muted);caption-side:top;
}
[data-vibeui-block="datagrid-027"] th,
[data-vibeui-block="datagrid-027"] td{
padding:var(--vibeui-datagrid-027-pad) 0.875rem;text-align:left;white-space:nowrap;
border-top:1px solid var(--vibeui-datagrid-027-border);
}
[data-vibeui-block="datagrid-027"] thead th{background:var(--vibeui-datagrid-027-head);font-weight:600}
[data-vibeui-block="datagrid-027"] [data-align="end"]{text-align:right;font-variant-numeric:tabular-nums}
[data-vibeui-block="datagrid-027"] [data-part="note"]{
display:block;margin-top:0.1875rem;font-size:0.6875rem;font-weight:400;color:var(--vibeui-datagrid-027-muted);
white-space:normal;
}
[data-vibeui-block="datagrid-027"] [data-part="author"]{color:var(--vibeui-datagrid-027-muted)}
[data-vibeui-block="datagrid-027"] [data-part="metrics"]{
margin:0;padding:0.5rem 0.875rem 0.625rem;border-top:1px solid var(--vibeui-datagrid-027-border);
font-size:0.6875rem;color:var(--vibeui-datagrid-027-muted);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="datagrid-027"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_ROWS: Datagrid027Row[] = [
  {
    id: "f1",
    document: "Договор поставки 2026",
    author: "Ким",
    note: "Согласован с юристами, ждём подпись контрагента",
    size: "412 КБ",
    changed: "12 марта",
  },
  {
    id: "f2",
    document: "Спецификация партии №14",
    author: "Лапина",
    note: "Обновлены цены по позициям 3 и 7",
    size: "88 КБ",
    changed: "11 марта",
  },
  {
    id: "f3",
    document: "Акт сверки за февраль",
    author: "Мещеряков",
    note: "Расхождение 14 200 ₽, отправлено на уточнение",
    size: "57 КБ",
    changed: "9 марта",
  },
  {
    id: "f4",
    document: "Регламент приёмки",
    author: "Гараев",
    note: "Черновик, раздел про возвраты не дописан",
    size: "1,2 МБ",
    changed: "6 марта",
  },
  {
    id: "f5",
    document: "Протокол встречи 04.03",
    author: "Ким",
    note: "Решения зафиксированы, задачи заведены",
    size: "24 КБ",
    changed: "4 марта",
  },
]

const MODES = [
  { value: "compact", label: "Компактно", height: "≈28 px" },
  { value: "regular", label: "Обычно", height: "≈36 px" },
  { value: "roomy", label: "Просторно", height: "≈48 px" },
] as const

/**
 * Сетка с переключателем плотности: отступ, кегль и высота строки меняются
 * вместе, на просторной плотности появляется примечание. Один файл.
 */
export function Datagrid027({
  rows = DEFAULT_ROWS,
  caption = "Плотность меняет отступ, кегль и высоту строки одновременно",
  density = "regular",
  accent,
  className,
  style,
  ...props
}: Datagrid027Props) {
  const [mode, setMode] = useState<(typeof MODES)[number]["value"]>(density)

  const current = MODES.find((item) => item.value === mode) ?? MODES[1]

  const palette = {
    ...(accent ? { "--vibeui-datagrid-027-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-datagrid-027" precedence="medium">
        {STYLES}
      </style>
      <section
        {...props}
        data-vibeui-block="datagrid-027"
        data-density={mode}
        className={className}
        style={palette}
      >
        <div data-part="bar">
          <h3 data-part="title">Документы сделки</h3>
          <fieldset data-part="switch">
            <legend>Плотность</legend>
            {MODES.map((item) => (
              <label key={item.value}>
                <input
                  type="radio"
                  name="vibeui-datagrid-027-density"
                  value={item.value}
                  checked={mode === item.value}
                  onChange={() => setMode(item.value)}
                />
                {item.label}
              </label>
            ))}
          </fieldset>
        </div>
        <div
          data-part="scroll"
          role="region"
          aria-label="Таблица документов, прокручивается вбок"
          tabIndex={0}
        >
          <table>
            <caption>{caption}</caption>
            <thead>
              <tr>
                <th scope="col">Документ</th>
                <th scope="col">Автор</th>
                <th scope="col">Изменён</th>
                <th scope="col" data-align="end">
                  Размер
                </th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row) => (
                <tr key={row.id}>
                  <th scope="row">
                    {row.document}
                    {mode === "roomy" ? (
                      <span data-part="note">{row.note}</span>
                    ) : null}
                  </th>
                  <td data-part="author">{row.author}</td>
                  <td>{row.changed}</td>
                  <td data-align="end">{row.size}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p data-part="metrics" role="status" aria-live="polite">
          Плотность: {current.label.toLowerCase()}, высота строки{" "}
          {current.height}
          {mode === "roomy" ? ", примечание показано" : ", примечание скрыто"}
        </p>
      </section>
    </>
  )
}