README
react-material-infinite-datatable
Install
npm install --save react-material-infinite-datatable
Usage
import React, { Component } from 'react';
import { VirtualizedTable } from 'react-infinite-datatable';
import faker from 'faker';
class MyPage extends Component {
private readonly PAGE_SIZE = 50;
generateData(pageNumber: number): Array<any> {
const rows = [];
for (let i = 0; i < this.PAGE_SIZE; i++) {
rows.push({
idx: i + (this.PAGE_SIZE * (pageNumber - 1)) + 1,
firstname: faker.name.findName(),
email: faker.internet.email(),
address: {
address1: faker.address.streetAddress()
},
arr: [{
field1: 'val1'
}]
});
}
return rows;
}
loadMoreRows = (pageNumber: number): Promise<Array<any>> => {
return new Promise(resolve => {
setTimeout(() => {
const rows = this.generateData(pageNumber);
resolve(rows);
}, 3000);
});
}
render() {
const moreRows = this.loadMoreRows.bind(this);
return (
<VirtualizedTable
pageSize={this.PAGE_SIZE}
loadData={moreRows}
selectable
columns={[
{
label: '#',
dataKey: 'idx',
type: 'number',
format: '0,0'
},
{
label: 'Name',
dataKey: 'firstname'
},
{
label: 'Email',
dataKey: 'email',
headerRenderer: (column: InfiniteColumn) => {
return (<div>{column.label + '...'}</div>);
},
renderer: (_column: InfiniteColumn, row: any) => {
return (<div>{row.email}: {row.idx}</div>)
}
},
{
label: 'Street',
dataKey: 'address.address1'
},
{
label: 'Array Value',
dataKey: 'arr[0].field1'
}
]}
/>)
}
}