Table editor
Bootstrap 5 Table editor plugin
Table Editor is a useful tool for displaying and managing data. The component works similarly to the Datatable (docs) with an additional column for action buttons.
Responsive interactive built with the latest Bootstrap 5. Creates editable tables. Delete or edit rows directly or via modal editor.Note: Read the API tab to find all available options and advanced customization
Basic example
You can initialize the component on table element by adding
table-editor class to its wrapper. In this version, you don't need any additional
JavaScript - set all options as data-mdb-attributes (table settings - wrapper element, column
settings - th element).
When edit mode is enabled, the user shouldn't be able to interact with other parts of your
website, as it can lead to loss of unsaved changes. You can toggle disable state using
edit.mdb.tableEditor and exit.mdb.tableEditor events.
Note: search field and add button are not a build-in part of Table Editor, but you can easily initialize those functionalities in the simplest form by adding data-mdb-attributes to them (data-mdb-select, data-mdb-add-entry, and data-mdb-target).
Table Editor collects information from HTML markup to create a data structure - the
<table> element will be replaced in the DOM with a different node after
component initializes.
| Company | Address | Employees |
|---|---|---|
| Smith & Johnson | Park Lane 2, London | 30 |
| P.J. Company | Oak Street 7, Aberdeen | 80 |
| Food & Wine | Netherhall Gardens 3, Hampstead | 12 |
| IT Service | Warwick Road 14, London | 17 |
| A. Jonson Gallery | Oaklands Avenue 2, London | 4 |
| F.A. Architects | Frognal Way 7, Hampstead | 4 |
<div class="d-flex justify-content-end mb-4">
<div class="form-outline">
<input
data-mdb-search
data-mdb-target="#table_1"
type="text"
id="search_table_1"
class="form-control"
/>
<label class="form-label" for="search_table_1">Search</label>
</div>
<button class="btn btn-primary btn-sm ms-3" data-mdb-add-entry data-mdb-target="#table_1">
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div
class="table-editor"
id="table_1"
data-mdb-entries="5"
data-mdb-entries-options="[5, 10, 15]"
>
<table class="table">
<thead>
<tr>
<th class="th-sm" data-mdb-width="250">Company</th>
<th class="th-sm" data-mdb-width="250" data-mdb-sort="false">Address</th>
<th class="th-sm" data-mdb-width="250" data-mdb-sort="false">Employees</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith & Johnson</td>
<td>Park Lane 2, London</td>
<td>30</td>
</tr>
<tr>
<td>P.J. Company</td>
<td>Oak Street 7, Aberdeen</td>
<td>80</td>
</tr>
<tr>
<td>Food & Wine</td>
<td>Netherhall Gardens 3, Hampstead</td>
<td>12</td>
</tr>
<tr>
<td>IT Service</td>
<td>Warwick Road 14, London</td>
<td>17</td>
</tr>
<tr>
<td>A. Jonson Gallery</td>
<td>Oaklands Avenue 2, London</td>
<td>4</td>
</tr>
<tr>
<td>F.A. Architects</td>
<td>Frognal Way 7, Hampstead</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
Modal
To change the default editing mode (inline) to the modal version, set option
mode to "modal". If you use select in your modal make sure to declare defaultValue for that column in order for it to work properly.
<div class="d-flex justify-content-end mb-4">
<div 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 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>
const advancedColumns = [
{
width: 250,
label: 'Company',
field: 'company',
},
{
width: 250,
sort: false,
defaultValue: 'Warsaw',
options: ['London', 'Warsaw', 'New York'],
inputType: 'select',
label: 'Office',
field: 'office',
},
{
width: 250,
inputType: 'number',
defaultValue: 1,
label: 'Employees',
field: 'employees',
},
{
width: 100,
defaultValue: false,
inputType: 'checkbox',
label: 'International',
field: 'international',
},
];
const advancedRows = [
{
company: 'Smith & Johnson',
office: 'London',
employees: 30,
international: true,
},
{
company: 'P.J. Company',
office: 'London',
employees: 80,
international: false,
},
{
company: 'Food & Wine',
office: 'London',
employees: 12,
international: false,
},
{
company: 'IT Service',
office: 'London',
employees: 17,
international: false,
},
{
company: 'A. Jonson Gallery',
office: 'London',
employees: 4,
international: false,
},
{
company: 'F.A. Architects',
office: 'London',
employees: 4,
international: false,
},
];
const tableModal = new TableEditor(
document.getElementById('table_modal'),
{ columns: advancedColumns, rows: advancedRows },
{ mode: 'modal', entries: 5, entriesOptions: [5, 10, 15] }
);
Inputs example
Table Editor supports several input types - for example, if you wish to force a user to enter
only Boolean values in one column, you can set its
inputType to a checkbox.
Supported input types:
- Text (default)
- Number
- Checkbox - displays a checkbox in edit mode and true/false value otherwise
- Select - additionally requires an array of options
<div class="d-flex justify-content-end mb-4">
<div class="form-outline">
<input data-mdb-search data-mdb-target="#table_inputs" type="text" id="search_table_inputs" class="form-control" />
<label class="form-label" for="search_table_inputs">Search</label>
</div>
<button class="btn btn-primary btn-sm ms-3" data-mdb-add-entry data-mdb-target="#table_inputs">
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div id="table_inputs"></div>
const advancedColumns = [
{
width: 250,
label: 'Company',
field: 'company',
},
{
width: 250,
sort: false,
defaultValue: 'Warsaw',
options: ['London', 'Warsaw', 'New York'],
inputType: 'select',
label: 'Office',
field: 'office',
},
{
width: 250,
inputType: 'number',
defaultValue: 1,
label: 'Employees',
field: 'employees',
},
{
width: 100,
defaultValue: false,
inputType: 'checkbox',
label: 'International',
field: 'international',
},
];
const advancedRows = [
{
company: 'Smith & Johnson',
office: 'London',
employees: 30,
international: true,
},
{
company: 'P.J. Company',
office: 'London',
employees: 80,
international: false,
},
{
company: 'Food & Wine',
office: 'London',
employees: 12,
international: false,
},
{
company: 'IT Service',
office: 'London',
employees: 17,
international: false,
},
{
company: 'A. Jonson Gallery',
office: 'London',
employees: 4,
international: false,
},
{
company: 'F.A. Architects',
office: 'London',
employees: 4,
international: false,
},
];
const tableDisableEdit = new TableEditor(
document.getElementById('table_inputs'),
{ columns: advancedColumns, rows: advancedRows },
{ entries: 5, entriesOptions: [5, 10, 15] }
);
Disable edit
You can disable editing for a column by setting its editable option to
false. A user won't be able to change its value in the edit mode.
<div class="d-flex justify-content-end mb-4">
<div class="form-outline">
<input
data-mdb-search
data-mdb-target="#table_disable_edit"
type="text"
id="search_disable_edit"
class="form-control"
/>
<label class="form-label" for="search_disable_edit">Search</label>
</div>
<button
class="btn btn-primary btn-sm ms-3"
data-mdb-add-entry
data-mdb-target="#table_disable_edit"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div id="table_disable_edit"></div>
const advancedColumns = [
{
width: 250,
label: 'Company',
field: 'company',
},
{
width: 250,
sort: false,
defaultValue: 'Warsaw',
options: ['London', 'Warsaw', 'New York'],
inputType: 'select',
label: 'Office',
field: 'office',
},
{
width: 250,
inputType: 'number',
defaultValue: 1,
label: 'Employees',
field: 'employees',
},
{
width: 100,
defaultValue: false,
inputType: 'checkbox',
label: 'International',
field: 'international',
},
];
const advancedRows = [
{
company: 'Smith & Johnson',
office: 'London',
employees: 30,
international: true,
},
{
company: 'P.J. Company',
office: 'London',
employees: 80,
international: false,
},
{
company: 'Food & Wine',
office: 'London',
employees: 12,
international: false,
},
{
company: 'IT Service',
office: 'London',
employees: 17,
international: false,
},
{
company: 'A. Jonson Gallery',
office: 'London',
employees: 4,
international: false,
},
{
company: 'F.A. Architects',
office: 'London',
employees: 4,
international: false,
},
];
const tableDisableEdit = new TableEditor(
document.getElementById('table_disable_edit'),
{
columns: advancedColumns.map((column) => {
return {
...column,
editable: false,
};
}),
rows: advancedRows,
},
{ entries: 5, entriesOptions: [5, 10, 15] }
);
Confirm delete
If you want to prevent data from being accidentally removed, you can set a
confirm option to true. In this case, Table Editor will show a
Popconfirm element before removing an entry.
<div class="d-flex justify-content-end mb-4">
<div class="form-outline">
<input
data-mdb-search
data-mdb-target="#table_confirm_delete"
type="text"
id="search_confirm_delete"
class="form-control"
/>
<label class="form-label" for="search_confirm_delete">Search</label>
</div>
<button
class="btn btn-primary btn-sm ms-3"
data-mdb-add-entry
data-mdb-target="#table_confirm_delete"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div id="table_confirm_delete"></div>
const advancedColumns = [
{
width: 250,
label: 'Company',
field: 'company',
},
{
width: 250,
sort: false,
defaultValue: 'Warsaw',
options: ['London', 'Warsaw', 'New York'],
inputType: 'select',
label: 'Office',
field: 'office',
},
{
width: 250,
inputType: 'number',
defaultValue: 1,
label: 'Employees',
field: 'employees',
},
{
width: 100,
defaultValue: false,
inputType: 'checkbox',
label: 'International',
field: 'international',
},
];
const advancedRows = [
{
company: 'Smith & Johnson',
office: 'London',
employees: 30,
international: true,
},
{
company: 'P.J. Company',
office: 'London',
employees: 80,
international: false,
},
{
company: 'Food & Wine',
office: 'London',
employees: 12,
international: false,
},
{
company: 'IT Service',
office: 'London',
employees: 17,
international: false,
},
{
company: 'A. Jonson Gallery',
office: 'London',
employees: 4,
international: false,
},
{
company: 'F.A. Architects',
office: 'London',
employees: 4,
international: false,
},
];
const tableConfirmDelete = new TableEditor(
document.getElementById('table_confirm_delete'),
{ columns: advancedColumns, rows: advancedRows },
{ entries: 5, entriesOptions: [5, 10, 15], confirm: true }
);
Advanced Search
You can create more advanced searching functionality and allow a user to specify in which column to search for a given phrase.
Search fields need to be disabled manually in the edit mode.
<div class="d-flex justify-content-between mb-4">
<div class="d-flex">
<div class="form-outline">
<input type="text" id="search_advanced" class="form-control" />
<label class="form-label" for="search_advanced">Search</label>
</div>
<div class="px-3 mt-1">in:</div>
<div>
<select class="select" id="search_advanced_select">
<option value="">All columns</option>
<option value="company">Company</option>
<option value="office">Office</option>
</select>
</div>
<button id="search_advanced_btn" class="btn btn-outline-primary btn-sm mx-2">
<i class="fa fa-search"></i>
</button>
</div>
<button
class="btn btn-primary btn-sm ms-3"
data-mdb-add-entry
data-mdb-target="#table_advanced_search"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div id="table_advanced_search"></div>
const advancedColumns = [
{
width: 250,
label: 'Company',
field: 'company',
},
{
width: 250,
sort: false,
defaultValue: 'Warsaw',
options: ['London', 'Warsaw', 'New York'],
inputType: 'select',
label: 'Office',
field: 'office',
},
{
width: 250,
inputType: 'number',
defaultValue: 1,
label: 'Employees',
field: 'employees',
},
{
width: 100,
defaultValue: false,
inputType: 'checkbox',
label: 'International',
field: 'international',
},
];
const advancedRows = [
{
company: 'Smith & Johnson',
office: 'London',
employees: 30,
international: true,
},
{
company: 'P.J. Company',
office: 'London',
employees: 80,
international: false,
},
{
company: 'Food & Wine',
office: 'London',
employees: 12,
international: false,
},
{
company: 'IT Service',
office: 'London',
employees: 17,
international: false,
},
{
company: 'A. Jonson Gallery',
office: 'London',
employees: 4,
international: false,
},
{
company: 'F.A. Architects',
office: 'London',
employees: 4,
international: false,
},
];
const input = document.getElementById('search_advanced');
const select = document.getElementById('search_advanced_select');
const searchBtn = document.getElementById('search_advanced_btn');
const table = document.getElementById('table_advanced_search');
const search = () => {
tableAdvancedSearch.search(input.value, select.value)
}
const tableAdvancedSearch = new TableEditor(
table,
{ columns: advancedColumns, rows: advancedRows },
{ entries: 5, entriesOptions: [5, 10, 15] }
);
searchBtn.addEventListener('click', search);
// disable search in edit mode
const toggleSelectState = (disabled) => {
const selectInstance = mdb.Select.getInstance(select);
selectInstance.dispose();
if (disabled) {
select.setAttribute('data-mdb-disabled', true);
} else {
select.removeAttribute('data-mdb-disabled');
}
new mdb.Select(select);
};
table.addEventListener('edit.mdb.tableEditor', () => {
input.setAttribute('disabled', true);
searchBtn.setAttribute('disabled', true);
toggleSelectState(true);
});
table.addEventListener('exit.mdb.tableEditor', () => {
input.removeAttribute('disabled');
searchBtn.removeAttribute('disabled');
toggleSelectState(false);
});
Async data
While awaiting data from API, you can prevent a user from interacting with Table Editor by
setting loading option to true.
<div class="d-flex justify-content-between mb-4">
<button id="async_data_btn" class="btn btn-primary btn-sm">
Load data
</button>
<div class="d-flex">
<div class="form-outline">
<input
type="text"
data-mdb-search
data-mdb-target="#table_async_data"
id="search_async"
class="form-control"
/>
<label class="form-label" for="search_async">Search</label>
</div>
<button
class="btn btn-primary btn-sm ms-3"
data-mdb-add-entry
data-mdb-target="#table_async_data"
>
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<hr />
<div id="table_async_data"></div>
const table = document.getElementById('table_async_data');
const loadBtn = document.getElementById('async_data_btn');
const columns = [
{ label: 'Company', field: 'company' },
{ label: 'Email', field: 'email' },
{ label: 'Name', field: 'name' },
{ label: 'Phone', field: 'phone' },
];
const asyncTable = new TableEditor(
table,
{ columns },
{ loading: true }
);
const loadData = () => {
asyncTable.update(null, { loading: true });
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((data) => {
asyncTable.update(
{
rows: data.map((user) => ({
...user,
address: `${user.address.city}, ${user.address.street}`,
company: user.company.name,
})),
},
{ loading: false }
);
});
};
loadBtn.addEventListener('click', loadData);
table.addEventListener('update.mdb.tableEditor', (e) => {
// here you can create a POST request to update your database
console.log(e.columns, e.rows);
})
Custom rows
The add() method takes an optional argument - a row which values will be
preloaded into a new entry.
Note: for this particular use, a row has to be an object.
Note: as adding buttons are initialized manually, they won't be automatically disabled in the edit mode.
M.B.
(5 Avenue 26, New York)
Berkley & Clark
(43th Street 12, New York)
D&D Inc.
(14 Street 67, New York)
Thomas & Co.
(2 Avenue 54, New York)
<div id="template_list" class="row">
<div class="col-md-3 col-sm-6 p-3">
<h4>M.B.</h4>
<p>(5 Avenue 26, New York)</p>
<button
class="btn btn-primary btn-sm add-entry-button"
data-mdb-company="M.B."
data-mdb-address="5 Avenue 26"
data-mdb-city="New York"
>
Load into table
</button>
</div>
<div class="col-md-3 col-sm-6 p-3">
<h4>Berkley & Clark</h4>
<p>(43th Street 12, New York)</p>
<button
class="btn btn-primary btn-sm add-entry-button"
data-mdb-company="Berkley & Clark"
data-mdb-address="43th Street 12"
data-mdb-city="New York"
>
Load into table
</button>
</div>
<div class="col-md-3 col-sm-6 p-3">
<h4>D&D Inc.</h4>
<p>(14 Street 67, New York)</p>
<button
class="btn btn-primary btn-sm add-entry-button"
data-mdb-company="D&D Inc."
data-mdb-address="14 Street 67"
data-mdb-city="New York"
>
Load into table
</button>
</div>
<div class="col-md-3 col-sm-6 p-3">
<h4>Thomas & Co.</h4>
<p>(2 Avenue 54, New York)</p>
<button
class="btn btn-primary btn-sm add-entry-button"
data-mdb-company="Thomas & Co."
data-mdb-address="2 Avenue 54"
data-mdb-city="New York"
>
Load into table
</button>
</div>
</div>
<hr class="mt-3" />
<div id="table_custom_rows"></div>
const columns = [
{
width: 250,
label: 'Company',
field: 'company',
},
{
width: 250,
label: 'Address',
field: 'address',
},
{
width: 250,
label: 'City',
field: 'city',
},
];
const rows = [
{ company: 'Smith & Johnson', address: 'Park Lane 2', city: 'London' },
{ company: 'P.J. Company', address: 'Oak Street 7', city: 'Aberdeen' },
{ company: 'Food & Wine', address: 'Netherhall Gardens 3', city: 'Hampstead' },
{ company: 'IT Service', address: 'Warwick Road 14', city: 'London' },
{ company: 'A. Jonson Gallery', address: 'Oaklands Avenue 2', city: 'London' },
{ company: 'F.A. Architects', address: 'Frognal Way 7', city: 'Hampstead' },
];
const table = document.getElementById('table_custom_rows');
const tableEditorInstance = new TableEditor(table, { rows, columns }, { pagination: false });
const buttons = document.getElementsByClassName('add-entry-button');
buttons.forEach((button) => {
button.addEventListener('click', (e) => {
const company = e.target.getAttribute('data-mdb-company');
const address = e.target.getAttribute('data-mdb-address');
const city = e.target.getAttribute('data-mdb-city');
tableEditorInstance.add({ company, address, city });
e.target.setAttribute('disabled', true);
e.target.innerText = 'Loaded';
});
});
// disable buttons in edit mode
table.addEventListener('edit.mdb.tableEditor', () => {
buttons.forEach((button) => {
button.setAttribute('disabled', true);
});
});
table.addEventListener('exit.mdb.tableEditor', () => {
buttons.forEach((button) => {
if (button.innerText.toLowerCase() !== 'loaded') {
button.removeAttribute('disabled');
}
});
});
Notifications
In this example, handlers for custom events trigger notifications after adding/deleting/updating an entry.
<div class="d-flex justify-content-end mb-4">
<div class="form-outline">
<input
data-mdb-search
data-mdb-target="#table_notifications"
type="text"
id="search_table_notifications"
class="form-control"
/>
<label class="form-label" for="search_table_notifications">Search</label>
</div>
<button
class="btn btn-primary btn-sm ms-3"
data-mdb-add-entry
data-mdb-target="#table_notifications"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div id="table_notifications"></div>
<div
class="alert fade"
id="alert-add-entry"
role="alert"
data-mdb-position="top-right"
data-mdb-autohide="true"
data-mdb-width="360px"
data-mdb-color="success"
data-mdb-hidden="true"
>
</div>
<div
class="alert fade"
id="alert-update-entry"
role="alert"
data-mdb-position="top-right"
data-mdb-autohide="true"
data-mdb-width="360px"
data-mdb-color="primary"
data-mdb-hidden="true"
></div>
<div
class="alert fade"
id="alert-remove-entry"
role="alert"
data-mdb-position="top-right"
data-mdb-autohide="true"
data-mdb-width="360px"
data-mdb-color="danger"
data-mdb-hidden="true"
>
</div>
const advancedColumns = [
{
width: 250,
label: 'Company',
field: 'company',
},
{
width: 250,
sort: false,
defaultValue: 'Warsaw',
options: ['London', 'Warsaw', 'New York'],
inputType: 'select',
label: 'Office',
field: 'office',
},
{
width: 250,
inputType: 'number',
defaultValue: 1,
label: 'Employees',
field: 'employees',
},
{
width: 100,
defaultValue: false,
inputType: 'checkbox',
label: 'International',
field: 'international',
},
];
const advancedRows = [
{
company: 'Smith & Johnson',
office: 'London',
employees: 30,
international: true,
},
{
company: 'P.J. Company',
office: 'London',
employees: 80,
international: false,
},
{
company: 'Food & Wine',
office: 'London',
employees: 12,
international: false,
},
{
company: 'IT Service',
office: 'London',
employees: 17,
international: false,
},
{
company: 'A. Jonson Gallery',
office: 'London',
employees: 4,
international: false,
},
{
company: 'F.A. Architects',
office: 'London',
employees: 4,
international: false,
},
];
const table = document.getElementById('table_notifications');
new TableEditor(table, { rows: advancedRows, columns: advancedColumns });
table.addEventListener('add.mdb.tableEditor', (e) => {
const alert = document.getElementById('alert-add-entry');
const alertInstance = mdb.Alert.getInstance(alert);
const { company, office } = e.row;
alert.innerHTML = `<strong>New entry:</strong> ${company} (${office})`;
alertInstance.show();
});
table.addEventListener('delete.mdb.tableEditor', (e) => {
const alert = document.getElementById('alert-remove-entry');
const alertInstance = mdb.Alert.getInstance(alert);
const { company, office } = e.row;
alert.innerHTML = `<strong>Deleted entry:</strong> ${company} (${office})`;
alertInstance.show();
});
table.addEventListener('updateEntry.mdb.tableEditor', (e) => {
const alert = document.getElementById('alert-update-entry');
const alertInstance = mdb.Alert.getInstance(alert);
const { company, office } = e.row;
alert.innerHTML = `<strong>Updated entry:</strong> ${company} (${office})`;
alertInstance.show();
});
Dark
Dark mode can be applied to both modal and inline versions - firstly, add a CSS class which
changes the background color to your page. Secondly, pass the same class name to the
color option of your Table Editor (f.e. 'bg-dark'). Now change the font to light
by setting dark attribute to true.
Tip: add form-white class to your search input's wrapper.
| Company | Address | Employees |
|---|---|---|
| Smith & Johnson | Park Lane 2, London | 30 |
| P.J. Company | Oak Street 7, Aberdeen | 80 |
| Food & Wine | Netherhall Gardens 3, Hampstead | 12 |
| IT Service | Warwick Road 14, London | 17 |
| A. Jonson Gallery | Oaklands Avenue 2, London | 4 |
| F.A. Architects | Frognal Way 7, Hampstead | 4 |
<div class="bg-dark">
<div class="d-flex justify-content-end mb-4">
<div class="form-outline form-white">
<input
data-mdb-search
data-mdb-target="#table_dark"
type="text"
id="search_table_dark"
class="form-control"
/>
<label class="form-label" for="search_table_dark">Search</label>
</div>
<button
class="btn btn-outline-light btn-sm ms-3"
data-mdb-add-entry
data-mdb-target="#table_dark"
>
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div
class="table-editor bg-dark"
id="table_dark"
data-mdb-mode="modal"
data-mdb-dark="true"
data-mdb-entries="5"
data-mdb-entries-options="[5, 10, 15]"
>
<table class="table">
<thead>
<tr>
<th class="th-sm" data-mdb-width="250">Company</th>
<th class="th-sm" data-mdb-width="250">Address</th>
<th class="th-sm" data-mdb-width="250">
Employees
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith & Johnson</td>
<td>Park Lane 2, London</td>
<td>30</td>
</tr>
<tr>
<td>P.J. Company</td>
<td>Oak Street 7, Aberdeen</td>
<td>80</td>
</tr>
<tr>
<td>Food & Wine</td>
<td>Netherhall Gardens 3, Hampstead</td>
<td>12</td>
</tr>
<tr>
<td>IT Service</td>
<td>Warwick Road 14, London</td>
<td>17</td>
</tr>
<tr>
<td>A. Jonson Gallery</td>
<td>Oaklands Avenue 2, London</td>
<td>4</td>
</tr>
<tr>
<td>F.A. Architects</td>
<td>Frognal Way 7, Hampstead</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
Table editor - API
Usage
Via data attributes
Using the Table Editor component doesn't require any additional JavaScript code - simply add a div wrapper with a class "table-editor" to your table and use data attributes to set all options.
<div class="d-flex justify-content-end mb-4">
<div class="form-outline">
<input
data-mdb-search
data-mdb-target="#table_1"
type="text"
id="search_table_1"
class="form-control"
/>
<label class="form-label" for="search_table_1">Search</label>
</div>
<button class="btn btn-primary btn-sm ms-3" data-mdb-add-entry data-mdb-target="#table_1">
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div
class="table-editor"
id="table_1"
data-mdb-mode="modal"
data-mdb-entries="5"
data-mdb-entries-options="[5, 10, 15]"
>
<table></table>
</div>
Via JavaScript
If you prefer to render a table with JavaScript, initialize an instance with the TableEditor constructor.
const table = document.getElementById('my-table');
const tableEditor = new TableEditor(table, { rows: [], columns: [], {
mode: 'modal',
entries: 5,
entriesOptions: [5, 10, 15]
}})
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$(document).ready(() => {
$('#my-tableEditor').tableEditor({
columns: [
{ label: 'Column 1', width: 100, fixed: true, sort: false },
{ label: 'Column 2'}
],
rows: [
['Value 1', 'Value 2']
]
}, {
bordered: true
})
// Calling .update() with the jQuery interface:
$('#my-tableEditor').tableEditor('update', { rows: [...], columns: [...]}, { bordered: true, loading: false })
});
Options
Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append
the option name to data-mdb-, as in data-mdb-action-header="".
| Name | Type | Default | Description |
|---|---|---|---|
actionHeader
|
String | 'Actions' |
Header for action buttons |
actionPosition
|
String | 'end' |
Decides where to render an action column (start/end) |
bordered
|
Boolean | false |
Adds borders to a datatable |
borderless
|
Boolean | false |
Removes all borders from a datatable |
borderColor
|
String | |
Changes a border color to one of main colors |
cancelText
|
String | 'Cancel' |
Text displayed in cancel buttons |
confirm
|
Boolean | false |
Displays a Popconfirm element before removing an entry |
confirmText
|
String | 'Delete' |
Text displayed in confirm buttons (Popconfirm) |
confirmMessage
|
String | 'Are you sure you want to delete this entry?' |
Text displayed in a Popconfirm element |
color |
String | |
Adds a color class to a datatable (f.e 'bg-dark') |
dark |
Boolean | false |
Changes a font color to white |
defaultValue
|
String | '-' |
This string will be used as a placeholder if a row doesn't have a defined value for a column |
entries
|
Number | 10 |
Number of visible entries (pagination) |
entriesOptions
|
Array | [10, 25, 50, 200] |
Options available to choose from in a pagination select (rows per page) |
fixedHeader
|
Boolean | false |
When it's set to true, the table's header will remain visible while scrolling |
fullPagination
|
Boolean | false |
Displays additional buttons for the first and last pages |
hover |
Boolean | false |
Changes the background color of a hovered row |
loading
|
Boolean | false |
Sets the loading mode - disables interactions and displays a loader |
loaderClass
|
String | 'bg-primary' |
The class name for a loader (loading mode) |
loadingMessage
|
String | 'Loading results...' |
A message displayed while loading data |
maxWidth
|
Number|String | |
Sets a maximum width of a datatable - can be either a string ('10%') or a number of pixels. |
maxHeight
|
Number|String | |
Sets a maximum height of a datatable - can be either a string ('10%') or a number of pixels. |
mode |
String | 'inline' |
Changes edit mode - available options: 'inline', 'modal' |
newItemHeader
|
String | 'New item' |
A header of modal |
noFoundMessage
|
String | 'No matching results found' |
A message displayed when a table is empty |
pagination
|
Boolean | true |
Shows/hides the pagination panel |
saveText
|
String | 'Save' |
Text displayed in the save button (modal) |
sm |
Boolean | false |
Decreases a row's paddings |
striped
|
Boolean | false |
Slightly changes the background's color in every other row |
rowsText
|
String | 'Rows per page': |
A text indicating a number of rows per page |
Options (column)
| Name | Type | Default | Description |
|---|---|---|---|
defaultValue
|
String | |
Default value only for one column |
editable
|
Boolean | true |
Enables/disabled editing fields in this column |
field |
String | '' |
A field's name - will be used as a key for values in rows |
fixed |
Boolean|String | false |
When set to true, makes a column stick on the left while scrolling.
Changing its value to right will do the same on the other side. For this
option to work, you need to define width as well.
|
inputType
|
String | 'text' |
Input type for a column. Available options: 'text', 'number', 'checkbox', 'select' |
label |
String | '' |
A displayed header of a column |
options
|
Array | |
Array of options (for column with a "select" input type) |
sort |
Boolean | true |
Enables/disables sorting for this column |
width |
Number | |
A column's width in pixels |
Methods
| Name | Description | Example |
|---|---|---|
add |
Adds a new row (default values are optional) |
instance.add(row: Object)
|
update |
Updates and rerenders datatable |
instance.update(data: Object, options: Object)
|
search |
Filters rows so there are only those containing the searched phrase |
instance.search(phrase: String, column: String|Array (optional))
|
dispose
|
Removes the component's instance |
instance.dispose()
|
getInstance
|
Static method which allows you to get the table editor instance associated to a DOM element. |
TableEditor.getInstance(tableEditorEl)
|
const tableEditorInstance = TableEditor.getInstance(document.getElementById('my-tableEditor'));
tableEditorInstance.update({ rows: [...], columns: [...]}, { bordered: true, loading: false })
Events
| Name | Description |
|---|---|
add.mdb.tableEditor
|
This event fires before adding a new row. Using e.preventDefault() enables adding custom validation. You can access the
added data inside a listener's handler with event.row field. |
delete.mdb.tableEditor
|
This event fires before deleting a row. Event supports use of e.preventDefault(). You can access the
deleted data inside a listener's handler with event.row field. |
edit.mdb.tableEditor
|
This event fires when a user exits edit mode. Using e.preventDefault() enables adding custom validation. You can access the
edited data inside a listener's handler with event.row field. |
exit.mdb.tableEditor
|
This event fires when a user exits edit mode. |
update.mdb.tableEditor
|
This event fires in an editable mode after user updates values. You can access the
updated data inside a listener's handler with
event.rows and event.columns fields.
|
render.mdb.tableEditor
|
Event emitted after the component renders/updates rows. |
const tableEditor = document.getElementById('my-tableEditor');
new TableEditor({ rows: [], columns: []}, { selectable: true, multi: true })
tableEditor.addEventListener('add.mdb.tableEditor', (e) => {
console.log(e.row)
})
Import
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import TableEditor from 'mdb-table-editor';