Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  September 2023

  DataTables supports colspan and rowspan in the table's header, please see this example (it's the same with or without Editor) - but please note that they're not support with the table's body.

  Colin
• chita2 Posts: 3Questions: 1Answers: 0

  September 2023

  <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: 'note', 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' },
    { 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: '비고', data: 'note' },
  ];
  
  const options = {
    responsive: true,
    orderMulti: false,
    order: [[1, 'asc']],
    select: {
      style: 'multi',
      selector: 'input.editor-active',
    },
    colReorder: true,
    searching: false,
    scrollY: true, // use change number
    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',
      note: '',
    },
    {
      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',
      note: ''
    },
    {
      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',
      note: ''
    },
  ];
  </script>
  
  <template>
  <DataTable
    :columns="columns"
    :data="data"
    :options="options"
    id="example"
    class="display nowrap"
    style="width: 100%"
  />
  </template>
  

  This is my current code status. I would like to use rospan or colspan in this format. Will it be possible?
• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  September 2023 Answer ✓

  The columns.title option won't build a complex header. See this note in the 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