Can I make a column like the one in the picture below with the function of extension or editor of th

chita

Can I make a column like the one in the picture below with the function of extension or editor of the data table?

colin

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

<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

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