react-progressive-table
v1.0.0
Published
Utility component for rendering table rows progressively
Downloads
18
Readme
React Progressive Table
This component lets you render tables progressively, row by row. Useful for speeding up responsiveness when rendering large tables.
Installation
npm i --save react-progressive-table
Usage
As a standard table:
import ProgressiveTable from 'react-progressive-table';
const MyComponent = () => (
<ProgressiveTable>
<table>
<thead>
<tr>
<th>
Foo
</th>
<th>
Bar
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
53
</td>
<td>
42
</td>
</tr>
</tbody>
</table>
</ProgressiveTable>
);
Rendering using different table components, e.g. semantic-ui:
import ProgressiveTable from 'react-progressive-table';
import { Table } from 'semantic-ui-react';
const MyComponent = () => (
<ProgressiveTable tr={Table.Row}>
<Table>
<Table.Header>
<Table.Row>
<Table.HeaderCell>
Foo
</Table.HeaderCell>
<Table.HeaderCell>
Bar
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
53
</Table.Cell>
<Table.Cell>
42
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</ProgressiveTable>
);