version1.1.2 do not use table tag ?

[Create-Peace]

trafficstars

Describe the bug

I'm trying to implement virtual-table by using [email protected] 。But I found vue-virtual-scroller doesnot surport table tag。

 <table>
      <colgroup>
        <col width="400">
        <col width="400">
        <col width="400">
      </colgroup>
      <RecycleScroller
        tag="table"
        :items="items"
        :item-size="42"
        list-tag="tbody"
        item-tag="tr"
        key-field="_id"
        page-mode
      >
        <template slot-scope="props">
          <td>{{ props.item.picture }}</td>
          <td>{{ props.item.name }}</td>
          <td>{{ props.item.company }}</td>
        </template>
      </RecycleScroller>
    </table>

After web page rendered，I found dom structure is not right.

<table>
	<colgroup>
		<col width="400">
		<col width="400">
		<col width="400">
	</colgroup>
	<div class="vue-recycle-scroller ready page-mode direction-vertical" tag="table">
		<!---->
		<tbody class="vue-recycle-scroller__item-wrapper" style="min-height: 208992px;">
			<tr class="vue-recycle-scroller__item-view" style="transform: translateY(0px) translateX(0px);">
				<td>http://placehold.it/32x32</td>
				<td>Compton Albert</td>
				<td>ZAPPIX</td>
			</tr>
			<tr class="vue-recycle-scroller__item-view" style="transform: translateY(42px) translateX(0px);">
				<td>http://placehold.it/32x32</td>
				<td>Daugherty Irwin</td>
				<td>VELITY</td>
			</tr>
			<tr class="vue-recycle-scroller__item-view" style="transform: translateY(84px) translateX(0px);">
				<td>http://placehold.it/32x32</td>
				<td>Hopkins Ramos</td>
				<td>EXOSPACE</td>
			</tr>
			<tr class="vue-recycle-scroller__item-view" style="transform: translateY(126px) translateX(0px);">
				<td>http://placehold.it/32x32</td>
				<td>Stanton Wilcox</td>
				<td>SURELOGIC</td>
			</tr>
			<tr class="vue-recycle-scroller__item-view" style="transform: translateY(168px) translateX(0px);">
				<td>http://placehold.it/32x32</td>
				<td>Savannah Guzman</td>
				<td>HARMONEY</td>
			</tr>
		</tbody>
		<!---->
		<div data-v-b329ee4c="" tabindex="-1" class="resize-observer">
			<object aria-hidden="true" tabindex="-1" type="text/html" data="about:blank"></object>
		</div>
	</div>
</table>

So What am I to do？

Reproduction

https://github.com/Akryum/vue-virtual-scroller/issues/new?assignees=&labels=to+triage&template=bug-report.yml

System Info

npm install

Used Package Manager

npm

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[awesomeYG]

I have the same problem in version: 1.1.2

[johandanforth]

Me too. How are we supposed to generate a normal table with header and body?

[Eviwang]

Me too.

[abdouthetif]

RecycleScroller doesn't have a "tag" prop. You can only have "listTag" and "itemTag". The problem is that RecycleScroller create a div tag wrapping the listTag and the itemTag. It would be nice to do without this div tag and only use "listTag" and "itemTag" props