KvalityUI

DataTable

Таблица на TanStack Table с пагинацией и пустым состоянием.

Живой код — редактируйте
function Example() {
  const data = [
    { id: 1, contact: 'Мария', phone: '+7 900 123-45-67', score: 82 },
    { id: 2, contact: 'Пётр', phone: '+7 901 765-43-21', score: 47 },
    { id: 3, contact: 'Анна', phone: '+7 902 555-11-22', score: 18 }
  ];
  const columns = [
    { accessorKey: 'contact', header: 'Контакт' },
    { accessorKey: 'phone', header: 'Телефон' },
    { accessorKey: 'score', header: 'Оценка' }
  ];
  return <DataTable data={data} columns={columns} pageSize={10} />;
}

render(<Example />);

Пустая таблица

Живой код — редактируйте
<DataTable
  data={[]}
  columns={[{ accessorKey: 'contact', header: 'Контакт' }]}
  emptyContent={
    <EmptyState
      title="Заявок пока нет"
      description="Они появятся после установки скрипта"
    />
  }
/>

Пропсы

Prop

Type

On this page