Have ideas to improve npm?Join in the discussion! »

    itsa-react-table

    16.7.1 • Public • Published

    Build Status

    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:

    1. You can use the css-files inside the css-folder.
    2. You can use: Component = require("itsa-react-table/lib/component-styled.jsx"); and build your project with webpack. This is needed, because you need the right plugin to handle a requirement of the scss-file.

    View live example

    API

    Install

    npm i itsa-react-table

    DownloadsWeekly Downloads

    10

    Version

    16.7.1

    License

    BSD-3-Clause

    Unpacked Size

    1.31 MB

    Total Files

    43

    Last publish

    Collaborators

    • avatar