# g6reactdatagrid

> G6 React Data grid

Latest version **0.1.29** (published 2020-02-04) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.29 |
| Published | 2020-02-04 |
| First published | 2018-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 894 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sadique.poolwala@gate6.com |
| Maintainers | gate6npm |
| Keywords | grid, data, table, datagrid |

## Links

- npm: https://www.npmjs.com/package/g6reactdatagrid
- Repository: https://289fa1316c94f1d138edc58b3b8d099e212f97fb:x-oauth-basic@github.com/gate6/g6boilerplates.git#react-data-grid
- Homepage: https://github.com/gate6/g6boilerplates/tree/react-data-grid#readme
- Issues: https://github.com/gate6/g6boilerplates/issues
- npm.io page: https://npm.io/package/g6reactdatagrid

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.4.1
- [moment](https://npm.io/package/moment.md) ^2.22.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.1

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.29 (latest) — 2020-02-04
- 0.1.28 — 2020-02-04
- 0.1.27 — 2020-02-04
- 0.1.26 — 2018-08-31
- 0.1.25 — 2018-08-31
- 0.1.24 — 2018-08-31
- 0.1.23 — 2018-08-31
- 0.1.22 — 2018-08-31
- 0.1.21 — 2018-08-21
- 0.1.20 — 2018-08-07
- 0.1.19 — 2018-08-07
- 0.1.18 — 2018-08-07
- 0.1.17 — 2018-08-07
- 0.1.16 — 2018-08-06
- 0.1.15 — 2018-08-06
- … 13 more at https://npm.io/package/g6reactdatagrid/versions

## README

# G6 React Data Grid

## Prerequisite
- Install Node

(if not installed) Open the official page for Node.js downloads (https://nodejs.org/en/download/) and download Node.js for Windows/Linux option
Run the downloaded Node.js .msi Installer - including accepting the license, selecting the destination, and authenticating for the install.
This requires Administrator privileges, and you may need to authenticate
To ensure Node.js has been installed, run node -v in your terminal - you should get something like v6.9.5
Update your version of npm with npm install npm --global

## Installation from scratch for new React Framework set-up

To use G6 React Component, please install any of the React framework from below url:
https://reactjs.org/community/starter-kits.html

## Installation with Existing React Framework

### Go to your project directory and run following command:
```javascript
$ `npm install --save g6reactdatagrid`
```

To update existing g6reactdatagrid component
```javascript
$ `npm update g6reactdatagrid`
```

## For a simple table:

Import DataGrid component from g6reactdatagrid
```javascript
import DataGrid from "g6reactdatagrid";
// required: [{columnName: '', displayName: ''}]
// optional: {sort: boolean, type: 'date', format: 'DD/MM/YYYY'} Currently supports only date in 'type'.
const columns = [
    {"columnName": "id", "displayName": "ID", "sort":true},
    {"columnName": "name", "displayName": "Name" },
    {"columnName": "company", "displayName": "Company", "sort":true},
    {"columnName": "city", "displayName": "City"},
    {"columnName": "state", "displayName": "State"}
];

const rows = [
    {"id":"1","name":"Joe James", "company":"Test Corp", "city":"Yonkers", "state":"NY"},
    {"id":"2","name":"John Walsh", "company":"Test Corp", "city":"Hartford", "state":"CT"},
    {"id":"3","name":"Bob Herm", "company":"Test Corp", "city":"Tampa", "state":"FL"},
    {"id":"4","name":"James Houston", "company":"Test Corp", "city":"Dallas", "state":"TX"},
];

const options = {
    totalRecords: 4, // Number. required for pagination Calculation
    totalRecordsLabel: 'Result: ##TOTAL_RECORDS##', // String.  Optional
    rowsPerPage: 4, // Number. Default: 20. required for pagination
    page: 0, // Number. Default: 0
    loadMore: true, // Boolean. Optional
    loadMoreLabel: 'Load More', // String.  Optional
    customColumn: { // Object Optional
        isActive: true, // Boolean
        columnTitle: 'View', // string
        columnContent: (rowData) => { // should be a function
            return (
                <div> <button className='g6Rtable-load-more-btn' onClick={() => { onRowActionClick(rowData) }}>View</button></div>
            );
        },

    },
    onPageChange: (pageNumber) => {
        console.log('pageNumber', pageNumber);
    },
    onColumnSortChange: (column, direction) => {
        console.log('column, direction', column, direction);
    }
};

const onRowActionClick=function(rowData){
    alert(rowData.id +'-'+ rowData.name +'-'+ rowData.company);
}

<DataGrid
    columns={columns}
    options={options}
    rows={rows}
/>
```

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