react-table实操问题解决方法

1.学习react-table网址

https://react-table.js.org/#/story/readme

2.分页处隐藏多余rows

将minRows = {0}加到设置页码处

defaultPageSize={20}
className="-striped -highlight"
minRows = {0}

3.添加样式，可以将style写到对应的colums下方。同时，可以利用react-table自带的maxwidth或者width，修改默认的宽度还有其他样式变化

columns={[
            {
              Header: "ID",
              columns: [
                {
                  Header: "ID",
                  accessor: "Id",
                  maxWidth: 60,
                  style:{color:'red'},

效果图

4.如果想要设置react-table的Header文本换行，只能在css文件中添加

white-space: normal;

5.如果想要设置react-table的Header文本垂直居中，只能在css文件中，为文本的父元素添加

align-items:center;display: -webkit-flex;justify-content:center;

6.如果想要对数据进行一些操作

学习文档中是这样引入数据的

  render() {
    const { data } = this.state;
    return (
      

        
            String(row[filter.id]) === filter.value}
          columns={[

我们可以这样

  render() {
    return (
      

         {
            const myDate = new Date();
            const myTime = myDate.getTime()
            return {
              ... p,
              myTime
            };
          })}
          filterable
          defaultFilterMethod={(filter, row) =>
            String(row[filter.id]) === filter.value}
          columns={[

7.react-table某一列的serch和filter还有sort失效

解决，只粘贴重要代码

columns: [
        { 
          sortable:false,
          filterable:false,

8.设置打开时的默认排序或者默认筛选

defaultSorted={[
{
    id: "needReview",
    desc: false
}
]}
defaultFiltered={[
{
   id:"needReview",
   value:"Yes"
}
]}
defaultPageSize={20}

9.当需要传入多个值时

    return (
      

         {
            let boxListDiv = []
            let boxLen = 0
            }
            return {
              boxLen,
              boxListDiv
            };
          })}
          filterable
          defaultFilterMethod={(filter, row) =>
            String(row[filter.id]) === filter.value}
          columns={[

{
              columns: [
                {
                  Header: "",
                  accessor: "boxListDiv",
                  sortable: false,
                  filterable: false,
                  Cell: props => {
                    return (
                      

                        {props.original.boxLen}

                        
                          {props.original.boxListDiv}
                        
                      
                    )
                  },
                  filterMethod: (filter, row) =>
                    row[filter.id].startsWith(filter.value) &&
                    row[filter.id].endsWith(filter.value)
                }
              ]
            },

上面只粘贴部分重要代码，虽然accessor只能够传入一个值，但是可以通过cell:props去调用前面定义的值，同时，通过在return内console.log(props)可以查看到该数据结构，从而引用数据

10.使表头固定

          defaultPageSize={20}
          style={{
            height: "700px" // This will force the table body to overflow and scroll, since there is not enough room
          }}
          className="-striped -highlight"
          minRows={0}

11.react-table Editable content 实现编辑修改内容

import React, { Component } from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import { Icon } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
class App extends Component {
  constructor() {
    super();
    this.renderEditable = this.renderEditable.bind(this);
    this.add = this.add.bind(this);
    this.state={
      data : [
        { firstName: "name1" },
        { firstName: "name2" },
        { firstName: "name3" },
        { firstName: "name4" },
        { firstName: "name5" },
        { firstName: "name6" }
      ]
    }
  }
  handleInputChange = (cellInfo, event) => {
    let data = [...this.state.data];
    data[cellInfo.index].firstName = event.target.value;
    this.setState({ data });
  };
  add() {
    const newvalue = {
      // userId: this.props.item.userId,
      value: this.state.data
    };
    console.log('newvalue',newvalue)
  }
  renderEditable = cellInfo => {
    const cellIndex = cellInfo.index;
    const cellValue = this.state.data[cellIndex].firstName;
    return (
      

        
          
      
    );
  };

  render() {
    return (
      

        
        
      
    );
  }
}

export default App;

12.截取部分重要代码：react-table Editable content 实际应用

import React, { Component } from "react";
import { connect } from "react-redux";
import { Icon } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import ReactTable from "react-table";
import "react-table/react-table.css";
import { getTrialList } from "../action/patientAction";
import {
  getAddTrialPatient
} from "../action/addAction";
class DeviceList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      patientId: "",
      siteId: ""
    };
    this.renderEditable = this.renderEditable.bind(this);
    this.addPatienNo = this.addPatienNo.bind(this);
  } 
  componentDidMount() {
    const { getTrialList } = this.props;
    getTrialList(this);
  }
  renderEditable = cellInfo => {
    let remotePatientId = cellInfo.original.patientId
      ? cellInfo.original.patientId
      : "";
    return (
      

        
        
      
    );
  };
  renderEditsiteId = cellInfo => {
    let remotesiteId = cellInfo.original.siteId ? cellInfo.original.siteId : "";
    return (
      

        
        
      
    );
  };
  handleInputChange = (cellInfo, event) => {
    const patientId = event.target.value;
    this.setState({ patientId });
  };
  handleInputChange2 = (cellInfo, event) => {
    const siteId = event.target.value;
    this.setState({ siteId });
  };
  addPatienNo = cellInfo => {
    const { getAddTrialPatient } = this.props;
    const patientId =
      this.state.patientId === ""
        ? cellInfo.original.patientId
        : this.state.patientId;
    const siteId =
      this.state.siteId === "" ? cellInfo.original.siteId : this.state.siteId;
    const addValue = {
      userId: cellInfo.original.userId,
      patientId: patientId,
      siteId: siteId
    };
    getAddTrialPatient(addValue);
    if (this.state.siteId !== "" && this.state.patientId !== "") {
      let ifchange = [...this.state.ifchange];
      const ifchangeValue = [
        {
          bool: true,
          index: cellInfo.index
        }
      ];
      ifchange.push(ifchangeValue);
      this.setState({ ifchange });
    }
  };
  render() {
    return (
      

        
      
    );
  }
}

const mapStateToProp = state => ({
  trialuser: state.patientsListStore.trialuser,
});
const mapDispatchToProp = dispatch => ({
  getTrialList: self => dispatch(getTrialList(self)),
  getAddTrialPatient: addValue => dispatch(getAddTrialPatient(addValue))
});
export default connect(
  mapStateToProp,
  mapDispatchToProp
)(DeviceList);

13.在输入框内设置回车键搜索，和onchange事件搜索

{
  Header: "test",
  accessor: "test",
  maxWidth: 60,
  Filter: ({ filter, onChange }) => {
    return (
       {
          if (event.keyCode === 13 || event.which === 13) {
            onChange(event.target.value);
          }
        }}
        onChange={event => {
          onChange(event.target.value);
        }}
      />
    );
  },
  filterMethod: (filter, row) => {
    return String(row[filter.id]).includes(filter.value);
  }
},

14.实现头部不为文字，而是复选框或者其他组件

// Header: "Actions",
                  Header: props => {
                    return (
                      
                    );
                  },

15.实现在顶端增加页码和滚动条

showPaginationTop={true}