How to set cursor to pointer on specific cells?

[city17]

Hi, I've set up my datagrid so the very first column is a link icon that links to a specific page. But I'd like to have the cursor change to pointer when hovering over this.

Currently I've got it set up like this:

  const handleItemHover = (args) => {
    if (args.kind === 'cell' && args.location[0] === 0 ) {
      document.getElementById('asset-grid').style.cursor = 'pointer'; // Potential implementation
      console.log('hovering over first column')
    }
  }
  
  <DataEditor onItemHovered={handleItemHover} />

But it seems that the Data Grid overrules these style changes. Is there a way to enable a specific cursor on certain cells? Thanks!

[jassmith]

This is now possible to set on a cell by cell basis in 5.0.0 :)

[city17]

Cool, thanks. How exactly would you do this in 5.0.0?

I saw you changed from CSS-in-JS to changing CSS classes, but it wasn't clear to me how you'd use this new system to add hover effects (pointer) to a specific column of cells. Or is this something that will be implemented later?

[jassmith]

Sorry in 5.0.0 the method to do this is to set cursor prop on your GridCell. It overrides the cursor.

[city17]

Thanks! When do you expect that 5.0.0 will be the new stable released version?

[jassmith]

1 to 4 weeks.

[jassmith]

There are 4.99.0-alphaX packages out now you can play with. They are pretty much production ready if you don't have any problems with transpilation (we moved to esbuild).