0.3.0 • Published 6 years ago
react-hovertable v0.3.0
react-hovertable 
react hovertable to select column and row in a table!
Installation
$ npm install --save react-hovertableUsage
import React from 'react';
import ReactDOM from 'react-dom';
import HoverTable from '../src';
const onClick = (e, data) => {
console.log('click', e, data);
};
const onMouseOver = (e, data) => {
console.log('onMouseOver', e, data);
};
const onMouseOut = e => {
console.log(e);
};
ReactDOM.render(
<HoverTable
column={12}
row={12}
width={300}
height={300}
onClick={onClick}
showDimension={true} // show dimension or not
onMouseOut={onMouseOut}
onMouseOver={onMouseOver}
/>
, document.getElementById('root'));for more usage, see docs folder
Demo
Props
| props | type | required | default | description |
|---|---|---|---|---|
| width | number | true | 350 | the width of hovertable |
| height | number | true | 350 | the height of hovertable |
| row | number | true | 12 | how many rows in hovertable |
| column | number | true | 12 | how many columns in hovertable |
| selectedRow | number | false | null | selected row |
| selectedColumn | number | false | null | selected column |
| onMouseOver | function | false | () => {} | this will be trigger when mouse over, with two params, e: event object, data: {rowNumber, columnNumber, rollHeight, cellHeight} |
| onMouseOut | function | false | () => {} | this will be trigger when mouse out |
| onClick | function | false | () => {} | this will be trigger when mouse over, with two params, e: event object, data: {rowNumber, columnNumber, rollHeight, cellHeight} |
| showDimension | boolean | false | true | show dimension div or not |
| theme | string | false | dark | see styles folder in src for more theme options |
Example
clone the repository
node devServer.js
// open http://localhost:9393Maintainer
License
MIT © Canner