g6reactdatagrid
G6 React Data grid
Last updated 10 months ago by gate6npm .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install g6reactdatagrid 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.1.26                                ...           latest (10 months ago)

25 Versions

  • 0.1.26                                ...           10 months ago
  • 0.1.25                                ...           10 months ago
  • 0.1.24                                ...           10 months ago
  • 0.1.23                                ...           10 months ago
  • 0.1.22                                ...           10 months ago
  • 0.1.21                                ...           10 months ago
  • 0.1.20                                ...           10 months ago
  • 0.1.19                                ...           10 months ago
  • 0.1.18                                ...           10 months ago
  • 0.1.17                                ...           10 months ago
  • 0.1.16                                ...           10 months ago
  • 0.1.15                                ...           10 months ago
  • 0.1.14                                ...           10 months ago
  • 0.1.13                                ...           10 months ago
  • 0.1.12                                ...           10 months ago
  • 0.1.11                                ...           10 months ago
  • 0.1.10                                ...           10 months ago
  • 0.1.9                                ...           10 months ago
  • 0.1.8                                ...           10 months ago
  • 0.1.7                                ...           10 months ago
  • 0.1.6                                ...           a year ago
  • 0.1.5                                ...           a year ago
  • 0.1.4                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.1                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 25
Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |