Question

我具有以下表格布局：Table layout

我想使用rsuite react绘制表格。这是到目前为止我得到的：

<Table height={400} data={data}
      onRowClick={(data) => console.log(data)}
      bordered cellBordered headerHeight={80}>
      <Column width={50} align="center">
        <HeaderCell className="font-weight-bold text-uppercase" style={{ fontSize: '15px' }}>STT</HeaderCell>
        <Cell dataKey="id" />
      </Column>

      <Column flexGrow={2} align="center">
        <HeaderCell className="font-weight-bold text-uppercase" style={{ fontSize: '15px' }}>Product Code</HeaderCell>
        <Cell dataKey="product-code" />
      </Column>

      <Column flexGrow={2} align="center">
        <HeaderCell className="font-weight-bold text-uppercase" style={{ fontSize: '15px' }}>Name</HeaderCell>
        <Cell dataKey="product-name" />
      </Column>

      <Column width={50} align="center">
        <HeaderCell className="font-weight-bold text-uppercase" style={{ fontSize: '15px' }}>Unit</HeaderCell>
        <Cell dataKey="unit" />
      </Column>

      <Column width={130} colSpan={2}>
        <HeaderCell className="font-weight-bold text-uppercase header-cell-group" style={{ fontSize: '15px' }}>
          <div className="header-cell-group-title">Remaining</div>
          <div className="header-cell-group-subtitle">
            <span style={{ width: 130 }}>SL</span>
            <span style={{ width: 130 }}>TT</span>
          </div>
        </HeaderCell>
        <Cell dataKey="SL-remaining-beginning-period" />
      </Column>

      <Column width={130}>
        <HeaderCell />
        <Cell dataKey="TT-remaining-beginning-period" />
      </Column>
   </Table>

我想知道如何使用代码在底部生成“总计”行。

非常感谢您的帮助。

谢谢

Answer 1

rsuite中的Table的最新版本通过Table.ColumnGroup组件支持表头分组。但是它不支持嵌套分组。

<Table
  bordered
  cellBordered
  height={420}
  headerHeight={80}
  data={this.state.data}
  onRowClick={data => {
    console.log(data);
  }}
>
  <Column width={70} align="center">
    <HeaderCell>Id</HeaderCell>
    <Cell dataKey="id" />
  </Column>
  <ColumnGroup header="Name">
    <Column width={130} colSpan={2}>
      <HeaderCell>First Name</HeaderCell>
      <Cell dataKey="firstName" />
    </Column>

    <Column width={130}>
      <HeaderCell>Last Name</HeaderCell>
      <Cell dataKey="lastName" />
    </Column>
  </ColumnGroup>

  <Column width={200} colSpan={2}>
    <HeaderCell>Address</HeaderCell>
    <Cell dataKey="city" />
  </Column>

  <Column width={200} flexGrow={1}>
    <HeaderCell>Company Name</HeaderCell>
    <Cell dataKey="companyName" />
  </Column>
</Table>

使用rsuite在react中绘制表格

1 个答案: