Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PaginationProvider + ToolkitProvider Issues

See original GitHub issue

@AllenFang

I can reproduce the bug described in https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/495 in the latest version:

react-bootstrap-table-next@3.0.0 react-bootstrap-table2-toolkit@1.3.1 react-bootstrap-table2-paginator@2.0.3 react-bootstrap-table2-filter@1.1.5

In addition, I have a related issue. To reproduce:

There are more than 10 rows and sizePerPage is 10.
Search for some “SearchTerm1” in the SearchBar that returns 2 pages of results.
Clear the search
Go to page 3
Search for the same “SearchTerm1”

Like above, it throws the following error and crashes the app: Uncaught TypeError: Cannot read property 'name' of undefined … where ‘name’ is the keyField passed to the ToolkitProvider.

I would really appreciate your help with this. And thank you for this library.

_Originally posted by @yzhak in https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/495#issuecomment-468755808_

Issue Analytics

State:
Created 5 years ago
Comments:10 (4 by maintainers)

Top GitHub Comments

1reaction

MugssyBoycommented, Sep 21, 2020

I solved mine by passing pagination in the BoostrapTable component.

<ToolkitProvider
  keyField="id"
  data={data}
  columns={columns}
  search
  >
   {props => (
    <div>
      <SearchBar {...props.searchProps} />
        <BootstrapTable {...props.baseProps} pagination={paginationFactory()} />
      </div>)}
 </ToolkitProvider>

0reactions

jabberwocommented, Mar 4, 2021

this is my codesandbox with newest packages

https://codesandbox.io/s/56qn2o1wl

Fails with the same error as OP’s sandbox.

Top Results From Across the Web

react bootstrap table2 pagination warning: Encountered two ...

I want to resolve this warning. Because every time I click a button. The error count increases.

react-bootstrap-table-next - basic example - CodeSandbox

import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit";. import paginationFactory, {. PaginationProvider,. SizePerPageDropdownStandalone,.

Pagination · react-bootstrap-table2 - GitHub Pages

PaginationProvider actually is a wrapper for the consumer of react context so that you are able to get the props from context then...

A brand new website interface for an even better experience!

ToolkitProvider and PaginationProvider not working together.

react phone number formatter - You.com | The AI Search ...

Without using dangerouslySetInnerHTML the main problem is breaking the string ... import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit"; ...