Я работал над проектом, который включал таблицы и настраиваемую разбивку на страницы. Итак, для таблиц я сравнивал фиксированную таблицу facebook и griddle, но почему-то испытал соблазн использовать таблицу фиксированных данных после прочтения обзоров и понимания их функций.

Итак, приступим. Сначала вам нужно установить fixed-data-table. Давайте воспользуемся npm и быстро установим его.

npm install fixed-data-table
import 'fixed-data-table/dist/fixed-data-table.min.css'

Итак, теперь создайте тупой компонент, который принимает всю информацию как свойства и просто отображает таблицу с этой информацией. В этом компоненте не должно быть никакой работы, кроме нужных вам фильтров, к которым мы вернемся позже. Итак, теперь давайте создадим тупой компонент: -

/*Dumb component that just renders a table with input parameters*/
import React,{Component,PropTypes} from 'react'
import ReactTableCustomTextField from './ReactTableCustomTextField'
import  {Table,Column,Cell} from 'fixed-data-table'
import 'fixed-data-table/dist/fixed-data-table.min.css'
const propTypes = {
  pageCount : PropTypes.number.isRequired,
  totalEmployees : PropTypes.number.isRequired,
  limit : PropTypes.number.isRequired,
  rowHeight: PropTypes.number.isRequired,
  headerHeight:PropTypes.number.isRequired,
  width : PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  data: PropTypes.array.isRequired,
  headerFields: PropTypes.array.isRequired
}
class ReactTable extends Component{
renderColumns(headerFields,data){
      return headerFields.map(datum=>{
        return <Column
             key={datum.id} header={<Cell>{datum.header}</Cell>}
             cell={
               <ReactTableCustomTextField
                 data={data}
                 field={datum.field}
               />
             }
             width={200}
        />
      })
  }
render(){
    const { pageCount,totalEmployees,limit } = this.props
    const { rowHeight,headerHeight,width,height} = this.props
    const { data } = this.props
    const { headerFields } = this.props
return(
      <Table
       rowsCount={limit}
       rowHeight={rowHeight}
       headerHeight={headerHeight}
       width={width}
       height={height}>
        {this.renderColumns(headerFields,data)}
      </Table>
    )
  }
}
ReactTable.propTypes = propTypes
export default ReactTable

Теперь у вас есть компонент, который отображает тупой компонент, поэтому просто импортируйте его в компонент и передайте ему всю информацию.

Давайте создадим образец компонента, скажем X.

import React,{Component,PropTypes} from 'react'

class X extends Component{
render(){
     <ReactTable data={data} limit={limit}
     rowHeight={50} headerHeight={50} width={1200} height={500}
        headerFields={//array of objects container header and data for columns}
        pageCount={pageCount}/>
  }
}
EmployeeList.propTypes = propTypes
export default EmployeeList

Теперь headerFields - это массив объектов, в котором я сохраняю заголовок, а поля являются ключевыми. Используя это, мы могли бы создать столбцы таблицы и поместить данные. Если вы увидите метод renderColumns в ReactTable, вы поймете, что я пытаюсь сказать.

Теперь вы можете передавать информацию. Все идет нормально!!!!.

Но откуда вы берете эту информацию? Теперь, когда компонент X монтируется, мы вызовем API в componentWillMount () и отправим действие для обновления состояния с данными. Мы можем добавить следующее к компоненту X

componentWillMount(){
//dispatch your action here to call api and update data
}

Теперь у вас есть данные в вашем магазине, теперь давайте добавим пользовательский компонент нумерации страниц в ваш компонент x. Я использовал для этого response-paginate.

Давайте сначала установим response-paginate.

npm install react-paginate

Теперь добавьте следующее к вашему компоненту X.

<ReactPaginate previousLabel={"previous"}
                nextLabel={"next"}
                breakLabel={<a href="">...</a>}
                breakClassName={"break-me"}
                pageNum={pageCount}
                marginPagesDisplayed={2}
                pageRangeDisplayed={5}
                clickCallback={this.handlePageClick.bind(this)}
                containerClassName={"pagination"}
                subContainerClassName={"pages pagination"}
                activeClassName={"active"} />

React-paginate поставляется с функцией щелчка дескриптора обратного вызова, которая передает вам страницу страницы. Итак, давайте поместим это в компонент: -

handlePageClick(data){
    const { dispatch } = this.props
    //data.selected gives the current page.
   //dispatch the action here to call your api and update the state with new data
}

Когда вы отправляете действие здесь и вызываете API с новым смещением / лимитом или страницей в соответствии с соглашением, вы следите за изменениями данных таблицы.

То же самое можно сделать и для фильтрации. При изменении флажка вы можете отправить действие для обновления объекта состояния и изменения вашей таблицы.

Теперь создайте компонент-контейнер для вашего X-компонента и получите данные из магазина. Затем передайте эти данные в качестве свойств тупому компоненту X.

function mapStateToProps(state){
   const {data} = state
   return{
    data
  }
}
class XContainer extends Component{render(){
    return(
      <X {...this.props}/>
    )
}}
export default connect(mapStateToProps)(XContainer)

Теперь ваш магазин подключен к вашему компоненту. Любое изменение фильтра / разбивки на страницы должно обновить ваше состояние.