VibeUI
РусEng
Войти

Таблица данных

Замороженный угол

Таблица с закреплёнными шапкой и первой колонкой: при прокрутке вбок и вниз видно, к чему относится число. Подходит отчёту и админке. Меняются колонки, строки и подписи.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • массив rows и список warehouses — заголовки колонок
  • caption, heading и scrollHint — подписи над и под шапкой
  • leadLabel — подпись первой колонки и угловой ячейки

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Замороженный угол — Таблица с закреплёнными шапкой и первой колонкой: при прокрутке вбок и вниз видно, к чему относится число. Подходит отчёту и админке. Меняются колонки, строки и подписи.

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

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

добавь это на главную первым экраном:

https://vibeui.ru/c/datagrid-031?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

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

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

Загружается…

Как использовать

<Datagrid031
  warehouses={["Москва", "Питер"]}
  rows={[{ sku: "SKU-1001 Кресло Oslo", values: [42, 18] }]}
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Заголовок
heading · по умолчанию: Остатки на сегодня
Первая колонка
leadLabel · по умолчанию: Позиция
Высота, rem
height · по умолчанию: 18
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Ещё в разделе «Таблица данных»

Частые вопросы

Как установить компонент «Замороженный угол» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Замороженный угол»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Замороженный угол»?
Можно менять: массив rows и список warehouses — заголовки колонок; caption, heading и scrollHint — подписи над и под шапкой; leadLabel — подпись первой колонки и угловой ячейки. Сохранить как есть: импорты из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; локальную палитру --vibeui-datagrid-031-* и не подменять её токенами вашей темы; position:sticky по top у ячеек шапки и по left у первой колонки — это и есть закрепление, менять их логику нельзя.
Компонент «Замороженный угол» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

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

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

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Составной блок: импортирует из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Компонент самодостаточен: один файл, без npm-зависимостей, собственная палитра в локальных переменных --vibeui-datagrid-031-*. Серверный: хуков нет. Обёртка прокрутки одна и разом отвечает за обе оси (overflow:auto), заголовки шапки держатся position:sticky по top, первая колонка — по left, а угловая ячейка липнет и по top, и по left разом со своим z-index выше соседей. Подложка непрозрачная по умолчанию: без неё уезжающие строки и колонки просвечивали бы сквозь закреплённые.

Теги

  • data-grid
  • sticky
  • freeze
  • matrix
  • composite
Исходник компонента

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

Загружается…