Let's add an Actions field cell type to DataGrid

[darnel-T]

In our application at Telekom we need to eidit, and destroy an object represented by a row in a table.
We really like how the DataGrid operates, but it lacts the capability to add these kind of actions for each row.
We would like to implement something like this:

We in our team think that this is a general idea which is very common among applications.
We are more than ready to implement this (with my college @sagi-t), I hope you welcome this contribution! :)

[acstll]

Hey @darnel-T thanks for opening this!

This sounds good to me :) Please let us discuss it internally with the Scale team —we'll do it asap—, and get back to you.

Do you have an idea already of how you would implement this?

[jano314159]

After defining the column action as a field type we would let the rows array accept a HTMLElement objects.
Just as in the HTML field type without the accordion scale-button.

const fields = [
  {
    type: 'text',
    label: 'Name',
  },
  {
    type: 'actions',
    label: 'Actions',
  },
]; 



const rows = [
"john",
document.createElement("scale-button"),
]

It would be up to the developer to implement the actions part as needed something like this

[acstll]

Perfect. We have to check with design too but we need to wait until next week for that.

Let's keep in touch. Thanks again!

[darnel-T]

Thanks, cant wait! :)

[acstll]

Hello @darnel-T @sagi-t :)

We are currently having a discussion with the design team regarding whether we should limit what one would be able to put into this new Actions cell type. So instead of having a space where you put could anything —like the current HTML type—, accept something more structured, like an array of items that would represent an action (like an icon and a callback, for instance). The whole point would be making sure we maintain the design language of the system by enforcing only certain elements. Does that make sense?

The implementation would change a bit, but not that much, no?

(I wanted to share also that it seemed clear to us that this addition is aligned with the idea of serving common use cases!)

[darnel-T]

It is a perfect proposition.
Let's do it in a more structured way.
Like this?

const fields = [
  {
    type: 'text',
    label: 'Name',
  },
  {
    type: 'actions',
    label: 'Actions',
  },
]; 



const rows = [
"john",
[
   {
       label: 'Edit',
       icon: 'scale-pencil-icon',
       onClick: handleEditClick
    },
    {
       label: 'Delete',
       icon: 'scale-trash-icon',
       onClick: handleDeleteIcon
    }
]

[acstll]

That looks good.

We're thankful and pretty much looking forward to your contribution and collaborating together.

[darnel-T]

Cool! Can we start implementing this?
Can we do this the with the structure above?
If so, we will start the implementation!

[acstll]

Cool! Can we start implementing this?
Can we do this the with the structure above?
If so, we will start the implementation!

yes, please!

Once you have a PR up, we'll review it and we'll work together until it's good to merge.

Again, looking forward to it. Thank you!

[darnel-T]

#444 @sagi-t has finished to PR. Please check it, looking forward to your feedbacks.

Actions field type looks like this:

[acstll]

Thank you very much @sagi-t! :)

I will check it out today (I was off yesterday)

[darnel-T]

Cool, we are looking forward to your feedback!

[darnel-T]

Hey @acstll!
Thanks for merging our pull request.
Any estimation when will it be released?
We are looking forward to use this changes in our project :)
Thanks for your help!