React Touchable Tabular

A React Component to used to view tabular data based on facebook/fixed-data-table.

Installation

$ npm install react-touchable-tabular --save

Requirement

Before using this module, please make sure you have installed manually the following modules:

• react
• react-dom
• momentjs namely moment from NPM

Note: The above 3 modules is peer dependencies, as well as the webpack externals to reduce the generated bundle size.

Usage

import React from 'react';
import Tabular from 'react-touchable-tabular';

class ExampleApp extends React.Component {
  async getDataSource() {
    return await getList();
  }
  render() {
    return (
      <Tabular getDataSource={this.getDataSource}
        tableHeight={1000}
        tableWidth={800}
        columns={[
          {
            title: 'first name',
            key: 'name.first'
          },
          {
            title: 'last name',
            key: 'name.last'
          },
          {
            title: 'created',
            key: 'created',
            type: 'date'
          }
        ]}
      />
    );
  }
}

Why not fixed-data-table directly?

We build the following features based on fixed-data-table:

• provides touchable to view your data on iPad, Android Pad devices
• provides sortable column by default and supports dot namespace for sorting key
• provides an array property columns to render your column data with less code
• provides a property type
  • if type is "date", this component will format the date by using momentjs
  • if type is "bool", this component will format the value to Yes or No
• with auto computation on the width values of every columns based on the total width.

License

MIT