React-touchable-tabular NPM

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.