Data Table

function DataTableDemo() {
  // The shell renders a sort control for every column that CAN sort, so the
  // caller owes it a sorted row model and somewhere to keep the state — with
  // neither, the header is a button that does nothing.
  const [sorting, setSorting] = useState<SortingState>([]);
  const table = useReactTable({
    data: DEMO_ROWS,
    columns: DEMO_COLUMNS,
    state: { sorting },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });
  return (
    <div className="w-full">
      <DataTable
        table={table}
        rowKey={(r) => r.creator}
        emptyTitle="No creators"
        emptyHint="Import a sheet to get started."
        emptyIcon={Album02Icon}
        footerLabel={`${DEMO_ROWS.length} creators`}
        autoHeight
      />
    </div>
  );
}