Akryum / vue-virtual-scroller

⚡️ Blazing fast scrolling for any amount of data
https://vue-virtual-scroller-demo.netlify.app
9.7k stars 915 forks source link

how to use inside a table which has a header #8

Closed tonypee closed 5 years ago

tonypee commented 7 years ago

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:

<table>
  <thead><tr><th>...</th><th>...</th></tr>
  <virtual-scroller content-tag="tbody">
    <template>
        <tr>....</tr>
    <template>
  </virtual-scroller>
</table>

the content becomes treated as a cell, since it is a div, not a row (tr)

Akryum commented 7 years ago

You can both customize the tags to match your need and inject content above or below the list with slots.

Akryum commented 7 years ago

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>
tonypee commented 7 years ago

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:

......