GIMSTable

A React Table Component for the SA GIMS System

Highlight Features:

• Support custom sorting function
• Support column width adjust & auto fit to content
• Support select, deselect
• Support native click, double click callbacks

Usage:

Install:

Install from npm:

   $ npm install gimstable

Please include the gimstable.css from style/ into your page / build system

Install from Script Tag

   <script src="https://fb.me/react-15.0.2.js"></script>
   <script src="https://fb.me/react-dom-15.0.2.js"></script>
   <script src="./node_modules/gimstable/node_modules/fixed-data-table/dist/fixed-data-table.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   <script src="./node_modules/gimstable/dist/gimstable.js"></script>
   <link rel="stylesheet" type="text/css" href="./node_modules/gimstable/style/gimstable.css">

*** Please use GIMSTable.default instead of GIMSTable *** :

    var GIMSTable = GIMSTable.default;

Use:

ES6 Import:

    import GIMSTable from 'gimstable';

ES5 Require:

    var GIMSTable = require('gimstable').default;

Use it in your React Component:

    <GIMSTable data={data} keys={keys} headers={headers} selected={selected} tableHeight={500} tableWidth={400} />

Props:

• data required``````array: the array of data you want to display
• headers required``````array : the array of headers
• keysarray : the array of keys to extract information from the data, default to be the lowercase and space-removed version of header
• clickCallback function: callback you want to fireup when clicking the row, will pass the clicked row index to the callback function
• doubleClickCallback function : callback you want to fireup when double-clicking the row, will pass the clicked row index to the callback function
• sortCallback function : callback you want to fireup when clicking the header, it is up to the client code to decide what to do when sorting, will pass sortkey, sortkey index and descending to the function
• tableHeight number : the height of the table
• tableWidth number : the width of the table

APIs:

• getSelected : Return all the selected index in an array
• getClicked : Return the last clicked index

Example:

Refer to the example folder