Skip to content

feat(table): Selectable rows (fixes #1790) #2260

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 27 commits into from
Dec 11, 2018
Merged

feat(table): Selectable rows (fixes #1790) #2260

merged 27 commits into from
Dec 11, 2018

Conversation

lianee
Copy link
Contributor

@lianee lianee commented Dec 10, 2018

Description of Pull Request:

Allow user to select rows. As this only works for visible rows, this feature doesn't rely on item keys.

see #1790

PR checklist:

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Enhancement to an existing feature
  • ARIA accessibility
  • Documentation update
  • Other, please describe:

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

If yes, please describe the impact:

The PR fulfills these requirements:

  • It's submitted to the dev branch, not the master branch
  • When resolving a specific issue, it's referenced in the PR's title (i.e. fixes #xxxx[,#xxxx], where "xxxx" is the issue number)
  • The PR should address only one issue or feature. If adding multiple features or fixing a bug and adding a new feature, break them into separate PRs if at all possible.
  • PR titles should following the Conventional Commits naming convention (i.e. "fix(alert): not alerting during SSR render", "docs(badge): Updated pill examples, fix typos", "chore: fix typo in docs", etc). This is very important, as the CHANGELOG is generated from these messages.

If new features/enhancement/fixes are added or changed:

  • Includes documentation updates (including updating the component's package.json for slot and event changes)
  • New/updated tests are included and passing (if required)
  • Existing test suites are passing
  • The changes have not impacted the functionality of other components or directives
  • ARIA Accessibility has been taken into consideration (does it affect screen reader users or keyboard only users? clickable items should be in the tab index, etc)

If adding a new feature, or changing the functionality of an existing feature, the PR's description above includes:

  • A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

@codecov
Copy link

codecov bot commented Dec 10, 2018

Codecov Report

Merging #2260 into dev will decrease coverage by 0.49%.
The diff coverage is 33.33%.

Impacted file tree graph

@@            Coverage Diff            @@
##              dev    #2260     +/-   ##
=========================================
- Coverage   67.43%   66.94%   -0.5%     
=========================================
  Files         160      160             
  Lines        3062     3107     +45     
  Branches      841      857     +16     
=========================================
+ Hits         2065     2080     +15     
- Misses        734      756     +22     
- Partials      263      271      +8
Impacted Files Coverage Δ
src/components/table/table.js 70.5% <33.33%> (-4.13%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ded7679...918d1a9. Read the comment docs.

@tmorehouse

This comment has been minimized.

@lianee

This comment has been minimized.

@tmorehouse

This comment has been minimized.

@lianee

This comment has been minimized.

@tmorehouse

This comment has been minimized.

@tmorehouse

This comment has been minimized.

@tmorehouse
Copy link
Member

I found one small bug with respect to filtering. If the table was filtered and the filter criteria changed (and table is still in the filtered state), the selection wasn't cleared. I've added in one extra check for that situation.

@tmorehouse
Copy link
Member

So I think all is good now.

@tmorehouse tmorehouse merged commit 5b1cb90 into bootstrap-vue:dev Dec 11, 2018
tmorehouse added a commit that referenced this pull request Dec 11, 2018
* fix(dropdown): Menu focusout close handling (#2252)

* feat(table): Selectable rows (fixes #1790) (#2260)

* feat(modal): Make stackable optional (#2259)
@lianee
Copy link
Contributor Author

lianee commented Dec 11, 2018

Good catch for the filter bug. Found one more: if the items change (for example, user deletes some items), the selection should be cleared too, so we need to add a clear in the "items" watcher. Not sure though if I have to open a new PR for that?

Also, what do you think of renaming (or add synonyms) "single" > "radio" and "multi" > "checkbox", I guess that better convey the fonction?

@tmorehouse
Copy link
Member

Yeah, open a new PR... I think we can stick with single and multi... is there any way to merge multi and range modes?

@tmorehouse
Copy link
Member

Would just watching for changes on computedItems be enough to trigger the clearSelected? The array ref is new each time sorting, pagination or filtering run.

@tmorehouse
Copy link
Member

Although changes to row details would trigger new values, and would clear the selections if people show/hide the details.

@lianee
Copy link
Contributor Author

lianee commented Dec 11, 2018

yes, tried that already and show/hide details trigger the watch, not desired

@tmorehouse
Copy link
Member

Would almost need to use a loose equals, and filter each row properties, and then compare row by row. Would add a bit of overhead though.

@lianee
Copy link
Contributor Author

lianee commented Dec 11, 2018

what do you mean with "merging multi and range modes", getting rid of the range mode?

@tmorehouse
Copy link
Member

Although people should be deleting rows from a copy, and then replace items with a new array, rather than manipulating the local items array directly.

May have to use the computedItems watcher initially, and just list a caveat that showing and hiding details will clear the selections.

@tmorehouse
Copy link
Member

tmorehouse commented Dec 11, 2018

Yeah, multi and range modes could be merged... I was playing with a multi-select select element and it supports shift click, and individual click (select/clear).

@lianee
Copy link
Contributor Author

lianee commented Dec 11, 2018

TBH, i mimicked the modes from datatables, I used it since a long time, and I guess that if it is good since many years, it can't really be wrong...

@tmorehouse
Copy link
Member

But for now, we could leave all three modes as is, but later consider merging range and multi into just multi

@tmorehouse
Copy link
Member

Just was thinking that multi could emulate how native select inputs work. Although maybe it is different on different OS/browsers (was playing on windows with chrome)

@lianee
Copy link
Contributor Author

lianee commented Dec 11, 2018

well, that is the way range mode works, similar to OS selection.

@tmorehouse
Copy link
Member

Personally, I would like to be able to click to select and clear individual items, and use click, followed by shift click to select and arbitrary range, although not sure about range clearing, if that would be weird for users...

@lianee
Copy link
Contributor Author

lianee commented Dec 11, 2018

multi is designed to work the way checkboxes work, click toggles (hence my suggestion of synonyms before), more intuitive than range, but less powerfull because range works like single by default, like multi when used with CTRL and add range selection with SHIFT, they really are 3 different beasts

@tmorehouse
Copy link
Member

Synonyms might be handy initially..

@tmorehouse
Copy link
Member

tmorehouse commented Dec 11, 2018

But I think the main thing is to deal with things like item deletion/adding and clearing the selected array

@lianee
Copy link
Contributor Author

lianee commented Dec 11, 2018

so, that is range mode

Personally, I would like to be able to click to select and clear individual items, and use click, followed by shift click to select and arbitrary range, although not sure about range clearing, if that would be weird for users...

@lianee
Copy link
Contributor Author

lianee commented Dec 11, 2018

yes bugs first, I'll have to do a couple of check with remote data too, then I'll open a new PR for bugs

@tmorehouse
Copy link
Member

What do you think about storing the actual selected items in data, and then watching it for changes to trigger the emit row-selected?

@tmorehouse
Copy link
Member

Watching the prop items might be a good start. And also could clear the selection when the provider runs... or could watch localItems for changes and trigger the clear too..

@lianee
Copy link
Contributor Author

lianee commented Dec 11, 2018

that was my first take on that thing, but that was not satisfyng because:

  • it mutates data
  • is cleared with remote data
  • is less performant with big arrays
  • maybe other things I forgot...

@tmorehouse
Copy link
Member

Although, localItems and items changes typically would be things that would cause computedzitems to change.

I do have code that I was going to use for filter data change detection that filters out the item props using reserved property names, and then does a row by row loose equals compare until the first different row is found, and trigger an event. It would only need to fun against computed items, which will be only as large as the pagination size.. it's not overly fast, as when no changes happen it has to scan all the computedItems, but may be a solution.

Only time it would have issues is if there are duplicate rows without unique values.

@tmorehouse
Copy link
Member

tmorehouse commented Dec 11, 2018

I'll post the code for the loose equal watcher here tomorrow.. just getting ready to head to bed for the night.

You can take a look at it and see if we can just use it on the computedItems watcher to detect when to clear the selection. We could make the check conditional too, so that it doesn't run if the table is not in selectable mode.

@lianee
Copy link
Contributor Author

lianee commented Dec 11, 2018

ok, gn (I just wake up myself)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants