Seperate header filters from header cells. [Fix #1005]

[aogaili]

Fix #1005

This is first attempt at separating the filters from the header cell for better formatting.

Before:

After:

The after design is less cluttered and allow for more potential features to the footer row.

Behaviour Changes:

1. The filters are inserted using a new component Footer that renders tag.

2. Two new props are added to the table:
   2.1 filtersClasses: add classes to the
   2.2 filtersPosition: can be either "top" or "bottom", it uses table-footer-group and table
   header-group in the display attribute.

To do

• Add test cases for the Footer component, I've committed 3 failed test cases related to the previous formatting of the column filters.

[AllenFang]

@aliogaili it's a good start, I will take a look on it, thanks for your contribution

[AllenFang]

hello @aliogaili, In my opinion, we shouldn't move the existing filter to a new row. We are supposed to be support a new flag to indicate the position of filter. If I merge this PR that will be a big break change for all the users.

So please make this change as configurable. Thanks!

If you don't have time, please let me know, I can work on it based current patch, thanks

[aogaili]

Ah yes backward compatibility.

How about filtersPosition.oneOf['inline', 'row-top', 'row-bottom'] where the default is inline (current behaviour)?

If inline position, we pass the filters to the headerCell, otherwise we create a new tfoot row? frankly I think row-top should be the default, the current behaviour makes the header really cluttered and almost every grid I saw online had the filters on a new row.

[aogaili]

There is a bug in the current implementation.

When an expanded row is added, the filters row doesn't add a dummy column so the columns get misaligned. I'll take a closer look.

[AllenFang]

@aliogaili I think we should keep the default setting and let user to configure the position of filter will be better.

[aogaili]

Agreed, I think it's better to preserve the backward compatibility.

Aside from maintaining the default position, what about the implementation, are you ok with the general implementation approach?

[AllenFang]

@aliogaili sorry for lately reply, I think I'm fine with this implementation. Please update your code and let me know, I will do some regression test base on your PR, thanks again!!

[aogaili]

@AllenFang I've add a header position inline and defaulted the table to it so it should be backward compatible. Also I made sure to shift the filter cells when an expand row is used.

We need to enable the previous tests and add new ones for the filter rows. I hope you can take it from here.

[AllenFang]

@aliogaili , I will have look on this, thanks!

[AllenFang]

I fixed the conflicts and patch codes, Thanks you contributions

RELEASE NOTE

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

[aogaili]

Great Allen, good to hear.

I don't see it mentioned in the release notes though?