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

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

users-table__docs__claude-code__claude-opus-5__1 · 23.09.2026, 20:17:32 мск

Проверки пройдены
Доки · claude-opus-5 · Claude Code
Контекст до задачи~22 702
Токенов на прогон47 881
Цена$0.262
Ошибок компилятора0

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

Компилятор

Ошибок нет: все компоненты и пропсы существуют.

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

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

JxBadge, JxPagination, JxTable

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

Контекст

Доки (llms-full.txt, ~22548)

Вход 2 · выход 541 · из кэша 8 233 · в кэш 39 105 · 6 с

Рендер

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

tsx46 строк
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
import { useState } from 'react';
import { JxTable, JxBadge, JxPagination } from '@jinx-ui/react';

interface User {
  id: string;
  name: string;
  role: string;
  active: boolean;
}

const PAGE_SIZE = 10;

export default function UsersTable({ users }: { users: User[] }) {
  const [page, setPage] = useState(1);
  const pageCount = Math.max(1, Math.ceil(users.length / PAGE_SIZE));
  const currentPage = Math.min(page, pageCount);
  const visible = users.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <JxTable>
        <thead>
          <tr>
            <th>Имя</th>
            <th>Роль</th>
            <th>Статус</th>
          </tr>
        </thead>
        <tbody>
          {visible.map((user) => (
            <tr key={user.id}>
              <td>{user.name}</td>
              <td>{user.role}</td>
              <td>
                <JxBadge tone={user.active ? 'success' : 'default'} dot>
                  {user.active ? 'Активен' : 'Отключён'}
                </JxBadge>
              </td>
            </tr>
          ))}
        </tbody>
      </JxTable>
      <JxPagination total={pageCount} page={currentPage} onPageChange={setPage} />
    </div>
  );
}