Search code examples
reactjsreact-bootstrap-table

Assigning function to dataFormat BootstrapTable


If you could help me out, is it possible while using js map, to assign function to react-bootstrap-table dataFormat ...

<BootstrapTable data={this.state.users} data-url="data.json" hover pagination={true}
                search ClassName="table" options={options} 
                data-response-handler="responseHandler" exportCSV={true}>
{
   this.state.userAdminGrid.columns.map((vis, index) => {
   <TableHeaderColumn dataSort key={index} 
                      dataField={vis.field} 
                      isKey={vis.isKey} 
                      hidden={!vis.checked}
                      dataAlign="center" 
                      dataFormat={vis.fieldFormat}>
           {vis.fieldDescription}
   </TableHeaderColumn>
})
}
</BootstrapTable>

this.state.userAdminGrid.columns look like this, basically only last column needs dataFormat, where I wish to assign function named isActiveFormat

columns: Array(6)
0: {fieldId: 1, field: "userId", fieldDescription: "Id", checked: false, order: 9, …}
1: {fieldId: 4, field: "surename", fieldDescription: "Prezime", checked: true, order: 1, …}
2: {fieldId: 3, field: "name", fieldDescription: "Ime", checked: true, order: 2, …}
3: {fieldId: 2, field: "username", fieldDescription: "Username", checked: true, order: 5, …}
4: {fieldId: 5, field: "roleDescription", fieldDescription: "Rola", checked: true, order: 6, …}
5:
   checked: true
   field: "isActive"
   fieldDescription: "Aktivan"
   fieldFormat: "isActiveFormat"
   fieldId: 6
   isKey: false
   order: 8
__proto__: Object
length: 6
__proto__: Array(0)

Function isActiveFormat looks like

isActiveFormat(cell) {
    console.log("I got in");
    return (
        <Toggle on={'Aktivan'} off={'Neaktivan'} size="xs" offstyle="danger" active={cell} />
    );
}

This is a structure, because I am keeping grid columns in DB, and each user can chose order and columns which he wishes to see, isActive column is simple bool, in which I would like to use react-bootstrap-toggle control ...


Solution

  • you can call function like that dataFormat={this[vis.fieldFormat]}> or dataFormat={() => this[vis.fieldFormat]()}>