CODEWITHSUNDEEP
reactjsvue.js
Kuan
Kuan

Reputation: 11389

how to build component render multiple rows inside a table in React or Vue

Just wonder if I build component to render partial of the table rows, how should I do that?

<table>
  <thead>
      <tr><td>Col 1</td><td>Col 2</td></tr>
  </thead>
  <tbody>
      <partialrows :data="dataset1" />
      <partialrows :data="dataset2" />
   </tbody>
</table>

I want each partialrows to render couple rows 

<tr><td colspan=2>title ds 1</td></tr>
<tr><td>ds01</td><td>ds02</td></tr>
<tr><td>ds11</td><td>ds12</td></tr>
<tr><td>ds21</td><td>ds22</td></tr>

But this violate single root element rule, I wonder how to solve this in either React or Vue?

Thanks

Upvotes: 0

Views: 464

Answers (1)

wwerner
wwerner

Reputation: 4327

In Vue, you could use a functional component or vue-fragments. Have a look at this article.

In React, there are fragments as well.

Upvotes: 1

Related Questions