How to make Table with CSS Grid and React

The <table> tag is not the most friendly HTML element, but hopefully, we can build a simple table layout with a CSS grid!

The TableLayout component receives gridTemplateColumns CSS attribute, a list of column names and children. Then we make every row contain the same number of elements as the column names array. The table's container is a grid element with aligned items to which we pass the grid template column with the style attribute.

import { CSSProperties } from "react"
import { ComponentWithChildrenProps } from "shared/props"
import styled from "styled-components"
import { Line } from "ui/Line"
import { Text } from "ui/Text"

interface Props extends ComponentWithChildrenProps {
  columnNames: string[]
  gridTemplateColumns: CSSProperties["gridTemplateColumns"]
}

const Container = styled.div`
  display: grid;
  gap: 16px 48px;
  align-items: center;
`

const Separator = styled(Line)`
  grid-column: 1/-1;
`

export const TableLayout = ({
  children,
  columnNames,
  gridTemplateColumns,
}: Props) => {
  return (
    <Container style={{ gridTemplateColumns }}>
      {columnNames.map((name) => (
        <Text weight="regular" color="supporting3" key={name}>
          {name}
        </Text>
      ))}
      <Separator />
      {children}
    </Container>
  )
}

We iterate over the array of column names and render them with the Text component. To span the separator line over the whole row, we use the grid-column property that starts with the first element and ends with the last. Finally, we display children, and we are good to go!