react-material-infinite-datatable

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'
					}
				]}
			/>)
	}
}

License

MIT ©