xxxxxxxxxx1
<div class="d-flex justify-content-end mb-4">2
<div data-mdb-input-init class="form-outline">3
<input4
data-mdb-search5
data-mdb-target="#table_modal"6
type="text"7
id="search_modal"8
class="form-control"9
/>10
<label class="form-label" for="search_modal">Search</label>11
</div>12
<button data-mdb-ripple-init class="btn btn-primary btn-sm ms-3" data-mdb-add-entry data-mdb-target="#table_modal">13
<i class="fa fa-plus"></i>14
</button>15
</div>16
<hr />17
<div id="table_modal"></div>1
1
xxxxxxxxxx1
const advancedColumns = [2
{3
width: 250,4
label: 'Company',5
field: 'company',6
},7
{8
width: 250,9
sort: false,10
defaultValue: 'Warsaw',11
options: ['London', 'Warsaw', 'New York'],12
inputType: 'select',13
label: 'Office',14
field: 'office',15
},16
{17
width: 250,18
inputType: 'number',19
defaultValue: 1,20
label: 'Employees',21
field: 'employees',22
},23
{24
width: 100,25
defaultValue: false,26
inputType: 'checkbox',27
label: 'International',28
field: 'international',29
},30
];31
32
const advancedRows = [33
{34
company: 'Smith & Johnson',35
office: 'London',36
employees: 30,37
international: true,38
},39
{40
company: 'P.J. Company',41
office: 'London',42
employees: 80,43
international: false,44
},45
{46
company: 'Food & Wine',47
office: 'London',48
employees: 12,49
international: false,50
},51
{52
company: 'IT Service',53
office: 'London',54
employees: 17,55
international: false,56
},57
{58
company: 'A. Jonson Gallery',59
office: 'London',60
employees: 4,61
international: false,62
},63
{64
company: 'F.A. Architects',65
office: 'London',66
employees: 4,67
international: false,68
},69
];70
71
const tableModal = new TableEditor(72
document.getElementById('table_modal'),73
{ columns: advancedColumns, rows: advancedRows },74
{ mode: 'modal', entries: 5, entriesOptions: [5, 10, 15] }75
);76
77
console.log(tableModal) Console errors: 0