Negligible Psychological Misery

    react-treegrid-2

    1.0.3 • Public • Published

    React-TreeGrid

    This is improved version of original react-treegrid. I just added row level onClick reaction which makes that grid useful. Also added button type as cell content with callback React TreeGrid is a react component built to easily render a table showing the properties of objects in a tree structure. Sample image: https://drive.google.com/file/d/1oItGtDvPLN8Ut8ha6UfCCcqlx3FrF4Gw/view

    Installation

    npm install react-treegrid-2
    

    Usage

    Example:

    <TreeGrid
        data={[
            {
                name: "item 1"
                qty: 2,
                children: [
                    {
                        name: "item 1.1",
                        qty: 1
                    }
                ]
            },
            {
                name: "item 2",
                qty: 4
            }
        ]}
        options={{
            fields: [
                { 
                    property: 'name',
                    colHeader: 'Name',
                    width: '70%' 
                },
                {
                    property: 'qty',
                    colHeader: 'Quantity',
                    format: (value) => value.toFixed(2)
                }, 
                // Custom field with button
                            {
                                    type: 'button',
                                    callback: this.addOrganization,
                                    // In case you need internationaliation pass FormattedMessage as header 
                                    // and button caption
                                    colHeader: <FormattedMessage id="org.edit.type" defaultMessage="Action"/>,
                                    caption: <FormattedMessage id="org.edit.type" defaultMessage="Add sub-org"/>,
                                    width: '5%'
                          }
            ]
        }}
    />
    

    Notes:

    • Styling not yet supported
    • The children attribute is reserved for the objects that will be shown inside the parent

    Props

    callback If you need on click reaction then attach callback. It will return data section related with current row. onRowClick = (data) => { alert(data); }

    callback={this.onRowClick}

    data Data to be displayed. Should be an array of objects. Each object's children property should be an array of nested objects.

    data = [
        {
            name: "item 1"
            qty: 2,
            children: [
                {
                name: "item 1.1",
                qty: 1
                }
            ]
        },
        {
            name: "item 2",
            qty: 4
        }
    ]
    

    options Object that can contain the properties:

    • fields - Required fields should be an array containing one object for each data property that should be displayed. This object can have the properties:

    • property - Required The name of the data property (e.g. "name")

    • colHeader - Required The text to be shown on the table header (e.g. "Name")

    • type By default fields have type 'text', but in case button needed specify type: 'button'

    • caption Only applicable for type 'button'

    • callback Only applicable for type 'button' callback: this.onButtonClick

    • width The width of the column (e.g. "50%")

    • format A function that receives the data value, and returns a formatted text to be shown (e.g. (value) => value.toFixed(2)

    options = {
        fields: [
            { 
                property: 'name',
                colHeader: 'Name',
                width: '70%' 
            },
            {
                property: 'qty',
                colHeader: 'Quantity',
                format: (value) => value.toFixed(2)
            }
        ]
    }
    

    Install

    npm i react-treegrid-2

    DownloadsWeekly Downloads

    4

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    227 kB

    Total Files

    18

    Last publish

    Collaborators

    • atelyshev