@a-component/datagrid

React Datagrid Component

Example

http://a-component.github.io/datagrid/

Install

$ npm install @a-c/datagrid --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Datagrid,
    DatagridHeader,
    DatagridBody,
    DatagridHorizontalScroller,
    DatagridVerticalScroller,
} from '@a-c/datagrid';

const columns = [
    {key: "id", label: "ID"},
    {key: "name", label: "Name"},
];
const data = [
    {value: {id: "1", name: "tom"}},
    {value: {id: "2", name: "seowoo"}},
    {value: {id: "3", name: "seowoo"}},
    {value: {id: "4", name: "seowoo"}},
    {value: {id: "5", name: "seowoo"}},
    {value: {id: "6", name: "seowoo"}},
    {value: {id: "7", name: "seowoo"}},
    {value: {id: "8", name: "seowoo"}},
    {value: {id: "9", name: "seowoo"}},
    {value: {id: "10", name: "seowoo"}},
    {value: {id: "11", name: "seowoo"}},
    {value: {id: "12", name: "seowoo"}},
    {value: {id: "13", name: "seowoo"}},
    {value: {id: "14", name: "seowoo"}},
    {value: {id: "15", name: "seowoo"}},
    {value: {id: "16", name: "seowoo"}},
    {value: {id: "17", name: "seowoo"}},
];

ReactDOM.render(
    <Datagrid
        width={500}
        height={400}
        headerHeight={28}
        bodyRowHeight={28}
        columns={columns}
        data={data}
        dataLength={data.length}
        enableLineNumber
    >
        <DatagridHeader/>
        <DatagridBody>
            <DatagridVerticalScroller size={12}/>
            <DatagridHorizontalScroller size={12}/>
        </DatagridBody>
    </Datagrid>
    , container);

Development

$ npm install
$ npm run storybook