Add checkboxes to table

[permafrost06]

Add checkboxes to each row. Show the checkboxes when prop checkbox is true. Internally, an identifier of the selected rows will be stored in an array. expose this array to parent with v-model:checked.

The value of prop checkbox-index* will be the name of a column and the value of this column in the row will be added to the array when the row is selected. For example: When a table has columns

[
    {
        name: "no",
        label: "No",
    },
    {
        name: "name",
        label: "Name",
    },
    {
        name: "email",
        label: "Email",
    },
]

checkbox-index can have value checkbox-index="name". Then, let's say a row gets selected with the below value

{ no: 2, name: "Some user", email: "someuser@gmail.com" }

Then, the value of name column of the row ("Some user") will be added to the array.

We have to discuss how we are going to handle the edge cases:

1. Non-unique values in the checkbox-index column. This may prevent the checkboxes from working correctly.
2. Since the array is v-modeled (2-way binding), it can be changed from the parent. We need to decide if changes made in the parent will be reflected in the component.

*I don't think this is the best name. Let me know if you have any suggestions.

[permafrost06]

Alternatively, we could expose a prop index-col. We could use this column for both the internal v-for key and for the checkbox index

[protibimbok]

This linked pr is not complete yet.

[permafrost06]

This linked pr is not complete yet.

That is fine. You can convert it to a draft pr if you want.

[protibimbok]

Add checkboxes to each row. Show the checkboxes when prop checkbox is true. Internally, an identifier of the selected rows will be stored in an array. expose this array to parent with v-model:checked.

The value of prop checkbox-index* will be the name of a column and the value of this column in the row will be added to the array when the row is selected.

Normally the v-model prop refers to the value of a certain component. In this case the value is the :data prop. This can be converted into v-model if you'd like to. Since being checked or not checked is for every row, how about we add an extra column named checked in these data? (This how it's done now). As v-model is two-way data binding, changes will be reflected both from parent and child. And the plus point is that we won't have to track checked and non-checked rows separately.

Another advantage of this design is we don't need to add checkbox-index as the whole row can be easily identified.

[permafrost06]

v-model:checked will be an array with the values of a column of the selected rows. The default value of checkbox-index will be the first column.

If the v-modeled array is changed on parent, the table's checkboxes may be updated to reflect the change. If this functionality becomes too complex, we may not support this particular feature.

[permafrost06]

Can we rename checkbox-index to index? What do you think @protibimbok ?

[protibimbok]

Can we rename checkbox-index to index? What do you think @protibimbok ?

Only index might be a bit confusing as it is used in other cases. We should use something more declarative. How about check-by?

[permafrost06]

I'm not feeling check-by. Let me know if you have any other suggestions. @protibimbok

[permafrost06]

closed with #26