CODEWITHSUNDEEP
javascriptreactjsrsuite
Buddha
Buddha

Reputation: 4476

Fixed or Frozen column of rsuite table is not working

I created a table using RSuite Table and trying to fix few columns to the left of the table when scrolled right as my table has many columns. However the columns are not staying in the view


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

My colums as initialized as follows.

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 });

The data in all the columns is loading just fine. Only issue is the first 3 columns that were supposed to be frozen, are not staying frozen. I have tried just using <Column width={value.width} fixed> and also debugged and reaching the breakpoint of the part inside if(value.fixed) for the first 3 columns, but no luck with freezing columns.

Any idea how to fix this?

Upvotes: 1

Views: 693

Answers (1)

Buddha
Buddha

Reputation: 4476

I have found that I need to add columns without using looping logic if I want the fixed to be applicable. At least for the columns that need to be fixed. So I moved those columns out of iteration and hardcoded them under Table tag.

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

Upvotes: 0

Related Questions