Create an intricate table design using CSS grid and incorporate nested vue v-for loops for dynamic content rendering

Question

Create an intricate table design using CSS grid and incorporate nested vue v-for loops for dynamic content rendering

I have data that is nested and I want to display it in a tabular format. Here is an example of the data; in the actual application, there could be dozens of entries in rows.

<script>
export default {
  name: 'Example',

  data () {
    return {
      results: [
        { a: 'AAA', rows: { BBB: 'CCC' } },
        { a: 'D', rows: { E: 'F', G: 'H' } },
        { a: 'Tom, Dick & Harry', rows: { x: 'y' } },
      ],
    }
  },
}
</script>

Please note: the inner values ('CCC', 'F', 'H', 'y') may end up being further nested arrays or objects.

I attempted to create a grid layout using v-for loops:

<template>
<div style="width:100%">
  <div v-for="(res,key) in results" :key="key" class="results">
    <div class="A">{{res.a}}</div>
    <div v-for="(c,b) in res.rows" :key="b">
      <div class="B">{{b}}</div>
      <div class="C">{{c}}</div>
    </div>
  </div>
</div>
</template>
<style scoped>
.results {display:grid;grid-template-columns: 1fr 1fr;}
.A {font-weight:bold;grid-column:1/3;}
.B {grid-column:1;padding:0.5rem;}
.C {grid-column:2;padding:0.5rem;}
</style>

(Note: the more logical grid-column:1/2, to span two columns, doesn't seem to work...)

This grid layout does not show the correct structure, so I have included a traditional table layout at the end to demonstrate what I am aiming for.

https://i.sstatic.net/lPKbx.png

Is this issue due to a simple bug? Or is there a better approach to combining vue and grid layouts? Keep in mind that I might need to implement a third v-for loop as mentioned earlier.

Just for reference, here is the HTML code for the table:


  <table border="1" cellspacing=0 style="width:100%;">
    <tr>
      <td colspan="2"><b>AAA</b></td>
    </tr>
    <tr>
      <td>BBB</td>
      <td>CCC</td>
    </tr>
    <tr>
      <td colspan="2"><b>D</b></td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
    <tr>
      <td>G</td>
      <td>H</td>
    </tr>
    <tr>
      <td colspan="2"><b>Tom, Dick & Harry</b></td>
    </tr>
    <tr>
      <td>x</td>
      <td>y</td>
    </tr>
  </table>

css vue.js vuejs2 css-grid

Answer 1

Answer №1

By chance, I stumbled upon a solution for effectively handling vue v-for loops without generating DOM elements, which happened to be exactly what I needed in this case.

To elaborate on the issue that led to an incorrect layout: CSS grids require applying the layout to the child elements of the grid container. Unfortunately, there is no flexibility in this regard, with no option to exclude a div from the layout.

The workaround involved switching the inner <div v-for=""> to

<template v-for="">

<template>
<div style="width:100%">
  <div v-for="(res,key) in results" :key="key" class="results">
    <div class="A">{{res.a}}</div>
    <template v-for="(c,b) in res.rows">
      <div class="B" :key="b">{{b}}</div>
      <div class="C" :key="'_'+b">{{c}}</div>
    </template>
  </div>
</div>
</template>

The only downside is that you cannot assign the :key directly to the <template> tag as it does not get rendered. Therefore, every child element within the <template> must have a unique :key. In the provided example, a workaround was implemented to address this issue.

In my specific application, I omitted those two :key definitions and used

<!-- eslint-disable vue/require-v-for-key -->

to suppress eslint warnings. From what I understand, replacing the entirety of res should not pose any issues if it changes. However, it is advisable to use :key wherever necessary if uncertain.

Answer 2

By chance, I stumbled upon a solution for effectively handling vue v-for loops without generating DOM elements, which happened to be exactly what I needed in this case.

To elaborate on the issue that led to an incorrect layout: CSS grids require applying the layout to the child elements of the grid container. Unfortunately, there is no flexibility in this regard, with no option to exclude a div from the layout.

The workaround involved switching the inner <div v-for=""> to

<template v-for="">

<template>
<div style="width:100%">
  <div v-for="(res,key) in results" :key="key" class="results">
    <div class="A">{{res.a}}</div>
    <template v-for="(c,b) in res.rows">
      <div class="B" :key="b">{{b}}</div>
      <div class="C" :key="'_'+b">{{c}}</div>
    </template>
  </div>
</div>
</template>

The only downside is that you cannot assign the :key directly to the <template> tag as it does not get rendered. Therefore, every child element within the <template> must have a unique :key. In the provided example, a workaround was implemented to address this issue.

In my specific application, I omitted those two :key definitions and used

<!-- eslint-disable vue/require-v-for-key -->

to suppress eslint warnings. From what I understand, replacing the entirety of res should not pose any issues if it changes. However, it is advisable to use :key wherever necessary if uncertain.

Answer 3

Answer №2

Consider using arrays instead of objects:

new Vue({
  el: '#demo',
  data () {
    return {
      results: [
        { a: 'AAA', rows: [{id:'BBB'}, {id:'CCC', more: [{id: '1'}, {id: '2'}]}] },
        { a: 'D', rows: [{id:'E'}, {id:'F', more: [{id: '1'}, {id: '2'}]}, {id:'G'}, {id:'H', more: [{id: '1'}, {id: '2'}]}] },
        { a: 'Tom, Dick & Harry', rows: [{id:'x'}, {id:'y', more: [{id: '1'}, {id: '2'}]}] },
      ],
    }
  },
})


Vue.config.productionTip = false
Vue.config.devtools = false

.results {display:grid;grid-template-columns: 1fr 1fr;}
.A {font-weight:bold;grid-column:1/3;}
.B {grid-column:1;padding:0.5rem;}
.C {grid-column:2;padding:0.5rem;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">

<div style="width:100%">
  <div v-for="(res,key) in results" :key="key" class="results">
    <div class="A">{{res.a}}</div>
    <div v-for="(c,b) in res.rows" :key="b">
      <div class="B">{{c.id}}</div>
      <div v-for="(z,i) in c.more" :key="i">
        <div class="C">{{z.id}}</div>
      </div>
    </div>
  </div>
</div>
      
</div>

Answer 4

Consider using arrays instead of objects:

new Vue({
  el: '#demo',
  data () {
    return {
      results: [
        { a: 'AAA', rows: [{id:'BBB'}, {id:'CCC', more: [{id: '1'}, {id: '2'}]}] },
        { a: 'D', rows: [{id:'E'}, {id:'F', more: [{id: '1'}, {id: '2'}]}, {id:'G'}, {id:'H', more: [{id: '1'}, {id: '2'}]}] },
        { a: 'Tom, Dick & Harry', rows: [{id:'x'}, {id:'y', more: [{id: '1'}, {id: '2'}]}] },
      ],
    }
  },
})


Vue.config.productionTip = false
Vue.config.devtools = false

.results {display:grid;grid-template-columns: 1fr 1fr;}
.A {font-weight:bold;grid-column:1/3;}
.B {grid-column:1;padding:0.5rem;}
.C {grid-column:2;padding:0.5rem;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">

<div style="width:100%">
  <div v-for="(res,key) in results" :key="key" class="results">
    <div class="A">{{res.a}}</div>
    <div v-for="(c,b) in res.rows" :key="b">
      <div class="B">{{c.id}}</div>
      <div v-for="(z,i) in c.more" :key="i">
        <div class="C">{{z.id}}</div>
      </div>
    </div>
  </div>
</div>
      
</div>

Create an intricate table design using CSS grid and incorporate nested vue v-for loops for dynamic content rendering

Answer №1

Answer №2

Similar questions

Vue: The past event target value is returning an empty string when I attempt to paste for the first time

Diverse Values within the Inner Border

What is the best way to shorten string values that exceed a certain length?

Endless rotation with stunning magnification feature

Revolving mechanism within React.js

Confusion between Codeigniter's URL and base_url() function

XSLT causing a colon conflict in Vue.js component creation process

"Trouble with the functionality of Animate.css fliptext when triggered by button click

Using parameters in NativeScript-Vue

Ways to implement changes to a variable using an external file while the application is running in production

Filtering a combination column in Vue using Good Table

How to successfully submit an array using Vue.js

Setting table row styles for odd and even rows, based on user clicks of an <input type="file"> button

The text in my image is positioned away from the top

Effective ways to sort material cards in Angular

Adjust the background color of a cell depending on its value - Implementing with VueJs and Vuetify

The vertical navigation sub-menu is designed to overlap the div container for a

Ways to adjust the text size in jqGrid?

Webkit browsers do not properly clip content with rounded corners when using position:relative

Chrome browser hover malfunction issue