<commit_before>Reactabular doesn't come with pagination. Instead you can use an external library, such as [react-pagify](https://github.com/bebraw/react-pagify), for this purpose. Just like with sorting or search, you will have to process your data through a paginator algorithm.

**Example:**

```react
<PaginationTable />
```
<commit_msg>docs - Add pagination code<commit_after>Reactabular doesn't come with pagination. Instead you can use an external library, such as [react-pagify](https://github.com/bebraw/react-pagify), for this purpose. Just like with sorting or search, you will have to process your data through a paginator algorithm.

**Example:**

```react
<PaginationTable />
```

```code
lang: jsx
---
import React from 'react';
import { compose } from 'redux';
import {
  Paginator, paginate, Search, generateData
} from './helpers';
import {
  Table, search
} from 'reactabular';

const schema = {
  type: 'object',
  properties: {
    id: {
      type: 'string'
    },
    name: {
      type: 'string'
    },
    age: {
      type: 'integer'
    }
  },
  required: ['id', 'name', 'age']
};
const data = generateData(100, schema);
const columns = [
  {
    header: {
      label: 'Name'
    },
    cell: {
      property: 'name'
    }
  },
  {
    header: {
      label: 'Age'
    },
    cell: {
      property: 'age'
    }
  }
];

export default class PaginationTable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      query: {}, // Search query
      columns,
      data,
      pagination: { // initial pagination settings
        page: 1,
        perPage: 10
      }
    };

    this.onSelect = this.onSelect.bind(this);
  }
  render() {
    const { data, columns, pagination, query } = this.state;
    const paginated = compose(
      paginate(pagination),
      search.multipleColumns({ columns, query })
    )(data);

    return (
      <div>
        <div className="search-container">
          <span>Search</span>
          <Search
            columns={columns}
            data={data}
            onChange={query => this.setState({ query })}
          />
        </div>

        <Table.Provider columns={columns} data={paginated.data} rowKey="id">
          <Table.Header />

          <Table.Body />
        </Table.Provider>

        <div className="controls">
          <Paginator
            pagination={pagination}
            pages={paginated.amount}
            onSelect={this.onSelect}
          />
        </div>
      </div>
    );
  }
  onSelect(page) {
    const pages = Math.ceil(
      this.state.data.length / this.state.pagination.perPage
    );

    this.setState({
      pagination: {
        ...this.state.pagination,
        page: Math.min(Math.max(page, 1), pages)
      }
    });
  }
}
```

{'fraction_non_alphanumeric': 0.137819359481828, 'fraction_numerical': 0.0025188916876574307, 'mean_word_length': 2.243873978996499, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 20, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7025837', 'n_tokens_mistral': 864, 'n_tokens_neox': 844, 'n_words': 217}