react-comparison-table
v1.0.3
Published
A comparison table component for react.
Downloads
180
Readme
react-comparison-table
A comparison table component for react.
Install
npm install react-comparison-table --save
Demo
Click here for demo.
Usage
Here is how to get things started.
import React from 'react';
import { render } from 'react-dom';
import CompareChart from '../../src';
var data = [
{ Name: "Product 1", id: "1",
image: "https://goo.gl/Wk14oo",
feature1: "feature 1 of product 1",
feature2: "feature 2 of product 1",
feature3: "feature 3 of product 1" },
{ Name: "Product 2", id: "2" ,
image: "https://goo.gl/Wk14oo",
feature2: "feature 2 of product 2",
feature3: "feature 3 of product 2"},
{ Name: "Product 3", id: "3",
image: "https://goo.gl/Wk14oo",
feature1: "feature 1 of product 3",
feature2: "feature 2 of product 3",
feature3: "feature 3 of product 3" },
{ Name: "Product 4", id: "4",
image: "https://goo.gl/Wk14oo",
feature1: "feature 1 of product 4",
feature2: "feature 2 of product 4",
feature3: "feature 3 of product 4" }
];
const App = () => (
<div style={{width:"75%", marginLeft:"auto", marginRight:"auto"}}>
<CompareChart
data={data}
features={["feature1","feature3"]}/>
</div>
);
render(<App />, document.getElementById("root"));
Item hiding
This option gives you the option to hide products. To enable the item hiding option use the property
hideItemOption
.
<CompareChart
data={data}
features={["feature1","feature3"]}
hideItemOption = {true}
/>
On enabling the option a trash icon appears next item names in the chart. By default clicking the trash icon removes that item from the list of items provided to the
data
property.
You can override this behavior by using the
onHide
property.
const App = () => (
<div style={{width:"75%", marginLeft:"auto", marginRight:"auto", marginTop: "5%"}}>
<CompareChart
data={data}
features={["feature1","feature3"]}
hideItemOption = {true}
onHide = {onHideCallback}
/>
</div>
);
const onHideCallback = (product_id) => {
console.log("Hide product with id - " + product_id);
}