Datatables

React 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

Basic data structure

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

Name Position Office Age Start date Salary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600

Rows per page:

10
1 - 10 of 14 
import React from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';

export default function App() {

  const basicData = {
    columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
    rows: [
      ['Tiger Nixon', 'System Architect', 'Edinburgh', '61', '2011/04/25', '$320,800'],
      ['Garrett Winters', 'Accountant', 'Tokyo', '63', '2011/07/25', '$170,750'],
      ['Ashton Cox', 'Junior Technical Author', 'San Francisco', '66', '2009/01/12', '$86,000'],
      ['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '22', '2012/03/29', '$433,060'],
      ['Airi Satou', 'Accountant', 'Tokyo', '33', '2008/11/28', '$162,700'],
      ['Brielle Williamson', 'Integration Specialist', 'New York', '61', '2012/12/02', '$372,000'],
      ['Herrod Chandler', 'Sales Assistant', 'San Francisco', '59', '2012/08/06', '$137,500'],
      ['Rhona Davidson', 'Integration Specialist', 'Tokyo', '55', '2010/10/14', '$327,900'],
      ['Colleen Hurst', 'Javascript Developer', 'San Francisco', '39', '2009/09/15', '$205,500'],
      ['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'],
    ],
  };

  return (
    <MDBDatatable data={basicData} />
  );
}

Advanced data structure

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

Name Position Office Age Start date Salary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600

Rows per page:

10
1 - 10 of 14 
import React from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';

export default function App() {

  const advancedData = {
    columns: [
      { label: 'Name', field: 'name', sort: true },
      { label: 'Position', field: 'position', sort: false },
      { label: 'Office', field: 'office', sort: false },
      { label: 'Age', field: 'age', sort: false },
      { label: 'Start date', field: 'date', sort: true },
      { 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: 'Garrett Winters',
        position: 'Accountant',
        office: 'Tokyo',
        age: 63,
        date: '2011/07/25',
        salary: '$170,750',
      },
      {
        name: 'Ashton Cox',
        position: 'Junior Technical Author',
        office: 'San Francisco',
        age: 66,
        date: '2009/01/12',
        salary: '$86,000',
      },
      {
        name: 'Cedric Kelly',
        position: 'Senior Javascript Developer',
        office: 'Edinburgh',
        age: 22,
        date: '2012/03/29',
        salary: '$433,060',
      },
      { name: 'Airi Satou', position: 'Accountant', office: 'Tokyo', age: 33, date: '2008/11/28', salary: '$162,700' },
      {
        name: 'Brielle Williamson',
        position: 'Integration Specialist',
        office: 'New York',
        age: 61,
        date: '2012/12/02',
        salary: '$372,000',
      },
      {
        name: 'Herrod Chandler',
        position: 'Sales Assistant',
        office: 'San Francisco',
        age: 59,
        date: '2012/08/06',
        salary: '$137,500',
      },
      {
        name: 'Rhona Davidson',
        position: 'Integration Specialist',
        office: 'Tokyo',
        age: 55,
        date: '2010/10/14',
        salary: '$327,900',
      },
      {
        name: 'Colleen Hurst',
        position: 'Javascript Developer',
        office: 'San Francisco',
        age: 39,
        date: '2009/09/15',
        salary: '$205,500',
      },
      {
        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',
      },
    ],
  };

  return (
    <MDBDatatable data={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 passing state through properties.

Name Position Office Age Start date Salary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
 Garrett WintersAccountantTokyo632011/07/25$170,750
 Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
 Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
 Airi SatouAccountantTokyo332008/11/28$162,700
 Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
 Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
 Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
 Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
 Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600

Rows per page:

10
1 - 10 of 14 
import React from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';

export default function App() {
  const basicData = {
    columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
    rows: [
      ['Tiger Nixon', 'System Architect', 'Edinburgh', '61', '2011/04/25', '$320,800'],
      ['Garrett Winters', 'Accountant', 'Tokyo', '63', '2011/07/25', '$170,750'],
      ['Ashton Cox', 'Junior Technical Author', 'San Francisco', '66', '2009/01/12', '$86,000'],
      ['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '22', '2012/03/29', '$433,060'],
      ['Airi Satou', 'Accountant', 'Tokyo', '33', '2008/11/28', '$162,700'],
      ['Brielle Williamson', 'Integration Specialist', 'New York', '61', '2012/12/02', '$372,000'],
      ['Herrod Chandler', 'Sales Assistant', 'San Francisco', '59', '2012/08/06', '$137,500'],
      ['Rhona Davidson', 'Integration Specialist', 'Tokyo', '55', '2010/10/14', '$327,900'],
      ['Colleen Hurst', 'Javascript Developer', 'San Francisco', '39', '2009/09/15', '$205,500'],
      ['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'],
    ],
  };

  return (
    <MDBDatatable
      multi
      selectable
      data={basicData}
    />
  );
}

Scroll

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

Name Position Office Age Start date Salary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600

Rows per page:

10
1 - 10 of 14 
import React from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';

export default function App() {

  const basicData = {
    columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
    rows: [
      ['Tiger Nixon', 'System Architect', 'Edinburgh', '61', '2011/04/25', '$320,800'],
      ['Garrett Winters', 'Accountant', 'Tokyo', '63', '2011/07/25', '$170,750'],
      ['Ashton Cox', 'Junior Technical Author', 'San Francisco', '66', '2009/01/12', '$86,000'],
      ['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '22', '2012/03/29', '$433,060'],
      ['Airi Satou', 'Accountant', 'Tokyo', '33', '2008/11/28', '$162,700'],
      ['Brielle Williamson', 'Integration Specialist', 'New York', '61', '2012/12/02', '$372,000'],
      ['Herrod Chandler', 'Sales Assistant', 'San Francisco', '59', '2012/08/06', '$137,500'],
      ['Rhona Davidson', 'Integration Specialist', 'Tokyo', '55', '2010/10/14', '$327,900'],
      ['Colleen Hurst', 'Javascript Developer', 'San Francisco', '39', '2009/09/15', '$205,500'],
      ['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'],
    ],
  };

  return (
    <MDBDatatable maxHeight='520px' maxWidth='520px' data={basicData} />
  );
}

Fixed header

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

Name Position Office Age Start date Salary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600

Rows per page:

10
1 - 10 of 14 
import React, { useState } from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';

export default function App() {

  const basicData = {
    columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
    rows: [
      ['Tiger Nixon', 'System Architect', 'Edinburgh', '61', '2011/04/25', '$320,800'],
      ['Garrett Winters', 'Accountant', 'Tokyo', '63', '2011/07/25', '$170,750'],
      ['Ashton Cox', 'Junior Technical Author', 'San Francisco', '66', '2009/01/12', '$86,000'],
      ['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '22', '2012/03/29', '$433,060'],
      ['Airi Satou', 'Accountant', 'Tokyo', '33', '2008/11/28', '$162,700'],
      ['Brielle Williamson', 'Integration Specialist', 'New York', '61', '2012/12/02', '$372,000'],
      ['Herrod Chandler', 'Sales Assistant', 'San Francisco', '59', '2012/08/06', '$137,500'],
      ['Rhona Davidson', 'Integration Specialist', 'Tokyo', '55', '2010/10/14', '$327,900'],
      ['Colleen Hurst', 'Javascript Developer', 'San Francisco', '39', '2009/09/15', '$205,500'],
      ['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'],
    ],
  };

  return (
    <MDBDatatable fixedHeader maxHeight='460px' data={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.

Name Position Office Age Start date Salary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600

Rows per page:

10
1 - 10 of 14 
import React from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';

export default function App() {

  const fixedData = {
    columns: [
      { label: 'Name', field: 'name', sort: true, width: 200, fixed: 'left' },
      { label: 'Position', field: 'position', sort: false, width: 200 },
      { label: 'Office', field: 'office', sort: false, width: 200, fixed: 'left', fixedValue: 200 },
      { 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: [
      {
        name: 'Tiger Nixon',
        position: 'System Architect',
        office: 'Edinburgh',
        age: 61,
        date: '2011/04/25',
        salary: '$320,800',
      },
      {
        name: 'Garrett Winters',
        position: 'Accountant',
        office: 'Tokyo',
        age: 63,
        date: '2011/07/25',
        salary: '$170,750',
      },
      {
        name: 'Ashton Cox',
        position: 'Junior Technical Author',
        office: 'San Francisco',
        age: 66,
        date: '2009/01/12',
        salary: '$86,000',
      },
      {
        name: 'Cedric Kelly',
        position: 'Senior Javascript Developer',
        office: 'Edinburgh',
        age: 22,
        date: '2012/03/29',
        salary: '$433,060',
      },
      { name: 'Airi Satou', position: 'Accountant', office: 'Tokyo', age: 33, date: '2008/11/28', salary: '$162,700' },
      {
        name: 'Brielle Williamson',
        position: 'Integration Specialist',
        office: 'New York',
        age: 61,
        date: '2012/12/02',
        salary: '$372,000',
      },
      {
        name: 'Herrod Chandler',
        position: 'Sales Assistant',
        office: 'San Francisco',
        age: 59,
        date: '2012/08/06',
        salary: '$137,500',
      },
      {
        name: 'Rhona Davidson',
        position: 'Integration Specialist',
        office: 'Tokyo',
        age: 55,
        date: '2010/10/14',
        salary: '$327,900',
      },
      {
        name: 'Colleen Hurst',
        position: 'Javascript Developer',
        office: 'San Francisco',
        age: 39,
        date: '2009/09/15',
        salary: '$205,500',
      },
      {
        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',
      },
    ],
  };

  return (
    <MDBDatatable data={fixedData} />
  );
}

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. Additionally, setting a loading property totrue will disable all interactions and display a simple loader while awaiting data.

Address Company Email Name Phone Username Website

Loading results...

Rows per page:

10
0 of 0 
import React, { useEffect, useState } from 'react';
import { MDBDatatable, MDBBtn, MDBIcon } from 'mdb-react-ui-kit';

export default function App() {

  const [asyncData, setAsyncData] = useState({
    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' },
    ],
    rows: [],
  });

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (loading) {
      fetch('https://jsonplaceholder.typicode.com/users')
        .then((response) => response.json())
        .then((data) =>
          setTimeout(() => {
            setAsyncData({
              columns: asyncData.columns,
              rows: data.map((user: any) => ({
                ...user,
                address: `${user.address.city}, ${user.address.street}`,
                company: user.company.name,
              })),
            });
          }, 3000)
        );
    }
  }, [loading, asyncData.columns]);

  useEffect(() => {
    if (asyncData.rows.length === 0) {
      setLoading(true);
    } else {
      setLoading(false);
    }
  }, [asyncData.rows]);

  return (
    <>
      <MDBBtn className='mb-4' onClick={() => setAsyncData({ ...asyncData, rows: [] })}>
        Reload data
        <MDBIcon icon='sync' className='ms-2' />
      </MDBBtn>

      <MDBDatatable data={asyncData} isLoading={loading} />
    </>
  );
}

Action buttons

With the Datatable it's possible to render custom content, such as action buttons and attach actions to their events.

Name Position Office Contact
Tiger NixonSystem ArchitectEdinburgh
Sonya FrostSoftware EngineerEdinburgh
Tatyana FitzpatrickRegional DirectorLondon

Rows per page:

10
1 - 3 of 3 
import React from 'react';
import { MDBDatatable, MDBBtn, MDBIcon } from 'mdb-react-ui-kit';

export default function App() {

  const actionData = {
    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: (
          <>
            <MDBBtn outline size='sm' floating className='call-btn' onClick={() => console.log(`call ${row.phone}`)}>
              <MDBIcon icon='phone' />
            </MDBBtn>
            <MDBBtn
              size='sm'
              floating
              className='message-btn ms-2'
              onClick={() => console.log(`send a message to ${row.email}`)}
            >
              <MDBIcon icon='envelope' />
            </MDBBtn>
          </>
        ),
      };
    }),
  });

  return (
    <MDBDatatable hover data={actionData} />
  );
}

Cell formatting

Product Quantity Purchases
Product 5104240
Product 489230
Product 94206
Product 850199
Product 697187
Product 7167130
Product 245110
Product 110103
Product 1122100
Product 1012088

Rows per page:

10
1 - 10 of 11 
import React from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';

export default function App() {

  const formatData = {
    columns: [
      { label: 'Product', field: 'product' },
      { label: 'Quantity', field: 'quantity' },
      { label: 'Purchases', field: 'purchases' },
    ],
    rows: [
      { product: 'Product 1', quantity: 10, purchases: 103 },
      { product: 'Product 2', quantity: 45, purchases: 110 },
      { product: 'Product 3', quantity: 76, purchases: 56 },
      { product: 'Product 4', quantity: 89, purchases: 230 },
      { product: 'Product 5', quantity: 104, purchases: 240 },
      { product: 'Product 6', quantity: 97, purchases: 187 },
      { product: 'Product 7', quantity: 167, purchases: 130 },
      { product: 'Product 8', quantity: 50, purchases: 199 },
      { product: 'Product 9', quantity: 4, purchases: 206 },
      { product: 'Product 10', quantity: 120, purchases: 88 },
      { product: 'Product 11', quantity: 22, purchases: 100 },
    ],
  };

  return (
    <MDBDatatable
      data={formatData}
      sortOrder='desc'
      sortField='Purchases'
      format={(field, value) => {
        if (field === 'purchases') {
          const colors = ['#E3F2FD', '#BBDEFB', '#90CAF9', '#64B5F6', '#42A5F5'];

          const maxValue = Math.max(...formatData.rows.map((row) => row.purchases));
          const minValue = Math.min(...formatData.rows.map((row) => row.purchases));

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

          const colorIndex = Math.floor((value - minValue) / step);

          return { backgroundColor: colors[colorIndex], fontWeight: 400 };
        }
      }}
    />
  );
}

Clickable rows

Click on the row to preview the message.

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

 Actions From Title Message Date
admin@mdbootstrap.comMDBootstrap spring saleLorem ipsum dolor si...11/12/2019
 user@mdbootstrap.comHow to purchase MDB5 package?Quisque tempor ligul...10/12/2019
 user@mdbootstrap.comLicence renewalLorem ipsum dolor si...09/12/2019
 admin@mdbootstrap.comBlack friday offerLorem ipsum dolor si...08/12/2019

Rows per page:

10
1 - 4 of 4 
import React, { useState } from 'react';
import {
  MDBDatatable,
  MDBIcon,
  MDBModal,
  MDBModalBody,
  MDBModalDialog,
  MDBModalContent,
  MDBModalFooter,
  MDBModalHeader,
  MDBModalTitle,
  MDBBtn,
} from 'mdb-react-ui-kit';

export default function App() {

  const [basicModal, setBasicModal] = useState(false);
  const [selectedRowsAdvanced, setSelectedRowsAdvanced] = useState([]);
  const [modalState, setModalState] = useState({ from: '', message: '' });

  const clickableData = {
    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' },
    ],
    rows: [
      {
        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',
      },
    ].map((email, i) => {
      const getPreview = (message: string, length: number) => {
        if (message.length <= length) return message;

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

      return {
        ...email,
        preview: getPreview(email.message, 20),
        actions: (
          <>
            <a
              role='button'
              onClick={() => console.log(`star message: ${i}`, email)}
              className='star-email-button text-warning'
            >
              <MDBIcon far icon='star' className='datatable-disable-onclick' />
            </a>
            <a
              role='button'
              onClick={() => console.log(`delete message: ${i}`, email)}
              className='delete-email-button text-muted ms-2'
            >
              <MDBIcon icon='trash-alt' className='datatable-disable-onclick' />
            </a>
          </>
        ),
      };
    }),
  };

  return (
    <>
      <MDBDatatable
        selectable
        data={clickableData}
        onRowClick={(row) => {
          const rowElement = row as { from: string; message: string };
          const { from, message } = rowElement;

          setBasicModal(true);
          setModalState({ from, message });
        }}
      />

      <MDBModal open={basicModal} getOpenState={(e: any) => setBasicModal(e)} tabIndex='-1'>
        <MDBModalDialog>
          <MDBModalContent>
            <MDBModalHeader>
              <MDBModalTitle>MDBootstrap spring sale</MDBModalTitle>
              <MDBBtn className='btn-close' color='none' onClick={() => setBasicModal(false)}></MDBBtn>
            </MDBModalHeader>
            <MDBModalBody>
              <h6 className='mb-4'>
                From: <strong>{modalState.from}</strong>
              </h6>
              <p>{modalState.message}</p>
            </MDBModalBody>

            <MDBModalFooter>
              <MDBBtn outline>
                Reply
                <MDBIcon icon='paper-plane' className='ms-2' />
              </MDBBtn>
              <MDBBtn outline>
                Forward
                <MDBIcon icon='arrow-right' className='ms-2' />
              </MDBBtn>
            </MDBModalFooter>
          </MDBModalContent>
        </MDBModalDialog>
      </MDBModal>
    </>
  );
}

Datatables - API

Import

import { MDBDatatable } from 'mdb-react-ui-kit';

Properties

MDBDatatable

Name Type Default Description Example
allText string 'All' Changes text for All in the pagination select. <MDBDatatable allText='test' />
bordered boolean false Adds borders to a datatable. <MDBDatatable bordered />
borderless boolean false Removes all borders from a datatable. <MDBDatatable borderless />
borderColor string - Changes a border color to one of main colors. <MDBDatatable borderColor='red' />
color string - Adds a color class to a datatable (f.e 'bg-dark') <MDBDatatable color='primary' />
data DataType - Data passed to the Datatable. <MDBDatatable data={data} />
dark boolean false Changes a font color to white. <MDBDatatable dark />
editable boolean false Enable the edit mode. <MDBDatatable editable />
entries number 10 Number of visible entries (pagination). <MDBDatatable entries={25} />
entriesOptions number[] [10, 25, 50, 200] Options available to choose from in a pagination select (rows per page). <MDBDatatable entriesOptions=[10, 20, 60] />
fixedHeader boolean false When it's set to true, the table's header will remain visible while scrolling. <MDBDatatable fixedHeader />
fullPagination boolean false Displays additional buttons for the first and last pages. <MDBDatatable fullPagination />
hover boolean false Changes the background color of a hovered row. <MDBDatatable hover />
isLoading boolean false Set the loading mode. <MDBDatatable isLoading />
loaderClass string 'bg-primary' The class name for a loader (loading mode). <MDBDatatable loaderClass='bg-warning' />
loadingMessage ReactNode 'Loading results...' A message displayed while loading data. <MDBDatatable loaderClass='Loading...' />
maxWidth string - Sets a maximum width of a datatable - can be either a string ('10%') or a number of pixels. <MDBDatatable maxWidth='560px' />
maxHeight string - Sets a maximum height of a datatable - can be either a string ('10%') or a number of pixels. <MDBDatatable maxHeight='560px' />
multi boolean false Allows selecting multiple rows (selectable mode). <MDBDatatable selectable multi />
noFoundMessage ReactNode 'No matching results found' A message displayed when a table is empty. <MDBDatatable noFoundMessage='Not found...' />
ofText ReactNode 'of' A message displayed as pagination description <MDBDatatable ofText='/' />
pagination boolean true Shows/hides the pagination panel. <MDBDatatable pagination={false} />
rowsText string 'Rows per page': A text indicating a number of rows per page. <MDBDatatable rowsText='Rows:' />
search boolean false Enable search in the table. <MDBDatatable search />
selectable boolean false Enable selecting rows with checkboxes. <MDBDatatable selectable />
sm boolean false Decreases a row's paddings. <MDBDatatable sm />
striped boolean false Slightly changes the background's color in every other row. <MDBDatatable striped />
sortField string '' Allows default sorting of the table column <MDBDatatable sortField='ColumnName' />
sortOrder string 'asc' Defines the default sorting direction <MDBDatatable sortField='ColumnName' sortOrder='desc' />
searchInputProps Record<string, unknown> - Props for the search input <MDBDatatable searchInputProps={{ className='test' }} />

Properties

DataType

type DataType = {
  columns: ColumnsType;
  rows: RowsType;
};

ColumnsType

type AdvancedHeader = {
  label: string;
  field: keyof AdvancedRecord;
  sort?: boolean;
  width?: number;
  fixed?: string;
  fixedValue?: number;
  columnSelector?: string;
};

type ColumnsType = string[][] | AdvancedHeader[];

RowsType

type AdvancedRecord = Record<string, unknown>;

type RowsType = unknown[][] | AdvancedRecord[];

Methods

Name Type Description
advancedSearch (value: string) => { phrase: string; columns: string | string[] } Define advancedSearch for MDBDatatable
format (field: string | number | symbol, value: number) => CSSProperties | undefined Define format function for MDBDatatable

Events

Name Type Description
onRowClick (row: RecordsType) => void Event emitted after clicking on a row.
onSelectRow (selectedRows: RowsType, selectedIndexes: number[], allSelected: boolean) => void This event fires when a user select rows with checkboxes.

CSS variables

// .datatable
--#{$prefix}datatable-color: #{$datatable-color};
--#{$prefix}datatable-border-color: #{$datatable-border-color};
--#{$prefix}datatable-striped-color: #{$datatable-striped-color};
--#{$prefix}datatable-accent-bg: #{$datatable-accent-bg};
--#{$prefix}datatable-hover-color: #{$datatable-hover-color};
--#{$prefix}datatable-hover-bg: #{$datatable-hover-bg};
--#{$prefix}datatable-muted-color: #{$datatable-muted-color};
--#{$prefix}datatable-active-color: #{$datatable-active-color};
--#{$prefix}datatable-font-size: #{$datatable-font-size};
--#{$prefix}datatable-background-color: #{$datatable-background-color};
--#{$prefix}datatable-table-th-td-max-width: #{$datatable-table-th-td-max-width};
--#{$prefix}datatable-table-th-td-padding-y: #{$datatable-table-th-td-padding-y};
--#{$prefix}datatable-table-th-td-padding-x: #{$datatable-table-th-td-padding-x};
--#{$prefix}datatable-thead-tr-border-width: #{$datatable-thead-tr-border-width};
--#{$prefix}datatable-thead-th-font-weight: #{$datatable-thead-th-font-weight};
--#{$prefix}datatable-thead-fixed-cell-background-color: #{$datatable-thead-fixed-cell-background-color};
--#{$prefix}datatable-tbody-font-weight: #{$datatable-tbody-font-weight};
--#{$prefix}datatable-tbody-tr-transition: #{$datatable-tbody-tr-transition};
--#{$prefix}datatable-tbody-tr-last-child-height: #{$datatable-tbody-tr-last-child-height};
--#{$prefix}datatable-tbody-loader-height: #{$datatable-tbody-loader-height};
--#{$prefix}datatable-tbody-progress-animation: #{$datatable-tbody-progress-animation};
--#{$prefix}datatable-tbody-progress-width: #{$datatable-tbody-progress-width};
--#{$prefix}datatable-tbody-progress-opacity: #{$datatable-tbody-progress-opacity};
--#{$prefix}datatable-tbody-progress-border-radius: #{$datatable-tbody-progress-border-radius};
--#{$prefix}datatable-pagination-padding-y: #{$datatable-pagination-padding-y};
--#{$prefix}datatable-pagination-border-width: #{$datatable-pagination-border-width};
--#{$prefix}datatable-pagination-nav-font-size: #{$datatable-pagination-nav-font-size};
--#{$prefix}datatable-pagination-buttons-margin-left: #{$datatable-pagination-buttons-margin-left};
--#{$prefix}datatable-pagination-button-padding-x: #{$datatable-pagination-button-padding-x};
--#{$prefix}datatable-sort-icon-transition-duration: #{$datatable-sort-icon-transition-duration};
--#{$prefix}datatable-sort-icon-left: #{$datatable-sort-icon-left};
--#{$prefix}datatable-sort-icon-top: #{$datatable-sort-icon-top};
--#{$prefix}datatable-select-wrapper-font-size: #{$datatable-select-wrapper-font-size};
--#{$prefix}datatable-select-wrapper-font-weight: #{$datatable-select-wrapper-font-weight};
--#{$prefix}datatable-sm-th-td-padding-y: #{$datatable-sm-th-td-padding-y};
--#{$prefix}datatable-sm-th-td-padding-x: #{$datatable-sm-th-td-padding-x};
--#{$prefix}datatable-sm-tbody-tr-last-child-height: #{$datatable-sm-tbody-tr-last-child-height};
--#{$prefix}datatable-sm-pagination-padding: #{$datatable-sm-pagination-padding};
--#{$prefix}datatable-bordered-th-td-border-width: #{$datatable-bordered-th-td-border-width};
--#{$prefix}datatable-hover-tbody-tr-transition: #{$datatable-hover-tbody-tr-transition};
--#{$prefix}datatable-dark-select-arrow-input-color: #{$datatable-dark-select-arrow-input-color};
--#{$prefix}datatable-dark-border-color: #{$datatable-dark-border-color};
--#{$prefix}datatable-dark-check-border-color: #{$datatable-dark-check-border-color};
--#{$prefix}datatable-dark-datatable-progress-opacity: #{$datatable-dark-datatable-progress-opacity};

// &.datatable-dark
--#{$prefix}datatable-color: #{$datatable-dark-color};
--#{$prefix}datatable-border-color: #{$datatable-dark-border-color};
--#{$prefix}datatable-active-color: #{$datatable-dark-active-color};
--#{$prefix}datatable-striped-color: #{$datatable-dark-striped-color};
--#{$prefix}datatable-accent-bg: #{$datatable-dark-accent-bg};
--#{$prefix}datatable-hover-bg: #{$datatable-dark-hover-bg};
--#{$prefix}datatable-hover-color: #{$datatable-dark-hover-color};

// @each $color, $value in $theme-colors
// &.border-#{$color}
--#{$prefix}datatable-border-color: #{$value};

// &.datatable-borderless {
--#{$prefix}datatable-border-color: #{transparent};

SCSS variables

$datatable-color: rgb(33, 37, 41);
$datatable-border-color: rgb(224, 224, 224);
$datatable-striped-color: rgb(33, 37, 41);
$datatable-accent-bg: rgba(0, 0, 0, 0.02);
$datatable-hover-color: rgb(19, 19, 19);
$datatable-hover-bg: rgba(0, 0, 0, 0.048);
$datatable-muted-color: grey;
$datatable-active-color: rgba(19, 19, 19, 0.05);

$datatable-font-size: 0.9rem;
$datatable-background-color: $white;
$datatable-table-th-td-max-width: 250px;
$datatable-table-th-td-padding-y: 1rem;
$datatable-table-th-td-padding-x: 1.4rem;
$datatable-thead-tr-border-width: 1px;
$datatable-thead-th-font-weight: 500;
$datatable-thead-fixed-cell-background-color: $white;

$datatable-tbody-font-weight: 300;
$datatable-tbody-tr-transition: all 0.3s ease-in;
$datatable-tbody-tr-last-child-height: 71px;
$datatable-tbody-loader-height: 2px;

$datatable-tbody-progress-animation: datatableProgress 3s ease-in-out;
$datatable-tbody-progress-width: 45%;
$datatable-tbody-progress-opacity: 0.5;
$datatable-tbody-progress-border-radius: 1px;

$datatable-pagination-padding-y: 0.5rem;
$datatable-pagination-border-width: 1px;
$datatable-pagination-nav-font-size: 0.9rem;
$datatable-pagination-buttons-margin-left: 2rem;
$datatable-pagination-button-padding-x: 1rem;

$datatable-sort-icon-transition-duration: 0.3s;
$datatable-sort-icon-left: 0.4rem;
$datatable-sort-icon-top: calc(50% - 0.5rem);

$datatable-select-wrapper-font-size: 0.9rem;
$datatable-select-wrapper-font-weight: 300;

$datatable-select-font-size: 1rem;
$datatable-select-line-height: 1.3;
$datatable-select-padding-top: 0.4em;
$datatable-select-padding-right: 1.2em;
$datatable-select-padding-bottom: 0.3em;
$datatable-select-padding-left: 0.6em;
$datatable-select-margin-right: 1.4rem;
$datatable-select-margin-left: 0.1rem;
$datatable-select-background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000'><polygon points='0,0 100,0 50,50'/></svg>");
$datatable-select-background-position: right 0.4em top 60%, 0 0;
$datatable-select-background-size: 0.65em auto, 100%;
$datatable-select-focus-font-weight: 500;
$datatable-select-option-color: $black;

$datatable-sm-th-td-padding-y: 0.5rem;
$datatable-sm-th-td-padding-x: 1.4rem;
$datatable-sm-tbody-tr-last-child-height: 55px;
$datatable-sm-pagination-padding: 0.2rem;

$datatable-dark-check-border-color: $white;
$datatable-dark-select-background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>");
$datatable-dark-datatable-progress-opacity: 0.8;
$datatable-dark-select-arrow-input-color: white;
$datatable-dark-border-color: rgb(251, 251, 251);
$datatable-dark-color: #fff;
$datatable-dark-border-color: #fff;
$datatable-dark-striped-color: white;
$datatable-dark-accent-bg: rgba(255, 255, 255, 0.05);
$datatable-dark-hover-color: white;
$datatable-dark-hover-bg: rgba(255, 255, 255, 0.2);
$datatable-dark-active-color: rgba(255, 255, 255, 0.2);

$datatable-hover-tbody-tr-transition: background-color 0.2s ease-in;
$datatable-bordered-th-td-border-width: 1px;
$datatable-loading-select-background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='grey'><polygon points='0,0 100,0 50,50'/></svg>");