New snippet 679 - code helper

xxxxxxxxxx
 
<div class="d-flex justify-content-end mb-4">
  <div data-mdb-input-init class="form-outline">
    <input
      data-mdb-search
      data-mdb-target="#table_modal"
      type="text"
      id="search_modal"
      class="form-control"
    />
    <label class="form-label" for="search_modal">Search</label>
  </div>
  <button data-mdb-ripple-init class="btn btn-primary btn-sm ms-3" data-mdb-add-entry data-mdb-target="#table_modal">
    <i class="fa fa-plus"></i>
  </button>
</div>
<hr />
<div id="table_modal"></div>

xxxxxxxxxx
 
.table-editor_input-wrapper[data-mdb-field="id"] {
  display: none;
}

xxxxxxxxxx
 
const advancedColumns = [
  {
    width: 50,
    label: 'id',
    field: 'id',
  },
  {
    width: 100,
    label: 'Company',
    field: 'company',
  },
  {
    width: 50,
    sort: false,
    defaultValue: 'Warsaw',
    options: ['London', 'Warsaw', 'New York'],
    inputType: 'select',
    label: 'Office',
    field: 'office',
  },
  {
    width: 100,
    inputType: 'number',
    defaultValue: 1,
    label: 'Employees',
    field: 'employees',
  },
  {
    width: 100,
    defaultValue: false,
    inputType: 'checkbox',
    label: 'International',
    field: 'international',
  },
];
​
const advancedRows = [
  {
    id: 1,
    company: 'A. Jonson Gallery',
    office: 'London',
    employees: 4,
    international: false,
  },
  {
    id: 2,
    company: 'F.A. Architects',
    office: 'London',
    employees: 4,
    international: false,
  },
];
const options = { 
  mode: 'modal',
  entries: 5,
  entriesOptions: [5, 10, 15]
}
let id = 2;
const tableEl = document.getElementById('table_modal');
const tableModal = new TableEditor(
  tableEl,
  { columns: advancedColumns, rows: advancedRows },
  options
);
​
tableEl.addEventListener('add.mdb.tableEditor', (e) => {
  console.log(e.row)
  if (!e.row.id) {
    e.preventDefault();
  }
 
  const idInput = document.querySelector('.table-editor_input-wrapper[data-mdb-field="id"] .table-editor__input')
  id += 1;
  idInput.value = id;
  idInput.dispatchEvent(new Event('input'))
  document.querySelector('.modal-save-button').click();
  
})
​

Console errors: 0