React-bootstrap-table2: ToolkitProvider and PaginationProvider not working together

Created on 4 Jan 2019  路  19Comments  路  Source: react-bootstrap-table/react-bootstrap-table2

Is it possible to have a fully custom pagination component with the toolkit provider that provides search capabilities?

How do you pass the props for data through to both modules?
Below code shows the two wrapped components. Also I have enabled remote for Pagination, does PaginationProvider currently support remote?

    <Row>
          <PaginationProvider
            pagination={paginationFactory({
              custom: true,
              totalSize,
              page,
              sizePerPage,
            })}
            keyField="id"
            columns={columns}
            data={data}
          >
            {
              ({
                paginationProps,
                paginationTableProps,
              }) => (
                <div>
                  <ToolkitProvider
                    bootstrap4
                    search
                    {...paginationTableProps}
                  >
                    {
                      props => (
                        <Col>                     
                          <Row>
                            <SearchBar
                              placeholder="Search customers and invoices..."
                              {...props.searchProps}
                            />
                          </Row>
                          <Row>
                            <BootstrapTable
                              ref={n => this.node = n}
                              noDataIndication="No results!"
                              headerClasses={style.header}
                              rowClasses={style.row}
                              bordered={false}
                              defaultSorted={[{
                                dataField: 'Name',
                                order: 'desc',
                              }]}
                              remote={{
                                filter: true,
                                pagination: true,
                                sort: true,
                              }}
                              selectRow={selectRow}
                              expandRow={expandRow}
                              onTableChange={this.handleTableChange}
                              // pagination={paginationFactory({ page, sizePerPage, totalSize })}
                              {...paginationTableProps}
                              {...props.baseProps}
                            />
                            <PaginationListStandalone
                              {...paginationProps}
                            />
                            <SizePerPageDropdownStandalone
                              {...paginationProps}
                            />
                          </Row>
                        </Col>
                      )
                    }
                  </ToolkitProvider>
                </div>
              )
            }
          </PaginationProvider>
        </Row>

TypeError: _this.props.isRemotePagination is not a function

picture AshCorah

Most helpful comment

@AllenFang I am sorry to hear that, I hope you feel better! I came here with the same issue. Is there a work around example?

picture eslynunez on 17 Jan 2019
👍6

All 19 comments

馃憤

oitozero picture oitozero on 4 Jan 2019
👍2

@AshCorah @oitozero sorry, I didn't provide a example to show how to use remote mode in custom pagination.

Following is an example:

const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
  <div>
    <PaginationProvider
      pagination={
        paginationFactory({
          custom: true,
          page,
          sizePerPage,
          totalSize
        })
      }
    >
      {
        ({
          paginationProps,
          paginationTableProps
        }) => (
          <div>
            <div>
              <p>Current Page: { paginationProps.page }</p>
              <p>Current SizePerPage: { paginationProps.sizePerPage }</p>
            </div>
            <div>
              <PaginationListStandalone
                { ...paginationProps }
              />
            </div>
            <BootstrapTable
              remote
              keyField="id"
              data={ data }
              columns={ columns }
              onTableChange={ onTableChange }
              { ...paginationTableProps }
            />
          </div>
        )
      }
    </PaginationProvider>
    <Code>{ sourceCode }</Code>
  </div>
);
AllenFang picture AllenFang on 5 Jan 2019

I will also check if there's any issue when use search and pagination, thanks

AllenFang picture AllenFang on 5 Jan 2019

BTW please upgrade react-bootstrap-table-next to version 2

https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/12/24/version.bump.html

If you want to have new pagination customization mechanism, please upgrade below packages to version 2

[email protected]
[email protected]

AllenFang picture AllenFang on 5 Jan 2019

Is there any way to get your above example working with ToolkitProvider? I think this is where the issue is

AshCorah picture AshCorah on 7 Jan 2019

Doesn't seem to work. 

<Row>
          <PaginationProvider
            pagination={paginationFactory({
              custom: true,
              page,
              sizePerPage,
              totalSize,
            })}
          >
            {
              ({
                paginationProps,
                paginationTableProps,
              }) => (
                <SearchWrapper
                  totalSize={totalSize}
                  error={error}
                  loading={loading}
                  data={data}
                  columns={columns}
                  orgName={orgName}
                  showSelectAllOption={showSelectAllOption}
                  allSelected={allSelected}
                  handleSelectAllAcrossAllPages={this.handleSelectAllAcrossAllPages}
                  handleGetSelectedData={this.handleGetSelectedData}
                >
                  {!loading ? (
                    <BootstrapTable
                      ref={n => this.node = n}
                      noDataIndication="No results!"
                      headerClasses={style.header}
                      rowClasses={style.row}
                      bordered={false}
                      defaultSorted={[{
                        dataField: 'Name',
                        order: 'desc',
                      }]}
                      remote
                      selectRow={selectRow}
                      expandRow={expandRow}
                      {...paginationTableProps}
                      onTableChange={this.handleTableChange}
                    />
                  ) : (
                    <div className={style.center}>
                      <LoadingToast title="Loading Customers..." />
                    </div>
                  )}
                </SearchWrapper>
              )
            }
          </PaginationProvider>
        </Row>

Where my SearchWrapper is the toolkit provider rendering toolkit baseProps to bootstrap table

<Row>
        <ToolkitProvider
          keyField="id"
          data={data}
          columns={columns}
          bootstrap4
          search
        >
          {
            toolkit => (

<Row>
       {React.cloneElement(children, { ...toolkit.baseProps })}
</Row>

I get the following errors:

```
state-context.js:264 Uncaught TypeError: Cannot read property 'emit' of undefined
at StateProvider.isRemotePagination (state-context.js:264)
at StateProvider.componentWillReceiveProps (state-context.js:141)
at callComponentWillReceiveProps (react-dom.development.js:13047)
at updateClassInstance (react-dom.development.js:13260)
at updateClassComponent (react-dom.development.js:14860)
at beginWork (react-dom.development.js:15716)
at performUnitOfWork (react-dom.development.js:18750)
at workLoop (react-dom.development.js:18791)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at replayUnitOfWork (react-dom.development.js:17998)
at renderRoot (react-dom.development.js:18909)
at performWorkOnRoot (react-dom.development.js:19812)
at performWork (react-dom.development.js:19722)
at performSyncWork (react-dom.development.js:19696)
at requestWork (react-dom.development.js:19551)
at scheduleWork (react-dom.development.js:19358)
at Object.enqueueSetState (react-dom.development.js:12789)
at Provider.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:354)
at Provider.js:53
at dispatch (redux.js:214)
at index.js:11
at index.js:120
at dispatch (redux.js:613)
at handleFulfill (index.js:208)
isRemotePagination @ state-context.js:264
componentWillReceiveProps @ state-context.js:141
callComponentWillReceiveProps @ react-dom.development.js:13047
updateClassInstance @ react-dom.development.js:13260
updateClassComponent @ react-dom.development.js:14860
beginWork @ react-dom.development.js:15716
performUnitOfWork @ react-dom.development.js:18750
workLoop @ react-dom.development.js:18791
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
replayUnitOfWork @ react-dom.development.js:17998
renderRoot @ react-dom.development.js:18909
performWorkOnRoot @ react-dom.development.js:19812
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
enqueueSetState @ react-dom.development.js:12789
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:354
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
(anonymous) @ index.js:11
(anonymous) @ index.js:120
dispatch @ redux.js:613
handleFulfill @ index.js:208
Promise.then (async)
(anonymous) @ index.js:234
./src/index.js @ index.js:120
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ serviceWorker.js:137
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1452 The above error occurred in the component:
in StateProvider (created by CustomizableProvider)
in CustomizableProvider (at CustomerTable/index.jsx:401)
in div (created by Row)
in Row (at CustomerTable/index.jsx:400)
in div (created by Container)
in Container (at CustomerTable/index.jsx:399)
in CustomerList (created by Context.Consumer)
in Connect(CustomerList) (at App.jsx:24)
in div (at App.jsx:22)
in App (created by Context.Consumer)
in Connect(App) (at src/index.js:130)
in Provider (at src/index.js:130)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
function.console.(anonymous function) @ index.js:1452
logCapturedError @ react-dom.development.js:16489
logError @ react-dom.development.js:16524
update.callback @ react-dom.development.js:17499
callCallback @ react-dom.development.js:11592
commitUpdateEffects @ react-dom.development.js:11632
commitUpdateQueue @ react-dom.development.js:11622
commitLifeCycles @ react-dom.development.js:16779
commitAllLifeCycles @ react-dom.development.js:18160
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18365
completeRoot @ react-dom.development.js:19894
performWorkOnRoot @ react-dom.development.js:19817
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
enqueueSetState @ react-dom.development.js:12789
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:354
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
(anonymous) @ index.js:11
(anonymous) @ index.js:120
dispatch @ redux.js:613
handleFulfill @ index.js:208
Promise.then (async)
(anonymous) @ index.js:234
./src/index.js @ index.js:120
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ serviceWorker.js:137
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1452 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in CustomerList (created by Context.Consumer)
in Connect(CustomerList) (at App.jsx:24)
in div (at App.jsx:22)
in App (created by Context.Consumer)
in Connect(App) (at src/index.js:130)
in Provider (at src/index.js:130)
function.console.(anonymous function) @ index.js:1452
warningWithoutStack @ react-dom.development.js:520
warnAboutUpdateOnUnmounted @ react-dom.development.js:17886
scheduleWork @ react-dom.development.js:19331
enqueueSetState @ react-dom.development.js:12789
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:354
_callee$ @ index.jsx:95
tryCatch @ runtime.js:62
invoke @ runtime.js:288
prototype.(anonymous function) @ runtime.js:114
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
(anonymous) @ index.jsx:40
_callee5$ @ index.jsx:64
tryCatch @ runtime.js:62
invoke @ runtime.js:288
prototype.(anonymous function) @ runtime.js:114
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
componentDidMount @ index.jsx:65
commitLifeCycles @ react-dom.development.js:16722
commitAllLifeCycles @ react-dom.development.js:18160
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18365
completeRoot @ react-dom.development.js:19894
performWorkOnRoot @ react-dom.development.js:19817
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
scheduleRootUpdate @ react-dom.development.js:20062
updateContainerAtExpirationTime @ react-dom.development.js:20088
updateContainer @ react-dom.development.js:20156
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20435
(anonymous) @ react-dom.development.js:20589
unbatchedUpdates @ react-dom.development.js:19939
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20585
render @ react-dom.development.js:20652
./src/index.js @ index.js:130
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ serviceWorker.js:137
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
state-context.js:264 Uncaught (in promise) TypeError: Cannot read property 'emit' of undefined
at StateProvider.isRemotePagination (state-context.js:264)
at StateProvider.componentWillReceiveProps (state-context.js:141)
at callComponentWillReceiveProps (react-dom.development.js:13047)
at updateClassInstance (react-dom.development.js:13260)
at updateClassComponent (react-dom.development.js:14860)
at beginWork (react-dom.development.js:15716)
at performUnitOfWork (react-dom.development.js:18750)
at workLoop (react-dom.development.js:18791)
at renderRoot (react-dom.development.js:18876)
at performWorkOnRoot (react-dom.development.js:19812)
at performWork (react-dom.development.js:19722)
at performSyncWork (react-dom.development.js:19696)
at requestWork (react-dom.development.js:19551)
at scheduleWork (react-dom.development.js:19358)
at Object.enqueueSetState (react-dom.development.js:12789)
at Provider.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:354)
at Provider.js:53
at dispatch (redux.js:214)
at index.js:11
at index.js:120
at dispatch (redux.js:613)
at handleFulfill (index.js:208)```

AshCorah picture AshCorah on 9 Jan 2019

馃憤

oitozero picture oitozero on 11 Jan 2019

sorry, I got serious disease, I will look into this issue again in this weekend, thanks

AllenFang picture AllenFang on 15 Jan 2019

@AllenFang I am sorry to hear that, I hope you feel better! I came here with the same issue. Is there a work around example?

eslynunez picture eslynunez on 17 Jan 2019
👍6

@eslynunez you also enable the remote mode? maybe an example will be appreciated 馃憤

AllenFang picture AllenFang on 19 Jan 2019

@eslynunez @AshCorah i can not reproduce this error, following is my code, hope someone can indicate how to reproduce this issue, thanks

const RemoteFilter = ({
  data,
  totalSize,
  page,
  sizePerPage,
  onTableChange
}) => (
  <div>
    <PaginationProvider
      pagination={ paginationFactory({
        custom: true,
        totalSize,
        page,
        sizePerPage
      }) }
      keyField="id"
      columns={ columns }
      data={ data }
    >
      {
        ({
          paginationProps,
          paginationTableProps
        }) => (
          <ToolkitProvider
            keyField="id"
            columns={ columns }
            data={ data }
            search
          >
            {
              toolkitprops => (
                <SearchBar { ...toolkitprops.searchProps } />
                <BootstrapTable
                  { ...toolkitprops.baseProps }
                  { ...paginationTableProps }
                  remote={ { search: true, pagination: true } }
                  onTableChange={ onTableChange }
                />
                <PaginationListStandalone { ...paginationProps } />
              )
            }
          </ToolkitProvider>
        )
      }
    </PaginationProvider>
  </div>
);
AllenFang picture AllenFang on 19 Jan 2019

Reproduced with your example:
Following packages:
"react-bootstrap-table-next": "^2.0.0",
"react-bootstrap-table2-filter": "^1.1.0",
"react-bootstrap-table2-paginator": "^2.0.0",
"react-bootstrap-table2-toolkit": "^1.1.1",

image

AshCorah picture AshCorah on 22 Jan 2019

@AshCorah ok, cool. now,,, I dont know how to reproduce this. any more idea?

AllenFang picture AllenFang on 22 Jan 2019

https://codesandbox.io/s/2x3m5jz1wp I just create an example on codesandbox, it work well and no error happen @AshCorah

AllenFang picture AllenFang on 22 Jan 2019

I will reopen this issue if anyone can tell me or show me how to reproduce this issue,

AllenFang picture AllenFang on 22 Jan 2019

Thanks for this - I'll try and use your example on codesandbox to figure out what is happening here. Could this be anything to do with me using Redux in my application?

AshCorah picture AshCorah on 22 Jan 2019

@AshCorah i think react-bootstrap-table2 is compatible with any state management like Mobx or Redux.

Anyway, I encourage developer to write an example on codesandbox for reproducing issue, here is a basic example to create it:

https://codesandbox.io/s/jlol04qrxv

AllenFang picture AllenFang on 23 Jan 2019

Hey Allen,
image 馃帀

Finally sorted this, styled component above - I'm not sure what was wrong, maybe I wasn't passing the correct props but your examples were extremely useful at fixing my problem.

Thanks a lot!

AshCorah picture AshCorah on 25 Jan 2019
🎉1

@AshCorah Please how were you able to combine both the ToolkitProvider and PaginationProvider together. Please, can you show your working example?

dejongbaba picture dejongbaba on 8 Aug 2019
👍4
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dillobird picture dillobird  路  3Comments
primakashi picture primakashi  路  3Comments
epsyan picture epsyan  路  4Comments
josefheld picture josefheld  路  3Comments
SandeepKapalawai picture SandeepKapalawai  路  3Comments