Dev Journal #6: Add a MUI table component
 Cover Image

Dev Journal #6: Add a MUI table component

Next, let’s use a proper MUI table component to display the list of links. At first, I toyed with using MUI X’s Data Grid component, but because it was an additional package with a freemium model, I decided to use a more basic display for the first crack.

MUI’s basic table example is pretty good, so we’ll more or less lift that and modify it slightly to show our link-specific columns in src/pages/index.tsx:

function LinkTable({ links }: { links: Link[] }) {
  function toTimestamp(epoch: number) {
    return new Date(epoch).toString();

  return (
    <Table sx={{ minWidth: 650 }} aria-label="simple table">
          <TableCell>Short Path</TableCell>
        { => (
            sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
            <TableCell component="th" scope="row">

We’ll use the new LinkTable component on the Home page in the same file:

export default function Home({ links }: { links?: Link[] }) {
  console.log({ links });
  return (
    <Container maxWidth="lg">
      {/* ... */}
        {links && LinkTable({ links })}

And then our links show up in a neat table! You can view this stage of the project on the Use table for link list PR. Here’s what the UI looks like now:

Links show in a table on the UI