Tables
Selectable Table
Row selection with a bulk bar: the header checkbox carries the indeterminate state, which only code can set.
- table
- selection
- bulk
- checkbox
Preview
1440pxHost theme
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this in the header: https://vibeui.ru/c/table-005?lang=en
Выбрано: 1
| Участник | Роль | Статус | |
|---|---|---|---|
| Анна Реброва | Дизайнер | Активна | |
| Илья Мохов | Фронтенд | Активен | |
| Ким Сон | Аналитик | Приглашён | |
| Пётр Гай | Фронтенд | Активен |
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
# Install and place "table-005" (Selectable Table) from VibeUI
## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/table-005.json
Registry item: https://vibeui.ru/r/table-005.json
Installs to: components/vibeui/table-005.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.
Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.
## 2. What it is
Row selection with a bulk bar: the header checkbox carries the indeterminate state, which only code can set.
A table with row selection: a checkbox per row, three states in the header, a bulk bar over the selection. Zero dependencies, one file.
## 3. How to use it
import { Table005 } from "@/components/vibeui/table-005"
<Table005 rows={[{ id: "1", name: "Anna Rebrova", role: "Designer", status: "Active" }]} />
Read the installed file for the full prop list.
## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.
Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)
## 5. Keep exactly as installed
- the local --vibeui-table-005-* palette — do not swap it for your theme tokens
- indeterminate through a ref: HTML has no such attribute
- the bulk bar in place of the caption rather than over the table
- the tick and the dash in the box: colour alone does not separate the states
- the tint on a selected row — a lone checkbox is easy to lose
- an aria-label on every checkbox naming its row
## 6. You may change
- caption, the rows array and the columns
- the set of bulk actions
- the initial selection
- the accent through the accent prop
## 7. Rules
- Selection lives inside the component: add your own handler to lift it out.
- "Select all" only marks the visible rows: with pagination say so next to it.
- Destructive bulk actions need confirmation — this bar is too easy to hit.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.
## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.For developers
npx shadcn@latest add https://vibeui.ru/r/table-005.jsonhttps://vibeui.ru/r/table-005.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-table-005-*. Клиентский: "use client" ради выбора. Свойство indeterminate у флажка шапки выставляется через ref: атрибута для него в HTML нет. Панель действий занимает место подписи, поэтому не перекрывает первую строку.
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
"use client"
import { useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Table005Row = {
id: string
name: string
role: string
status: string
}
export type Table005Props = Omit<
ComponentPropsWithoutRef<"div">,
"children"
> & {
rows?: Table005Row[]
caption?: string
accent?: string
}
// Идея компонента: выбор строк с действиями над выбранным. Флажок в шапке
// имеет три состояния, и промежуточное задаётся свойством indeterminate из
// ref — атрибута для него в HTML нет. Панель действий появляется вместо
// подписи таблицы, а не поверх неё: иначе она перекрывает первую строку.
const STYLES = `
:where([data-vibeui-block="table-005"]){
--vibeui-table-005-bg:oklch(1 0 0);
--vibeui-table-005-fg:oklch(0.24 0.014 265);
--vibeui-table-005-muted:oklch(0.56 0.014 265);
--vibeui-table-005-border:oklch(0.92 0.006 265);
--vibeui-table-005-head:oklch(0.975 0.003 265);
--vibeui-table-005-picked:oklch(0.55 0.2 262 / 7%);
--vibeui-table-005-accent:oklch(0.55 0.2 262);
--vibeui-table-005-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="table-005"]{
width:100%;box-sizing:border-box;overflow-x:auto;
background:var(--vibeui-table-005-bg);
border:1px solid var(--vibeui-table-005-border);border-radius:0.875rem;
font-family:var(--vibeui-table-005-font);color:var(--vibeui-table-005-fg);
}
/* Панель действий встаёт на место подписи: поверх она закрыла бы первую строку. */
[data-vibeui-block="table-005"] [data-part="bar"]{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
min-height:2.75rem;padding:0.5rem 0.875rem;
font-size:0.875rem;font-weight:650;
}
[data-vibeui-block="table-005"] [data-part="actions"]{display:flex;gap:0.375rem}
[data-vibeui-block="table-005"] [data-part="actions"] button{
appearance:none;cursor:pointer;height:1.875rem;padding:0 0.625rem;
border:1px solid var(--vibeui-table-005-border);border-radius:0.5rem;
background:none;color:inherit;font:inherit;font-size:0.75rem;font-weight:600;
}
[data-vibeui-block="table-005"] [data-part="actions"] button:focus-visible{outline:2px solid var(--vibeui-table-005-accent);outline-offset:2px}
[data-vibeui-block="table-005"] table{width:100%;border-collapse:collapse;font-size:0.8125rem}
[data-vibeui-block="table-005"] th,
[data-vibeui-block="table-005"] td{
padding:0.5rem 0.875rem;text-align:left;white-space:nowrap;
border-top:1px solid var(--vibeui-table-005-border);
}
[data-vibeui-block="table-005"] thead th{background:var(--vibeui-table-005-head);font-weight:600}
[data-vibeui-block="table-005"] [data-part="pick"]{width:1rem;padding-right:0}
[data-vibeui-block="table-005"] input{
appearance:none;position:relative;cursor:pointer;flex:none;
width:1rem;height:1rem;border-radius:0.3125rem;
border:1.5px solid var(--vibeui-table-005-muted);background:var(--vibeui-table-005-bg);
}
[data-vibeui-block="table-005"] input:checked,
[data-vibeui-block="table-005"] input:indeterminate{
background:var(--vibeui-table-005-accent);border-color:var(--vibeui-table-005-accent);
}
/* Галочка и черта различают выбранное и частично выбранное не одним цветом. */
[data-vibeui-block="table-005"] input:checked::after{
content:"";position:absolute;left:0.28rem;top:0.08rem;
width:0.2rem;height:0.45rem;
border:solid oklch(1 0 0);border-width:0 2px 2px 0;transform:rotate(45deg);
}
[data-vibeui-block="table-005"] input:indeterminate::after{
content:"";position:absolute;left:0.19rem;top:0.4rem;
width:0.5rem;height:2px;background:oklch(1 0 0);
}
[data-vibeui-block="table-005"] input:focus-visible{outline:2px solid var(--vibeui-table-005-accent);outline-offset:2px}
/* Выбранная строка отмечена заливкой: один флажок в ряду легко потерять. */
[data-vibeui-block="table-005"] tbody tr:has(input:checked){background:var(--vibeui-table-005-picked)}
[data-vibeui-block="table-005"] [data-part="status"]{color:var(--vibeui-table-005-muted)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="table-005"] *{animation:none!important;transition:none!important}}
`
const DEFAULT_ROWS: Table005Row[] = [
{ id: "1", name: "Анна Реброва", role: "Дизайнер", status: "Активна" },
{ id: "2", name: "Илья Мохов", role: "Фронтенд", status: "Активен" },
{ id: "3", name: "Ким Сон", role: "Аналитик", status: "Приглашён" },
{ id: "4", name: "Пётр Гай", role: "Фронтенд", status: "Активен" },
]
/**
* Таблица с выбором строк: флажок шапки с промежуточным состоянием.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Table005({
rows = DEFAULT_ROWS,
caption = "Участники проекта",
accent,
className,
style,
...props
}: Table005Props) {
const [picked, setPicked] = useState<string[]>(["2"])
const all = picked.length === rows.length
const some = picked.length > 0 && !all
const toggle = (id: string) =>
setPicked((current) =>
current.includes(id)
? current.filter((item) => item !== id)
: [...current, id],
)
const palette = {
...(accent ? { "--vibeui-table-005-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-table-005" precedence="medium">
{STYLES}
</style>
<div
{...props}
data-vibeui-block="table-005"
className={className}
style={palette}
>
<div data-part="bar">
{picked.length > 0 ? `Выбрано: ${picked.length}` : caption}
{picked.length > 0 ? (
<span data-part="actions">
<button type="button">Написать</button>
<button type="button" onClick={() => setPicked([])}>
Снять выбор
</button>
</span>
) : null}
</div>
<table>
<thead>
<tr>
<th scope="col" data-part="pick">
<input
type="checkbox"
checked={all}
ref={(node) => {
if (node) node.indeterminate = some
}}
aria-label="Выбрать всех"
onChange={() =>
setPicked(all ? [] : rows.map((row) => row.id))
}
/>
</th>
<th scope="col">Участник</th>
<th scope="col">Роль</th>
<th scope="col">Статус</th>
</tr>
</thead>
<tbody>
{rows.map((row) => (
<tr key={row.id}>
<td data-part="pick">
<input
type="checkbox"
checked={picked.includes(row.id)}
aria-label={`Выбрать: ${row.name}`}
onChange={() => toggle(row.id)}
/>
</td>
<td>{row.name}</td>
<td>{row.role}</td>
<td data-part="status">{row.status}</td>
</tr>
))}
</tbody>
</table>
</div>
</>
)
}