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

Modal

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

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

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.

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.

Async data

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

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)

Notifications

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

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

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. 


        $('#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

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 after adding a new row
delete.mdb.tableEditor This event fires after deleting a row
edit.mdb.tableEditor This event fires when user enters edit mode
exit.mdb.tableEditor This event fires when user exits edit mode
update.mdb.tableEditor This event fires in an editable mode when a user updates values. You can access the upsdated data inside a listener's handler with event.rows and event.columns fields.
updateEntry.mdb.tableEditor This event fires after saving changes in an existing row.
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', event => {
          console.log(event.row)
        })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component: 


        import TableEditor from 'mdb-table-editor';