Таблица пользователей с пагинацией

Сделай таблицу пользователей с колонками «Имя», «Роль» и «Статус». Список users передаётся пропсом, показывать по десять строк на страницу с постраничной навигацией под таблицей. Статус показывай цветной меткой: активен или отключён.

users-table__none__claude-code__claude-opus-5__1 · 23.09.2026, 19:49:46 мск

Есть проблемы
Без контекста · claude-opus-5 · Claude Code
Контекст до задачи~154
Токенов на прогон10 286
Цена$0.049
Ошибок компилятора3

Первый вызов модели получил 8 587 токенов входа, включая системный промпт Claude Code. Контекст до задачи — оценка по длине текста, для русского текста она занижает число токенов в полтора-два раза.

Компилятор

  • Строка 2 · TS2724
    '"@jinx-ui/react"' has no exported member named 'Badge'. Did you mean 'JxBadge'?
  • Строка 2 · TS2724
    '"@jinx-ui/react"' has no exported member named 'Pagination'. Did you mean 'JxPagination'?
  • Строка 2 · TS2724
    '"@jinx-ui/react"' has no exported member named 'Table'. Did you mean 'JxTable'?
Выдуманные компоненты
BadgePaginationTable

Линтер и покрытие

  • inline-styleСтрока 32
    Инлайновые стили вместо классов и токенов библиотеки
Компоненты библиотеки

Ни одного: код написан без библиотеки, поэтому прогон не засчитан

Ожидались JxTable, JxPagination, JxBadge · покрытие 0%

Контекст

Только формулировка задачи

Вход 2 · выход 1 699 · из кэша 8 233 · в кэш 352 · 20 с

Рендер

Код компонента

tsx64 строки
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import { useMemo, useState } from 'react';
import { Badge, Pagination, Table } from '@jinx-ui/react';

// Assumes Jinx UI compound Table, Badge `tone`, and controlled Pagination — adjust names if the installed version differs.

export type User = {
  id: string | number;
  name: string;
  role: string;
  active: boolean;
};

type UsersTableProps = {
  users: User[];
};

const PAGE_SIZE = 10;

export default function UsersTable({ users }: UsersTableProps) {
  const [page, setPage] = useState(1);

  const pageCount = Math.max(1, Math.ceil(users.length / PAGE_SIZE));
  const currentPage = Math.min(page, pageCount);

  const rows = useMemo(
    () => users.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE),
    [users, currentPage],
  );

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 'var(--jx-space-4)',
      }}
    >
      <Table>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Имя</Table.HeaderCell>
            <Table.HeaderCell>Роль</Table.HeaderCell>
            <Table.HeaderCell>Статус</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {rows.map((user) => (
            <Table.Row key={user.id}>
              <Table.Cell>{user.name}</Table.Cell>
              <Table.Cell>{user.role}</Table.Cell>
              <Table.Cell>
                <Badge tone={user.active ? 'success' : 'neutral'}>
                  {user.active ? 'Активен' : 'Отключён'}
                </Badge>
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>

      <Pagination page={currentPage} pageCount={pageCount} onChange={setPage} />
    </div>
  );
}