simple-react-treetable v1.0.3

simple-react-treetable

A React component that presents a simple TreeTable, allowing the user to supply styling and rendering options.

Installation

Run the following command: npm install simple-react-treetable --save or yarn add simple-react-treetable --save

Usage

Firstly, import the component as follows:

import SimpleTreeTable from "simple-react-treetable";

Then include it in your components as follows:

<SimpleTreeTable tableData={this.props.tableData} columns={columns} control={control}/>

See our Demo page to see the component in action.

SimpleTreeTable expects data in the following format:

[
    {
        data: {
            name: "name0",
            dataType: "string0",
            example: "ex0",
            description: "desc0"
        },
        children: [
            {
                data: {
                    name: "name0-0",
                    dataType: "string0-0",
                    example: "ex0-0",
                    description: "desc0-0"
                },
                children: []
            }, {
                data: {
                    name: "name0-1",
                    dataType: "string0-1",
                    example: "ex0-1",
                    description: "desc0-1"
                },
                children: []
            }, {
                data: {
                    name: "name0-2",
                    dataType: "string0-2",
                    example: "ex0-2",
                    description: "desc0-2"
                },
                children: [
                    {
                        data: {
                            name: "name0-2-1",
                            dataType: "string0-2-1",
                            example: "ex0-2-1",
                            description: "desc0-2-1"
                        },
                        children: []
                    }
                ]
            }
        ]
    },
    {
        data: {
            name: "name1",
            dataType: "string1",
            example: "ex1",
            description: "desc1 € €"
        },
        children: []
    },
    {
        data: {
            name: "name2",
            dataType: "string2",
            example: "ex2",
            description: "desc2 € € € €"
        },
        children: []
    }
]

Configuration options

Obviously, the tableData prop is required. There is one other required prop:

columns is an array of objects, describing the columns to be rendered. The options within a column object are:

Further control of how the table is displayed can be provided using the control prop.

Rendering option

A function can be provided on a per-column basis to control the display of the data from that column.

This function should accept 2 parameters:

1. dataRow - the entire row of data being operated on
2. dataField - the name of the field within that row to be displayed

Thus the actual data for the column will be provided as dataRow.data[dataField]

The function should return HTML - see the example below:

let descriptionRenderer = function (dataRow, dataField) {
    return <span dangerouslySetInnerHTML={{__html: dataRow.data[dataField]}}></span>
};

Styling options

The table is by default entirely unstyled. To style it, simply provide a string of class names (separated by spaces) in the control.tableClasses prop.

For example, to use Bootstrap styling, you can pass "table table-bordered" to the prop, and assuming the Bootstrap CSS is available, the relevant styling will be applied.

Note that Bootstrap table striping won't work on a table where rows are expandable, as the striping is applied once at render time and doesn't adjust to the display changing.

Use as a simple DataTable

To use this component as a simple datatable (i.e. no expandable capabilities), simply provide a tableData prop with no children attributes.

Release History