md-data-grid
v1.0.1
Published
MDDataGrid
Downloads
11
Readme
MDDataGrid
MDDataGrid is developed based on ReactDataGrid. It supports add row, delete row, filter(by naive matching), row-wise formatter, and export.
Demo & Examples
Live demo: ZhengHe-MD.github.io/md-data-grid
To build the examples locally, run:
npm install
npm start
Then open localhost:8000
in a browser.
Installation
The easiest way to use md-data-grid is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).
You can also use the standalone build by including dist/md-data-grid.js
in your page. If you use this, make sure you have already included React, and it is available as a global variable.
npm install md-data-grid --save
Usage
import MdDataGrid from 'md-data-grid';
<MdDataGrid
rows={rows}
columns={metadata}
onExport={(data) => { console.log(data); }}
/>
example props
const rows = [
{
columnKey_1: columnVal_1_1,
columnKey_2: columnVal_2_1,
...
},
{
columnKey_1: columnVal_1_2,
columnKey_2: columnVal_2_2,
...
},
...
];
const metadata = [
{
key: 'key1',
name: 'name1',
editable: bool,
filterable: bool
},
{
key: 'key2',
name: 'name2',
editable: bool,
filterable: true
}
...
];
Properties
columns: metadata --- List of objects that explain the column rows: data --- list of objects that describe each datum onExport: handler --- function invoked when the filter button is clicked
Notes
"warning.js?8a56:44 Warning: Row: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop." I believe there should be somewhere. But I don't know how to fix it now. I have also submit new issue in the ReactGridData repo: adazzle/react-data-grid#321
Development (src
, lib
and the build process)
NOTE: The source code for the component is in src
. A transpiled CommonJS version (generated with Babel) is available in lib
for use with node.js, browserify and webpack. A UMD bundle is also built to dist
, which can be included without the need for any build system.
To build, watch and serve the examples (which will also watch the component source), run npm start
. If you just want to watch changes to src
and rebuild lib
, run npm run watch
(this is useful if you are working with npm link
).
License
MIT
Copyright (c) 2016 Zheng He.