<b-table> Select all, clear selected

[kyleweishaupt]

I've just updated my application to use the 'selectable' mode on b-table and it's great. The only down side (and as stated in the docs) is that the selected rows are read-only. Right now I'm using the selected rows as a synced prop to the parent so that it can pass those rows to a 'bulk' actions component. There's just no way to have the 'bulk actions' component tell the table to update the selected rows.

My feature suggestion is to add a method for selecting/unselecting all rows in b-table.

Only selecting/unselecting rows on the current page is fine for my use case. Using $refs to trigger this on the table could work. Maybe even another method for replacing the selected rows array?

Thanks for all the hard work!

[tmorehouse]

We could possibly add a method on the table instance that would clear the selected rows by replacing the internal selected reference with and empty array

[tmorehouse]

The main reason for treating the selected rows as readonly is because reactive changes will cause the table to re-re-render, which can cause UI issues for the user (i.e. if there is an input in the table and their cursor is in one spot, the re-render can cause their cursor to jump to another location within the input, etc).

[tmorehouse]

For the bulk update, you would need to call, after you have updated the source of truth for your items, the table .refresh() method which will trigger the table to re-render if the items array isn't already updated) or if you are using a provider function .refresh() will trigger a provider update.

[kyleweishaupt]

I can totally understand about not re-re-rendering the table when this data changes.

Thanks for the info about the .refresh() method. I'll give that a try!

[thejcannon]

You can "select all" and "clear all" by using the primary-key prop to generate a unique ID per row then telling the browser to click different rows.

The shortcut I use select all/deselect all (with two clicks) is:

• Select: Click the first row, and then shift-click the last row
• clear all: click the first row and ctrl+click the first row

Still a workaround for having "selected" be reactive though 😉

Edit: See this snippet

[alexkleinwaechter]

A small workaround for deselecting all:
I have a button for resetting the selection with the method resetSelected() attached:

            resetSelected() {
                this.selectMode = "single";
            }

At the beginning of the rowSelected(items) method just add:

           rowSelected(items) {
                if (this.selectMode == "single") {
                    this.selectMode = "multi";
                }
                this.selected = items;
            },

THis works quite nice.
Best!
Alex

[tmorehouse]

There is an undocumented table method that you can call to clear the current table section.

Make sure your table has a ref:

<b-table ref="mytable" selectable .... >

then in your code you can call this to clear hte selection:

this.$refs.mytable.clearSelected()

this will clear the current selected rows.

[rmeissn]

I'll also vote for an official method to select all rows of a table.

[tmorehouse]

BootstrapVue v2.0.0-rc.28 has been released.