Использование rsuite для рисования таблицы в реакции - PullRequest
Новая
       10

Использование rsuite для рисования таблицы в реакции

1 голос
/ 03 июля 2019

У меня есть следующая схема таблицы: Структура таблицы

И я хотел бы использовать rsuite реагировать для рисования таблицы.Вот что я получил до сих пор: 

<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>

Я хотел бы знать, как использовать код для генерации «итоговой» строки внизу.

Буду очень признателен за любую помощь.

Спасибо

...