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.


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.




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.


Scroll

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


Fixed header

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


Fixed columns

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


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.


Action buttons

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


Cell formatting


Clickable rows

Click on the row to preview the message.

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


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 Function 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 [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 Number|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 Contains selected data <MDBDatatable selectedRows={selectedRows} />
setSelectedRows Function 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 String 'table' Defines tag of the MDBDatatable element <MDBDatatable tag="section" />