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.
import React, { useState } from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';
export default function App() {
const [basicData, setBasicData] = useState({
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.
import React, { useState } from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';
export default function App() {
const [advancedData, setAdvancedData] = useState({
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 advancedData data={advancedData} />
);
}
Search
Use search property to add search field to the datatable.
import React, { useState } from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';
export default function App() {
const [basicData, setBasicData] = useState({
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 search data={basicData} />
);
}
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.
import React, { useState } from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';
export default function App() {
const [advancedData, setAdvancedData] = useState({
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
advancedData
data={advancedData}
advancedSearch={(value: any) => {
const string = value.split(' in:').map((str: string) => str.trim());
const phrase = string[0];
let columns = string[1];
if (columns) {
columns = columns.split(',').map((str: string) => str.toLowerCase().trim());
}
return { phrase: phrase, columns: columns };
}}
/>
);
}
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.
import React, { useState } from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';
export default function App() {
const [selectedRows, setSelectedRows] = useState([]);
const [basicData, setBasicData] = useState({
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}
selectedRows={selectedRows}
setSelectedRows={setSelectedRows}
/>
);
}
Scroll
Setting maximum height/width will enable vertical/horizontal scrolling.
import React, { useState } from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';
export default function App() {
const [basicData, setBasicData] = useState({
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.
import React, { useState } from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';
export default function App() {
const [basicData, setBasicData] = useState({
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.
import React, { useState } from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';
export default function App() {
const [fixedData, setFixedData] = useState({
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} advancedData />
);
}
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.
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} loading={loading} advancedData />
</>
);
}
Action buttons
With the Datatable it's possible to render custom content, such as action buttons and attach actions to their events.
import React, { useState } from 'react';
import { MDBDatatable, MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
export default function App() {
const [actionData, setActionData] = useState({
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} advancedData />
);
}
Cell formatting
Use cell formatting to color individual cells.
import React, { useState } from 'react';
import { MDBDatatable } from 'mdb-react-ui-kit';
export default function App() {
const [formatData, setFormatData] = useState({
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}
advancedData
sortOrder='desc'
sortField='Purchases'
format={(field: string, value: any) => {
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.
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 [clicakbleData, setClickableData] = useState({
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={clicakbleData}
advancedData
selectedRows={selectedRowsAdvanced}
setSelectedRows={setSelectedRowsAdvanced}
clickableRows={(row: any) => {
setBasicModal(true);
setModalState({ from: row.from, message: row.message });
}}
/>
<MDBModal show={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 |
|---|---|---|---|---|
advancedData
|
boolean | false |
Sets the data type to advanced |
<MDBDatatable advancedData />
|
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' />
|
clickableRows
|
(row: any) => any | |
Makes rows clickable |
<MDBDatatable clickableRows={() => console.log('click')} />
|
color |
string | |
Adds a color class to a datatable (f.e 'bg-dark') |
<MDBDatatable color='primary' />
|
dark |
boolean | false |
Changes a font color to white |
<MDBDatatable dark />
|
className
|
string | '' |
Add custom class to MDBDatatable |
<MDBDatatable className="class" />
|
entries
|
number | 10 |
Number of visible entries (pagination) |
<MDBDatatable entries={25} />
|
entriesOptions
|
Array<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 />
|
loading
|
boolean | false |
Sets the loading mode - disables interactions and displays a loader |
<MDBDatatable loading />
|
loaderClass
|
string | 'bg-primary' |
The class name for a loader (loading mode) |
<MDBDatatable loaderClass='bg-warning' />
|
loadingMessage
|
string | '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' />
|
selectable
|
boolean | false |
Enables selecting rows with checkboxes |
<MDBDatatable selectable />
|
selectedRows
|
Array<any> | |
Contains selected data |
<MDBDatatable selectedRows={selectedRows} />
|
setSelectedRows
|
React.SetStateAction<any> | |
Sets selected data |
<MDBDatatable setSelectedRows={setSelectedRows} />
|
multi |
boolean | false |
Allows selecting multiple rows (selectable mode) |
<MDBDatatable selectable multi />
|
noFoundMessage
|
string | 'No matching results found' |
A message displayed when a table is empty |
<MDBDatatable noFoundMessage='Not found...' />
|
pagination
|
boolean | true |
Shows/hides the pagination panel |
<MDBDatatable pagination={false} />
|
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 />
|
rowsText
|
string | 'Rows per page': |
A text indicating a number of rows per page |
<MDBDatatable rowsText='Rows:' />
|
search
|
boolean | false |
Enables search in the table |
<MDBDatatable search />
|
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' />
|
advancedSearch
|
boolean | false |
Enables advanced search in the table |
<MDBDatatable advancedSearch />
|
tag
|
React.ComponentProps<any> | 'table' |
Defines tag of the MDBDatatable element |
<MDBDatatable tag="section" />
|
data
|
any | [] |
A data for the table |
<MDBDatatable data={{ columns: ['First', 'Second'], rows: [{ 'First item', 'Second item' }, { 'First item', 'Second item' }] }} />
|
format
|
(field: string | number | symbol, value: number) => any | |
A data for the table |
<MDBDatatable format={(field: string) => console.log(string)} />
|
searchInputProps
|
Record<string, unknown> | |
Props for the search input |
<MDBDatatable searchInputProps={{ className='test' }} />
|
datatableRef
|
React.RefObject<any> | |
A reference for the MDBDatatable component |
<MDBDatatable datatableRef={someRef} />
|