Data Grid

Paged Grid

A grid with page-by-page browsing: a rows-per-page choice, the record range and page numbers inside a real navigation landmark.

datagrid
pagination
page-size
table

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/datagrid-010?lang=en

Участники

Строк на странице

Programme participants
Участник	Роль	Город	Балл
Орлова А.	Инженер	Москва	60
Ким С.	Аналитик	Казань	67
Гнедин П.	Дизайнер	Петербург	74
Савва Т.	Менеджер	Новосибирск	81
Лебедь М.	Инженер	Сочи	88

Показано 1–5 из 23

Caption

Rows per page

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 "datagrid-010" (Paged Grid) 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/datagrid-010.json

Registry item: https://vibeui.ru/r/datagrid-010.json
Installs to: components/vibeui/datagrid-010.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
A grid with page-by-page browsing: a rows-per-page choice, the record range and page numbers inside a real navigation landmark.

A grid with pagination and a page-size choice: the record range, page numbers with aria-current and navigation inside nav. Zero dependencies, one file.

## 3. How to use it
import { Datagrid010 } from "@/components/vibeui/datagrid-010"

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-datagrid-010-* palette — do not swap it for your theme tokens
- aria-current="page" on the current page: color alone does not report state
- the page numbers inside a nav with aria-label — this is navigation, not a row of buttons
- the reset to page one when the size changes, or the reader lands on a page that no longer exists
- the «showing N–M of K» range with aria-live: otherwise it is unclear where the rows went
- the grid's own light surface: on the dark catalog card dark text disappears without it

## 6. You may change
- the line under the toolbar through caption
- the initial rows per page through pageSize
- the participant list through rows
- the accent color through accent

## 7. Rules
- Every page is listed: past a hundred pages add an ellipsis collapse.
- Pagination is client-side and slices the rows array; swap the slice for a request to go server-side.
- The page-size list is a constant: change it together with pageSize or the initial value falls outside the options.
- 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/datagrid-010.json

https://vibeui.ru/r/datagrid-010.json

Компонент самодостаточен: один файл, без зависимостей, палитра в --vibeui-datagrid-010-*. Клиентский: страница и размер страницы лежат в состоянии, видимые строки берутся срезом массива. Номера страниц собраны в nav с aria-label, текущая помечена aria-current=page — цвет один состояние не сообщает. Смена размера страницы возвращает на первую: иначе пользователь оказывается на несуществующей странице. Диапазон «показано N–M из K» объявлен aria-live=polite. Кнопки «назад» и «вперёд» отключаются на краях и несут собственные aria-label вместо одних стрелок.

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 Datagrid010Row = {
  id: string
  person: string
  role: string
  city: string
  score: number
}

export type Datagrid010Props = Omit<
  ComponentPropsWithoutRef<"section">,
  "children"
> & {
  rows?: Datagrid010Row[]
  caption?: string
  pageSize?: number
  accent?: string
}

// Идея компонента: постраничный просмотр с выбором размера страницы.
// Переключатели страниц — настоящая навигация в <nav> с aria-label, текущая
// страница помечена aria-current, а не только цветом. Диапазон «21–23 из 23»
// пересчитывается от размера страницы: без него после смены размера
// непонятно, куда уехали строки.
const STYLES = `
:where([data-vibeui-block="datagrid-010"]){
--vibeui-datagrid-010-bg:oklch(1 0 0);
--vibeui-datagrid-010-fg:oklch(0.23 0.014 20);
--vibeui-datagrid-010-muted:oklch(0.55 0.014 20);
--vibeui-datagrid-010-border:oklch(0.92 0.006 20);
--vibeui-datagrid-010-head:oklch(0.975 0.004 20);
--vibeui-datagrid-010-accent:oklch(0.55 0.17 25);
--vibeui-datagrid-010-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="datagrid-010"]{
box-sizing:border-box;width:100%;max-width:50rem;margin:0 auto;
background:var(--vibeui-datagrid-010-bg);color:var(--vibeui-datagrid-010-fg);
border:1px solid var(--vibeui-datagrid-010-border);border-radius:0.875rem;
font-family:var(--vibeui-datagrid-010-font);overflow:hidden;
}
[data-vibeui-block="datagrid-010"] *{box-sizing:border-box}
[data-vibeui-block="datagrid-010"] [data-part="head"]{
display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;
padding:0.75rem 0.875rem;border-bottom:1px solid var(--vibeui-datagrid-010-border);
}
[data-vibeui-block="datagrid-010"] [data-part="title"]{margin:0;font-size:0.875rem;font-weight:650;margin-inline-end:auto}
[data-vibeui-block="datagrid-010"] label{
display:inline-flex;align-items:center;gap:0.375rem;
font-size:0.75rem;color:var(--vibeui-datagrid-010-muted);
}
[data-vibeui-block="datagrid-010"] select{
font:inherit;font-size:0.75rem;color:var(--vibeui-datagrid-010-fg);
padding:0.25rem 0.5rem;border-radius:0.375rem;
border:1px solid var(--vibeui-datagrid-010-border);background:var(--vibeui-datagrid-010-bg);
}
[data-vibeui-block="datagrid-010"] select:focus-visible{outline:2px solid var(--vibeui-datagrid-010-accent);outline-offset:1px}
[data-vibeui-block="datagrid-010"] [data-part="scroll"]{overflow-x:auto}
[data-vibeui-block="datagrid-010"] [data-part="scroll"]:focus-visible{outline:2px solid var(--vibeui-datagrid-010-accent);outline-offset:-2px}
[data-vibeui-block="datagrid-010"] table{width:100%;border-collapse:collapse;font-size:0.8125rem}
[data-vibeui-block="datagrid-010"] caption{
padding:0 0.875rem 0.625rem;text-align:left;
font-size:0.75rem;color:var(--vibeui-datagrid-010-muted);
}
[data-vibeui-block="datagrid-010"] th,
[data-vibeui-block="datagrid-010"] td{
padding:0.4375rem 0.875rem;text-align:left;white-space:nowrap;
border-top:1px solid var(--vibeui-datagrid-010-border);
}
[data-vibeui-block="datagrid-010"] thead th{background:var(--vibeui-datagrid-010-head);font-weight:600}
[data-vibeui-block="datagrid-010"] [data-align="end"]{text-align:right;font-variant-numeric:tabular-nums}
[data-vibeui-block="datagrid-010"] [data-part="muted"]{color:var(--vibeui-datagrid-010-muted)}
[data-vibeui-block="datagrid-010"] [data-part="foot"]{
display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;
padding:0.625rem 0.875rem;border-top:1px solid var(--vibeui-datagrid-010-border);
background:var(--vibeui-datagrid-010-head);
}
[data-vibeui-block="datagrid-010"] [data-part="range"]{
margin:0;font-size:0.75rem;color:var(--vibeui-datagrid-010-muted);margin-inline-end:auto;
}
[data-vibeui-block="datagrid-010"] [data-part="pages"]{
display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem;
margin:0;padding:0;list-style:none;
}
[data-vibeui-block="datagrid-010"] [data-part="pages"] button{
appearance:none;cursor:pointer;font:inherit;font-size:0.75rem;
min-width:1.875rem;height:1.875rem;padding:0 0.5rem;border-radius:0.5rem;
border:1px solid var(--vibeui-datagrid-010-border);
background:var(--vibeui-datagrid-010-bg);color:var(--vibeui-datagrid-010-fg);
font-variant-numeric:tabular-nums;
}
[data-vibeui-block="datagrid-010"] [data-part="pages"] button[aria-current="page"]{
border-color:transparent;background:var(--vibeui-datagrid-010-accent);color:oklch(1 0 0);font-weight:650;
}
[data-vibeui-block="datagrid-010"] [data-part="pages"] button:disabled{opacity:.4;cursor:not-allowed}
[data-vibeui-block="datagrid-010"] [data-part="pages"] button:focus-visible{outline:2px solid var(--vibeui-datagrid-010-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="datagrid-010"] *{animation:none!important;transition:none!important}}
`

const NAMES = [
  "Орлова А.",
  "Ким С.",
  "Гнедин П.",
  "Савва Т.",
  "Лебедь М.",
  "Рудь И.",
  "Заика В.",
  "Мороз Е.",
  "Панченко Л.",
  "Юрьев Д.",
  "Бах Н.",
  "Соловей К.",
  "Тихая О.",
  "Верес Р.",
  "Шило Г.",
  "Дуб А.",
  "Марин С.",
  "Клим В.",
  "Ясь Н.",
  "Гай Т.",
  "Роман А.",
  "Зима П.",
  "Град Ю.",
]

const ROLES = ["Инженер", "Аналитик", "Дизайнер", "Менеджер"]
const CITIES = ["Москва", "Казань", "Петербург", "Новосибирск", "Сочи"]

const DEFAULT_ROWS: Datagrid010Row[] = NAMES.map((person, index) => ({
  id: `u-${index + 1}`,
  person,
  role: ROLES[index % ROLES.length],
  city: CITIES[index % CITIES.length],
  score: 60 + ((index * 7) % 40),
}))

const SIZES = [5, 10, 20]

/**
 * Сетка с пагинацией и выбором размера страницы: диапазон записей,
 * номера страниц с aria-current и навигация в nav. Один файл.
 */
export function Datagrid010({
  rows = DEFAULT_ROWS,
  caption = "Список участников программы",
  pageSize = 5,
  accent,
  className,
  style,
  ...props
}: Datagrid010Props) {
  const [size, setSize] = useState(pageSize)
  const [page, setPage] = useState(1)

  const pages = Math.max(1, Math.ceil(rows.length / size))
  const safe = Math.min(page, pages)
  const from = (safe - 1) * size
  const slice = rows.slice(from, from + size)

  const palette = {
    ...(accent ? { "--vibeui-datagrid-010-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-datagrid-010" precedence="medium">
        {STYLES}
      </style>
      <section
        {...props}
        data-vibeui-block="datagrid-010"
        className={className}
        style={palette}
      >
        <div data-part="head">
          <h3 data-part="title">Участники</h3>
          <label>
            Строк на странице
            <select
              value={size}
              onChange={(event) => {
                setSize(Number(event.target.value))
                setPage(1)
              }}
            >
              {SIZES.map((value) => (
                <option key={value} value={value}>
                  {value}
                </option>
              ))}
            </select>
          </label>
        </div>
        <div
          data-part="scroll"
          role="region"
          aria-label="Таблица участников, прокручивается вбок"
          tabIndex={0}
        >
          <table>
            <caption>{caption}</caption>
            <thead>
              <tr>
                <th scope="col">Участник</th>
                <th scope="col">Роль</th>
                <th scope="col">Город</th>
                <th scope="col" data-align="end">
                  Балл
                </th>
              </tr>
            </thead>
            <tbody>
              {slice.map((row) => (
                <tr key={row.id}>
                  <th scope="row">{row.person}</th>
                  <td data-part="muted">{row.role}</td>
                  <td data-part="muted">{row.city}</td>
                  <td data-align="end">{row.score}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div data-part="foot">
          <p data-part="range" aria-live="polite">
            Показано {from + 1}–{from + slice.length} из {rows.length}
          </p>
          <nav aria-label="Страницы таблицы">
            <ul data-part="pages">
              <li>
                <button
                  type="button"
                  disabled={safe === 1}
                  aria-label="Предыдущая страница"
                  onClick={() => setPage(safe - 1)}
                >
                  ←
                </button>
              </li>
              {Array.from({ length: pages }, (_, index) => index + 1).map(
                (number) => (
                  <li key={number}>
                    <button
                      type="button"
                      aria-current={number === safe ? "page" : undefined}
                      aria-label={`Страница ${number}`}
                      onClick={() => setPage(number)}
                    >
                      {number}
                    </button>
                  </li>
                ),
              )}
              <li>
                <button
                  type="button"
                  disabled={safe === pages}
                  aria-label="Следующая страница"
                  onClick={() => setPage(safe + 1)}
                >
                  →
                </button>
              </li>
            </ul>
          </nav>
        </div>
      </section>
    </>
  )
}