react-table不在表中呈现服务器端数据（手动分页，过滤和排序）

Question

I'm having trouble getting data from the backend (Python API) to show in react-table manually. I've read the documentation and I'm trying to use the example here: https://react-table.js.org/#/story/server-side-data

I'm only seeing data in one column and only for 6 records which is really weird. It's probably the way I'm mixing in async/await syntax with the example code which uses a promise. I was able to create a simple react-table fetching data with the same async/await syntax, but when I added the server-side data code from the example (the requestData function) it wouldn't work.

I've spent days on this and looking all over Stackoverflow and the internet. I'm a newbie so please go easy on me. Here's what I have:

import React from 'react'
import { render } from 'react-dom'
import ReactTable from 'react-table'
import api from 'src/api'
import { orderBy } from 'lodash'
// importing react-table css would not work so I added it using cdn link


const requestData = async (pageSize, page, sorted, filtered) => {
  // api is a wrapper for axios.create()
  const rawData = await api.admin.exercise.feed()

  return new Promise((resolve, reject) => {
    let filteredData = rawData;
    if (filtered.length) {
      filteredData = filtered.reduce((filteredSoFar, nextFilter) => {
        return filteredSoFar.filter(row => {
          return (row[nextFilter.id] + "").includes(nextFilter.value);
        });
      }, filteredData);
    }

    const sortedData = orderBy(
      filteredData,
      sorted.map(sort => {
        return row => {
          if (row[sort.id] === null || row[sort.id] === undefined) {
            return -Infinity;
          }
          return typeof row[sort.id] === "string"
            ? row[sort.id].toLowerCase()
            : row[sort.id];
        };
      }),
      sorted.map(d => (d.desc ? "desc" : "asc"))
    );

    const res = {
      rows: sortedData.slice(pageSize * page, pageSize * page + pageSize),
      pages: Math.ceil(filteredData.length / pageSize)
    };
    resolve(res);
  });
};

export class ExerciseList extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
      pages: null,
      loading: true
    };
    this.fetchData = this.fetchData.bind(this);
  }

  setLoading(loading) {
    this.setState({ loading })
  }

  fetchData(state, instance) {
    this.setLoading(true);

    requestData(
      state.pageSize,
      state.page,
      state.sorted,
      state.filtered
    ).then(res => {
      this.setState({
        data: res.rows,
        pages: res.pages,
        loading: false
      });
    });
  }

  render() {
    const { data, pages, loading } = this.state;

    return (
      <div>
        <ReactTable
          columns={[
            {
              Header: "Name",
              accessor: "name"
            },
            {
              Header: "Movement",
              accessor: "movement"
            },
            {
              Header: "Equipment",
              accessor: "equipments"
            },
            {
              Header: "Channel",
              accessor: "channel"
            },
            {
              Header: "Level",
              accessor: "skill_level"
            },
            {
              Header: "Duration",
              accessor: "duration",
              filterable: false
            },
            {
              Header: "Injuries",
              accessor: "injuries"
            },
            {
              Header: "Is Substitute",
              accessor: "has_video",
              Cell: ({ value }) => (value? 'Yes': 'No'),
              filterable: false
            }
          ]}
          data={data}
          pages={pages}
          loading={loading}
          onFetchData={this.fetchData}
          manual
          filterable
          defaultPageSize={10}
          className="-striped -highlight"
        />
      </div>
    );
  }
}

render(<ExerciseList />, document.getElementById('datatable'));

Answer 1

Please refer the link for server-side sorting, pagination and manual filtering within the grid

// Component related to methods for sorting, pagination  server side and filtering manual filtering with in the grid

import React from 'react'
import 'react-table/react-table.css'
import ReactTable from 'react-table'
import autoBind from 'react-autobind'
import {filterCaseInsensitive} from '../../helper/commonMethods'


class ServerSideAtomGrid extends React.Component {

super(props)
    const userDetails = getUserDetails()
    this.state = {

      page: 0,
      pageSizeOptions: [500, 1000, 2000, 4000],
      pageSize: 500,
      totalRecords: 0,
      nextCursor: '*',
      cursorList: [{
        page: 0,
        cursor: '*'
      }],
      sortFields: {
        field: 'created_dtm',
        sort: 'desc'
      },
      columnData,
    }
    autoBind(this)
  }
  handlePageChange (page) {
    const pageNumber = (page)
    const cursorList = this.state.cursorList
    let cusrsorMark = ''
    _.each(cursorList, (list) => {
      if (list.page === pageNumber) {
        cusrsorMark = list.cursor
      }
    })
    this.setState({
      nextCursor: cusrsorMark,
      page: pageNumber
    }, () => this.searchData(cusrsorMark, pageNumber))
  }
  handleSizePerPageChange (pageSize) {
    this.resetData(pageSize)
    this.searchData('*', 0)
  }
  handleSorting = (state, instance) => {
    const sorted = state
    let field = 'created_dtm'
    let sort = 'desc'
    sorted && sorted.length > 0 && sorted.map(fld => {
      field = fld.id
      sort = fld.desc ? 'desc' : 'asc'
    })
    this.setState({
      sortFields: {
        field,
        sort
      }
    }, () => this.searchData('*', 0))
  }
  ////
 searchData('*', 0) {
    //Axios call you cna have 
 }
 filterCaseInsensitive (filter, row) {
  const id = filter.pivotId || filter.id
  return row[id] ? row[id].toString().toLowerCase().includes(filter.value.toLowerCase()) : true
}
  render () {
    const {
      classes, gridData, gridColumns, defaultFilter, totalRecords,
      gridPageSizeOptions, gridPage, gridPages, gridPageSize, gridLoading
    } = this.props
    return (
      <div>
        <ReactTable
          columns={gridColumns}
          data={gridData}
          onSortedChange={(state, instance) => {
            this.handleSorting(state, instance)
          }}
          filterable={defaultFilter}
          defaultFilterMethod={filterCaseInsensitive}
          noDataText="Ops No result found!"
          defaultPageSize={this.state.pageSize}
          className="-highlight"
          style={{height: `${totalRecords < 25 ? '' : `800px`}`, width: '100%', textAlign: 'center'}}
          pageText={`Total Count : ${totalRecords.toLocaleString()} Page: `}
          loading={gridLoading}
          page={this.state.page}
          pages={this.state.pages}
          showPaginationTop
          pageSize={this.state.pageSize}
          pageSizeOptions={gthis.state.pageSizeOptions}
          minRows={25}
          manual
          onPageChange={page => {
             this.setState({page})
             this.handlePageChange(page)
          }}
          onPageSizeChange={(pageSize, page) => {
          this.setState({
                    page,
                    pageSize
                  })
            this.props.handleSizePerPageChange(pageSize)
          }}
          showPageJump={false}
        />
      </div>
    )
  }
}

export default (ServerSideAtomGrid)

My Fiddle: https://jsfiddle.net/gowthamguruju/o9ybxqaj/8/