Data Table / Data Grid

import {
  useReactTable,
  getCoreRowModel,
  flexRender,
  type ColumnDef,
  type SortingState,
  type PaginationState,
} from "@tanstack/react-table";
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";

type User = { id: string; name: string; email: string; createdAt: string };

const columns: ColumnDef<User>[] = [
  { accessorKey: "name",      header: "Name",       enableSorting: true },
  { accessorKey: "email",     header: "Email",      enableSorting: false },
  { accessorKey: "createdAt", header: "Created",    enableSorting: true },
];

export function UserTable() {
  const [sorting, setSorting]       = useState<SortingState>([]);
  const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 50 });

  const { data } = useQuery({
    queryKey: ["users", sorting, pagination],
    queryFn: () =>
      fetch(
        `/api/users?page=${pagination.pageIndex}&size=${pagination.pageSize}` +
        (sorting[0] ? `&sort=${sorting[0].id}&dir=${sorting[0].desc ? "desc" : "asc"}` : "")
      ).then((r) => r.json()) as Promise<{ rows: User[]; total: number }>,
  });

  const table = useReactTable({
    data:       data?.rows ?? [],
    columns,
    rowCount:   data?.total ?? 0,
    state:      { sorting, pagination },
    onSortingChange:    setSorting,
    onPaginationChange: setPagination,
    manualSorting:    true,  // tell TanStack Table not to sort locally
    manualPagination: true,  // tell TanStack Table not to slice locally
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((hg) => (
          <tr key={hg.id}>
            {hg.headers.map((header) => (
              <th
                key={header.id}
                aria-sort={
                  header.column.getIsSorted() === "asc"
                    ? "ascending"
                    : header.column.getIsSorted() === "desc"
                    ? "descending"
                    : "none"
                }
                onClick={header.column.getToggleSortingHandler()}
                style={{ cursor: header.column.getCanSort() ? "pointer" : "default" }}
              >
                {flexRender(header.column.columnDef.header, header.getContext())}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}