react-hovertable

react hovertable to select column and row in a table!

Installation

$ npm install --save react-hovertable

Usage

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

LIVE 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:9393

Maintainer

chilijung

License

MIT © Canner