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

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

users-table__mcp__claude-code__claude-opus-5__1 · 24.09.2026, 13:25:29 мск

Проверки пройдены
MCP · claude-opus-5 · Claude Code
Контекст до задачи~2 405
Токенов на прогон47 789
Цена$0.085
Ошибок компилятора0

Первый вызов модели получил 12 474 токена входа, включая системный промпт Claude Code; вызовов модели 3, каждый отправлял разговор заново, и самый большой получил 17 318 токенов. Контекст до задачи — оценка по длине текста, для русского текста она занижает число токенов в полтора-два раза.

Компилятор

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

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

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

JxBadge, JxEmptyState, JxPagination, JxTable

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

Вызовы инструментов · 5
  1. get_component_api({"name":"JxTable","detail":"full"}) → ~361 токенов
  2. get_component_api({"name":"JxPagination","detail":"full"}) → ~450 токенов
  3. get_component_api({"name":"JxBadge","detail":"full"}) → ~274 токенов
  4. get_rules({"task":"ui"}) → ~1247 токенов
  5. get_component_api({"name":"JxEmptyState","detail":"full"}) → ~274 токенов
Контекст

Инструменты (search_components,get_component_api,get_component_examples,list_design_tokens,get_docs,get_rules, ~1213)

Вход 6 · выход 1 254 · из кэша 41 228 · в кэш 5 301 · 14 с

Рендер

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

tsx72 строки
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
65
66
67
68
69
70
71
72
import { useEffect, useMemo, useState } from 'react';
import { JxBadge, JxEmptyState, JxPagination, JxTable } from '@jinx-ui/react';

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

export interface 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));

  useEffect(() => {
    if (page > pageCount) setPage(pageCount);
  }, [page, pageCount]);

  const visible = useMemo(() => {
    const start = (page - 1) * PAGE_SIZE;
    return users.slice(start, start + PAGE_SIZE);
  }, [users, page]);

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

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <JxTable>
        <thead>
          <tr>
            <th scope="col">Имя</th>
            <th scope="col">Роль</th>
            <th scope="col">Статус</th>
          </tr>
        </thead>
        <tbody>
          {visible.map((user) => (
            <tr key={user.id}>
              <td>{user.name}</td>
              <td style={{ color: 'var(--jx-text-2)' }}>{user.role}</td>
              <td>
                <JxBadge tone={user.active ? 'success' : 'danger'} dot>
                  {user.active ? 'Активен' : 'Отключён'}
                </JxBadge>
              </td>
            </tr>
          ))}
        </tbody>
      </JxTable>

      {pageCount > 1 && (
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <JxPagination total={pageCount} page={page} onPageChange={setPage} />
        </div>
      )}
    </div>
  );
}