Блог

Я создал таблицу, используя таблицу RSuite, и пытаюсь исправить несколько столбцов слева от таблицы при прокрутке вправо, поскольку в моей таблице много столбцов. Однако столбцы не остаются в представлении

 
<Table data={rows} height={700} virtualized  onRowClick={data => { console.log(data) }}>
  {
    columns.map((value, index) => {
      if (value.fixed) {
      return <Column width={value.width} fixed="left">
        <HeaderCell>{value.name}</HeaderCell>
        <Cell dataKey={value.key} />
      </Column>
      } else {
        return <Column width={value.width}>
        <HeaderCell>{value.name}</HeaderCell>
        <Cell dataKey={value.key} />
      </Column>
      }
    })
  }
</Table>
 

Мои столбцы инициализируются следующим образом.

 let columns = [
  { key: 'date', name: 'date', width: 100, fixed: 'left' },
  { key: 'productId', name: 'Product Id', width: 120, fixed: 'left' },
  { key: 'country', name: 'Country', width: 120, fixed: 'left' }
]

Object.keys(EXTRA_COLUMNS).forEach(factor => {
  columns.push({ key: factor, name: factor, width: factor.length * 10 })
});

this.setState({ columns: columns, rows: data.rows, rowCount: this.state.rowCount   data.rows.length, loading: loading });
 

Данные во всех столбцах загружаются просто отлично. Единственная проблема заключается в том, что первые 3 столбца, которые должны были быть заморожены, не остаются замороженными. Я пытался просто использовать <Column width={value.width} fixed> , а также отлаживать и достигать точки останова части внутри if(value.fixed) для первых 3 столбцов, но не повезло с замораживанием столбцов.

Есть идеи, как это исправить?

Я обнаружил, что мне нужно добавлять столбцы без использования логики цикла, если я хочу, чтобы исправленное было применимо. По крайней мере, для столбцов, которые необходимо исправить. Поэтому я убрал эти столбцы из итерации и жестко закодировал их под Table тегом.

 <Table data={rows} height={700} virtualized headerHeight={80} onRowClick={data => { console.log(data) }}>
  <Column width={100} fixed>
    <HeaderCell>Date</HeaderCell>
    <Cell dataKey='date' />
  </Column>
  <Column width={100} fixed>
    <HeaderCell>Product Id</HeaderCell>
    <Cell dataKey='productId' />
  </Column>
  <Column width={100} fixed>
    <HeaderCell>'Country'</HeaderCell>
    <Cell dataKey='country' />
  </Column>
  
  {
    Object.keys(EXTRA_COLUMNS).map(factor => {
      return <Column width={factor.length * 10}>
        <HeaderCell>{factor}</HeaderCell>
        <Cell dataKey={factor} />
      </Column>
    })
  }
  
</Table>