Search code examples
javascriptvue.jstabular

Table cells with multiple colspan dynamically

I am trying to build the table using data from Vue.js. Based on the value of a particular column I wish to divide the cells into 2 or 3 columns respectively.

Consider the following image:

The cell which corresponds to row 01 and col 01 should be divided into 3 columns vertically and the null value to be placed in each of these columns. whereas cells containing two null values should be divided into two columns vertically.

I tried using colspan by setting it different for different cells dynamically based on the value which defines the number of null values but it does not give me the expected outcome.

Here's a link to js fiddle that I have tried so far:jsfiddle.net/amahajan/vqysp93r

How can this grid table layout be achieved?

Solution

  • I would suggest using flex styles rather than column spans to align the cell content. See the following:

    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>