in DEV - Building your Applications for the Cloud/DEV20/src/ProductTable.js [99:159]
render() {
return (
<div className="table-container">
<InfiniteLoader
rowCount={this.state.totalSize}
loadMoreRows={this.fetchRows}
isRowLoaded={this.isRowLoaded}
>
{({ onRowsRendered, registerChild }) => (
<AutoSizer>
{({ height, width }) => (
<Table
width={width}
height={height}
headerHeight={60}
rowHeight={60}
rowCount={this.state.rows.length}
ref={registerChild}
rowGetter={({ index }) => this.state.rows[index]}
onRowsRendered={data => {
this.modRowsShowing(data);
onRowsRendered(data);
}}
rowClassName={({ index }) =>
index % 2 ? "row-even" : "row-odd"
}
headerClassName="row-header"
onRowClick={this.handleRowClick}
>
<Column width={100} label="ID" dataKey="id" />
<Column width={300} label="Name" dataKey="name" />
<Column width={300} label="SKU" dataKey="sku" />
<Column width={100} label="Price" dataKey="price" />
<Column width={200} label="Supplier" dataKey="supplierName" />
<Column width={200} label="Inventory" dataKey="inventory" />
</Table>
)}
</AutoSizer>
)}
</InfiniteLoader>
{!this.state.selectedRow ? null : (
<Modal>
<div
role="none"
onClick={this.handleModalClick}
id="modal-interior"
>
<div>
<ProductDetails {...this.state.selectedRow} />
<div className="buttons">
<button className="exit-button" onClick={this.closeModal}>
Close
</button>
</div>
</div>
</div>
</Modal>
)}
</div>
);
}