Add Popup to React Heatmap Grid

Question

I'm using react-heatmap-grid in order to create a table with data and I want that when I click on a rectangle from the table to open a popup. I'm using Semantic UI in my project so I would like to use the Pinned Popup that appears only on click.

The code so far:

const xLabels = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
const yLabels =['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00'];
const data = [[7, 1, 2, 1, 7, 3, 6],
              [7, 1, 2, 3, 4, 5, 6],
              [0, 1, 2, 3, 4, 5, 6],
              [7, 1, 2, 3, 4, 5, 6],
              [7, 1, 2, 3, 4, 5, 6],
              [0, 1, 7, 7, 4, 5, 6],
              [0, 1, 2, 7, 4, 5, 6],
              [7, 1, 2, 7, 7, 5, 6],
              [7, 1, 2, 3, 4, 7, 7],
              [0, 1, 2, 3, 4, 5, 7],
              [0, 1, 7, 0, 1, 2, 3],
              [7, 1, 2, 3, 4, 5, 6]];

                <HeatMap
                  xLabels={xLabels}
                  yLabels={yLabels}
                  xLabelWidth={60}
                  data={data}
                  squares
                  height={45}
                  width={50}
                  cellStyle={(background, value, min, max, x, y) => ({
                    background: value === 7 ? '#27414E' : '#F5F7FA',
                    fontSize: '10px',
                    color: '#444',
                    width: '14%',
                    height: '30px',
                  })}
                  cellRender={value => value && <div>{value}</div>}
                />

It works fine, it renders the data and shows it in that heatmap table. But I don't know if it is possible to add a Popup component for each square in the table.

I added an aleart to be activated when the square is clicked:

        <HeatMap
          xLabels={xLabels}
          yLabels={yLabels}
          xLabelWidth={60}
          data={this.state.tableData}
          squares
          height={45}
          width={50}
          onClick={(x, y) => alert(`Clicked ${x}, ${y}`)} //here is the onClick added
          cellStyle={(background, value, min, max, x, y) => ({
            background: value === 7 ? '#27414E' : '#F5F7FA',
            fontSize: '10px',
            color: '#444',
            width: '14%',
            height: '30px',
          })}
          cellRender={value => value && <div>{value}</div>}
        />

This is the structure of the popup:

<Popup
    content='show some data'
    on='click'
    pinned
    trigger={<Button content='Button' />}
  />

Is there a way to add it in Heatmap?

Answer 1

Have tried putting it in cellRenderer?

...
cellRender={value => <Popup
    content='show some data'
    on='click'
    pinned
    trigger={<div style={{height: 50, width: 50}} />}/>}
...