Reaco-table-list NPM

REACO-TABLE-LIST

Reaco-Table-List is a React component for building and presenting data in a flexible, powerful way. It supports standard table features, like headers, columns, rows, header groupings, and both fixed-position and scrolling columns.

The table was designed to handle thousands of rows of data without sacrificing performance. Scrolling smoothly is a first-class goal of Reaco-Table-List and it's architected in a way to allow for flexibility and extensibility.

Reaco-Table-List is written over schrodinger/fixed-data-table-2. For pagination it uses Reaco-Pagination, so you can directly use its properties here to manage pagination.

Features of Reaco-Table-List:

Fixed headers and footer
Fluid column widths
Resizable columns
Expanded rows
Both fixed and scrollable columns
Handling huge amounts of data
Variable row heights (with adaptive scroll positions)
Column resizing
Performant scrolling
Customizable styling
Jumping to a row or column
Controlled scroll API allows touch support
Tooltips
Responsive Resize
Column Groups

Installation

Using npm:

$ npm install --save reaco-table-list

Code example

import React, { Component } from 'react';
import TableList from 'reaco-table-list';

// fixed variables for pagination
const total = 150;
const dataSize = 10;

// table config 
const tableConfig = {
    sortUpIcon: '↡',
    sortDownIcon: '↟',
    sortByField: null,
    sortDirection: null,
    sortCallback: null,
    columns: {
      name: {
        header: 'name',
        type: 'link',
        width: 100,
        sortEnable: true,
      },
      age: {
        header: 'age',
        type: 'text',
        width: 100,
      },
      dob: {
        header: 'dob',
        type: 'date',
        dateFormat: 'MM DD YYYY',
        width: 50,
      }
    },
    data: [{
        name: {
            value: 'foo',
            title: 'this is foo',
            url: 'https://github.com/ofbusiness/reaco',
        },
        age: {
            value: 30,
        },
        dob: {
            value: (new Date()),
        }
        }, {
        name: {
            value: 'bar',
            title: 'this is foo',
            url: 'https://github.com/ofbusiness/reaco',
        },
        age: {
            value: 25,
        },
        dob: {
            value: (new Date()),
        }
    }],
};

// finally the component to be render
<TableList 
      tableConfig={tableConfig} 
      rowsCount={10} 
      forcePage={1}
      total={100} 
      size={10} 
      dataSize={10}
      handlePageChange={this.onPageChange}
      handlePageOptionChange={this.onPageOptionChange} />

See the App.js for complete code example.

Props

Name	Type	Description
`tableConfig`	`Object`	Required. The complete configuration of table data. See Code Example for detail.
`rowsCount`	`Number`	Required. The least number of rows per page i.e there may be less items on last page in compare to maximum count per page.
`total`	`Number`	Required. The total number of data across the pages.
`size`	`Number`	Required. The total number of maximum rows per page i.e per page count.
`dataSize`	`Number`	Required. The least number of rows per page i.e there may be less items on last page in compare to maximum count per page.
`width`	`Number`	Optional. The width of table.
`height`	`Number`	Optional. The height of table.
`headerHeight`	`Number`	Optional. The height of header.
`rowHeight`	`Number`	Optional. The height of each row.
`forcePage`	`Number`	Optional. This is current page index will be use by pagination component.