CSS Grid Table experiment

table-grid.js

class App extends React.Component {
  render() {
    const columns = [
      {
        header: '',
        cell: 'id',
      },
      {
        header: 'First Name',
        cell: 'firstName',
      },
      {
        header: 'Last Name',
        cell: 'lastName',
      },
      {
        header: 'Phone Number',
        cell: 'phoneNumber',
      },
      {
        header: 'Email',
        cell: 'email',
      },
    ]

    const data = generateFakeData(
      faker => ({
        id: faker.random.uuid(),
        firstName: faker.name.firstName(),
        lastName: faker.name.lastName(),
        phoneNumber: faker.phone.phoneNumber(),
        email: faker.internet.email(),
      }),
      100
    )

    return (
      <div
        role="grid"
        aria-readonly="true"
        aria-colcount={columns.length}
        aria-rowcount={data.length}
        style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${columns.length}, auto)`,
          border: '1px solid #f1f1f1',
        }}
      >
        {/* header */}
        {columns.map((column, index) => (
          <div
            key={index}
            role="columnheader"
            id={`column-${index}`}
            style={{
              padding: 12,
              whiteSpace: 'nowrap',
              backgroundColor: '#f1f1f1',
              position: 'sticky',
              top: 0,
              zIndex: 5,
            }}
          >
            {column.header}
          </div>
        ))}
        {/* body */}
        {data.map(row =>
          columns.map((column, index) => (
            <div
              key={index}
              role="gridcell"
              aria-labelledby={`column-${index}`}
              style={{
                padding: 12,
                whiteSpace: 'nowrap',
                borderTop: '1px solid #f1f1f1',
                backgroundColor: '#ffffff',
                position: index === 0 && 'sticky',
                left: 0,
                zIndex: index === 0 ? 3 : 1,
              }}
            >
              {row[column.cell]}
            </div>
          ))
        )}
      </div>
    )
  }
}