React-table: Custom pagination

Created on 10 Oct 2018 · 3Comments · Source: tannerlinsley/react-table

I didn't see the ability to control the appearance of the pager. I'm more interested in a Bootstrap-style pager. Eg.

Is that something currently do-able with react-table?

Source

mellis481

👍1

Most helpful comment

You can customize the Pagination using Component Overrides, here's a quick example:

<ReactTable
  // ...
  PaginationComponent={Pagination}
/>

class Pagination extends React.Component {
  render = () => (
    <div>
      You are on page {this.props.page + 1} of {this.props.pages}.
    </div>
  );
}

tessakindel on 11 Oct 2018

👍4

All 3 comments

You can customize the Pagination using Component Overrides, here's a quick example:

<ReactTable
  // ...
  PaginationComponent={Pagination}
/>

class Pagination extends React.Component {
  render = () => (
    <div>
      You are on page {this.props.page + 1} of {this.props.pages}.
    </div>
  );
}

tessakindel on 11 Oct 2018

👍4

@alexkindel Awesome. Thanks! I'm using Typescript. What is the type of props the Pagination Component uses?

mellis481 on 11 Oct 2018

I am passing the customPagination in the same manner as above; but i am facing a warning message of Failed prop type: Invalid prop PaginationComponent supplied to ReactTable.
Any idea what can be the cause