question-mark
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.

Manual Pagination disables the sorting and column filtering

See original GitHub issue

I have a table which displays clinics. I have also a onPageChange prop which handles the pageIndex and then i fetch the data based on that page. Below is my table configuration

import 'react-table/react-table.css'
import React, { Component } from 'react';
import ClinicFormComponent from './newClinicForm';
import SearchFormComponent from '../search/searchForm';
import { connect } from 'react-redux';
import { fetchClinics, fetchClinic, deleteClinic, searchClinics, pushBreadcrumb, popBreadcrumb } from '../../actions/index.js';
import { toast } from 'react-toastify';
import ReactTable from 'react-table'
import store from '../../helpers/store';
import { ic_search } from 'react-icons-kit/md/ic_search';
import SvgIcon from 'react-icons-kit';
require('normalize.css/normalize.css');
// require('styles/App.css');
class ClinicsPage extends Component {

  constructor() {
    super();
    this.onPageChange = this.onPageChange.bind(this);
  }

  componentDidMount(){
    this.props.searchClinics({ country: 'Australia' });
  }

  onPageChange(pageIndex) {
      this.props.fetchClinics(pageIndex, null);
  }

  render() {
    let { devs } = this.props;

    const columns = [{
        Header: 'Id',
        accessor: 'id' // String-based value accessors!
      }, {
        Header: 'Name',
        accessor: 'name'
      }, {
        Header: 'Description', // Required because our accessor is not a string
        accessor: 'description',
        sortable: true
        // accessor: d => d.friend.name // Custom value accessors!
      },
      {
        Header: 'Country', // Required because our accessor is not a string
        accessor: 'country',
        sortable: true
        // accessor: d => d.friend.name // Custom value accessors!
      },
      {
        Header: 'Area', // Required because our accessor is not a string
        accessor: 'area',
        sortable: true
        // accessor: d => d.friend.name // Custom value accessors!
      },
      {
        Header: 'Latitude', // Required because our accessor is not a string
        accessor: 'latitude',
        sortable: true
        // accessor: d => d.friend.name // Custom value accessors!
      },
      {
        Header: 'Longitude', // Required because our accessor is not a string
        accessor: 'longitude',
        sortable: true
        // accessor: d => d.friend.name // Custom value accessors!
      },
      {
        Header: 'Tags', // Required because our accessor is not a string
        accessor: 'tags',
        sortable: true,
        Cell: (row) => {if (row.original.tags.length>1) { return row.original.tags.join(', ') } else { return row.original.tags } }
      },
      {
        Header: () => <span className="text-center">Actions</span>,
        accessor: 'id',
        id: 'actions',
        sortable: true,
        Cell: (row) => (<span><button className="text-center btn btn-primary margin_right_5" onClick={()=>{this.props.history.push('/editClinic/'+ row.original.id)}}>Edit</button ><button className="text-center btn btn-danger" onClick={()=>{this.props.deleteClinic(row.original.id, row.original)}}>Delete</button ></span>)
      }
    ]

    return (
      <div className="wrap">
          <div className="row margin_top_10 margin_bottom_5">
              <div className="col-sm-6">
                  <a className="btn btn-link color btn_alt" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseExample2" onClick={this.handleClickForm}>NEW CLINIC</a>
              </div>
              <div className="col-sm-6">
                  <a className="nav-link float_right search-clinic-btn" data-toggle="collapse" onClick={this.handleClickFormSearch} role="button" aria-expanded="false" aria-controls="collapseExample"><span className="search_label">Search data entries...</span> <SvgIcon size={25} icon={ic_search}/></a>
              </div>
          </div>
          <div id="nav-tabContent">
            <ReactTable
              data={devs.clinics}
              pageSizeOptions= {[10]}
              defaultPageSize= {10}
              columns={columns}
              pages={devs.paginationData.totalPages || ''}
              sortable={true}
              multiSort={true}
              //manual
              filterable
              page={devs.paginationData.pageNumber}
              loading={devs.isFetching}
              onPageChange={this.onPageChange}
              noDataText='No Data Found'
              className='-striped -highlight'
              />
          </div>
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    devs: state.reducer.devs
  }
}

Notice that i have disabled manual prop. If i enable the manual prop then i can navigate through next and previous pages but i cannot sort or filter the data.

With the manual prop disabled the filtering and the sorting works correct but when i navigate in the next page the table in this particular page is showed empty. The first page displays correct the first 10 data. Also i have tested the api and returns correct the next 10 data.

Also the devs.paginationData.pageNumber is updated correctly, and the page is changing with the correctly page number on the table

Is there any workaround? To keep both server side pagination and also the default sorting and filtering?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:9

github_iconTop GitHub Comments

8reactions
danmouracunhacommented, Jan 3, 2019

Is this issue solved?

3reactions
tannerlinsleycommented, Oct 4, 2018

This feature/issue has been tagged as one that will likely be fixed or improved in the next major release of React-Table. This release is expected to be completed in the next 6 - 8 months. Please see #1143 for more detail. If you believe this feature can be easily fixed, we invite you to fork the project, attempt the fix, and use it until the latest version is available. If the fix is simple enough, we will also consider it as a PR to the current version.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Manual Pagination disables the sorting and column filtering
With the manual prop disabled the filtering and the sorting works correct but when i navigate in the next page the table in...
Read more >
Adding Manual prop to react-table disables internal sort and ...
When you set manual in ReactTable, it indicates that you are handling sorting, filtering feature on server side. In that case, you must...
Read more >
Front End Tables: Sorting, Filtering, and Pagination
One thing I've had to do at every job I've had is implement a table on the front end of an application that...
Read more >
Tutorial: Add sorting, filtering, and paging with the Entity ...
In this tutorial you add sorting, filtering, and paging functionality to the Students Index page. You also create a simple grouping page. The ......
Read more >
React Table 7 — sorting, filtering, pagination and more - Medium
Let's create a new file filters. js , in which we are going to write views for our filters :)
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found