Skip to content

Custom Pagination With Search Error data.filter #1567

@inDrimm

Description

@inDrimm

I'm using react-bootstrap-table-next, when using search with hard coded data it works fine. But when I use the API it returns a data.filter error

    {({ paginationProps, paginationTableProps }) => (
      <div>
        <ToolkitProvider keyField="id" columns={columns} data={data} search>
          {(toolkitprops) => (
            <div>
              <div className="">
                <span>Show&nbsp;</span>
                <SizePerPageDropdownStandalone {...paginationProps} />
                <span>&nbsp;entri</span>
                <div className="float-right">
                  <div className="input-group">
                    <SearchBar {...toolkitprops.searchProps} placeholder="Search" />
                    <div className="input-group-append">
                      <div className="input-group icon-size">
                        <span className="p-1">
                          <FaSearch style={{ fontSize: "25px", color: "#0fa49e" }} />
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <BootstrapTable
                hover
                {...toolkitprops.baseProps}
                {...paginationTableProps}
                wrapperClasses="table-responsive"
                noDataIndication={() => <NoDataIndication />}
                striped
                bordered={false}
                bootstrap4
                keyField="id"
              />
              <Form.Row style={{ display: "flex" }}>
                <Col xs={12} md={5}>
                  <PaginationTotalStandalone {...paginationProps} />
                </Col>
                <Col xs={12} md={5}>
                  <PaginationListStandalone {...paginationProps} />
                </Col>
              </Form.Row>
            </div>
          )}
        </ToolkitProvider>
      </div>
    )}
  </PaginationProvider>
  1. my computer
    image

  2. Codesandbox error
    image

https://codesandbox.io/s/redux-error-table-search-g47s7?file=/src/MyTable.js
@AllenFang

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions