itsa-react-table
Editable React.js table.
This is the very first setup (0.0.1). It is working well, but there will probably be many updates.
Key features:
- editable
- focusable
- extendable
How to use:
import "purecss";
const React = require("react"),
ReactDOM = require("react-dom"),
Component = require("./lib/component-styled.jsx");
var data = [
{ id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
{ id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
{ id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75" }
],
columns = [
"id",
{ key: "name", label: "part name" },
"price",
"cost"
];
const changeData = newData => {
props.data = newData;
renderTable(props);
};
let props = {
autoFocus: true,
disabled: false,
tableClass: 'pure-table pure-table-striped',
extendableY: true,
columns,
data,
rowHeader: true,
editable: 'full',
onChange: changeData
};
const renderTable = props => {
ReactDOM.render(
<Component {...props} />,
document.getElementById("component-container")
);
};
renderTable(props);
About the css
You need the right css in order to make use of itsa-react-table
. There are 2 options:
- You can use the css-files inside the
css
-folder. - You can use:
Component = require("itsa-react-table/lib/component-styled.jsx");
and build your project withwebpack
. This is needed, because you need the right plugin to handle a requirement of thescss
-file.