Table editor

Vue 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 and Vue 3. 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 via MDBTableEditor.You can pass the data to the component in two ways. First is to bind the data with an array of columns and rows to the dataset property. Second way is to create a HTML markup for your table inside MDBDatatable component - you can customize your table later by adding props to the component. Some of the more advanced options for columns, can be also used by setting data-mdb-attributes directly to a th tag (f.e. <th data-mdb-sort="false">).

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 control disabled state with v-model:edit property binding or by listening to edit and exit events.

Note: search field and add button are not a build-in part of Table Editor.

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
Show code

Modal

To change the default editing mode (inline) to the modal version, set option mode to "modal".

Show code

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
  • Autocomplete - additionally requires a filter method inside the filter property. Check the autocomplete page to see how it should look like
  • Datepicker - add props property to provide additional options to the datepicker
  • Timepicker - add props property to provide additional options to the datepicker
Show code

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.

Show code

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.

Show code

Async data

While awaiting data from API, you can prevent a user from interacting with Table Editor by setting loading option to true.

Show code

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)

Show code

Notifications

In this example, handlers for custom events trigger notifications after adding/deleting/updating an entry.

Show code