xxxxxxxxxx1
<div class="d-flex justify-content-between mb-4">2
<button id="async_data_btn" class="btn btn-primary btn-sm">3
Load data4
</button>5
<div class="d-flex">6
<div class="form-outline">7
<input8
type="text"9
data-mdb-search10
data-mdb-target="#table_async_data"11
id="search_async"12
class="form-control"13
/>14
<label class="form-label" for="search_async">Search</label>15
</div>16
<button17
class="btn btn-primary btn-sm ms-3"18
data-mdb-add-entry19
data-mdb-target="#table_async_data"20
>21
<i class="fa fa-plus"></i>22
</button>23
</div>24
</div>25
<hr />26
<div id="table_async_data"></div>1
1
xxxxxxxxxx1
const table = document.getElementById('table_async_data');2
const loadBtn = document.getElementById('async_data_btn');3
4
const columns = [5
{ label: 'Company', field: 'company' },6
{ label: 'Email', field: 'email' },7
{ label: 'Name', field: 'name' },8
{ label: 'Phone', field: 'phone' },9
];10
11
const asyncTable = new TableEditor(12
table,13
{14
columns,15
},16
{17
loading: true,18
}19
);20
21
const loadData = () => {22
asyncTable.update(null, { loading: true });23
24
fetch('https://jsonplaceholder.typicode.com/users')25
.then((response) => response.json())26
.then((data) => {27
asyncTable.update(28
{29
rows: data.map((user) => ({30
...user,31
address: `${user.address.city}, ${user.address.street}`,32
company: user.company.name,33
})),34
},35
{ loading: false }36
);37
});38
};39
40
loadBtn.addEventListener('click', loadData);41
42
table.addEventListener('update.mdb.tableEditor', e => {43
console.log('------------UPDATE-----------')44
console.log(e.rows, e.columns);45
console.log('------------UPDATE-----------')46
})47
48
table.addEventListener('updateEntry.mdb.tableEditor', e => {49
console.log('------------UPDATE ENTRY-----------')50
console.log(e.rows, e.columns);51
console.log('------------UPDATE ENTRY-----------')52
}) Console errors: 0