DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Header colspan in options

Header colspan in options

lucas_araujolucas_araujo Posts: 13Questions: 6Answers: 0
in Free community support

I just migrated my code to Vue and am using the DataTables component like this:

<CustomDataTable
      v-if="tableData.length > 0"
      :data="tableData"
      :columns="tableColumns"
      ref="dataTableRef"
 />

But i have not found a way to use a ComplexHeader with this method, is there a way?

My objective:

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 22,314Questions: 26Answers: 5,130

    I assume you are using columns.title to create the header. This only supports a single header row. From the columns.title docs:

    Please note that when constructing a header, DataTables can only construct a simple header with a single cell for each column. Complex headers with colspan and rowspan attributes must either already be defined in the document, or be constructed using standard DOM / jQuery methods.

    Kevin

  • allanallan Posts: 65,308Questions: 1Answers: 10,830 Site admin
    Answer ✓

    If you were to use our Vue component you can pass a thead in to the DataTable component as the default slot, and it will use that as the table header.

    Allan

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2025 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.