VibeUI

Data Grid

Frozen Edges

Широкая сетка с закреплёнными крайними колонками: подпись строки слева и ответственный справа стоят на месте, а недели уезжают между ними.

  • datagrid
  • sticky-column
  • scroll
  • table

Превью

1440pxHost theme

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

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

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

Поставки по регионам

Прокрутите вбок: крайние колонки закреплены

Заказы по неделям, штук
РегионНед. 1Нед. 2Нед. 3Нед. 4Нед. 5Нед. 6Нед. 7Нед. 8Менеджер
Москва412388455501478522590544Орлова
Петербург280305291318344330352371Ким
Казань141158162149173181176194Гнедин
Новосибирск98112121108133127140152Савва
Екатеринбург120118131145139151148163Лебедь
Показать полную инструкцию

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

# Установка и размещение «datagrid-003» (Frozen Edges) из VibeUI

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

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

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

## 2. Что это
Широкая сетка с закреплёнными крайними колонками: подпись строки слева и ответственный справа стоят на месте, а недели уезжают между ними.

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

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

<Datagrid003
  caption="Заказы по неделям, штук"
  scrollHint="Прокрутите вбок: крайние колонки закреплены"
/>

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-datagrid-003-* и не подменять её токенами вашей темы
- собственный фон у липких ячеек: без него уезжающие строки видно насквозь
- border-collapse:separate — со схлопнутыми границами липкая колонка теряет свою линию
- контейнер прокрутки с role=region, aria-label и tabindex=0: иначе листать можно только мышью
- z-index липкой шапки выше, чем у липких колонок, иначе они перекрывают заголовок
- светлую подложку сетки: на тёмной карточке каталога тёмный текст иначе пропадает

## 6. Можно менять
- подпись под шапкой через caption
- подсказку о прокрутке через scrollHint
- названия колонок через weeks и данные через rows
- акцентный цвет через accent

## 7. Правила
- Две липкие колонки съедают ширину: на экране 360 px между ними остаётся мало места, проверьте.
- Тень у краёв появляется по прокрутке только там, где поддержан scroll-timeline; в остальных браузерах её нет.
- min-width таблицы задан в rem: при пяти колонках уменьшите его, иначе таблица прокручивается впустую.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

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

Компонент самодостаточен: один файл, без зависимостей, палитра в --vibeui-datagrid-003-*. Серверный: состояния нет, всё держится на CSS. Крайние колонки закреплены position:sticky с left:0 и right:0 и несут собственный фон — без него уезжающие ячейки видно насквозь. Таблица собрана с border-collapse:separate: со схлопнутыми границами липкая ячейка теряет свою линию. Прокрутка живёт в контейнере с role=region, aria-label и tabindex=0, поэтому работает с клавиатуры. Тень у закреплённых краёв появляется по прокрутке через animation-timeline:scroll под @supports — там, где его нет, тени просто нет, и вёрстка не страдает. Максимум недели помечен пилюлей на color-mix от акцента.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Datagrid003Row = {
  region: string
  weeks: number[]
  owner: string
}

export type Datagrid003Props = Omit<
  ComponentPropsWithoutRef<"section">,
  "children"
> & {
  rows?: Datagrid003Row[]
  weeks?: string[]
  caption?: string
  scrollHint?: string
  accent?: string
}

// Идея компонента: широкая сетка, у которой закреплены обе крайние колонки —
// подпись строки слева и колонка действия справа. Между ними уезжают недели.
// Прокрутка живёт в собственном контейнере с tabindex и подписью, поэтому
// она работает с клавиатуры, а не только колесом. Тень у закреплённых колонок
// появляется по прокрутке через scroll-timeline там, где он поддержан.
const STYLES = `
:where([data-vibeui-block="datagrid-003"]){
--vibeui-datagrid-003-bg:oklch(1 0 0);
--vibeui-datagrid-003-fg:oklch(0.23 0.014 250);
--vibeui-datagrid-003-muted:oklch(0.55 0.014 250);
--vibeui-datagrid-003-border:oklch(0.92 0.006 250);
--vibeui-datagrid-003-head:oklch(0.975 0.003 250);
--vibeui-datagrid-003-accent:oklch(0.52 0.14 200);
--vibeui-datagrid-003-shadow:oklch(0.23 0.014 250 / 18%);
--vibeui-datagrid-003-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="datagrid-003"]{
box-sizing:border-box;width:100%;max-width:60rem;margin:0 auto;
background:var(--vibeui-datagrid-003-bg);color:var(--vibeui-datagrid-003-fg);
border:1px solid var(--vibeui-datagrid-003-border);border-radius:0.875rem;
font-family:var(--vibeui-datagrid-003-font);overflow:hidden;
}
[data-vibeui-block="datagrid-003"] *{box-sizing:border-box}
[data-vibeui-block="datagrid-003"] [data-part="head"]{
display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5rem;
padding:0.875rem;border-bottom:1px solid var(--vibeui-datagrid-003-border);
}
[data-vibeui-block="datagrid-003"] [data-part="title"]{margin:0;font-size:0.875rem;font-weight:650}
[data-vibeui-block="datagrid-003"] [data-part="hint"]{
margin:0;font-size:0.75rem;color:var(--vibeui-datagrid-003-muted);
}
[data-vibeui-block="datagrid-003"] [data-part="scroll"]{overflow-x:auto}
[data-vibeui-block="datagrid-003"] [data-part="scroll"]:focus-visible{outline:2px solid var(--vibeui-datagrid-003-accent);outline-offset:-2px}
/* separate, а не collapse: со схлопнутыми границами липкая ячейка теряет
   свою линию, и колонка выглядит оторванной от таблицы. */
[data-vibeui-block="datagrid-003"] table{
width:100%;min-width:52rem;border-collapse:separate;border-spacing:0;font-size:0.8125rem;
}
[data-vibeui-block="datagrid-003"] caption{
padding:0 0.875rem 0.625rem;text-align:left;
font-size:0.75rem;color:var(--vibeui-datagrid-003-muted);
}
[data-vibeui-block="datagrid-003"] th,
[data-vibeui-block="datagrid-003"] td{
padding:0.5rem 0.875rem;text-align:left;white-space:nowrap;
border-bottom:1px solid var(--vibeui-datagrid-003-border);
background:var(--vibeui-datagrid-003-bg);
}
[data-vibeui-block="datagrid-003"] thead th{background:var(--vibeui-datagrid-003-head);font-weight:600}
[data-vibeui-block="datagrid-003"] tbody tr:last-child th,
[data-vibeui-block="datagrid-003"] tbody tr:last-child td{border-bottom:0}
[data-vibeui-block="datagrid-003"] [data-align="end"]{text-align:right;font-variant-numeric:tabular-nums}
/* Закреплённые края. Фон обязателен: без него уезжающие ячейки видно
   насквозь. */
[data-vibeui-block="datagrid-003"] [data-part="lead"]{
position:sticky;left:0;z-index:2;min-width:9rem;
border-right:1px solid var(--vibeui-datagrid-003-border);
}
[data-vibeui-block="datagrid-003"] [data-part="trail"]{
position:sticky;right:0;z-index:2;text-align:right;
border-left:1px solid var(--vibeui-datagrid-003-border);
}
[data-vibeui-block="datagrid-003"] thead [data-part="lead"],
[data-vibeui-block="datagrid-003"] thead [data-part="trail"]{z-index:3;background:var(--vibeui-datagrid-003-head)}
[data-vibeui-block="datagrid-003"] [data-part="owner"]{color:var(--vibeui-datagrid-003-muted)}
[data-vibeui-block="datagrid-003"] [data-part="peak"]{
display:inline-block;padding:0.0625rem 0.375rem;border-radius:0.375rem;
color:var(--vibeui-datagrid-003-accent);
background:color-mix(in oklab, var(--vibeui-datagrid-003-accent) 12%, transparent);
font-weight:600;
}
@supports (animation-timeline: scroll(nearest inline)){
[data-vibeui-block="datagrid-003"] [data-part="lead"]{
animation:vibeui-datagrid-003-lead linear both;
animation-timeline:scroll(nearest inline);animation-range:0 2rem;
}
[data-vibeui-block="datagrid-003"] [data-part="trail"]{
animation:vibeui-datagrid-003-trail linear both;
animation-timeline:scroll(nearest inline);animation-range:calc(100% - 2rem) 100%;
}
@keyframes vibeui-datagrid-003-lead{
from{clip-path:inset(0 -1rem 0 0);box-shadow:0 0 0 transparent}
to{clip-path:inset(0 -1rem 0 0);box-shadow:0.5rem 0 0.75rem -0.5rem var(--vibeui-datagrid-003-shadow)}
}
@keyframes vibeui-datagrid-003-trail{
from{clip-path:inset(0 0 0 -1rem);box-shadow:-0.5rem 0 0.75rem -0.5rem var(--vibeui-datagrid-003-shadow)}
to{clip-path:inset(0 0 0 -1rem);box-shadow:0 0 0 transparent}
}
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="datagrid-003"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_WEEKS = [
  "Нед. 1",
  "Нед. 2",
  "Нед. 3",
  "Нед. 4",
  "Нед. 5",
  "Нед. 6",
  "Нед. 7",
  "Нед. 8",
]

const DEFAULT_ROWS: Datagrid003Row[] = [
  {
    region: "Москва",
    weeks: [412, 388, 455, 501, 478, 522, 590, 544],
    owner: "Орлова",
  },
  {
    region: "Петербург",
    weeks: [280, 305, 291, 318, 344, 330, 352, 371],
    owner: "Ким",
  },
  {
    region: "Казань",
    weeks: [141, 158, 162, 149, 173, 181, 176, 194],
    owner: "Гнедин",
  },
  {
    region: "Новосибирск",
    weeks: [98, 112, 121, 108, 133, 127, 140, 152],
    owner: "Савва",
  },
  {
    region: "Екатеринбург",
    weeks: [120, 118, 131, 145, 139, 151, 148, 163],
    owner: "Лебедь",
  },
]

/**
 * Широкая сетка с закреплёнными крайними колонками: подпись строки слева,
 * действие справа, недели прокручиваются между ними. Серверный компонент.
 */
export function Datagrid003({
  rows = DEFAULT_ROWS,
  weeks = DEFAULT_WEEKS,
  caption = "Заказы по неделям, штук",
  scrollHint = "Прокрутите вбок: крайние колонки закреплены",
  accent,
  className,
  style,
  ...props
}: Datagrid003Props) {
  const palette = {
    ...(accent ? { "--vibeui-datagrid-003-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-datagrid-003" precedence="medium">
        {STYLES}
      </style>
      <section
        {...props}
        data-vibeui-block="datagrid-003"
        className={className}
        style={palette}
      >
        <div data-part="head">
          <h3 data-part="title">Поставки по регионам</h3>
          <p data-part="hint">{scrollHint}</p>
        </div>
        <div
          data-part="scroll"
          role="region"
          aria-label="Таблица поставок по неделям, прокручивается вбок"
          tabIndex={0}
        >
          <table>
            <caption>{caption}</caption>
            <thead>
              <tr>
                <th scope="col" data-part="lead">
                  Регион
                </th>
                {weeks.map((week) => (
                  <th key={week} scope="col" data-align="end">
                    {week}
                  </th>
                ))}
                <th scope="col" data-part="trail">
                  Менеджер
                </th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row) => {
                const peak = Math.max(...row.weeks)

                return (
                  <tr key={row.region}>
                    <th scope="row" data-part="lead">
                      {row.region}
                    </th>
                    {row.weeks.map((value, index) => (
                      <td key={weeks[index] ?? index} data-align="end">
                        {value === peak ? (
                          <span data-part="peak">{value}</span>
                        ) : (
                          value
                        )}
                      </td>
                    ))}
                    <td data-part="trail">
                      <span data-part="owner">{row.owner}</span>
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      </section>
    </>
  )
}