VibeUI

Tables

Grouped Header

Таблица с двухэтажной шапкой: верхний ряд объединяет колонки по годам через colspan, нижний называет колонки внутри года, а первая ячейка склеена rowspan.

  • table
  • header
  • colspan
  • report

Превью

1440pxHost theme

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

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

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

Выручка по регионам, млн ₽
Регион20242025
ПланФактПланФакт
Северо-Запад12,011,413,514,2
Центр28,430,132,031,6
Урал9,89,110,410,9
Сибирь7,27,78,18,0
Показать полную инструкцию

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

# Установка и размещение «table-014» (Grouped Header) из VibeUI

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

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

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

## 2. Что это
Таблица с двухэтажной шапкой: верхний ряд объединяет колонки по годам через colspan, нижний называет колонки внутри года, а первая ячейка склеена rowspan.

Отчётная таблица с группами колонок: два этажа шапки, colspan, rowspan и scope="colgroup". Ноль зависимостей, один файл, клиентского JS нет.

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

<Table014
  caption="Выручка по регионам, млн ₽"
  leadTitle="Регион"
/>

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-table-014-* и не подменять её токенами вашей темы
- scope="colgroup" у верхнего этажа шапки: без него число теряет год, к которому относится
- rowSpan={2} у первой ячейки: иначе подпись столбца строк повиснет над пустотой
- сборку колонок из групп через flatMap: ручной список ячеек рано или поздно разойдётся с шапкой
- границу между группами: два одинаковых столбца «План» без неё сливаются в один
- собственную светлую подложку: на тёмной карточке каталога тёмный текст пропадает

## 6. Можно менять
- группы и их колонки через groups
- строки и значения через rows
- подпись первой колонки через leadTitle
- подпись таблицы через caption

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

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

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

npx shadcn@latest add https://vibeui.ru/r/table-014.json
https://vibeui.ru/r/table-014.json

Компонент самодостаточен: один файл, без зависимостей, палитра в переменных --vibeui-table-014-*. Серверный: хуков нет. Верхние ячейки шапки объявлены как th scope="colgroup" с colSpan — без colgroup скринридер не свяжет число с годом, и две колонки «План» станут неразличимы. Первая ячейка получает rowSpan={2} и остаётся th scope="col". Плоский список колонок собирается из групп через flatMap, поэтому тело таблицы рисуется одним проходом и порядок ячеек не может разойтись с шапкой. Граница между группами рисуется data-edge, а не nth-child: правило переживает добавление колонки.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Table014Group = {
  title: string
  columns: string[]
}

export type Table014Row = {
  title: string
  values: string[]
}

export type Table014Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children"
> & {
  groups?: Table014Group[]
  rows?: Table014Row[]
  /** Подпись первой колонки: она склеена на обе строки шапки. */
  leadTitle?: string
  caption?: string
  accent?: string
}

// Идея компонента: двухэтажная шапка. Верхний ряд — год со scope="colgroup"
// и colspan, нижний — колонки внутри года, а первая ячейка склеена rowspan
// на оба ряда. Без scope такая шапка для скринридера рассыпается: числа
// теряют год, к которому относятся.
const STYLES = `
:where([data-vibeui-block="table-014"]){
--vibeui-table-014-bg:oklch(1 0 0);
--vibeui-table-014-fg:oklch(0.24 0.014 265);
--vibeui-table-014-muted:oklch(0.56 0.014 265);
--vibeui-table-014-border:oklch(0.92 0.006 265);
--vibeui-table-014-head:oklch(0.975 0.003 265);
--vibeui-table-014-accent:oklch(0.55 0.2 262);
--vibeui-table-014-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="table-014"]{
width:100%;box-sizing:border-box;
font-family:var(--vibeui-table-014-font);color:var(--vibeui-table-014-fg);
}
[data-vibeui-block="table-014"] [data-part="shell"]{
background:var(--vibeui-table-014-bg);
border:1px solid var(--vibeui-table-014-border);border-radius:1rem;overflow:hidden;
}
[data-vibeui-block="table-014"] [data-part="scroll"]{overflow-x:auto}
[data-vibeui-block="table-014"] [data-part="scroll"]:focus-visible{
outline:2px solid var(--vibeui-table-014-accent);outline-offset:-2px;
}
[data-vibeui-block="table-014"] table{width:100%;border-collapse:collapse;font-size:0.8125rem;min-width:30rem}
[data-vibeui-block="table-014"] caption{
padding:0.875rem 1rem 0.625rem;text-align:left;font-size:0.9375rem;font-weight:650;
}
[data-vibeui-block="table-014"] th,
[data-vibeui-block="table-014"] td{padding:0.5rem 0.875rem;text-align:right;white-space:nowrap}
[data-vibeui-block="table-014"] thead th{background:var(--vibeui-table-014-head);font-weight:600}
/* Верхний этаж шапки центрируется над своей группой, нижний — по числам. */
[data-vibeui-block="table-014"] [data-part="group"]{
text-align:center;border-bottom:1px solid var(--vibeui-table-014-border);
letter-spacing:0.02em;
}
[data-vibeui-block="table-014"] [data-part="lead"]{text-align:left;vertical-align:bottom}
[data-vibeui-block="table-014"] tbody th{
text-align:left;font-weight:500;
border-top:1px solid var(--vibeui-table-014-border);
}
[data-vibeui-block="table-014"] tbody td{
border-top:1px solid var(--vibeui-table-014-border);
font-variant-numeric:tabular-nums;
}
/* Граница между годами: без неё два одинаковых столбца «План» сливаются. */
[data-vibeui-block="table-014"] [data-edge="group"]{
border-left:1px solid var(--vibeui-table-014-border);
}
[data-vibeui-block="table-014"] tbody tr:nth-child(even) th,
[data-vibeui-block="table-014"] tbody tr:nth-child(even) td{
background:color-mix(in oklab,var(--vibeui-table-014-head) 60%,transparent);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="table-014"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_GROUPS: Table014Group[] = [
  { title: "2024", columns: ["План", "Факт"] },
  { title: "2025", columns: ["План", "Факт"] },
]

const DEFAULT_ROWS: Table014Row[] = [
  { title: "Северо-Запад", values: ["12,0", "11,4", "13,5", "14,2"] },
  { title: "Центр", values: ["28,4", "30,1", "32,0", "31,6"] },
  { title: "Урал", values: ["9,8", "9,1", "10,4", "10,9"] },
  { title: "Сибирь", values: ["7,2", "7,7", "8,1", "8,0"] },
]

/**
 * Таблица с двухэтажной шапкой: группы колонок склеены colspan и scope.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Table014({
  groups = DEFAULT_GROUPS,
  rows = DEFAULT_ROWS,
  leadTitle = "Регион",
  caption = "Выручка по регионам, млн ₽",
  accent,
  className,
  style,
  ...props
}: Table014Props) {
  const palette = {
    ...(accent ? { "--vibeui-table-014-accent": accent } : null),
    ...style,
  } as CSSProperties

  const columns = groups.flatMap((group, groupIndex) =>
    group.columns.map((column, columnIndex) => ({
      key: `${group.title}-${column}`,
      title: column,
      group: group.title,
      first: groupIndex > 0 && columnIndex === 0,
    })),
  )

  return (
    <>
      <style href="vibeui-table-014" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="table-014"
        className={className}
        style={palette}
      >
        <div data-part="shell">
          <div
            data-part="scroll"
            role="region"
            aria-label={caption}
            tabIndex={0}
          >
            <table>
              <caption>{caption}</caption>
              <thead>
                <tr>
                  <th scope="col" rowSpan={2} data-part="lead">
                    {leadTitle}
                  </th>
                  {groups.map((group, index) => (
                    <th
                      key={group.title}
                      scope="colgroup"
                      colSpan={group.columns.length}
                      data-part="group"
                      data-edge={index > 0 ? "group" : undefined}
                    >
                      {group.title}
                    </th>
                  ))}
                </tr>
                <tr>
                  {columns.map((column) => (
                    <th
                      key={column.key}
                      scope="col"
                      data-edge={column.first ? "group" : undefined}
                    >
                      {column.title}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {rows.map((row) => (
                  <tr key={row.title}>
                    <th scope="row">{row.title}</th>
                    {columns.map((column, index) => (
                      <td
                        key={column.key}
                        data-edge={column.first ? "group" : undefined}
                      >
                        {row.values[index] ?? "—"}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  )
}