ndrsn
commented
2 years ago It's not supported out of the box, but you can hook into the afterrendercell event to draw your own 'button' on top of the canvas. Here's a crude example (it's a box not a button, but you get the idea):
grid.addEventListener('afterrendercell', (event) => {
if (event.cell.rowIndex === -1 && event.cell.columnIndex > -1) {
drawButton(event.ctx, event.cell);
}
});Obviously, you'd want to make it actually look like a button, render differently on hover or active states, but what this looks like depends a little bit on what the rest of your application looks like — I don't think canvas-datagrid should be too opinionated in terms of UI look and feel, or you lose flexibility when integrating.
Alternatively, you could use HTML buttons. I have the same issue: I also want to show filter buttons like Excel, and canvas drawing seems cumbersome, so this is the route I've wanted to investigate, but haven't gotten around to yet.
david542542
xianzhi3
In Excel and Google Sheets a 'button' is often used for a context menu related to a heading, for example:
Does canvas-datagrid currently support this, or is it something that would need to be added as a new feature? If it's something that's already supported, could we add an example of it to the Tutorials section?