Hover buttons I think could be acheived just using an overlay and regular html DOM. That said I will work on some examples and see what I can come up with. The idea of letting a UriCell specify a displayData is a good one, will definitely do that. Single click should also be possible as an option.

from glide-data-grid.

Can you give me a rough mockup of what you want? I can probably come up with something and if not I will make it a mission to make sure it works.

from glide-data-grid.

Thanks for your consideration, @jassmith. I'll try to articulate the specific ui / functionalities I'm looking for below:

(A) Links to other pages

Status Quo

• 3 mouse clicks to follow a link in a UriCell
• Pressing Enter twice when focused on a UriCell results in moving the focus inside the grid to the next row / same column (see the "More Info" column of your "Column Grouping" example here)

Desired Features / Functionality

• 1 mouse click to follow a link
• Hit Enter once to follow the link
• Ability to specify a label and a link (eg, cell will read "Glide" but have link to "https://www.glideapps.com/")

(B) Action Buttons

I'll offer 2 examples here.

Example 1 (barebones example)

The first is kind of a barebones example of what could accomplish the job. In essence, the desire here would be for the cell to act like a button (user clicks once or hits Enter to run a callback so I can open a modal in react or do whatever else).

Example 2

The next example is my current development implementation using react-table. It offers what I call convenience buttons (not sure if there's an actual name for them) that show up on row hover, and an ellipsis icon that can be clicked (mouse or Enter to open a dropdown for more keyboard accessibility). This would be my "wishlist" as I find this combination to be user-friendly and clean-looking.

While I like having the convenience buttons that show up on row hover (I think they make for a really nice user experience), I certainly think they are a nice-to-have. The absence of click once to follow a link and row action buttons / dropdowns are more of a blocker for me.

As a final note, I've never worked with HTML5 Canvas before, so I'm not familiar with its strengths and limitations. If you have another approach or suggestion that accomplishes the same result in a canvas-friendly way, I'd love to see it!

Please let me know if you'd like me to provide any additional information or clarify anything above.

Thanks!

from glide-data-grid.

In order to do the single click behavior what you can do right now is pass onCellClicked and when you get a UrICell, open the uri and call preventDefault() on the args passed to onCellClicked

const onCellClicked = React.useCallback((c, args) => {
  const cell = getCellContent(c);
  if (cell.kind === GridCellKind.UriCell) {
    args.preventDefault();
    window.open(cell.data, "_blank");
  }
}, []);

from glide-data-grid.