Can I automatically adjust the edit size of inline editing to fit the column size?

chita

When you try to modify a row value using inline editing, the length of the edit box exceeds the length of the column. Can I adjust this automatically to fit the length of the column?

colin

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

<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

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

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

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