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

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

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 19 (10 by maintainers)

Most upvoted comments

@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 on Jan 17, 2019

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

dejongbaba on Aug 8, 2019

Hey Allen, 🎉

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 on Jan 25, 2019

👍

oitozero on Jan 4, 2019

@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 on Jan 5, 2019