https://twitter.com/nicolaschevobbe/status/938698130907910145

grid.css

body {
  padding: 2em;
}

[role=grid] + [role=grid] {
  margin-top: 1em;
}

[role=grid] {
  width: 100%;
  display: grid;
  height: 200px;
  font-size: 1em;
  overflow-y: auto;
  border: 1px solid #E3E4E4;
  border-left: none;
}

[role=grid] > div {
border-left: 1px solid #E3E4E4;
}

[role=columnheader] {
  background-color: #F9F9FA;
  position: sticky;
  top: 0;
  padding: 5px;
  border-bottom: 1px solid #E3E4E4;
}

[role=gridcell] {
  padding: 2px 5px;
}

.odd {
  background-color: #F3F3F3;
}

grid.js

function Grid(props) {
  const {columns, rows} = props;
  return <div 
    role="grid" 
    style={{
      gridTemplateColumns: `repeat(${columns.length}, auto)`
    }}>
      {columns.map(column => <div role="columnheader">{column}</div>)}
      {rows.reduce((res, row, line) => 
        [
          ...res, 
          ...(row.map((cell, i) => 
            <div 
              key={`${line}-{i}`}
              role="gridcell"
              className={
                line % 2 === 0 
                  ? "even" 
                  : "odd"
              }
              role="gridcell"
            >{cell}</div>
          ))
        ], [])}
  </div>;
}

function App() {
  return <div>
    <Grid 
      columns={["Header 1", "Header 2", "Header 3"]} 
      rows={Array.from({length: 40}).map((row, i) => [i + "-1", i + "-3", i + "-3"])}
    />
    <Grid 
      columns={["Header 1", "Header 2", "Header 3", "Header 4"]} 
      rows={Array.from({length: 100}).map((row, i) => [i + "-1", i + "-3", i + "-3", (i + "-4 ").repeat(140)])}
    />
  </div>;
}

ReactDOM.render(<App />, document.getElementById("root"));