KvalityUI

ListView

Список-таблица на div с заголовком колонок и пагинацией — для строк сложной разметки.

Живой код — редактируйте
function Example() {
  const [page, setPage] = useState(1);
  return (
    <ListView
      minWidthClassName="min-w-[480px]"
      headerRowClassName="px-4 py-2"
      headerCells={[
        { content: 'Проект', className: 'flex-1' },
        { content: 'Заявки', className: 'w-24 text-right' }
      ]}
      pagination={{
        page,
        totalPages: 3,
        total: 25,
        start: (page - 1) * 10 + 1,
        end: Math.min(page * 10, 25),
        onPageChange: setPage
      }}
    >
      {['kvality.io', 'example.ru', 'shop.ru'].map((name) => (
        <ListViewRow key={name} className="px-4 py-3">
          <span className="flex-1 text-14-regular">{name}</span>
          <span className="w-24 text-right text-14-medium">
            {name.length * 7}
          </span>
        </ListViewRow>
      ))}
    </ListView>
  );
}

render(<Example />);

Пропсы

Prop

Type

On this page