Closed tonypee closed 5 years ago
You can both customize the tags to match your need and inject content above or below the list with slots.
For example:
<virtual-scroller container-tag="table" content-tag="tbody">
<thead slot="before-content"><tr><th>...</th><th>...</th></tr></thead>
<template scope="props">
<tr>....</tr>
<template>
</virtual-scroller>
a few problems,
if i use the 'before-content' then the content is pushed down, which makes the bottom crop outside of the container. Also, If i have the setup of main=div, container="table", content="tbody", and use before-content for the thead, then the table rows are all stretched to fit the table height (which is very large, as it is the container) - just because of how tables flow i think. So, it seems that doesnt work. Currently, im just creating a second table for the header, and having set width columns, but it seems that this might be a good usecase to plan for... im not sure how tho
On 20 February 2017 at 12:07, Guillaume Chau notifications@github.com wrote:
For example:
... ... .... — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Akryum/vue-virtual-scroller/issues/8#issuecomment-281170824, or mute the thread https://github.com/notifications/unsubscribe-auth/AC8aNXbGriFUGNr5WBh_fuPi5ZK8do4Dks5refKagaJpZM4ME3TE .
-- Tony Polinelli
@tonypee Same issue
+1
@Akryum I have same isssue with @tonypee I can't use table as containerTag...
same problem with @tonypee , it seems like it can't handle tbody tag properly
same issue. The table rows are stretched out to fit the table height
Can someone give working slots example? It just does not work if I use template instead of renderers...
Same issue. Using
tbody {
display: block;
}
seem to solve the problem, but messes up column widths.
Same issue. I only see one solution for the columns: use fixed widths. Or maybe there is away to calculate the widths? Did any one else find a better solution?
I have tried below code but haven't got table header.
virtual-scroller(container-tag='table', :items='aSortedRows', item-height='16' content-tag='tbody')
thead(slot='before-content')
tr
th(v-for='col in columns')
a(href='#', v-on:click= 'sortBy(col)', v-bind:class="['sortKey == col' ? 'active' : '']")
| {{col}}
template(slot-scope='props')
tr
td(v-for='col in columns') {{props.item[col]}}
Same issue.
Any update ?
Update 😄 I found a workaround, check this out: https://codesandbox.io/s/v6nj8joq35
@andresz1 Thanks. Its good until we have predefined column names but what if we will have "n" number of dynamic columns?
@Akryum after update v1.0 , RecycleScroller remove attr container-tag
,any update to show create a table? thx
+1
See #116
Using a CSS hack that seems to work so far.
.scroller, .scroller > div, .scroller > div > div {
display: contents !important;
}
<table>
<thead>
<tr>...</tr>
</thead>
<RecycleScroller class="scroller" ... />
</table>
@depsimon The example you posted doesn't seem to be working :/ There's no scrollbar
How do i use it within an existing table that has a header?
Since it wraps the content with two divs, it doesnt work here:
the content becomes treated as a cell, since it is a div, not a row (tr)