Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Bug Report] data-table mobile view with custom slots #9436

Closed
AshrafBasry opened this issue Oct 22, 2019 · 5 comments · Fixed by #10345
Closed

[Bug Report] data-table mobile view with custom slots #9436

AshrafBasry opened this issue Oct 22, 2019 · 5 comments · Fixed by #10345
Assignees
@nekosaur
Labels
C: VDataTable T: bug Functionality that does not work as intended/expected
Milestone
v2.2.x

Comments

@AshrafBasry
Copy link

AshrafBasry commented Oct 22, 2019 •
edited
Loading

Environment

Vuetify Version: 2.1.5
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.87
OS: Linux x86_64

Steps to reproduce

add custom item slot to data-table

Expected Behavior

the two table should render the same in mobile view

Actual Behavior

the table with custom slot column doesn't stack

Reproduction Link

https://codepen.io/AshrafBasry/pen/QWWdeML

Other comments

i searched in the data-tables docs for how to make this work but i couldn't find any thing about mobile view.

and why slot items props.index is no longer refer to items index like the previous versions and refer to the visible rows index !!
@ghost ghost added the S: triage label Oct 22, 2019
@nekosaur
Copy link
Member

The way this is (supposed) to work currently is that you will have to define your own row markup for when table is in mobile view by checking the scoped slot prop isMobile, but it does not seem to be available on item slot.

(index in scoped props referred to the visible rows index in 1.5 as well)

@nekosaur nekosaur added T: bug Functionality that does not work as intended/expected and removed S: triage labels Oct 24, 2019
@AshrafBasry
Copy link
Author

@nekosaur

(index in scoped props referred to the visible rows index in 1.5 as well)

in ver 1.5.13 index referred to the filtered items not the visible rows

@nekosaur
Copy link
Member

filteredItems is the visible rows

@AshrafBasry
Copy link
Author

Sorry , i misunderstood the docs

@nekosaur nekosaur added this to the v2.2.x milestone Jan 21, 2020
@alicjamusial
Copy link
Contributor

Hi, what is the status of this issue? Is someone currently working on that or planning to solve it?

alicjamusial added a commit to alicjamusial/vuetify that referenced this issue Jan 27, 2020
@alicjamusial
fix(vdatatable): add isMobile property to custom item slot scop in Da…
f651e65 
…taTable and DataIterator

Add possibility to customize 'item' slot in DataTable and DataIterator in mobile view by introducing
isMobile property to be available in the scope.

fix vuetifyjs#9436
@alicjamusial alicjamusial mentioned this issue Jan 27, 2020
Merged
8 tasks
johnleider pushed a commit that referenced this issue Feb 11, 2020
@alicjamusial
fix(VDataIterator): add missing isMobile property to custom item slot…
f4b4f0a 
… scope (#10345)

fixes #8394
fixes #9436

* fix(vdatatable): add isMobile property to custom item slot scop in DataTable and DataIterator

Add possibility to customize 'item' slot in DataTable and DataIterator in mobile view by introducing
isMobile property to be available in the scope.

* test(vdatatable): fix snapshots

Fix test snapshots

* refactor(vdatatable): refactor DataTable and DataIterator isMobile property

Code refactor connected to code multiplication & fix tests

* refactor(vdatatable): space fix

Space fix

* refactor(vdatatable): typo fix

Typo fix

* style(vdatatable): typo fix

Typo fix

* refactor(vdataiterator): code refactor (small review changes)

* style(vdataiterator): typo fix

Typo fix
Logikgate pushed a commit to flypapertech/vuetify that referenced this issue Feb 19, 2020
@alicjamusial @Logikgate
fix(VDataIterator): add missing isMobile property to custom item slot…
528a4f5 
… scope (vuetifyjs#10345)

fixes vuetifyjs#8394
fixes vuetifyjs#9436

* fix(vdatatable): add isMobile property to custom item slot scop in DataTable and DataIterator

Add possibility to customize 'item' slot in DataTable and DataIterator in mobile view by introducing
isMobile property to be available in the scope.

* test(vdatatable): fix snapshots

Fix test snapshots

* refactor(vdatatable): refactor DataTable and DataIterator isMobile property

Code refactor connected to code multiplication & fix tests

* refactor(vdatatable): space fix

Space fix

* refactor(vdatatable): typo fix

Typo fix

* style(vdatatable): typo fix

Typo fix

* refactor(vdataiterator): code refactor (small review changes)

* style(vdataiterator): typo fix

Typo fix
whoistobias pushed a commit to whoistobias/vuetify that referenced this issue Feb 26, 2020
@alicjamusial @whoistobias
fix(VDataIterator): add missing isMobile property to custom item slot…
a75a175 
… scope (vuetifyjs#10345)

fixes vuetifyjs#8394
fixes vuetifyjs#9436

* fix(vdatatable): add isMobile property to custom item slot scop in DataTable and DataIterator

Add possibility to customize 'item' slot in DataTable and DataIterator in mobile view by introducing
isMobile property to be available in the scope.

* test(vdatatable): fix snapshots

Fix test snapshots

* refactor(vdatatable): refactor DataTable and DataIterator isMobile property

Code refactor connected to code multiplication & fix tests

* refactor(vdatatable): space fix

Space fix

* refactor(vdatatable): typo fix

Typo fix

* style(vdatatable): typo fix

Typo fix

* refactor(vdataiterator): code refactor (small review changes)

* style(vdataiterator): typo fix

Typo fix
This was referenced Mar 9, 2020
Merged
Closed
Closed
Closed
Merged
@snyk-bot snyk-bot mentioned this issue Mar 29, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nekosaur nekosaur

Labels
C: VDataTable T: bug Functionality that does not work as intended/expected
Projects
None yet
Milestone
v2.2.x
Development

Successfully merging a pull request may close this issue.

fix(VDataIterator): add isMobile property to custom item slot scope alicjamusial/vuetify
4 participants
@nekosaur @johnleider @alicjamusial @AshrafBasry