Customized Toolbar & Filters

[Dreculah]

Hi,

I really love using react-bootstrap-table...thank you for making such a great component, and even better documentation!

Our project needs to have a customized toolbar. Many of the features we need are already in your component, but some are not AND we need to put our own things in it. Also, we want to make row filters toggle-able and at the top of the grid vs at the bottom, etc.

Looking at BootstrapTable, it composes both toolbar and filters directly into the render().

How do you recommend we implement our custom toolbar/filters? I guess I can extend Toolbar, but that is going to be brittle since my code might break when react-bootstrap-table is updated. Maybe Toolbar could be made more custom-configurable? In lieu of any other direction, I can have a go at making a more customizable Toolbar class.

Please advise.

Thanks again!!!

[AllenFang]

Thanks a million a lots, @Dreculah. About your question, I'll make the ToolBar more customizable, and It really need some time. But I've some idea(HOC) in my mind which maybe work, it just need some experiments.
Anyway, could you please describe your customization? did you want to add some button or something like that in ToolBar?

anyway, thanks your feedback, it's really useful and give me some idea in future :)

[Dreculah]

Thanks, Allen.

Yes, we need to add some of our own buttons and also organize the built in toolbar buttons in a different order.

I was thinking that perhaps we could either separate the Toolbar from the Table definition and include it explicitly along with the components we want to include, like this (my favorite):

                <BootstrapTable
                    ref="myBootstrapTable"
                    height='600px'
                    data={ data }
                    striped={ true }
                    hover={ true }
                    bordered={ false }
                    selectRow={selectRowProp}
                >
                    <Toolbar {...this.props}  />
                        <Search  />
                        <InsertRow />
                        <Undo />
                    </Toolbar>
                    {columns}
                </BootstrapTable>

... or pass in the toolbar items as an array object like this:

                <BootstrapTable
                    ref="myBootstrapTable"
                    height='600px'
                    data={ data }
                    striped={ true }
                    hover={ true }
                    bordered={ false }
                    toolbarItems={[
                    'search',
                    'insertRow',
                    UndoButton
                   ]}
                >
                    {columns}
                </BootstrapTable>

[AllenFang]

@Dreculah, thanks your feedback, I've think about that, hope this solution could be work, but there's a lot of changing at internal.

[jsuzan]

choice of putting paging and filters to the top or bottom would be nice and I think much easer to implement for time being

[jflayhart]

I would love to have the option to simply set the location of search and sizePerPageList dropdown. So like sizePerPagePosition="top-left" or something.

Currently I have to do some seriously hacky stuff with CSS to put it up there D:

[AllenFang]

hi @jflayhart, check #497, I have planned to make these component more customizable in the future. So just wait the day of v3.0.0 release :)

[crazyUI]

+1 for customizable toolbar position

[AllenFang]

Forgot to mention here, v3.0.0 has been released about one month already, now we can custom the toolbar, please check example

BTW, currently, we dont support the position change feature, Hope I can support it ASAP.

[bpsourav21]

Hello guyz,
Somehow I managed to solve similar problem as you asked.I have used custom filter. And modified this filter as a select tag. In "Select Filter" it has an issue. It always required a object which is designed like below:
option:{0: "Rice", 1:"Pants", 2:"Shirts"}

But I have modified them using custom filter where I can use a list of array.

the demo code is given below:
bootstrap table code:

getCustomFilter(filterHandler, options) {
        return (
            <CustomFilter filterHandler={filterHandler} />
        );
    }
  render() {
 return (
<div>
<BootstrapTable data={this.props.all_products} search={true} pagination={true}>
                <TableHeaderColumn width="25%" dataField='product_code' isKey={true}>Product Code</TableHeaderColumn>
                <TableHeaderColumn width="25%" dataField='product_name'>Product Name</TableHeaderColumn>
                <TableHeaderColumn width="15%" dataField={this.state.selectField}>Product Name</TableHeaderColumn>
                <TableHeaderColumn width="15%" dataField="category" filter={{ type: 'CustomFilter', getElement: this.getCustomFilter.bind(this) }}>Category</TableHeaderColumn>
                <TableHeaderColumn width="20%" dataField='createdAt' dataFormat={this.dateFormatter.bind(this)} >Date</TableHeaderColumn>
            </BootstrapTable>
</div>
);

CustomFilter.js

dataSelected(filterHandler, e) {
    var value = e.target.value
    if (value == "Select") {
        filterHandler("")
    }
    else {
        filterHandler(value)
    }
}

render() {
    return (
        <select name="selectData" className="form-control" onChange={this.dataSelected.bind(this, this.props.filterHandler)}>
            <option value="Select" >Select</option>
            <option value="Rice">Rice</option>
            <option value="Shirt">Shirt</option>
            <option value="pants">pants</option>
        </select>
    );
}

=================================================================

here a screenshot is given of following work: