Datatables

MDB 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

Basic example - HTML markup

The Datatable component can render your data in one of 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-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.

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


                        
                          
                            
                              
                                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

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.


                        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.


                        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)

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.


                        
                          
                          Search


                        const data = {
                          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 instance = new mdb.Datatable(document.getElementById('datatable'), data)

                        document.getElementById('datatable-search-input').addEventListener('input', (e) => {
                          instance.search(e.target.value);
                        });

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.


                        const data = {
                          columns: [
                            { label: 'Name', field: 'name' },
                            { label: 'Position', field: 'position' },
                            { label: 'Office', field: 'office' },
                            { label: 'Age', field: 'age' },
                            { label: 'Start date', field: 'date' },
                            { label: 'Salary', field: '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 instance = new mdb.Datatable(document.getElementById('datatable'), data)

                        const advancedSearchInput = document.getElementById('advanced-search-input');

                        const search = (value) => {

                          let [phrase, columns] = value.split(' in:').map((str) => str.trim());

                          if (columns) {
                            columns = columns.split(',').map((str) => str.toLowerCase().trim());
                          }

                          instance.search(phrase, columns);
                        }

                        document.getElementById('advanced-search-button').addEventListener('click', (e) => search(advancedSearchInput.value));

                        advancedSearchInput.addEventListener('keydown', e => {
                          if (e.keyCode === 13) search(e.target.value);
                        })

Sort

Use the sort(column, order) public method to set entries' order.


                        const data = {
                          columns: [{ label: 'Name', field: '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 datatableInstance = new mdb.Datatable(
                          document.getElementById('datatable'),
                          data,
                          {
                            sortField: 'name',
                            sortOrder: 'desc'
                          }
                        );

                        datatableInstance.sort(data.columns[0], 'asc');

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.


                        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.


                        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.


                        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.

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.


                        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.


                        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-async-data'),
                          {
                            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.


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

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

                          document.getElementsByClassName('message-btn').forEach(btn => {
                            btn.addEventListener('click', () => {
                              console.log(`send a message to ${btn.attributes['data-mdb-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: `
                              `,
                            };
                          }),
                        }, { hover: true });

Cell formatting


                        const rows = [
                          ['Product 1', 10, 103],
                          ['Product 2', 45, 110],
                          ['Product 3', 76, 56],
                          ['Product 4', 89, 230],
                          ['Product 5', 104, 240],
                          ['Product 6', 97, 187],
                          ['Product 7', 167, 130],
                          ['Product 8', 50, 199],
                          ['Product 9', 4, 206],
                          ['Product 10', 120, 88],
                          ['Product 11', 22, 100],
                        ];

                        const maxValue = Math.max(...rows.map((row) => row[2]));
                        const minValue = Math.min(...rows.map((row) => row[2]));

                        const colors = ['#E3F2FD', '#BBDEFB', '#90CAF9', '#64B5F6', '#42A5F5'];

                        const step = (maxValue - minValue) / (colors.length - 1);

                        const formatCell = (cell, value) => {
                          const colorIndex = Math.floor((value - minValue) / step);

                          cell.style.backgroundColor = colors[colorIndex];
                          cell.style.fontWeight = 400;
                        };

                        const columns = [
                          { label: 'Product', field: 'product' },
                          { label: 'Quantity', field: 'quantity' },
                          { label: 'Purchases', field: 'purchases', format: formatCell },
                        ];

                        const datatableInstance = new mdb.Datatable(
                          document.getElementById('datatable-cell-format'),
                          { rows, columns }
                        );

Clickable rows

Click on the row to preview the message.

Selecting the row with checkbox doesn't trigger rowClick 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.


                        const table = document.getElementById('datatable-clickable-rows');
                        const modal = document.getElementById('modal-clickable-rows');
                        const modalBody = document.getElementById('modal-body-clickable-rows');
                        const modalHeader = document.getElementById('modal-header-clickable-rows');

                        const modalInstance = new mdb.Modal(modal);

                        const setupButtons = (action) => {
                          document.getElementsByClassName(`${action}-email-button`).forEach((button) => {
                            button.addEventListener('click', (e) => {
                              e.stopPropagation();

                              const index = button.getAttribute('data-mdb-index');

                              console.log(`${action} message: ${index}`, messages[index]);
                            });
                          });
                        };

                        const columns = [
                          { label: 'Actions', field: 'actions', sort: false },
                          { label: 'From', field: 'from' },
                          { label: 'Title', field: 'title' },
                          { label: 'Message', field: 'preview', sort: false },
                          { label: 'Date', field: 'date' },
                        ];

                        const messages = [
                          {
                            from: 'admin@mdbootstrap.com',
                            title: 'MDBootstrap spring sale',
                            message:
                              'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.',
                            date: '11/12/2019',
                          },
                          {
                            from: 'user@mdbootstrap.com',
                            title: 'How to purchase MDB5 package?',
                            message:
                              'Quisque tempor ligula eu lobortis scelerisque. Mauris tristique mi a erat egestas, quis dictum nibh iaculis. Sed gravida sodales egestas. In tempus mollis libero sit amet lacinia. Duis non augue sed leo imperdiet efficitur faucibus vitae elit. Mauris eu cursus ligula. Praesent posuere efficitur cursus.',
                            date: '10/12/2019',
                          },
                          {
                            from: 'user@mdbootstrap.com',
                            title: 'Licence renewal',
                            message:
                              'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.',
                            date: '09/12/2019',
                          },
                          {
                            from: 'admin@mdbootstrap.com',
                            title: 'Black friday offer',
                            message:
                              'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.',
                            date: '08/12/2019',
                          },
                        ];

                        const rows = messages.map((email, i) => {
                          const getPreview = (message, length) => {
                            if (message.length <= length) return message;

                            return `${message.slice(0, length)}...`;
                          };

                          return {
                            ...email,
                            preview: getPreview(email.message, 20),
                            actions: `
                            
                            
                            `,
                          };
                        });

                        table.addEventListener('rowClick.mdb.datatable', (e) => {
                          const { index } = e;

                          const { message, title, from } = messages[index];

                          modalHeader.innerText = title;

                          modalBody.innerHTML = `
                          From: ${from}
                          ${message}
                          `;

                          modalInstance.show();
                        });

                        table.addEventListener('render.mdb.datatable', () => {
                          setupButtons('star');
                          setupButtons('delete');
                        })

                        const datatableInstance = new mdb.Datatable(table, {
                          columns,
                          rows,
                        });

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.

Column 1	Column 2
Value 1	Value 2

Via JavaScript

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


                      const instance = 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
`sortField`	String		Sorts entries in this column on render (column's field value)
`sortOrder`	String	`'asc'`	Order of the initial sorting
`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	`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))`
`sort`	Sorts entries depending on a column and order	`instance.sort(column: String\|Object, order: String)`
`dispose`	Removes the component's instance	`instance.dispose()`


                      const instance = mdb.Datatable.getInstance(document.getElementById('my-datatable'));

                      instance.update({ rows: [...], columns: [...]}, { bordered: true, loading: false })

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.


                      const datatable = document.getElementById('my-datatable');

                      new mdb.Datatable({ rows: [], columns: []}, { selectable: true, multi: true })

                      datatable.addEventListener('selectRows.mdb.datatable', event => {
                        console.log(event.selectedRows, event.selectedIndexes, event.selectedAll)
                      })

Import

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


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