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