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.

See the full Documentation of fixed-data-table-2 here.