Custom table footer

[evan-p]

Are there any thoughts on implementing a custom footer? (a fixed row at the bottom of the table)

[AllenFang]

@vaggouras, there's no any way to do this, but you can add your custom component on the bottom of BootstrapTable.

render(){
    return (
        <div>
            <BootstrapTable data={product}>
                  //....
            </BootstrapTable>
            <CustomComponent />
        </div>
    );

}

[r1g0]

Hello @AllenFang is anyone working on this?

I'll give it a try! Could you give me any pointers? I was thinking that the easier way was to add a 'footer' prop to the TableHeaderColumns

[r1g0]

Hey, I managed to add a footer with this changes.

https://github.com/AllenFang/react-bootstrap-table/compare/master...r1g0:footer?diff=split&name=footer

It is not complete, but it works. Right now I was thinking that it needs to:

-Receive a footer class
-Have props to show or hide the footer (right now, it always shows)

Do you think of anything else?

[AllenFang]

hi @r1g0, sorry for lately reply. I thinks your two question is all available to implement base on you changing.

BTW, in v3.0.0, I've planned to make these component more customizable. But just need some time to do it :)

[OleksandrAntoniuk]

Hi, guys! I'm trying to add footer to react bootstrap table as on attached image. Is it possibe to do it? Could please share links or provide me some information?

[AllenFang]

@AntonukOM, sorry for long delay, I'll support it but without any schedule promise

[OleksandrAntoniuk]

Ok, will be wait for it. Thank you for feedback

[libasoles]

Hey there. Any news on these? Or the idea was abandoned?

I'm trying this: https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/footer/footer-table.js

Like:

const footerData = [[
            {
                label: '',
            },
            {
                label: 'Total $100',
                align: 'right'
            },
            {
                label: 'Total $250',
                align: 'right'
            },
        ]]

<BootstrapTable data={this.props.data} 
                                    options={config.tables.defaults}
                                    footerData={ footerData }
                                    footer >                                    
                                    {...all the stuff...}
</BootstrapTable>       

And nothing happens. No footer.
I'm using version 4.0.0

---

EDIT: upgraded to 4.3.1

Now I see the footer, but I just can't get it to work. The text won't render.

---

EDIT: solved it. columnIndex is mandatory.