VibeUI

Tables

Week Schedule

Недельное расписание сеткой: время — заголовки строк, дни — заголовки колонок, поэтому встреча всегда читается парой «среда, 14:00».

  • table
  • schedule
  • calendar
  • grid

Превью

1440pxHost theme

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

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

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

Расписание встреч на неделю

Расписание встреч на неделю
ВремяПнВтСр — сегодняЧтПт
09:00ПланёркаЗал 2ПланёркаЗал 2ПланёркаЗал 2
11:00Дизайн-ревьюОнлайнИнтервьюПереговоркаДизайн-ревьюОнлайн
14:00Груминг задачЗал 1ДемоБольшой залРетроЗал 1
17:00Час поддержкиДежурныйЧас поддержкиДежурный
Показать полную инструкцию

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

# Установка и размещение «table-013» (Week Schedule) из VibeUI

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

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

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

## 2. Что это
Недельное расписание сеткой: время — заголовки строк, дни — заголовки колонок, поэтому встреча всегда читается парой «среда, 14:00».

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

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

<Table013
  caption="Расписание встреч на неделю"
  today="Чт"
/>

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-table-013-* и не подменять её токенами вашей темы
- scope="col" у дней и scope="row" у времени: без обеих осей ячейка теряет координаты
- обёртку role="region" с tabindex=0: широкая сетка иначе не прокручивается с клавиатуры
- min-width у колонок: сжатая до нечитаемого колонка хуже прокрутки
- скрытый caption: он остаётся доступным именем таблицы, даже когда заголовок нарисован рядом
- собственную светлую подложку: на тёмной карточке каталога тёмный текст пропадает

## 6. Можно менять
- названия дней через days
- временные интервалы и события через slots
- подсвеченный день через today
- подпись расписания через caption

## 7. Правила
- Событие на два часа подряд рисуется двумя ячейками: объединения по вертикали здесь нет.
- Пустая ячейка получает точку под aria-hidden — озвучивать «пусто» в каждой клетке избыточно.
- Семь дней на телефоне гарантированно уедут в прокрутку: это осознанный размен на читаемость.
- Не выносите CSS-переменные в globals.css: компонент обязан остаться одним файлом.

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

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

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

Компонент самодостаточен: один файл, без зависимостей, палитра в переменных --vibeui-table-013-*. Серверный: хуков нет. Двумерная таблица: th scope="col" у дней и th scope="row" у времени — только так ячейка получает обе координаты в озвучке. Колонки не сжимаются (min-width), а вся сетка лежит в обёртке role="region" с tabindex=0: широкое расписание уезжает в горизонтальную прокрутку, доступную с клавиатуры. Видимый заголовок вынесен в шапку блока, а caption спрятан визуально, чтобы не дублировать текст, но остаться именем таблицы. Цвет события задаётся data-tone через одну переменную --vibeui-table-013-tone, поэтому новый оттенок — это одна строка CSS.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Table013Event = {
  title: string
  place?: string
  tone?: "blue" | "green" | "amber" | "violet"
}

export type Table013Slot = {
  time: string
  cells: (Table013Event | null)[]
}

export type Table013Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children"
> & {
  days?: string[]
  slots?: Table013Slot[]
  /** День, чья колонка подсвечена как сегодняшняя. */
  today?: string
  caption?: string
  accent?: string
}

// Идея компонента: сетка расписания, где ось времени — заголовки строк, а
// дни — заголовки колонок, поэтому занятие всегда озвучивается парой
// «понедельник, 10:00». Ширину не сжимаем: колонки держат min-width, а
// таблица уезжает в горизонтальную прокрутку с доступом с клавиатуры.
const STYLES = `
:where([data-vibeui-block="table-013"]){
--vibeui-table-013-bg:oklch(1 0 0);
--vibeui-table-013-fg:oklch(0.24 0.014 265);
--vibeui-table-013-muted:oklch(0.56 0.014 265);
--vibeui-table-013-border:oklch(0.92 0.006 265);
--vibeui-table-013-head:oklch(0.975 0.003 265);
--vibeui-table-013-accent:oklch(0.55 0.2 262);
--vibeui-table-013-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="table-013"]{
width:100%;box-sizing:border-box;
font-family:var(--vibeui-table-013-font);color:var(--vibeui-table-013-fg);
}
[data-vibeui-block="table-013"] [data-part="shell"]{
background:var(--vibeui-table-013-bg);
border:1px solid var(--vibeui-table-013-border);border-radius:1rem;overflow:hidden;
}
[data-vibeui-block="table-013"] [data-part="head"]{
padding:0.875rem 1rem;font-size:0.9375rem;font-weight:650;
border-bottom:1px solid var(--vibeui-table-013-border);
}
[data-vibeui-block="table-013"] [data-part="scroll"]{overflow-x:auto}
[data-vibeui-block="table-013"] [data-part="scroll"]:focus-visible{
outline:2px solid var(--vibeui-table-013-accent);outline-offset:-2px;
}
[data-vibeui-block="table-013"] table{border-collapse:collapse;width:100%;font-size:0.75rem}
[data-vibeui-block="table-013"] caption{
position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}
[data-vibeui-block="table-013"] th,
[data-vibeui-block="table-013"] td{
border-bottom:1px solid var(--vibeui-table-013-border);
border-right:1px solid var(--vibeui-table-013-border);
padding:0.25rem;vertical-align:top;text-align:left;
}
[data-vibeui-block="table-013"] tr > :last-child{border-right:0}
[data-vibeui-block="table-013"] tbody tr:last-child th,
[data-vibeui-block="table-013"] tbody tr:last-child td{border-bottom:0}
[data-vibeui-block="table-013"] thead th{
background:var(--vibeui-table-013-head);
padding:0.5rem 0.5rem;font-weight:650;text-align:center;white-space:nowrap;
min-width:7.5rem;
}
[data-vibeui-block="table-013"] tbody th{
background:var(--vibeui-table-013-head);
padding:0.5rem;font-weight:500;color:var(--vibeui-table-013-muted);
font-variant-numeric:tabular-nums;white-space:nowrap;width:1%;
}
[data-vibeui-block="table-013"] th[data-today="true"]{
color:var(--vibeui-table-013-accent);
box-shadow:inset 0 -2px 0 var(--vibeui-table-013-accent);
}
[data-vibeui-block="table-013"] td[data-today="true"]{
background:color-mix(in oklab,var(--vibeui-table-013-accent) 5%,transparent);
}
[data-vibeui-block="table-013"] [data-part="event"]{
display:block;border-radius:0.5rem;padding:0.375rem 0.5rem;
background:color-mix(in oklab,var(--vibeui-table-013-tone) 12%,oklch(1 0 0));
border-left:3px solid var(--vibeui-table-013-tone);
--vibeui-table-013-tone:oklch(0.55 0.2 262);
}
[data-vibeui-block="table-013"] [data-tone="green"]{--vibeui-table-013-tone:oklch(0.55 0.14 155)}
[data-vibeui-block="table-013"] [data-tone="amber"]{--vibeui-table-013-tone:oklch(0.65 0.14 70)}
[data-vibeui-block="table-013"] [data-tone="violet"]{--vibeui-table-013-tone:oklch(0.55 0.17 300)}
[data-vibeui-block="table-013"] [data-part="title"]{display:block;font-weight:600;line-height:1.25}
[data-vibeui-block="table-013"] [data-part="place"]{
display:block;margin-top:0.125rem;color:var(--vibeui-table-013-muted);font-size:0.6875rem;
}
[data-vibeui-block="table-013"] [data-part="free"]{color:var(--vibeui-table-013-border)}
[data-vibeui-block="table-013"] [data-part="sr"]{
position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="table-013"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_DAYS = ["Пн", "Вт", "Ср", "Чт", "Пт"]

const DEFAULT_SLOTS: Table013Slot[] = [
  {
    time: "09:00",
    cells: [
      { title: "Планёрка", place: "Зал 2" },
      null,
      { title: "Планёрка", place: "Зал 2" },
      null,
      { title: "Планёрка", place: "Зал 2" },
    ],
  },
  {
    time: "11:00",
    cells: [
      { title: "Дизайн-ревью", place: "Онлайн", tone: "violet" },
      { title: "Интервью", place: "Переговорка", tone: "amber" },
      null,
      { title: "Дизайн-ревью", place: "Онлайн", tone: "violet" },
      null,
    ],
  },
  {
    time: "14:00",
    cells: [
      null,
      { title: "Груминг задач", place: "Зал 1", tone: "green" },
      { title: "Демо", place: "Большой зал", tone: "green" },
      null,
      { title: "Ретро", place: "Зал 1", tone: "green" },
    ],
  },
  {
    time: "17:00",
    cells: [
      { title: "Час поддержки", place: "Дежурный" },
      null,
      null,
      { title: "Час поддержки", place: "Дежурный" },
      null,
    ],
  },
]

/**
 * Недельное расписание: время — заголовки строк, дни — заголовки колонок.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Table013({
  days = DEFAULT_DAYS,
  slots = DEFAULT_SLOTS,
  today = "Ср",
  caption = "Расписание встреч на неделю",
  accent,
  className,
  style,
  ...props
}: Table013Props) {
  const palette = {
    ...(accent ? { "--vibeui-table-013-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-table-013" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="table-013"
        className={className}
        style={palette}
      >
        <div data-part="shell">
          <p data-part="head">{caption}</p>
          <div
            data-part="scroll"
            role="region"
            aria-label={caption}
            tabIndex={0}
          >
            <table>
              <caption>{caption}</caption>
              <thead>
                <tr>
                  <th scope="col">
                    <span data-part="sr">Время</span>
                  </th>
                  {days.map((day) => (
                    <th
                      key={day}
                      scope="col"
                      data-today={day === today ? "true" : undefined}
                    >
                      {day}
                      {day === today ? (
                        <span data-part="sr"> — сегодня</span>
                      ) : null}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {slots.map((slot) => (
                  <tr key={slot.time}>
                    <th scope="row">{slot.time}</th>
                    {days.map((day, index) => {
                      const event = slot.cells[index] ?? null

                      return (
                        <td
                          key={day}
                          data-today={day === today ? "true" : undefined}
                        >
                          {event ? (
                            <span
                              data-part="event"
                              data-tone={event.tone ?? "blue"}
                            >
                              <span data-part="title">{event.title}</span>
                              {event.place ? (
                                <span data-part="place">{event.place}</span>
                              ) : null}
                            </span>
                          ) : (
                            <span data-part="free" aria-hidden="true">
                              ·
                            </span>
                          )}
                        </td>
                      )
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  )
}