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:

$ `npm install --save g6reactdatagrid`

To update existing g6reactdatagrid component

$ `npm update g6reactdatagrid`

For a simple table:

Import DataGrid component from g6reactdatagrid

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}
/>