Datatables

Bootstrap 5 Datatables

The Datatable is a component which mix tables with advanced options like searching, sorting and pagination.

Note: Read the API tab to find all available options and advanced customization

Required ES init: Datatable *

* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Video tutorial

Basic example - HTML markup

The Datatable component can render your data in three ways. In the first one, you simply create a HTML markup for your table nested within a div tag with a datatable class for styling and data-mdb-datatable-init that initialize JS interactions tat run under the hood. You can also customize your table by adding data-mdb-attributes to the wrapper. Some of the more advanced options for columns, described in the Advanced Data Structure section can be also used by setting data-mdb-attributes directly to a th tag (f.e. <th data-mdb-sort="false">).

Datatable 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.

Basic data structure

The second option is a very basic data structure, where columns are represented by an array of strings and so is each row. The table will match each string in a row to a corresponding index in a columns array. This data structure, as it's based on indexes, not key-value pairs, can be easily used for displaying data from the CSV format.

Advanced data structure

The last and most advanced data structure allows customizing each column (sort, width, fixed, field) and matches values from each row to a column in which the `field` equals to a given key value. This data format can be easily used to display JSON data.

You can also use a mixed version, where columns are an array of object and each row is an array of strings.

Search

The search field is not a part of the Datatable - place an input field on your page and use .search() method to filter entries.

Advanced search

When using the searching method, you can specify which columns it should take under consideration - pass as a second argument a field (or array of fields). By default, searching will apply to all columns.

Column search

Header filters allows you to apply filtering for the data of a specific column. By default all columns will use text filter.

Selectable rows

When the selectable option is set to true, user can interact with your table by selecting rows - you can get the selected rows by listening to the rowSelected.mdb.datatable event.

Editable cells

When the edit option is set to true, user can interact with your table by changing content of the cells - you can get the updated data by listening to the update.mdb.datatable event.

Scroll

Setting maximum height/width will enable vertical/horizontal scrolling.

Fixed header

Use the fixedHeader option to ensure that a table's header is always visible while scrolling.

Fixed columns

Making a column sticky requires setting two options - width and fixed. A first option is a number of pixels, while the other one can be either a true ( in which case the column will stick on the left) or a string right.

Using fixed columns in a vertically scrollable table, requires setting an option fixedHeader to true as well.

When using a HTML markup instead of a data structure you can still use this feature by setting data-mdb-width and data-mdb-fixed attributes on your th tags.

Async data

Loading content asynchronously is an important part of working with data tables - with MDB Datatable you can easily display content after fetching it from an API using the update method. Additionally, setting a loading option to true will disable all interactions and display a simple loader while awaiting data.
The example below demonstrates loading data after the button is pressed.

Action buttons

With the Datatable it's possible to render custom content, such as action buttons and attach listeners to their events. Keep in mind, that the component rerenders content when various actions occur (f.e. sort, search) and event listeners need to be updated. To make it possible, the components emits a custom event render.mdb.datatable.

Cell formatting

Use cell formatting to color individual cells.

Clickable rows

Click on the row to preview the message.

Selecting the row with checkbox doesn't trigger rowClicked event.

Note: To prevent this action with other clickable elements within the row, call stopPropagation() method.

Note: This feature cannot be used simultaneously with edit option.

Server Side Update

This option enables passing data exclusively for visible rows while aligning pagination values with the data available on the server.

Related resources