search

arunghosh / react-heatmap-grid

A react component for heatmap visualisation in grid layout
https://codesandbox.io/s/r4rvwkl3yn
MIT License
76 stars 42 forks source link

Making column values inactive in heatmap #182

Closed therealarcher closed 4 years ago

therealarcher commented 4 years ago

Hello,

Thank you for creating this tool! I'm wondering whether one can apply the heatmap only to selected columns. For example in a table with 6 columns, no heatmap applied for the first 2 columns (ie maybe a white background, regardless of the value in the column), and the heatmap colors applied to the next 4 columns.

Thanks in advance!

arunghosh commented 4 years ago

@therealarcher If I understood you correctly, you can use cellStyle or cellRender for your purpose. If it doesn't work, let me know. 

    cellStyle={(background, value, min, max, data, x, y) => ({
      background: `rgba(66, 86, 244, ${1 - (max - value) / (max - min)})`,
      fontSize: "11px",
    })}
    cellRender={value => value && `${value}%`}
therealarcher commented 4 years ago

Thank you for the response. Yes, Eventually I was able to make it work using the x,y parameters.