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 (
      <div>
        <ReactTable
          data={data}
          filterable
          defaultFilterMethod={(filter, row) =>
            String(row[filter.id]) === filter.value}
          columns={[
 

我們可以這樣

  render() {
    return (
      <div>
        <ReactTable
          data={this.props.list.map(p => {
            const myDate = new Date();
            const myTime = myDate.getTime()
            return {
              ... p,
              myTime
            };
          })}
          filterable
          defaultFilterMethod={(filter, row) =>
            String(row[filter.id]) === filter.value}
          columns={[