refactor: data-table #5737

nekosaur · 2018-11-26T15:53:48Z

Description

Another rewrite of data-table. This time still using html table elements.

Implementing new functionality such as multi-column sorting, group by column, sort by column, per-column filtering, and fixed headers. Fixed headers will not be available in IE11 as I'm using fixed css property.

Virtualization is being done by using dummy rows prepended and appended to tbody that expand in height to simulate the full list of items.

The following issues (and more) have been implemented so far
#1547, #2659, #2859, #3102, #3176, #3180, #3574, #3486, #2960, #3829, #3220, #2890, #3364, #6138

Motivation and Context

How Has This Been Tested?

Markup:

https://gist.github.com/nekosaur/8ffc4996d033a71d9dbff9060eb6765c

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

Checklist:

The PR title is no longer than 64 characters.
The PR is submitted to the correct branch (master for bug fixes, dev for new features and breaking changes).
My code follows the code style of this project.
My change requires a change to the documentation.
I have created a PR in the documentation with the necessary changes.

johnleider

Did a light run through. I think this is a good opportunity to discuss the different types of features/functionality that can come with a component and where do they go. Check https://github.com/vuetifyjs/vuetify-next for next proposed structure @vuetifyjs/core-team.

johnleider · 2018-11-27T05:29:50Z

packages/vuetify/src/components/VData/VData.ts

+  },
+
+  methods: {
+    toggle (key: string, oldBy: string[], oldDesc: boolean[], page: number, mustSort: boolean, multiSort: boolean) {


separate lines for this many args

packages/vuetify/src/components/VData/VDataFooter.ts

johnleider · 2018-11-27T05:34:26Z

packages/vuetify/src/components/VDataTable/VRow.ts

+        children.push(regularSlot)
+      } else {
+        if (props.mobile) {
+          children.push(h('div', { class: 'd-flex justify-content-between' }, [


These are helper classes and will make it hard to overwrite in userland

Yup, I know. A lot of this is still work in progress and/or placeholdery

codecov · 2019-01-01T11:10:48Z

Codecov Report

Merging #5737 into dev will decrease coverage by 6.81%.
The diff coverage is 49.71%.

@@            Coverage Diff             @@
##              dev    #5737      +/-   ##
==========================================
- Coverage   88.56%   81.74%   -6.82%     
==========================================
  Files         282      276       -6     
  Lines        6313     6438     +125     
  Branches     1586     1594       +8     
==========================================
- Hits         5591     5263     -328     
- Misses        604      955     +351     
- Partials      118      220     +102

Impacted Files	Coverage Δ
packages/vuetify/src/locale/en.ts	`100% <ø> (ø)`	⬆️
...ages/vuetify/src/components/VDataIterator/index.ts	`100% <ø> (ø)`
...es/vuetify/src/components/VDataTable/VTableBody.ts	`0% <ø> (ø)`
packages/vuetify/src/components/VCheckbox/index.js	`100% <100%> (ø)`	⬆️
...ackages/vuetify/src/components/VDataTable/index.ts	`100% <100%> (ø)`
packages/vuetify/src/components/index.ts	`100% <100%> (ø)`	⬆️
packages/vuetify/src/components/VData/index.ts	`100% <100%> (ø)`
...ify/src/components/VDataTable/VDataTableVirtual.ts	`11.53% <11.53%> (ø)`
...ges/vuetify/src/components/VDataTable/VRowGroup.ts	`13.33% <13.33%> (ø)`
...rc/components/VDataTable/VDataTableHeaderMobile.ts	`17.24% <17.24%> (ø)`
... and 137 more

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 a95e2ec...c1f009e. Read the comment docs.

codecov · 2019-01-01T11:10:49Z

Codecov Report

Merging #5737 into next will decrease coverage by 5.77%.
The diff coverage is 12.6%.

@@            Coverage Diff             @@
##             next    #5737      +/-   ##
==========================================
- Coverage   89.03%   83.26%   -5.78%     
==========================================
  Files         310      316       +6     
  Lines        7561     7844     +283     
  Branches     1869     1936      +67     
==========================================
- Hits         6732     6531     -201     
- Misses        729     1209     +480     
- Partials      100      104       +4

Impacted Files	Coverage Δ
packages/vuetify/src/locale/en.ts	`100% <ø> (ø)`	⬆️
...ages/vuetify/src/components/VDataIterator/index.ts	`100% <ø> (ø)`
...c/components/VDataTable/VDataTableHeaderDesktop.ts	`10.25% <10.25%> (ø)`
packages/vuetify/src/components/VData/index.ts	`100% <100%> (ø)`
...ackages/vuetify/src/components/VDataTable/index.ts	`100% <100%> (ø)`
packages/vuetify/src/components/index.ts	`100% <100%> (ø)`	⬆️
packages/vuetify/src/components/VCheckbox/index.js	`100% <100%> (ø)`	⬆️
...ify/src/components/VDataTable/VDataTableVirtual.ts	`11.11% <11.11%> (ø)`
packages/vuetify/src/util/helpers.ts	`72.25% <12.19%> (-20.17%)`	⬇️
...ges/vuetify/src/components/VDataTable/VRowGroup.ts	`13.33% <13.33%> (ø)`
... and 26 more

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 a0ebde1...3fb1704. Read the comment docs.

dsseng

@nekosaur please resolve merge conflicts

grishnyakov · 2019-01-18T08:20:10Z

This may be useful: multicolumn sort
https://codepen.io/grishnyakov/pen/mawOXg

nekosaur · 2019-01-18T08:36:43Z

multi-column sort has been implemented already

johnleider · 2019-02-04T02:39:53Z

Some feedback:

Show page number
This should be in the center
Custom header/footer with provide
Had multiple console errors
Custom expanded example
Expand all doesn't work
Filter by column
Had multiple console errors

I also was not able to figure out how to get resizable columns to work.

Other than that, everything is looking really good.

nekosaur · 2019-02-04T07:31:02Z

Ah, I might not have uploaded the latest playground.

dsseng

Please resolve merge conflicts.

blah

nekosaur · 2019-02-04T18:52:17Z

@sh7dm This is far from done, no need to ask for merging.

…tual table component

…d some stuff

…ructured

TravisBuddy · 2019-02-09T17:01:11Z

Hey @nekosaur,
Your changes look good to me!

View build log

TravisBuddy Request Identifier: 1e02e110-368b-11e9-afc2-91cde96227b3

johnleider · 2019-02-15T14:34:59Z

I attempted to resolve merge conflicts but there were quite a few broken tests, are you tracking this @nekosaur ?

prune998 · 2019-02-18T14:46:01Z

Please keep on @nekosaur !! We all need this feature !!

added pageCount event added progress slot added top slot

nekosaur added the S: work in progress label Nov 26, 2018

nekosaur added this to the v2.0.0 milestone Nov 26, 2018

nekosaur mentioned this pull request Nov 26, 2018

refactor: data-table #5232

Closed

9 tasks

johnleider reviewed Nov 27, 2018

View reviewed changes

lzhoucs mentioned this pull request Dec 5, 2018

[Enhancement] Fixed DataTable Headers #1547

Closed

dsseng added the S: has merge conflicts The pending Pull Request has merge conflicts label Dec 31, 2018

dsseng reviewed Jan 1, 2019

View reviewed changes

dsseng added T: enhancement Functionality that enhances existing features and removed S: has merge conflicts The pending Pull Request has merge conflicts labels Jan 2, 2019

MajesticPotatoe mentioned this pull request Jan 15, 2019

[Epic] v-edit-dialog refactor #4530

Closed

nekosaur force-pushed the refactor/data-table-mono branch from 7d69acc to d449e27 Compare January 16, 2019 22:38

nekosaur changed the base branch from dev to next January 16, 2019 22:39

nekosaur force-pushed the refactor/data-table-mono branch from d449e27 to 28db79e Compare January 18, 2019 21:08

dsseng previously requested changes Feb 4, 2019

View reviewed changes

vercel bot temporarily deployed to staging February 9, 2019 16:50 Inactive

nekosaur added 7 commits February 9, 2019 17:50

feature: added VData and VDataFooter

b30b353

chore: renamed data-iterator files to ts

94b3f6f

chore: renamed data-table files to ts

fad4d5b

refactor: right in the middle of stuff

55cb91a

wip: lots of stuff

e5477b1

refactor: housekeeping, moved common header stuff to mixin, added vir…

9fe62dd

…tual table component

refactor: stuff

71fa472

nekosaur added 10 commits February 9, 2019 17:51

feat: added footerProps and headerProps to data-table

c0e41de

feat: custom items-per-page show up in options list

f0c126d

feat: added calculateWidths prop to data-table

967786a

refactor(VDatatable): cleaned up some stuff, added some stuff, change…

c258b55

…d some stuff

refactor: removed defined properties so that scoped props can be dest…

5e3eca0

…ructured

refactor: simplified slot props

af10561

refactor: added aria stuff to desktop header

503a320

refactor: small fixes

7adcb78

chore: removed old code

068d050

chore: switched from stylus to sass

39a2d9d

nekosaur force-pushed the refactor/data-table-mono branch from d4d5ec1 to 39a2d9d Compare February 9, 2019 16:54

vercel bot temporarily deployed to staging February 9, 2019 16:54 Inactive

johnleider removed the S: work in progress label Feb 15, 2019

johnleider added the S: work in progress label Feb 15, 2019

dsseng added the S: has merge conflicts The pending Pull Request has merge conflicts label Feb 15, 2019

johnleider mentioned this pull request Feb 15, 2019

[Feature Request] Advance data grid rendering improvements #6452

Closed

refactor: updated docs example markups

527ff83

added pageCount event added progress slot added top slot

vercel bot temporarily deployed to staging February 22, 2019 07:01 Inactive

Merge branch 'next' into refactor/data-table-mono

e6c0795

vercel bot temporarily deployed to staging February 22, 2019 09:55 Inactive

test: disabled data-table tests for now

3fb1704

vercel bot temporarily deployed to staging February 22, 2019 10:11 Inactive

nekosaur merged commit d45bd7e into next Feb 22, 2019

jacekkarczmarczyk deleted the refactor/data-table-mono branch February 22, 2019 10:21

jacekkarczmarczyk mentioned this pull request Jul 7, 2019

[Feature Request] Make v-data-table more responsive #5234

Closed

KaelWD mentioned this pull request Dec 23, 2020

[Feature Request] Way to retrieve (watch) the filtered Items from the searchTableItems function of a VDataTable? #8731

Closed

KaelWD mentioned this pull request Nov 17, 2021

[Feature Request] Format v-data-table/iterator pagination numbers #14405

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: data-table #5737

refactor: data-table #5737

nekosaur commented Nov 26, 2018 •

edited

Loading

johnleider left a comment

johnleider Nov 27, 2018

johnleider Nov 27, 2018

nekosaur Nov 27, 2018

codecov bot commented Jan 1, 2019

codecov bot commented Jan 1, 2019 •

edited

Loading

dsseng left a comment

grishnyakov commented Jan 18, 2019

nekosaur commented Jan 18, 2019

johnleider commented Feb 4, 2019

nekosaur commented Feb 4, 2019

dsseng left a comment

nekosaur commented Feb 4, 2019

TravisBuddy commented Feb 9, 2019 •

edited

Loading

johnleider commented Feb 15, 2019

prune998 commented Feb 18, 2019

refactor: data-table #5737

refactor: data-table #5737

Conversation

nekosaur commented Nov 26, 2018 • edited Loading

Description

Motivation and Context

How Has This Been Tested?

Markup:

Types of changes

Checklist:

johnleider left a comment

Choose a reason for hiding this comment

johnleider Nov 27, 2018

Choose a reason for hiding this comment

johnleider Nov 27, 2018

Choose a reason for hiding this comment

nekosaur Nov 27, 2018

Choose a reason for hiding this comment

codecov bot commented Jan 1, 2019

Codecov Report

codecov bot commented Jan 1, 2019 • edited Loading

Codecov Report

dsseng left a comment

Choose a reason for hiding this comment

grishnyakov commented Jan 18, 2019

nekosaur commented Jan 18, 2019

johnleider commented Feb 4, 2019

nekosaur commented Feb 4, 2019

dsseng left a comment

Choose a reason for hiding this comment

nekosaur commented Feb 4, 2019

TravisBuddy commented Feb 9, 2019 • edited Loading

TravisBuddy Request Identifier: 1e02e110-368b-11e9-afc2-91cde96227b3

johnleider commented Feb 15, 2019

prune998 commented Feb 18, 2019

nekosaur commented Nov 26, 2018 •

edited

Loading

codecov bot commented Jan 1, 2019 •

edited

Loading

TravisBuddy commented Feb 9, 2019 •

edited

Loading