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

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

users-table__docs-rules__claude-code__claude-opus-5__1 · 23.09.2026, 21:53:20 мск

Проверки пройдены
Доки + правила · claude-opus-5 · Claude Code
Контекст до задачи~23 785
Токенов на прогон49 683
Цена$0.275
Ошибок компилятора0

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

Компилятор

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

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

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

JxBadge, JxEmptyState, JxPagination, JxTable

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

Контекст

Доки (llms-full.txt, ~22548) · Правила (jinx-ui, ~1083)

Вход 2 · выход 638 · из кэша 8 233 · в кэш 40 810 · 8 с

Рендер

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

tsx58 строк
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
import { useState } from 'react';
import { JxTable, JxBadge, JxPagination, JxEmptyState } 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 safePage = Math.min(page, pageCount);
  const visible = users.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE);

  if (users.length === 0) {
    return (
      <JxEmptyState
        title="Пользователей пока нет"
        message="Пригласите первого участника, чтобы он появился в этом списке."
      />
    );
  }

  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>
      {pageCount > 1 && (
        <JxPagination total={pageCount} page={safePage} onPageChange={setPage} />
      )}
    </div>
  );
}