npm install react-table-strap
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
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: "sgabotti0@wsj.com",
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: "acowperthwaite1@storify.com",
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)}
/>
...