Answers

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

  September 2023

  It's not happening in this example - take a look at the Age column which is narrow, so it's possible there's some CSS on your page that's affecting it.

  Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

  Colin
• chita Posts: 33Questions: 12Answers: 2

  September 2023

  <script setup>
  // 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, defaultContent: '',
      render: (data, type, row) =>
        type === 'display' ? '<input type="checkbox" class="editor-active">' : data,
        className: 'dt-body-center'
    },
    { title: '잠김', data: 'lock' },
    { title: '계정 유형', data: 'accountType', editField: 'accountType'},
    { title: '부서', data: 'dep' },
    { title: '사용자명', data: 'username' },
    { title: '사용자', 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,
    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"
  />
  </template>
  
  

  This is my current code status.
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  September 2023

  Can you link to a test case showing the issue please? Also, from your other thread you were having some CSS issues as well. Have you loaded the Editor CSS?

  Allan
• chita Posts: 33Questions: 12Answers: 2

  September 2023

  I downloaded datables, extension, and editor using NPM. Is the Editor css you mentioned separate from the NPM installation? If so, it seems that Editor css has not been loaded. How do I load it?
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  September 2023 Answer ✓

  Typically in Vue you'd do:

  import '@datatables.net/editor-2023-09-13-dt';
  

  Similar to what you need to do for the DataTables styling.

  Allan