bootstrap-react-treetable v2.0.2

bootstrap-react-treetable

A React component that presents a simple TreeTable, allowing the user to supply styling and rendering options. A default styling (using Bootstrap 4) is also available.

Installation

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

Usage

Firstly, import the component as follows:

import BootstrapTreeTable from 'bootstrap-react-treetable';

Then include it in your components as follows:

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

See our Demo page to see the component in action.

BootstrapTreeTable 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.

Should you wish to have multiple header rows, you can supply a topRows prop. These rows are rendered above the main header row for the table. This prop is an array of arrays of objects.

The colspan values should add up to the number of columns in the regular table, or odd things will happen with your display.

NOTE: this plugin doesn't do any checking on the colspan and rowspan numbers you put in - it's up to you to ensure you've got the values correct. Also, you cannot span columns or rows on the main table headers (the one which is used for sorting).

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 a simple type (string, number etc) or HTML - see the example below:

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

Styling

The component is styled using Bootstrap 4 classes. Bootstrap 4 is a peer dependency, so it needs to be provided by the project using this one.

Sorting

The table can be sorted by default, simply set the sortOrder attribute of the relevant column.

Clicking the header of any column will sort by that column, in ascending order. Clicking again will sort in descending order. Appropriate icons are used to indicate the sort order.

You can prevent sorting of a specific column by simply setting the sortable attribute of the relevant column to false.

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

Development

Use yalc instead of "npm link".