Allow colspan=(all) items

I know this one might be a bit controversial/difficult, but wanted to throw it out there and see what y’all thought. I have the need to “group” things in a single table (single table so I get selectable support) and the most natural way of displaying the groupings I can think of would be to use a row where colspan is all the columns.

An quick-and-dirty example might be (of course, with much more beautiful styling)

Weapon	Person
Study
Rope	Professor Plum
Gun	Colonel Mustard
Kitchen
Knife	Mrs. White

Where the items coming in look like:

[
   {room: "Study", weapon: "Rope", person: "Professor Plum"},
   {room: "Study", weapon: "Gun", person: "Colonel Mustard"},
   {room: "Kitchen", weapon: "Knife", person: "Mrs. White"},
]

(although I’m more than happy to transform my items if the implementation is easier with a different representation)

My particular use case would include:

• the ability to use tbody-tr-class (or similar) to style said rows
• not have those rows selected in range mode (“skips” over them)

[tmorehouse]

Not needed…

You could do the following:

const items = [
  { category: 'a', foo: 1, bar: 2 },
  { category: 'a', foo: 3, bar: 4 },
  { category: 'b', foo: 5, bar: 6 },
  { category: 'b', foo: 7, bar: 8 },
  { category: 'c', foo: 9, bar: 10 }
]

and then loop through your items like so:

items.forEach((item, index) => {
  if (items[index+1] !== undefined && item.category !== items[index+1].category) {
    item._showDetails = true
    item.nextCategory = items[index+1].category
  }
})

And then pass this modified items to b-table, and then use the following slots:

<template slot="top-row" slot-scope="{ columns }">
  <!-- slot top-row requires you to provide your own td element(s) -->
  <td :colspan="columns">{{ items[0].category }}</td>
</template>
<template slot="row-details" slot-scope="{ item }">
  <!-- details slot already has a single TD with correct colspan -->
  {{ item.nextCategory }}
</template>

Should get you close to what you want.

[thejcannon]

Fair enough, thanks again!