Add checkboxes to table for selection

Is it possible to add checkboxes to the first column in the table and use them for row selection?

We would prefer this over the standard selection indicated by the changed background color.

Hi @ckissi!

I’m going to move this thread over to a feature request since I’ve had it come up before in 1:1 messages, so I think there’s some interest in us officially supporting this as a selection method.

On the plus side, since I’ve seen it come up before I have a quick workaround example here that uses some custom CSS to disable selecting the row and only using a checkbox type column. It’s rough in that you would also need to change the pointer events for any editable fields and that would need some additional planning.

Link to view public app of example

Export of the example here

Thank you.

I’m trying to do it with transformer but for some reason it fails with the following message:

Transformer run failed.
* * message:"data.map is not a function"

transformer code looks like this:

const data = {{ Orders.data}};
data.map(d=>Object.assign(d,{checkbox:false}));
return data;

It looks cool, but the actual code is pretty useless. I need to have a boolean column (a SQL BIT datatype) show up as a checkbox. What the example you show does is merely add a custom column "checkbox" that does nothing.

Is there a way to show a 1/0 column as a checkbox?

Hey Bon!

This suggestion is for replacing the row selection method with checking boxes to select the row instead, not for editing the data.

The table component does have a checkbox type column that you could set for your boolean column, does that work for you?