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



  • @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
    0_1539742760235_result.png



  • 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



  • @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/



  • Nice! 👍

    Scott



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



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

    Scott



  • @kevinyang hello, my friend! I have met the some problem . Now i need a multiple header table, but i have no idea about this, can you tell what to do? Thank you a lot!
    老铁,我看了你的名字,我相信你能看懂下面这段话:我也想搞一个多级表头的table,但是我不会,又打不过产品经理,所以你能告诉小弟怎么做的吗?谢谢!



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



  • 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. 😞



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

    Scott



  • Thanks for doing that @s-molinari



  • Looks like they’ve found the problem.

    Scott



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

    Scott



  • 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.



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

    https://jsfiddle.net/v09hbkwa/