Search code examples
javascriptreactjsreact-virtualized

How to make fixed columns dynamic using react-virtualized library

Using this library https://bvaughn.github.io/react-virtualized/#/components/MultiGrid

I created multiGrid like this: 

<MultiGrid
  cellRenderer={cellRenderer}
  columnCount={tableHeaders.length}
  columnWidth={cache.columnWidth}
  deferredMeasurementCache={cache}
  height={height}
  rowCount={data.length}
  rowHeight={40}
  width={width}
  fixedRowCount={1}
  enableFixedColumnScroll
  enableFixedRowScroll
  hideBottomLeftGridScrollbar={true}
  hideTopRightGridScrollbar={true}
/>

if add fixedCoulmnCount = {1} it freezes the 1st column, that's awesome but I need to send that number using function so that I can send dynamic column numbers to freeze.
sometimes I need to freeze 1st two columns, sometimes need to freeze 1st three columns

I tried calling the function as below: 

fixedColumnCount = {getFreezeColNo} //this is prop in multigrid to freeze coulmns

function getFreezeColNo() {
    return 1;
  }

and I tried the arrow function also like: 

fixedColumnCount={() => {
                return 1;
              }}

but I got this error for the above code:

enter image description here
can anyone give a solution for this, Thanks in advance

Solution

  • fixedColumnCount expects a number not a function, but you've provided a function to it, therefore you are receiving NaN. Give it a try by actually calling that getFreezeColNo function.

      fixedColumnCount = {getFreezeColNo()}