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>
);