``Maneuvering through dynamically generated cells with multiple colsp

Question

``Maneuvering through dynamically generated cells with multiple colsp

I'm currently working on creating a table using data from Vue.js. Depending on the value of a specific column, I want to split the cells into either 2 or 3 columns.

Take a look at this image:

The cell in row 01 and col 01 should be split into 3 vertical columns with null values in each column. Cells with two null values should be divided into 2 columns vertically.

I attempted to use colspan dynamically based on the number of null values, but it didn't produce the desired result.

Here's what I've tried so far on jsFiddle: jsfiddle.net/amahajan/vqysp93r

Is there a way to achieve this grid layout for the table?

javascript vue.js tabular

Answer 1

Answer №1

To enhance the alignment of cell content, I recommend utilizing flex styles rather than column spans. Here's an example to demonstrate:

new Vue({
  el: '#app',
  data: () => ({
    rows: []
  }),
  methods: {
    stagger (d) {
      return d % 2 === 1 ? 'rgba(255,249,196,1)' : 'rgba(178,223,219,1)'
    }
  },
  beforeMount() {
    this.rows = Array.from(Array(10), (x, i) => {
      let days = []

      for (j = 0; j < 7; j++) {
        days.push(Math.floor((Math.random() * 3)) + 1)
      }

      return {
        id: i,
        days
      }
    })
  }
})

table { 
    border-spacing: 0;
    border: 1px solid black;
}

th {
  padding: .25rem;
}

tr td:first-of-type {
  background-color: rgba(176,190,197,1);
}

td {
  border-top: 1px solid black;
  text-align: center;
}

td > div {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

span {
  font-size: 10px;
  font-weight: 500;
  width: 100%;
  padding: .15rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th v-for="d in 7" :key="d" :style="{ 'background-color': stagger(d) }">Week Day {{ d }}</th>
      <tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td>{{ row.id }}</td>
        <td v-for="(day, index) in row.days" :key="`${row.id}-${index}`" :style="{ 'background-color': stagger(index) }">
          <div>
            <span v-for="v in day" :key="v">NULL</span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

To enhance the alignment of cell content, I recommend utilizing flex styles rather than column spans. Here's an example to demonstrate:

new Vue({
  el: '#app',
  data: () => ({
    rows: []
  }),
  methods: {
    stagger (d) {
      return d % 2 === 1 ? 'rgba(255,249,196,1)' : 'rgba(178,223,219,1)'
    }
  },
  beforeMount() {
    this.rows = Array.from(Array(10), (x, i) => {
      let days = []

      for (j = 0; j < 7; j++) {
        days.push(Math.floor((Math.random() * 3)) + 1)
      }

      return {
        id: i,
        days
      }
    })
  }
})

table { 
    border-spacing: 0;
    border: 1px solid black;
}

th {
  padding: .25rem;
}

tr td:first-of-type {
  background-color: rgba(176,190,197,1);
}

td {
  border-top: 1px solid black;
  text-align: center;
}

td > div {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

span {
  font-size: 10px;
  font-weight: 500;
  width: 100%;
  padding: .15rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th v-for="d in 7" :key="d" :style="{ 'background-color': stagger(d) }">Week Day {{ d }}</th>
      <tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td>{{ row.id }}</td>
        <td v-for="(day, index) in row.days" :key="`${row.id}-${index}`" :style="{ 'background-color': stagger(index) }">
          <div>
            <span v-for="v in day" :key="v">NULL</span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

``Maneuvering through dynamically generated cells with multiple colsp

Answer №1

Similar questions

Managing actions with IconMenu and ListItem in React using MaterialUi

Enhance your website with a dynamic jQuery gallery featuring stunning zoom-in

Angular JavaScript Object Notation structure

MongoDB does not return any results for the query and returns

encountering a type mismatch error while trying to retrieve data from an array

Using an asynchronous JavaScript promise to dynamically change the source of an image

Adding Firebase Authentication to my AngularJS website

What are the steps to modify the placeholder of the formik <Field/> component?

Creating Stylish Vue Components: Incorporating 'if' Statements in Style Tags

Numerous checkboxes have been chosen alongside a submission button

Having issues with importing images in Next.js using the Next Images package

Troubleshoot: Bootbox Confirm Functionality Issues

What is the best approach for assigning initial values to data retrieved from Vuex?

Access a component within an inactive carousel slide

Ways to obtain HTML as plain text

Displaying data on the user interface in Angular by populating it with information from the form inputs

The fixed method in JavaScript is a handy tool for converting

The ajax request functions smoothly on the OS X Paw app and cURL, but does not work properly when coded in Javascript / jQuery

Creating a visual representation of a Google map with directions using JavaScript!

Struggling to efficiently handle imported JSON data using VUE.JS JavaScript?