# gimstable

> A React Table component for GIMS

Latest version **1.1.4** (published 2016-05-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install gimstable
pnpm add gimstable
yarn add gimstable
bun add gimstable
```

## Health

**Score 5/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2016-05-23 |
| First published | 2016-05-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | chrimmme |
| Maintainers | chrimmme |

## Links

- npm: https://www.npmjs.com/package/gimstable
- npm.io page: https://npm.io/package/gimstable

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^15.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^15.0.0
- [fixed-data-table](https://npm.io/package/fixed-data-table.md) git://github.com/ripitrust/fixed-data-table.git

## Recent versions

- 1.1.4 (latest) — 2016-05-23
- 1.1.3 — 2016-05-19
- 1.1.1 — 2016-05-19
- 1.1.0 — 2016-05-19
- 1.0.8 — 2016-05-19
- 1.0.7 — 2016-05-19
- 1.0.6 — 2016-05-18
- 1.0.5 — 2016-05-18
- 1.0.4 — 2016-05-18
- 1.0.3 — 2016-05-18
- 1.0.2 — 2016-05-18
- 1.0.1 — 2016-05-18
- 1.0.0 — 2016-05-18

## README

# 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
+ *keys*```array``` : 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

---
_Source: https://npm.io/package/gimstable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._