<div id="app"></div>

html {
   height: 100%;
}

body {
   background: #633;
   color: #fff;
   display: flex;
   min-height: 100%;
}

.container {
   display: flex;
   flex: 1;
   flex-direction: column;
}

.table-row {
   border-top: 1px solid rgba(255, 255, 255, .2);
}

.ReactVirtualized__Table__headerRow {
   border: 0;
   color: #ff0;
}

const { Table, Column } = ReactVirtualized
const generateRandomItem = (idx) => ({
   id: idx,
   name: faker.name.findName(),
   email: faker.internet.email()
})

class App extends React.Component {
   constructor () {
      super()
      // fake data
      let items = []
      for (let i = 0, l = 1000; i < l; i++) {
         items.push(generateRandomItem(i))
      }
      this.state = {
         items: items
      }
   }
   
   render () {      
      return (
         <div class="container">
            <h1>Table example </h1>
            <Table
               rowClassName='table-row'
               headerHeight={40}
               width={600}
               height={300}
               rowHeight={40}
               rowCount={this.state.items.length}
               rowGetter={({ index }) => this.state.items[index]}
            >
            <Column
               label='Id'
               dataKey='id'
               width={50}
            />
            <Column
               label='Name'
               dataKey='name'
               width={250}
            />
            <Column
               label='E.mail'
               dataKey='email'
               width={300}
            />
         </Table>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)