如何在react-table中使用rowspan

Question

知道如何在反应表中使用 rowSpan 。对于下面的示例 usernameFormatter 有多个值。注意：附件图片是复制的，但这看起来像我想要的

const columns = [
     {
         accessor: "id",
         show: false,
     },
     {
        Header: "Username",
        id: "username",
        accessor: "username",
        Cell: this.usernameFormatter,
        enableRowSpan: true
     }
]
          
<ReactTable
    data={this.state.users}
    filterable={true}
    columns={columns}
    defaultPageSize={18}
    getTdProps={(state, rowInfo, column) => {
        const index = rowInfo ? rowInfo.index : -1;
        return {
            onClick: (e, handleOriginal) => {
                if (column.Header === undefined) {
                    handleOriginal();
                } else {
                    if (rowInfo !== undefined) {
                        this.selectedRow = index;
                        this.onRowSelect(rowInfo.original.id);
                    }
                }
            },
        };
    }}
/>
                

Answer 1

请检查这个演示

想法是数据集数组，我们要在表格内渲染应该知道，哪些单元格将使用行跨度。在这种情况下，个人有类别，而“categorySpan”

const defaultData: Person[] = [
  {
    category:"category one",
    categorySpan:4,
    firstName: 'tanner',
    lastName: 'linsley',
    age: 24,
    visits: 100,
    status: 'In Relationship',
    progress: 50,
  },
  {
    category:"category one",
    firstName: 'tandy',
    lastName: 'miller',
    age: 40,
    visits: 40,
    status: 'Single',
    progress: 80,
  },
  {
    category:"category one",
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  }
  ,
  {
    category:"category one",
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  }
  ,
  {
    category:"category two",
    categorySpan:2,
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  }
  ,
  {
    category:"category two",
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  }
  ,
  {
    category:"category three",
    categorySpan:1,
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  }
  ,
  {
    category:"category four",
    categorySpan:1,
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  }
  
] 

因此，您可以根据类别和类别跨度向 td 添加行跨度属性

    <tr key={row.id}>
      {row.getVisibleCells().map(cell => {
        if(cell.column.id=="category"){
          if(row.original.categorySpan){
          return (  <td key={cell.id} rowSpan={row.original.categorySpan}>
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </td>);
          }
        }
        else{
          return (
            <td key={cell.id}>
              {flexRender(cell.column.columnDef.cell, cell.getContext())}
            </td>
          )
        }
      })}
    </tr>

最终代码将是这样的

const defaultData: Person[] = [
  {
    category:"category one",
    categorySpan:4,
    firstName: 'tanner',
    lastName: 'linsley',
    age: 24,
    visits: 100,
    status: 'In Relationship',
    progress: 50,
  },
  {
    category:"category one",
    firstName: 'tandy',
    lastName: 'miller',
    age: 40,
    visits: 40,
    status: 'Single',
    progress: 80,
  },
  {
    category:"category one",
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  }
  ,
  {
    category:"category one",
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  }
  ,
  {
    category:"category two",
    categorySpan:2,
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  }
  ,
  {
    category:"category two",
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  }
  ,
  {
    category:"category three",
    categorySpan:1,
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  }
  ,
  {
    category:"category four",
    categorySpan:1,
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  }
  
]