[Solved] How to make a q-table with multiple headers?

[KevinYang]

Hello,
I’m wondering how to make a q-table with multiple headers, does anyone knows?For example:

I had added a <table> inside the <q-tr slot=“header” slot-scope=“props”>
but the table header alignment doesn’t match the table data.

Can anyone suggest me how I can achieve this?

Thanks in advance!

[s.molinari]

I’d venture to say, that wouldn’t be part of the header, but more about the top row with column names and with that in mind, I don’t think it is possible. You might be able to jimmy the header to show the column groupings. The colors are another thing.

Scott

[rconstantine]

You can do custom headers and custom cells. I don’t see why you wouldn’t be able to use HTML’s colspan attribute for the header elements. There’s docs for the custom header somewhere on this site. I don’t recall where.

[KevinYang]

@rconstantine @s-molinari Thanks for the reply. I’ve tried custom headers with colspan, but it’s not working.
What am I missing?Here is my code.

<template>
  <q-page padding>
    <q-table
      :data="tableData"
      :columns="columns"
      :separator="separator"
      dense
      row-key="col1"
    >
      <q-tr slot="header" slot-scope="props">
        <table cellspacing="1">
          <q-tr>
            <q-th colspan="1" class="bg-teal-9 text-white">col type1</q-th>
            <q-th colspan="2" class="bg-deep-orange-9 text-white">col type2</q-th>
            <q-th colspan="3" class="bg-light-blue-9 text-white">col type3</q-th>
          </q-tr>
          <q-tr>
            <q-th key="col1" :props="props" class="bg-teal-9 text-white">col1</q-th>
            <q-th key="col2" :props="props" class="bg-deep-orange-9 text-white">col2</q-th>
            <q-th key="col3" :props="props" class="bg-deep-orange-9 text-white">col3</q-th>
            <q-th key="col4" :props="props" class="bg-light-blue-9 text-white">col4</q-th>
            <q-th key="col5" :props="props" class="bg-light-blue-9 text-white">col5</q-th>
            <q-th key="col6" :props="props" class="bg-light-blue-9 text-white">col6</q-th>
          </q-tr>
        </table>
      </q-tr>
      <q-tr slot="body" slot-scope="props" :props="props">
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          {{ col.label }}
        </q-td>
      </q-tr>
    </q-table>
  </q-page>
</template>

<script>
export default {
  // name: 'PageName',
  data () {
    return {
      tableData: [{
        col1: 'x', col2: 'x', col3: 'x', col4: 'x', col5: 'x', col6: 'x'
      }],
      columns: [
        { name: 'col1', align: 'center', label: 'col1', field: 'col1', sortable: true },
        { name: 'col2', align: 'center', label: 'col2', field: 'col2', sortable: true },
        { name: 'col3', align: 'center', label: 'col3', field: 'col3', sortable: true },
        { name: 'col4', align: 'center', label: 'col4', field: 'col4', sortable: true },
        { name: 'col5', align: 'center', label: 'col5', field: 'col5', sortable: true },
        { name: 'col6', align: 'center', label: 'col6', field: 'col6', sortable: true },
        { name: 'col7', align: 'center', label: 'col7', field: 'col7', sortable: true }
      ],
      separator: 'cell'
    }
  }
}
</script>

and I got the result like this

[s.molinari]

I played with this for about 30 minutes with no luck.

https://jsfiddle.net/smolinari/5y6rbn9u/

Maybe someone else can get it to work?

Scott

[Hawkeye64]

@KevinYang @s-molinari
I must say I like a bit of challenge. I think the issue you were having before is you needed more than one tr element, but that is where the scope goes. So, I tried a different approach and put a div in with the header scope.
Also, notice the style="display: contents" on the div.
You can see the results here: https://jsfiddle.net/Hawkeye64/5y6rbn9u/46/

[s.molinari]

Nice!

Scott

[KevinYang]

@Hawkeye64 @s-molinari
Thank you so much, you are my hero.

[s.molinari]

I would never, ever in a million years have thought to put the two sets of <tr>s in a div.

Scott

[huyang271]

This post is deleted!

[huyang271]

@hawkeye64 hello my friend, your url is bad now. can you send it again,thank you sooooooooo much!

[Hawkeye64]

Unfortunately, it appears to be gone. As is the one from @s-molinari …
Looks like jsfiddle is cleaning house. Or (worst case scenario) they were hacked and had to restore from an older database back up which caused newer fiddles to be lost. It only shows I have 8. Last I looked, there were over 20.

[s.molinari]

I’ve asked about the situation: https://github.com/jsfiddle/jsfiddle-issues/issues/1388

Scott

[Hawkeye64]

Thanks for doing that @s-molinari

[s.molinari]

Looks like they’ve found the problem.

Scott

[s.molinari]

And it looks like those fiddles are lost forever. Bummer…

Scott

[metalsadman]

I dunno what’s wrong with my browser, but jsfiddle don’t work for me :s, it just blink then just shows a white screen, that’s why i’m using codesandbox instead.

[hnak]

I could not see the link, so I wrote it referring to the above comment.

https://jsfiddle.net/v09hbkwa/

[s.molinari]

That is an old fiddle. Have a look at the header slot in QTable.

https://v1.quasar-framework.org/vue-components/table

This can get you rolling maybe.

https://codepen.io/smolinari/pen/PgqEMM?editors=1010

Scott