React-bootstrap-table2: Filters in a separate row for better styling

[nbp-admin]

Hi

I think it would be nice if filters could have their own row, as it would make styling/positioning nicer. This is how it looks in our old version, where we use https://datatables.net/.

Notice that the textboxes are in a separate row. This means that, even if the titles wrap over multiple lines, all the textboxes align nicely.

Here is the same section implemented in react-bootstrap table

As you can see the textbox for the second column is not aligned with the rest.

The jQuery datatables plugin uses a tfoot section for the filter row.

just an idea. Do you think it would require a lot of work?

[jendamozna]

did you try header formatter an display flex?

[nbp-admin]

Hi @jendamozna . Do you mean something like this?

[AllenFang]

headerFormatter is a way to custom the header, I think it's not a good solution for @nordicbondpricing 's requirement. So far we don't have this feature and it's minor for me to implement it, so PR is welcome.

[ptah23]

Has anyone picked this up? if not, i can give it a go

[nbp-admin]

Hi @ptah23 , that would be awesome! I haven't had the time to look at it unfortunately

[AllenFang]

@ptah23 PR is welcome

[aogaili]

I think this is really good to have, the clutter in the table header when the filters are enabled make the filters not very usable.

[AllenFang]

RELEASE NOTE

Now you can apply filterPosition on BootstrapTable -> https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#filterposition-string

[nbp-admin]

Tanks a bunch @aliogaili and @AllenFang. Much appreciated!