Datatables MDB Pro component

Datatables - Bootstrap 5 & Material Design 2.0

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


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 - you can customize your table later by adding data-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-attributes directly to a th tag (f.e. <th data-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.

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Jonas Alexander Developer San Francisco 30 2010/07/14 86
Shad Decker Regional Director Edinburgh 51 2008/11/13 183
Michael Bruce Javascript Developer Singapore 29 2011/06/27 183
Donna Snider Customer Support New York 27 2011/01/25 112

          <div  class="datatable">
            <table>
              <thead>
                <tr>
                  <th class="th-sm">Name</th>
                  <th class="th-sm">Position</th>
                  <th class="th-sm">Office</th>
                  <th class="th-sm">Age</th>
                  <th class="th-sm">Start date</th>
                  <th class="th-sm">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
                  <td>Edinburgh</td>
                  <td>61</td>
                  <td>2011/04/25</td>
                  <td>$320,800</td>
                </tr>
              
                <tr>
                  <td>Sonya Frost</td>
                  <td>Software Engineer</td>
                  <td>Edinburgh</td>
                  <td>23</td>
                  <td>2008/12/13</td>
                  <td>$103,600</td>
                </tr>
                <tr>
                  <td>Jena Gaines</td>
                  <td>Office Manager</td>
                  <td>London</td>
                  <td>30</td>
                  <td>2008/12/19</td>
                  <td>$90,560</td>
                </tr>
                <tr>
                  <td>Quinn Flynn</td>
                  <td>Support Lead</td>
                  <td>Edinburgh</td>
                  <td>22</td>
                  <td>2013/03/03</td>
                  <td>$342,000</td>
                </tr>
                <tr>
                  <td>Charde Marshall</td>
                  <td>Regional Director</td>
                  <td>San Francisco</td>
                  <td>36</td>
                  <td>2008/10/16</td>
                  <td>$470,600</td>
                </tr>
                <tr>
                  <td>Haley Kennedy</td>
                  <td>Senior Marketing Designer</td>
                  <td>London</td>
                  <td>43</td>
                  <td>2012/12/18</td>
                  <td>$313,500</td>
                </tr>
                <tr>
                  <td>Tatyana Fitzpatrick</td>
                  <td>Regional Director</td>
                  <td>London</td>
                  <td>19</td>
                  <td>2010/03/17</td>
                  <td>$385,750</td>
                </tr>
                <tr>
                  <td>Michael Silva</td>
                  <td>Marketing Designer</td>
                  <td>London</td>
                  <td>66</td>
                  <td>2012/11/27</td>
                  <td>$198,500</td>
                </tr>
                <tr>
                  <td>Paul Byrd</td>
                  <td>Chief Financial Officer (CFO)</td>
                  <td>New York</td>
                  <td>64</td>
                  <td>2010/06/09</td>
                  <td>$725,000</td>
                </tr>
                <tr>
                  <td>Gloria Little</td>
                  <td>Systems Administrator</td>
                  <td>New York</td>
                  <td>59</td>
                  <td>2009/04/10</td>
                  <td>$237,500</td>
                </tr>
              </tbody>
            </table>
          </div>
        

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.


          <div id="datatable">
          </div>
        

          const basicData = {
            columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
            rows: [
              ['Tiger Nixon', 'System Architect', '	Edinburgh', 61, '2011/04/25', '$320,800'],
              ['Sonya Frost', 'Software Engineer', 'Edinburgh', 23, '2008/12/13', '$103,600'],
              ['Jena Gaines', 'Office Manager', 'London', 30, '2008/12/19', '$90,560'],
              ['Quinn Flynn', 'Support Lead', 'Edinburgh', 22, '2013/03/03', '$342,000'],
              ['Charde Marshall', 'Regional Director', 'San Francisco', 36, '2008/10/16', '$470,600'],
              ['Haley Kennedy', 'Senior Marketing Designer', 'London', 43, '2012/12/18', '$313,500'],
              ['Tatyana Fitzpatrick', 'Regional Director', 'London', 19, '2010/03/17', '$385,750'],
              ['Michael Silva', 'Marketing Designer', 'London', 66, '2012/11/27', '$198,500'],
              ['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 64, '2010/06/09', '$725,000'],
              ['Gloria Little', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],
            ],
          };

          new mdb.Datatable(document.getElementById('datatable'), basicData)
        

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.


          <div id="datatable">
          </div>
        

          const advancedData = {
            columns: [
              { label: 'Name', field: 'name' },
              { label: 'Position', field: 'position', sort: false },
              { label: 'Office', field: 'office', sort: false },
              { label: 'Age', field: 'age', sort: false },
              { label: 'Start date', field: 'date' },
              { label: 'Salary', field: 'salary', sort: false },
            ],
            rows: [
              {
                name: 'Tiger Nixon',
                position: 'System Architect',
                office: 'Edinburgh',
                age: 61,
                date: '2011/04/25',
                salary: '$320,800',
              },
              {
                name: 'Sonya Frost',
                position: 'Software Engineer',
                office: 'Edinburgh',
                age: 23,
                date: '2008/12/13',
                salary: '$103,600',
              },
              {
                name: 'Jena Gaines',
                position: 'Office Manager',
                office: 'London',
                age: 30,
                date: '2008/12/19',
                salary: '$90,560',
              },
              {
                name: 'Quinn Flynn',
                position: 'Support Lead',
                office: 'Edinburgh',
                age: 22,
                date: '2013/03/03',
                salary: '$342,000',
              },
              {
                name: 'Charde Marshall',
                position: 'Regional Director',
                office: 'San Francisco',
                age: 36,
                date: '2008/10/16',
                salary: '$470,600',
              },
              {
                name: 'Haley Kennedy',
                position: 'Senior Marketing Designer',
                office: 'London',
                age: 43,
                date: '2012/12/18',
                salary: '$313,500',
              },
              {
                name: 'Tatyana Fitzpatrick',
                position: 'Regional Director',
                office: 'London',
                age: 19,
                date: '2010/03/17',
                salary: '$385,750',
              },
              {
                name: 'Michael Silva',
                position: 'Marketing Designer',
                office: 'London',
                age: 66,
                date: '2012/11/27',
                salary: '$198,500',
              },
              {
                name: 'Paul Byrd',
                position: 'Chief Financial Officer (CFO)',
                office: 'New York',
                age: 64,
                date: '2010/06/09',
                salary: '$725,000',
              },
              {
                name: 'Gloria Little',
                position: 'Systems Administrator',
                office: 'New York',
                age: 59,
                date: '2009/04/10',
                salary: '$237,500',
              },
            ],
          };

          new mdb.Datatable(document.getElementById('datatable'), advancedData)
        



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 selectRows.mdb.datatable event.


          <div id="datatable" data-selectable="true" data-multi="true"></div>
        

          const basicData = {
            columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
            rows: [
              ['Tiger Nixon', 'System Architect', '	Edinburgh', 61, '2011/04/25', '$320,800'],
              ['Sonya Frost', 'Software Engineer', 'Edinburgh', 23, '2008/12/13', '$103,600'],
              ['Jena Gaines', 'Office Manager', 'London', 30, '2008/12/19', '$90,560'],
              ['Quinn Flynn', 'Support Lead', 'Edinburgh', 22, '2013/03/03', '$342,000'],
              ['Charde Marshall', 'Regional Director', 'San Francisco', 36, '2008/10/16', '$470,600'],
              ['Haley Kennedy', 'Senior Marketing Designer', 'London', 43, '2012/12/18', '$313,500'],
              ['Tatyana Fitzpatrick', 'Regional Director', 'London', 19, '2010/03/17', '$385,750'],
              ['Michael Silva', 'Marketing Designer', 'London', 66, '2012/11/27', '$198,500'],
              ['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 64, '2010/06/09', '$725,000'],
              ['Gloria Little', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],
            ],
          };
          
          const datatable = document.getElementById('datatable');

          new mdb.Datatable(datatable, basicData);

          datatable.addEventListener('selectRows.mdb.datatable', e => {
            console.log(e.selectedRows, e.selectedIndexes, e.allSelected);
          })
        

Scroll

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


          <div id="datatable" data-max-height="520" data-max-width="520"></div>
        

          const basicData = {
            columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
            rows: [
              ['Tiger Nixon', 'System Architect', '	Edinburgh', 61, '2011/04/25', '$320,800'],
              ['Sonya Frost', 'Software Engineer', 'Edinburgh', 23, '2008/12/13', '$103,600'],
              ['Jena Gaines', 'Office Manager', 'London', 30, '2008/12/19', '$90,560'],
              ['Quinn Flynn', 'Support Lead', 'Edinburgh', 22, '2013/03/03', '$342,000'],
              ['Charde Marshall', 'Regional Director', 'San Francisco', 36, '2008/10/16', '$470,600'],
              ['Haley Kennedy', 'Senior Marketing Designer', 'London', 43, '2012/12/18', '$313,500'],
              ['Tatyana Fitzpatrick', 'Regional Director', 'London', 19, '2010/03/17', '$385,750'],
              ['Michael Silva', 'Marketing Designer', 'London', 66, '2012/11/27', '$198,500'],
              ['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 64, '2010/06/09', '$725,000'],
              ['Gloria Little', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],
            ],
          };
          
          const datatable = document.getElementById('datatable');

          new mdb.Datatable(datatable, basicData);
        

Fixed header

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


          <div id="datatable" data-max-height="460" data-fixed-header="true"></div>
        

          const basicData = {
            columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
            rows: [
              ['Tiger Nixon', 'System Architect', '	Edinburgh', 61, '2011/04/25', '$320,800'],
              ['Sonya Frost', 'Software Engineer', 'Edinburgh', 23, '2008/12/13', '$103,600'],
              ['Jena Gaines', 'Office Manager', 'London', 30, '2008/12/19', '$90,560'],
              ['Quinn Flynn', 'Support Lead', 'Edinburgh', 22, '2013/03/03', '$342,000'],
              ['Charde Marshall', 'Regional Director', 'San Francisco', 36, '2008/10/16', '$470,600'],
              ['Haley Kennedy', 'Senior Marketing Designer', 'London', 43, '2012/12/18', '$313,500'],
              ['Tatyana Fitzpatrick', 'Regional Director', 'London', 19, '2010/03/17', '$385,750'],
              ['Michael Silva', 'Marketing Designer', 'London', 66, '2012/11/27', '$198,500'],
              ['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 64, '2010/06/09', '$725,000'],
              ['Gloria Little', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],
            ],
          };
          
          const datatable = document.getElementById('datatable');

          new mdb.Datatable(datatable, basicData);
        

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.

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


          <div id="datatable"></div>
        

          const basicData = {
            columns: [
              { label: 'Name', field: 'name', sort: true, width: 200, fixed: true },
              { label: 'Position', field: 'position', sort: false, width: 200 },
              { label: 'Office', field: 'office', sort: false, width: 200, fixed: true },
              { label: 'Age', field: 'age', sort: false, width: 200 },
              { label: 'Start date', field: 'date', sort: true, width: 200 },
              { label: 'Salary', field: 'salary', sort: false, width: 200, fixed: 'right' },
            ],
            rows: [
              ['Tiger Nixon', 'System Architect', '	Edinburgh', 61, '2011/04/25', '$320,800'],
              ['Sonya Frost', 'Software Engineer', 'Edinburgh', 23, '2008/12/13', '$103,600'],
              ['Jena Gaines', 'Office Manager', 'London', 30, '2008/12/19', '$90,560'],
              ['Quinn Flynn', 'Support Lead', 'Edinburgh', 22, '2013/03/03', '$342,000'],
              ['Charde Marshall', 'Regional Director', 'San Francisco', 36, '2008/10/16', '$470,600'],
              ['Haley Kennedy', 'Senior Marketing Designer', 'London', 43, '2012/12/18', '$313,500'],
              ['Tatyana Fitzpatrick', 'Regional Director', 'London', 19, '2010/03/17', '$385,750'],
              ['Michael Silva', 'Marketing Designer', 'London', 66, '2012/11/27', '$198,500'],
              ['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 64, '2010/06/09', '$725,000'],
              ['Gloria Little', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],
            ],
          };
          
          const datatable = document.getElementById('datatable');

          new mdb.Datatable(datatable, basicData);
        

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 API by using the update method. Additionally, setting a loading option to true will disable all interactions and display a simple loader while awaiting data.


          <div id="datatable" data-loading="true"></div>
        

          const columns = [
            { label: 'Address', field: 'address' },
            { label: 'Company', field: 'company' },
            { label: 'Email', field: 'email' },
            { label: 'Name', field: 'name' },
            { label: 'Phone', field: 'phone' },
            { label: 'Username', field: 'username' },
            { label: 'Website', field: 'website' },
          ];

          const asyncTable = new mdb.Datatable(
            document.getElementById('datatable'),
            {
              columns,
            }
          );

          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 }
              );
            });

        

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.


          <div id="datatable-custom"></div>
        

          const customDatatable = document.getElementById('datatable-custom');

          const setActions = () => {
            document.getElementsByClassName('call-btn').forEach(btn => {
              btn.addEventListener('click', () => {
                console.log(`call ${btn.attributes['data-number'].value}`)
              })
            })

            document.getElementsByClassName('message-btn').forEach(btn => {
              btn.addEventListener('click', () => {
                console.log(`send a message to ${btn.attributes['data-email'].value}`)
              })
            })
          }

          customDatatable.addEventListener('render.mdb.datatable', setActions);

          new mdb.Datatable(customDatatable, {
            columns: [
              { label: 'Name', field: 'name' },
              { label: 'Position', field: 'position' },
              { label: 'Office', field: 'office' },
              { label: 'Contact', field: 'contact', sort: false },
            ],
            rows: [
              {
                name: 'Tiger Nixon',
                position: 'System Architect',
                office: 'Edinburgh',
                phone: '+48000000000',
                email: 'tiger.nixon@gmail.com'
              },
              {
                name: 'Sonya Frost',
                position: 'Software Engineer',
                office: 'Edinburgh',
                phone: '+53456123456',
                email: 'sfrost@gmail.com'
              },
              {
                name: 'Tatyana Fitzpatrick',
                position: 'Regional Director',
                office: 'London',
                phone: '+42123432456',
                email: 'tfitz@gmail.com'
              },
            ].map((row) => {
              return {
                ...row,
                contact: `
                &lt;button class="call-btn btn btn-outline-primary btn-floating btn-sm" data-number="${row.phone}">&lt;i class="fa fa-phone">&lt;/i>&lt;/button>
                &lt;button class="message-btn btn ml-2 btn-primary btn-floating btn-sm" data-email="${row.email}">&lt;i class="fa fa-envelope">&lt;/i>&lt;/button>`,
              };
            }),
          }, { hover: true });
        

Datatables - API


Usage

Via data attributes

Using the Datatable component doesn't require any additional JavaScript code - simply add a div wrapper with a class "datatable" to your table and use data attributes to set all options.


        <div class="datatable" data-bordered="true">
        <table>
            <thead>
            <tr>
                <th data-sort="false" data-fixed="true" data-width="100">Column 1</th>
                <th>Column 2</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Value 1</td>
                <td>Value 2</td>
            </tr>
            </tbody>
        </table>
        </div>
    

Via JavaScript

If you prefer to render a table with JavaScript, initialize an instance with the mdb.Datatable constructor.


        const datatableInstance = new mdb.Datatable(document.getElementById('my-datatable'), {
        columns: [
            { label: 'Column 1', width: 100, fixed: true, sort: false },
            { label: 'Column 2'}
        ],
        rows: [
            ['Value 1', 'Value 2']
        ]
        }, {
            bordered: true
        })
    

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.


        $('#my-datatable').datatable({
        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-datatable').datatable('update', { rows: [...], columns: [...]}, { bordered: true, loading: false })

    

Options

Name Type Default Description
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
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
edit Boolean false Enables edit mode
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.
selectable Boolean false Enables selecting rows with checkboxes
multi Boolean false Allows selecting multiple rows (selectable mode)
noFoundMessage String 'No matching results found' A message displayed when a table is empty
pagination Boolean true Shows/hides the pagination panel
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
label String '' A displayed header of a 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.
width Number A column's width in pixels
sort Boolean true Enables/disables sorting for this column

Methods

Name Description Example
update Updates and rerenders datatable datatableInstance.update(data: Object, options: Object)
search Filters rows so there are only those containing the searched phrase datatableInstance.search(phrase: String, column: String|Array (optional))
dispose Removes the component's instance datatableInstance.dispose()

Events

Name Description
update.mdb.datatable This event fires in an editable mode when a user updates values. You can access the updated data inside a listener's handler with event.rows and event.columns fields.
selectRows.mdb.datatable This event fires when a user select rows with checkboxes. You can acquire more information about selected rows with the following properties of an emitted event: selectedRows: Array, selectedIndexes: Array, allSelected: Boolean
render.mdb.datatable Event emitted after the component renders/updates rows.

Import

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


        import { Datatable } from 'mdb-ui-kit';