feat(b-table-lite): new `<b-table-lite>` lightweight table component #3447

tmorehouse · 2019-06-04T20:44:43Z

Describe the PR

New <b-table-lite> table component. using shared helper code of <b-table>, but tailored for just rendering arrays of items, without enhanced features.

New component does not support:

Filtering
Sorting
Pagination
Provider functions
Busy state
Selectable rows
Fixed top / bottom rows

This PR refactored the <b-table> helper code-base to support lightweight table components.

When importing individual components, this will help consumers reduce their bundle size if they don't need the full b-table feature set.

PR checklist

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

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

No
Yes (please describe)

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 #xxx[,#xxx]), where "xxx" is the issue number)
It 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.
The title should follow the Conventional Commits naming convention (i.e. fix(alert): not alerting during SSR render, docs(badge): update pill examples, fix typos, chore: fix typo in README, 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)

…omponents we may, in the future offer `b-table-simple` companion component, that does not support filtering, pagination, sorting, provider, etc. Just plain rendering of table, for lighter component footprint when users are tree shaking. This PR prepares the b-table helper code-base to support this.

codecov · 2019-06-04T20:47:42Z

Codecov Report

Merging #3447 into dev will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##              dev    #3447      +/-   ##
==========================================
+ Coverage   99.24%   99.24%   +<.01%     
==========================================
  Files         221      221              
  Lines        4215     4220       +5     
  Branches     1216     1227      +11     
==========================================
+ Hits         4183     4188       +5     
  Misses         26       26              
  Partials        6        6

Impacted Files	Coverage Δ
src/components/table/helpers/mixin-provider.js	`100% <ø> (ø)`	⬆️
src/components/table/index.js	`100% <ø> (ø)`	⬆️
...c/components/table/helpers/mixin-table-renderer.js	`100% <100%> (ø)`
src/components/table/helpers/mixin-thead.js	`100% <100%> (ø)`	⬆️
src/components/table/helpers/mixin-pagination.js	`100% <100%> (ø)`	⬆️
src/components/table/helpers/mixin-tbody-row.js	`100% <100%> (ø)`	⬆️
src/components/table/helpers/mixin-items.js	`100% <100%> (ø)`	⬆️
src/components/table/helpers/mixin-tbody.js	`100% <100%> (ø)`	⬆️
src/components/table/helpers/mixin-sorting.js	`100% <100%> (ø)`	⬆️

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 88b95c6...e550bd2. Read the comment docs.

src/components/table/helpers/mixin-items.js

src/components/table/table-lite.js

jacobmllr95 · 2019-06-05T06:49:40Z

@tmorehouse Not to sure about this naming scheme. I have never been a fan of the "overload" of features of the current <b-table> component. But I do see that some people need the advanced functionality.

I would suggest to rename <b-table-lite> to <b-table> and the current <b-table> to <b-table-advanced>.

tmorehouse · 2019-06-05T06:50:52Z

@jackmu95 reversing the component names would be a rather large breaking change though.

Although it does make sense.

jacobmllr95 · 2019-06-05T07:09:10Z

@tmorehouse The thing is when we don't do it before v2.0.0 we can't do it before v3.0.0.
And I don't think it is too much effort to run a search and replace.

Would it make sense to give the users a notice to stick with one of the two components to safe some bundlesize?

tmorehouse · 2019-06-05T07:14:10Z

Maybe the migration to Vue 3.x and maybe Bootstrap V5, can trigger the component name flip.

We'll probably have to maintain two branches in the future... based on version of Vue/Bootstrap

tmorehouse · 2019-06-05T07:20:02Z

@jackmu95 Maybe we can get an opinion from @pi0 on the table component names, and see what he thinks.

pi0 · 2019-06-05T07:21:38Z

I don't know the number of users that individually import components, but my guess is a single digit percentage. Making it by default is rather a breaking change and including the lite version increases bundle size for (the majority) of users that simply use plugin or module because of an additional component.

My suggestion is making this new component optional for those who individually import by name (and not by plugin)

tmorehouse · 2019-06-05T07:27:07Z

@pi0 The code base addition for the b-table-lite component is quite small, since the majority of it (actually all of it) is shared code between the two components (b-table and b-table-lite), as they are all mixin based. The only bundle overhead is the new table-lite.js file , which imports a reduced set of mixins compared to table.js

Overall change (coverage wise) is only +5 lines of code.

https://github.com/bootstrap-vue/bootstrap-vue/blob/tmorehouse/table/src/components/table/table-lite.js

pi0 · 2019-06-05T07:29:41Z

@tmorehouse OK let's bundle it by default :)

tmorehouse added Status: WIP Type: Refactor labels Jun 4, 2019

tmorehouse added 2 commits June 4, 2019 17:44

Merge branch 'dev' into tmorehouse/table

608e89e

lint

78fe1d9

tmorehouse added 14 commits June 4, 2019 17:50

Update mixin-sorting.js

8119e55

Update mixin-pagination.js

2895259

Update table.js

87af99c

Update mixin-items.js

6970a8a

Update table.js

6f2fd4d

Update mixin-items.js

1f476b6

Update table.js

39ee36f

Update mixin-items.js

076c3ae

Update table.js

6b9ec6c

Update mixin-provider.js

8311ac6

Update mixin-items.js

39e7378

Create mixins-table-renderer.js

9edf661

Update and rename mixins-table-renderer.js to mixin-table-renderer.js

1904ec5

Update table.js

1f3e4e3

tmorehouse changed the title ~~chore(b-table): minor code refactor to allow for future b-table-* components~~ chore(b-table): code refactor to allow for future b-table-* companion components Jun 4, 2019

Update mixin-tbody.js

155d8d4

jacobmllr95 reviewed Jun 4, 2019

View reviewed changes

src/components/table/helpers/mixin-items.js Show resolved Hide resolved

tmorehouse added 5 commits June 4, 2019 18:41

Update mixin-tbody-row.js

187981a

Update mixin-items.js

9f5f3a7

prettier

4550e36

more prettier

2048778

Merge branch 'dev' into tmorehouse/table

cc908e4

tmorehouse removed the Status: WIP label Jun 4, 2019

tmorehouse marked this pull request as ready for review June 4, 2019 22:45

tmorehouse added 5 commits June 4, 2019 20:42

Update mixin-tbody-row.js

1e0ca8f

Update mixin-tbody-row.js

b3642b5

Update README.md

73250e6

Update package.json

48b070a

Update README.md

fca81ad

tmorehouse changed the title ~~feat(b-table-lite): new b-table-lite lightweight table component~~ feat(b-table-lite): new <b-table-lite> lightweight table component Jun 5, 2019

tmorehouse removed the Status: WIP label Jun 5, 2019

tmorehouse added 5 commits June 4, 2019 22:23

Update README.md

556b4d7

Update README.md

e1f64a3

Update table-lite.js

f14fba4

Update table.js

8a79abb

lint

b7df51a

tmorehouse added Type: Enhancement Type: Feature labels Jun 5, 2019

jacobmllr95 reviewed Jun 5, 2019

View reviewed changes

src/components/table/table-lite.js Outdated Show resolved Hide resolved

tmorehouse added 2 commits June 5, 2019 03:48

Update table-lite.js

b830b7c

Update table.js

e550bd2

tmorehouse requested a review from pi0 June 5, 2019 07:14

jacobmllr95 self-requested a review June 5, 2019 08:09

jacobmllr95 approved these changes Jun 5, 2019

View reviewed changes

tmorehouse merged commit 0477941 into dev Jun 5, 2019

tmorehouse deleted the tmorehouse/table branch June 5, 2019 08:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(b-table-lite): new `<b-table-lite>` lightweight table component #3447

feat(b-table-lite): new `<b-table-lite>` lightweight table component #3447

tmorehouse commented Jun 4, 2019 •

edited

Loading

codecov bot commented Jun 4, 2019 •

edited

Loading

jacobmllr95 commented Jun 5, 2019

tmorehouse commented Jun 5, 2019 •

edited

Loading

jacobmllr95 commented Jun 5, 2019

tmorehouse commented Jun 5, 2019 •

edited

Loading

tmorehouse commented Jun 5, 2019 •

edited

Loading

pi0 commented Jun 5, 2019 •

edited

Loading

tmorehouse commented Jun 5, 2019 •

edited

Loading

pi0 commented Jun 5, 2019

feat(b-table-lite): new <b-table-lite> lightweight table component #3447

feat(b-table-lite): new <b-table-lite> lightweight table component #3447

Conversation

tmorehouse commented Jun 4, 2019 • edited Loading

Describe the PR

PR checklist

codecov bot commented Jun 4, 2019 • edited Loading

Codecov Report

jacobmllr95 commented Jun 5, 2019

tmorehouse commented Jun 5, 2019 • edited Loading

jacobmllr95 commented Jun 5, 2019

tmorehouse commented Jun 5, 2019 • edited Loading

tmorehouse commented Jun 5, 2019 • edited Loading

pi0 commented Jun 5, 2019 • edited Loading

tmorehouse commented Jun 5, 2019 • edited Loading

pi0 commented Jun 5, 2019

feat(b-table-lite): new `<b-table-lite>` lightweight table component #3447

feat(b-table-lite): new `<b-table-lite>` lightweight table component #3447

tmorehouse commented Jun 4, 2019 •

edited

Loading

codecov bot commented Jun 4, 2019 •

edited

Loading

tmorehouse commented Jun 5, 2019 •

edited

Loading

tmorehouse commented Jun 5, 2019 •

edited

Loading

tmorehouse commented Jun 5, 2019 •

edited

Loading

pi0 commented Jun 5, 2019 •

edited

Loading

tmorehouse commented Jun 5, 2019 •

edited

Loading