insert `thead` into table

[luman-web]

Hi. First of all I want to thank you for this module, it works really well.
I'm facing with little problem. The code below is rendering table. The table has tbody tag, but also i'd like to have thead tag in the table. Please advise how can I insert thead with its th in the table, if it's possible of course. Thank you.

<virtual-list
:size="20"
:remain="10"
rtag="table"
wtag="tbody"
>
<tr
v-for="(row, ir) in sheet"
:key="ir"
>
<td>{{ +ir + 1 }}</td>
<td
v-for="(cell, ic) of row"
:key="'c' + (ic + 1) + 'r' + (ir + 1)"
v-html="cellDisplayValue(ir + 1, ic + 1)"
>
</td>
</tr>
</virtual-list>

[tangbc]

In theory, it may be solved by <slots />.

Let me try to work out ……

[Bernardmyburgh5]

Any progress with table elements integration? any way we could implement a work around for the time being?

[Soletiq]

+1

[danielwalter123]

Any news on this?

[tangbc]

It should be recently

[luman-web]

It should be recently

could you provide a syntax how to insert table <th> alongside with a loop that renders <tr> tags, please?

[tangbc]

@luman-web

could you provide a syntax how to insert table alongside with a loop that renders tags, please?

I don't have a specific solution yet, but I think it can be achieved by slot.

<template>
    <vue-virtual-scroll-list>
        <th slot="head"></th>
        <tr v-for="item in items"></tr>
    </vue-virtual-scroll-list>
</template>

While this.$slots.default is virtual list, this.$slots.head is <th>

[Mash19]

I think you can work this out with the existing component. Just do the Table and THead yourself and have the component render the tbody.

    <table>
        <thead>
            <tr>
                  <th>Loop another array for each column header</th>
           </tr>
       </thead>
       <virtual-list
             :size="20"
             :remain="10"
            rtag="tbody"
           wtag="tr"
         >
             <tr
                 v-for="(row, ir) in sheet"
                :key="ir"
               >
                  <td>{{ +ir + 1 }}</td>
                  <td
                      v-for="(cell, ic) of row"
                      :key="'c' + (ic + 1) + 'r' + (ir + 1)"
                      v-html="cellDisplayValue(ir + 1, ic + 1)"
                  >
                 </td>
              </tr>
         </virtual-list>
   </table>

[W65138497]

How to achieve the replacement of product components into table elements

[xxbld]

#139

[tangbc]

Released version 1.4.3 thanks @xxbld