Table

Rows and columns of data, with sortable headings.


Alan Turing	Researcher	2
FDFelix Dorner	Designer	3
Grace Hopper	Admiral	5

const [sort, setSort] = useState({ key: "name", dir: "ascending" });
const rows = sortRows(data, sort); // your own comparator

<Table aria-label="People">
  <TableHeader>
    <TableRow>
      <TableHeadCell sort={sort.key === "name" ? sort.dir : "none"} onSort={() => toggle("name")}>Name</TableHeadCell>
      <TableHeadCell sort={sort.key === "role" ? sort.dir : "none"} onSort={() => toggle("role")}>Role</TableHeadCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {rows.map((r) => (
      <TableRow key={r.id}>
        <TableCell leading={<Avatar size="mini" src={r.photo} />}>{r.name}</TableCell>
        <TableCell>{r.role}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>