react-progressive-table

1.0.0 • Public • Published

React Progressive Table

License npm version Build Status Codacy Badge dependencies Status devDependencies Status peerDependencies Status

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-progressive-table

Weekly Downloads

3

Version

1.0.0

License

Apache-2.0

Unpacked Size

146 kB

Total Files

14

Last publish

Collaborators

  • sam.boylett