[Bug] Bad view for ReactBSTable when adding filters inputs

[Daniel-Raz-Supersmart]

Version

1.2.1

Reproduction link

https://www.creative-tim.com/

Operating System

Windows 10

Device

Desktop PC

Browser & Version

Google Chrome

Steps to reproduce

Use ReactBSTable Component with filters to the column header

What is expected?

Good appearance and correct width adjustment for each column

What is actually happening?

Hi, I have a problem when I add filters to the table. The input is too large and does not adjust to the size of the column, the same thing happens in the rows themselves that the columns override each other and do not fit the required width

---

Solution

here's my code: `const columns = [ { dataField: "id", text: "User ID", sort: true, filter: textFilter() }, { dataField: "userName", text: "User", sort: true, filter: textFilter() }, { dataField: "name", text: "Name", sort: true, filter: textFilter() }, { dataField: "email", text: "E-mail", sort: true, filter: dateFilter() }, { dataField: "systemRoles[0]", text: "Roles", sort: true, filter: numberFilter() }, { dataField: "enabled", text: "Enabled", sort: true, }, { dataField: "businessUnit[name]", text: "Store Name", sort: true, }, ]

return ( <>

                    <BootstrapTable
                        data={data}
                        columns={columns}
                        keyField={"id"}
                        bootstrap4={true}
                        pagination={
                            paginationFactory({
                                page: page,
                                sizePerPage: sizePerPage,
                                totalSize: totalSize,
                                alwaysShowAllBtns: true,
                                showTotal: true,
                                withFirstAndLast: false,
                            })}
                        loading={true}
                        noDataIndication={()=><div>Loading...</div>}
                        striped
                        remote
                        bordered={false}
                        hover
                        onTableChange={handleTableChange}
                        filter={filterFactory()}
                    />
                </Card>
            </div>
        </Row>
    </Container>
</>

)`

and Photo of how it looks:

Additional comments

I cannot provide a test link with minimal reproduction

[sajadevo]

Hi @Daniel-Raz-Supersmart Thanks for using our product, as you can see there are more fields in a column which makes the current behavior, you that we user the React BS Table library and you can customize the column width as your own wish.

All the best Sajad

[Daniel-Raz-Supersmart]

Another question please, it is possible instead of the input filter put a filter icon that once he pressed the input row open with a selection of the operators?

[sajadevo]

@Daniel-Raz-Supersmart You can do that but you need to have some sort of customization for the React BS Table, probably you should follow up the React BS Table docs to find the best possible way for doing that.

All the best Sajad