I wanted to implement a complex header, but there was a problem.

chita

<script setup>
import Pageheader from "../../../shared/components/pageheader/pageheader.vue";

// DataTables
import { onMounted } from 'vue';
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import Editor from '@datatables.net/editor-2023-09-13-dt';
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';
import 'datatables.net-responsive';
import 'datatables.net-select';
import 'datatables.net-datetime';
import 'datatables.net-colreorder';
      
DataTable.use(DataTablesCore);

onMounted(function () {
  $('#example').on('dblclick', 'tbody td:not(:first-child)', function(e) {
    editor.inline(this)
  });

});
     
const editor = new Editor ({
  fields: [
    {
      name: 'checkbox',
      type: 'checkbox',
      separator: '|',
      options: [{ label: '', value: 1 }]
    },
    { name: 'lock', className: 'ControlWidth' },
    { name: 'accountType', type: 'select', options: ['내부 직원', '외부 직원', '장비'] },
    { name: 'dep', className: 'ControlWidth' },
    { name: 'username', className: 'ControlWidth' },
    { name: 'userId', className: 'ControlWidth' },
    { name: 'email', className: 'ControlWidth' },
    { name: 'phone', className: 'ControlWidth' },
    { name: 'tel', className: 'ControlWidth' },
    { name: 'registDate', className: 'ControlWidth' },
    { name: 'expireDate', className: 'ControlWidth' },
    { name: 'lastAccess', className: 'ControlWidth' },
    { name: 'lastAccessDate', className: 'ControlWidth' },
    { name: 'note1', className: 'ControlWidth' },
    { name: 'note2', className: 'ControlWidth' },
    { name: 'note3', className: 'ControlWidth' },
    { name: 'note4', className: 'ControlWidth' },
    { name: 'note5', className: 'ControlWidth' },
  ],
  formOptions: {
    inline: {
    onBlur: 'submit',
    drawType: 'full-hold',
    fieldInfo: false,
    },
  },
  idSrc: 'DT_rowID',
  table: '#example',
  
});
     
const columns = [
  { title: '', data: 'checkbox', orderable: false,
    render: (data, type, row) =>
      type === 'display' ? '<input type="checkbox" class="editor-active">' : data,
      className: 'dt-body-center'
  },
  { title: '잠김', data: 'lock', rowspan: "2" },
  { title: '계정 유형', data: 'accountType' },
  { title: '부서', data: 'dep' },
  { title: '사용자명', data: 'username' },
  { title: '사용자 ID', data: 'userId' },
  { title: '이메일', data: 'email' },
  { title: '휴대폰', data: 'phone' },
  { title: '전화번호', data: 'tel' },
  { title: '등록일자', data: 'registDate' },
  { title: '만료일자', data: 'expireDate' },
  { title: '최근 접속', data: 'lastAccess' },
  { title: '최근 접속 시간', data: 'lastAccessDate' },
  { title: '비고 하위 1', data: 'note1' },
  { title: '비고 하위 2', data: 'note2' },
  { title: '비고 하위 3', data: 'note3' },
  { title: '비고 하위 4', data: 'note4' },
  { title: '비고 하위 5', data: 'note5' },
];

const options = {
  responsive: true,
  orderMulti: false,
  order: [[1, 'asc']],
  select: {
    style: 'multi',
    selector: 'input.editor-active',
  },
  colReorder: true,
  searching: false,
  scrollX: true,
  scroller: true,
  language: {
    select: {
      rows: {
        0: '',
        _: " &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; %d개 행이 선택 됨"
      }
    },
    paginate: {
      next: ">>",
      previous: "<<",
    },
    lengthMenu: '<select>'+
      '<option value="10">10개</option>'+
      '<option value="20">20개</option>'+
      '<option value="30">30개</option>'+
      '<option value="40">40개</option>'+
      '<option value="50">50개</option>'+
      '<option value="-1">전체</option>'+
      '</select> 값 출력',
      info: "전체 데이터 _TOTAL_개 중 _START_ - _END_ 데이터가 출력되었습니다.",
  },

  rowCallback: function (row, data) {
   // Set the checked state of the checkbox in the table
   row.querySelector('input.editor-active').checked = data.active == 1;
  },
};

const data = [
  {
    DT_rowID: 'row_1',
    checkbox: '',  
    lock: '',
    accountType: '내부 직원',
    dep: '연구소\\연구 1팀',
    username: 'TESTER',
    userId: 'TESTER ID',
    email: 'admin@test.com',
    phone: '010-1234-3491',
    tel: '02-755-1944',
    registDate: '2023-08-17 05:41:15',
    expireDate: '-',
    lastAccess: '2일 전',
    lastAccessDate: '2023-08-18 13:34:22',
    note1: '1',
    note2: '2',
    note3: '3',
    note4: '4',
    note5: '5',
  },
  {
    DT_rowID: 'row_2',
    checkbox: '',     
    lock: '',
    accountType: '외부 직원',
    dep: '연구소\\연구 1팀',
    username: 'TESTER',
    userId: 'TESTER ID',
    email: 'admin@test.com',
    phone: '010-1234-3491',
    tel: '02-755-1944',
    registDate: '2023-08-17 05:41:15',
    expireDate: '-',
    lastAccess: '2일 전',
    lastAccessDate: '2023-08-18 13:34:22',
    note1: '1',
    note2: '2',
    note3: '3',
    note4: '4',
    note5: '5',
  },
  {
    DT_rowID: 'row_3',
    checkbox: '',     
    lock: '',
    accountType: '장비',
    dep: '연구소\\연구 1팀',
    username: 'TESTER',
    userId: 'TESTER ID',
    email: 'admin@test.com',
    phone: '010-1234-3491',
    tel: '02-755-1944',
    registDate: '2023-08-17 05:41:15',
    expireDate: '-',
    lastAccess: '2일 전',
    lastAccessDate: '2023-08-18 13:34:22',
    note1: '1',
    note2: '2',
    note3: '3',
    note4: '4',
    note5: '5',
  },
];
</script>

<template>
<DataTable
  :columns="columns"
  :data="data"
  :options="options"
  id="example"
  class="display nowrap"
  style="width: 100%"
>
<thead>
  <tr>
    <th rowspan="2"></th>
    <th rowspan="2">잠김</th>
    <th rowspan="2">계정 유형</th>
    <th rowspan="2">부서</th>
    <th rowspan="2">사용자명</th>
    <th rowspan="2">사용자</th>
    <th rowspan="2">이메일</th>
    <th rowspan="2">휴대폰</th>
    <th rowspan="2">전화번호</th>
    <th rowspan="2">등록일자</th>
    <th rowspan="2">만료일자</th>
    <th rowspan="2">최근 접속</th>
    <th rowspan="2">최근 접속 시간</th>
    <th colspan="5">비고</th>
</tr>
<tr>
    <th>비고 하위 1</th>
    <th>비고 하위 2</th>
    <th>비고 하위 3</th>
    <th>비고 하위 4</th>
    <th>비고 하위 5</th>
</tr>
</thead>
</DataTable>
</template>

I tried to implement it based on the example of Complex Headers (rowspan and colspan), but there was a problem. The columns are not completely created, and it seems to be implemented only as large as the table size. I tried the scrollX option, but it didn't work. What's the problem?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin