react-table-strap

Install

npm

npm install react-table-strap

Dependencies

It is highly recommended to use below package as a dependency. Some functionality may not work if they are not used

• bootstrap
• react-bootstrap
• @fortawesome/fontawesome-free
• jquery
• react
• react-dom

ScreenShot

Usage

import TableStrap from 'react-table-strap';
 ...
// if remote pagination
state = {
    paginationOptions: {
        page: 1,
        sizePerPage: 10,
        totalSize: undefined,
    },
}
    
...

const data =[
    {
        id: 1,
        firstName: {first:"Sonni", second:" Baldo"},
        lastName: "Gabotti",
        email: "[email protected]",
        userName: "sgabotti0",
        gender: "Female",
        status: 0,
        dateOfBbirth: "10/14/1950",
        ipAddress: "251.237.126.210",
        type: 1,
        _userId: 1,
        _createdDate: "09/07/2016",
        _updatedDate: "05/31/2013"
    },
    {
        id: 2,
        firstName: {first:"Abie", second:"Yenn"},
        lastName: "Cowperthwaite",
        email: "[email protected]",
        userName: "acowperthwaite1",
        gender: "Male",
        status: 1,
        dateOfBbirth: "12/31/1998",
        ipAddress: "239.176.5.218",
        type: 1,
        _userId: 2,
        _createdDate: "03/18/2014",
        _updatedDate: "08/17/2016"
    }]
    
    const columns= [
            {
                dataField: "firstName",
                text: "User Name",
                formatter: (cell, row, rowIndex) => {
                    return <div className={"text-danger"}>{row.firstName.first + " " + row.lastName}</div>
                },
                filter: i18n.t('filtrele'),
                sort:true
            }, {
                dataField: "firstName.second",
                text: "Second Name",
                classes: 'align-middle text-right',
                style:{fontSize:"12px"},
                sort:true,
                collapsable:true //colomn collapse and hidden, it can be seen in popover
            }, {
                dataField: "email",
                text: "Email",
                hidden: !this.state.isEmailShown
            }, {
                dataField: "dateOfBbirth",
                text: "Date Of Birth",
            filter:true,
            dropDownFilter:[
                i18n.t('2000'),
                i18n.t('2001'),
                i18n.t('2002'),
                i18n.t('2003')],
            }
        ];

handleSelection = (row) => {
    this.setState({...this.state, selectedTableRow: row}); //row[0] if radioButton(isMulti={false}), row if checkbox(isMulti={true})
}


//if any extra info needed depends on a button
    const expandRow = {
        renderer: row => {
            return <Row className={"text-success d-inline-block "}>
               Some extra info which will be shown in overlay popup
            </Row>
        }
    
    }
...

//no remote pagiantion
<TableStrap data={data} columns={columns} keyField={"id"}
            isSelectable={true}
            isMulti={true}  //multiselection - checkbox
            filter
            isMultiFilter={true} //filter by any column
            selectRowOnClick={true} // if true you can select row as click on it. if false you should click on radio/checkbox
            rowStyle={{backgroundColor:"red"}}
            bodyClasses={"table-body-small"}
            headerClasses={"table-header "}
            noDataIndication={"No data found"}
            expandRow={expandRow}
/>

//if remote pagiantion
<TableStrap data={data} columns={columns} keyField={"id"}
            isSelectable={true}
            isMulti={true} 
            filter
            isMultiFilter={true} //filter by any column
            selectedRows={this.handleSelection}
            expandRow={expandRow}
            rowStyle={{backgroundColor:"red"}}
            bodyClasses={"table-body-small"}
            headerClasses={"table-header"}
            noDataIndication={"No data found"}
            selectRowOnClick={true} // if true you can select row by clicking on row. if false you should click on radio/checkbox
            remote  
            paginationOptions={this.state.paginationOptions}
            onTableChange={(paginationOpt, search) => this.onTableChange(paginationOpt, search)}
            
/>

...