React Tables Styles

React Tables Styles - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap table styles are table components with additional elements like buttons, checkboxes, icons, panels & more.

Within our examples we are using object as data source, but you can also use regular template with <tr&td;, <td&td; and <th&td; elements within MDBTableBody and MDBTableHead.

Table with buttons

Have a look at Buttons documentation to learn more about all available buttons.

Regular buttons

# First Name Last Name Username
1 Otto @mdo
2 Jacob @fat
3 Larry the Bird 
        
            
          import React from 'react';
          import { MDBBtn, MDBTable, MDBTableBody, MDBTableHead  } from 'mdbreact';

          const TablePage = (props) => {
            const columns= [
              {
                label: '#',
                field: 'id',
                sort: 'asc'
              },
              {
                label: 'First',
                field: 'first',
                sort: 'asc'
              },
              {
                label: 'Last',
                field: 'last',
                sort: 'asc'
              },
              {
                label: 'Handle',
                field: 'handle',
                sort: 'asc'
              }
            ];

            const rows_regular_btn = [
              {
                'id': 1,
                'first': <MDBBtn color="purple" size="sm">Button</MDBBtn>,
                'last': 'Otto',
                'handle': '@mdo'
              },
              {
                'id': 2,
                'first': 'Jacob',
                'last': <MDBBtn color="purple" size="sm">Button</MDBBtn>,
                'handle': '@fat'
              },
              {
                'id': 3,
                'first': 'Larry',
                'last': 'the Bird',
                'handle': <MDBBtn color="purple" size="sm">Button</MDBBtn>
              }
            ];

            return(
              <MDBTable btn>
                <MDBTableHead columns={columns} />
                <MDBTableBody rows={rows_regular_btn} />
              </MDBTable>
            );
          };

          export default TablePage;

Outline buttons

# First Name Last Name Username
1 Otto @mdo
2 Jacob @fat
3 Larry the Bird 
        
            
          import React from 'react';
          import { MDBBtn, MDBTable, MDBTableBody, MDBTableHead  } from 'mdbreact';

          const TablePage = (props) => {
            const columns= [
              {
                label: '#',
                field: 'id',
                sort: 'asc'
              },
              {
                label: 'First',
                field: 'first',
                sort: 'asc'
              },
              {
                label: 'Last',
                field: 'last',
                sort: 'asc'
              },
              {
                label: 'Handle',
                field: 'handle',
                sort: 'asc'
              }
            ];

            const rows_outline_btn = [
              {
                'id': 1,
                'first': <MDBBtn color="purple" outline size="sm">Button</MDBBtn>,
                'last': 'Otto',
                'handle': '@mdo'
              },
              {
                'id': 2,
                'first': 'Jacob',
                'last': <MDBBtn color="purple" outline size="sm">Button</MDBBtn>,
                'handle': '@fat'
              },
              {
                'id': 3,
                'first': 'Larry',
                'last': 'the Bird',
                'handle': <MDBBtn color="purple" outline size="sm">Button</MDBBtn>
              }
            ];

            return(
              <MDBTable btn>
                <MDBTableHead columns={columns} />
                <MDBTableBody rows={rows_outline_btn} />
              </MDBTable>
            );
          };

          export default TablePage;

Rounded buttons MDB Pro component

# First Name Last Name Username
1 Otto @mdo
2 Jacob @fat
3 Larry the Bird 
        
            
          import React from 'react';
          import { MDBBtn, MDBTable, MDBTableBody, MDBTableHead  } from 'mdbreact';

          const TablePage = (props) => {
            const columns= [
              {
                label: '#',
                field: 'id',
                sort: 'asc'
              },
              {
                label: 'First',
                field: 'first',
                sort: 'asc'
              },
              {
                label: 'Last',
                field: 'last',
                sort: 'asc'
              },
              {
                label: 'Handle',
                field: 'handle',
                sort: 'asc'
              }
            ];

            const rows_rounded_btn = [
              {
                'id': 1,
                'first': <MDBBtn color="default" rounded size="sm">Button</MDBBtn>,
                'last': 'Otto',
                'handle': '@mdo'
              },
              {
                'id': 2,
                'first': 'Jacob',
                'last': <MDBBtn color="default" rounded size="sm">Button</MDBBtn>,
                'handle': '@fat'
              },
              {
                'id': 3,
                'first': 'Larry',
                'last': 'the Bird',
                'handle': <MDBBtn color="default" rounded size="sm">Button</MDBBtn>
              }
            ];

            return(
              <MDBTable btn>
                <MDBTableHead columns={columns} />
                <MDBTableBody rows={rows_rounded_btn} />
              </MDBTable>
            );
          };

          export default TablePage;

Table with checkboxes

See all available options of checkboxes in the Checkbox documentation.

Default checkboxes

Lorem Ipsum Dolor
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9 
        
            
          import React from 'react';
          import { MDBInput, MDBTable, MDBTableBody, MDBTableHead  } from 'mdbreact';

          const TablePage = (props) => {
            const data_checkboxes = {
              columns: [
                {
                  'label': 'Check',
                  'field': 'check',
                  'sort': 'asc'
                },
                {
                  'label': 'Lorem',
                  'field': 'lorem',
                  'sort': 'asc'
                },
                {
                  'label': 'Ipusm',
                  'field': 'ipsum',
                  'sort': 'asc'
                },
                {
                  'label': 'Dolor',
                  'field': 'dolor',
                  'sort': 'asc'
                }
              ],
              rows: [
                {
                  'check': <MDBInput label="Check 2" type="checkbox" id="checkbox2" />,
                  'lorem': 'Cell1',
                  'ipsum': 'Cell2',
                  'dolor': 'Cell3'
                },
                {
                  'check': <MDBInput label="Check 3" type="checkbox" id="checkbox3" />,
                  'lorem': 'Cell1',
                  'ipsum': 'Cell2',
                  'dolor': 'Cell3'
                },
                {
                  'check': <MDBInput label="Check 4" type="checkbox" id="checkbox4" />,
                  'lorem': 'Cell1',
                  'ipsum': 'Cell2',
                  'dolor': 'Cell3'
                }
              ]
            };

            return(
              <MDBTable btn fixed>
                <MDBTableHead columns={data_checkboxes.columns} />
                <MDBTableBody rows={data_checkboxes.rows} />
              </MDBTable>
            );
          };

          export default TablePage;

Material checkboxes MDB Pro component

Lorem Ipsum Dolor
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9 
        
            
          import React from 'react';
          import { MDBInput, MDBTable, MDBTableBody, MDBTableHead  } from 'mdbreact';

          const TablePage = (props) => {
            const data_checkboxes = {
              columns: [
                {
                  'label': 'Check',
                  'field': 'check',
                  'sort': 'asc'
                },
                {
                  'label': 'Lorem',
                  'field': 'lorem',
                  'sort': 'asc'
                },
                {
                  'label': 'Ipusm',
                  'field': 'ipsum',
                  'sort': 'asc'
                },
                {
                  'label': 'Dolor',
                  'field': 'dolor',
                  'sort': 'asc'
                }
              ],
              rows: [
                {
                  'check': <MDBInput label="Check 2" type="checkbox" id="checkbox2" />,
                  'lorem': 'Cell1',
                  'ipsum': 'Cell2',
                  'dolor': 'Cell3'
                },
                {
                  'check': <MDBInput label="Check 3" type="checkbox" id="checkbox3" />,
                  'lorem': 'Cell1',
                  'ipsum': 'Cell2',
                  'dolor': 'Cell3'
                },
                {
                  'check': <MDBInput label="Check 4" type="checkbox" id="checkbox4" />,
                  'lorem': 'Cell1',
                  'ipsum': 'Cell2',
                  'dolor': 'Cell3'
                }
              ]
            };

            return(
              <MDBTable btn fixed>
                <MDBTableHead columns={data_checkboxes.columns} />
                <MDBTableBody rows={data_checkboxes.rows} />
              </MDBTable>
            );
          };

          export default TablePage;

Table with icons

To learn more about icons read Icons usage documentation or Full list of 600+ icons

# Lorem Ipsum Dolor
1 Cell 1 Cell 2 Cell 3
2 Cell 4 Cell 5 Cell 6
3 Cell 7 Cell 8 Cell 9 
        
            
          import React from 'react';
          import { MDBTable, MDBTableBody, MDBTableHead  } from 'mdbreact';

          const TablePage = (props) => {
            const data_icons = {
              columns: [
                {
                  'label': '#',
                  'field': 'id',
                  'sort': 'asc'
                },
                {
                  'label': [<i key="Lorem" className="fa fa-leaf mr-2 blue-text" aria-hidden="true"></i>, 'Lorem'],
                  'field': 'lorem',
                  'sort': 'asc'
                },
                {
                  'label': [<i key="Ipsum" className="fa fa-leaf mr-2 teal-text" aria-hidden="true"></i>, 'Ipsum'],
                  'field': 'ipsum',
                  'sort': 'asc'
                },
                {
                  'label': [<i key="Dolor" className="fa fa-leaf mr-2 indigo-text" aria-hidden="true"></i>, 'Dolor'],
                  'field': 'dolor',
                  'sort': 'asc'
                }
              ],
              rows: [
                {
                  'id': 1,
                  'lorem': [<i key="cell1" className="far fa-gem mr-2 grey-text" aria-hidden="true"></i>, 'Cell1'],
                  'ipsum': [<i key="cell2" className="fa fa-download mr-2 grey-text" aria-hidden="true"></i>, 'Cell2'],
                  'dolor': [<i key="cell3" className="fa fa-book mr-2 grey-text" aria-hidden="true"></i>, 'Cell3']
                },
                {
                  'id': 2,
                  'lorem': [<i key="cell1" className="fa fa-graduation-cap mr-2 grey-text" aria-hidden="true"></i>, 'Cell1'],
                  'ipsum': [<i key="cell2" className="fa fa-gift mr-2 grey-text" aria-hidden="true"></i>, 'Cell2'],
                  'dolor': [<i key="cell3" className="far fa-image mr-2 grey-text" aria-hidden="true"></i>, 'Cell3']
                },
                {
                  'id': 3,
                  'lorem': [<i key="cell1" className="fa fa-magic mr-2 grey-text" aria-hidden="true"></i>, 'Cell1'],
                  'ipsum': [<i key="cell2" className="fa fa-table mr-2 grey-text" aria-hidden="true"></i>, 'Cell2'],
                  'dolor': [<i key="cell3" className="fa fa-edit mr-2 grey-text" aria-hidden="true"></i>, 'Cell3']
                }
              ]
            };

            return(
              <MDBTable btn fixed>
                <MDBTableHead columns={data_icons.columns} />
                <MDBTableBody rows={data_icons.rows} />
              </MDBTable>
            );
          };

          export default TablePage;

Table with panel

See all the available options in the Panels documentation and Cards documentation.

Table name
First Name Last Name Username Username Username Username
Mark Otto @mdo Mark Otto @mdo
Jacob Thornton @fat Jacob Thornton @fat
Larry the Bird @twitter Larry the Bird @twitter
Paul Topolski @P_Topolski Paul Topolski @P_Topolski
Larry the Bird @twitter Larry the Bird @twitter 
        
            
          import React from 'react';
          import { MDBCard, MDBCardBody, MDBCardHeader, MDBInput, MDBBtn, MDBTable, MDBTableBody, MDBTableHead  } from 'mdbreact';

          const TablePage = (props) => {
            const data_panel = {
              columns: [
                {
                  'label': <MDBInput label=" " type="checkbox" id="checkbox5" />,
                  'field': 'check',
                  'sort': 'asc'
                },
                {
                  'label': 'First Name',
                  'field': 'first',
                  'sort': 'asc'
                },
                {
                  'label': 'Last Name',
                  'field': 'last',
                  'sort': 'asc'
                },
                {
                  'label': 'Username',
                  'field': 'username',
                  'sort': 'asc'
                },
                {
                  'label': 'Username',
                  'field': 'username2',
                  'sort': 'asc'
                },
                {
                  'label': 'Username',
                  'field': 'username3',
                  'sort': 'asc'
                },
                {
                  'label': 'Username',
                  'field': 'username4',
                  'sort': 'asc'
                }
              ],
              rows: [
                {
                  'check': <MDBInput label=" " type="checkbox" id="checkbox6" />,
                  'first': 'Mark',
                  'last': 'Otto',
                  'username': '@mdo',
                  'username2': 'Mark',
                  'username3': 'Otto',
                  'username4': '@mdo'
                },
                {
                  'check': <MDBInput label=" " type="checkbox" id="checkbox7" />,
                  'first': 'Jacob',
                  'last': 'Thornton',
                  'username': '@fat',
                  'username2': 'Jacob',
                  'username3': 'Thornton',
                  'username4': '@fat'
                },
                {
                  'check': <MDBInput label=" " type="checkbox" id="checkbox8" />,
                  'first': 'Larry',
                  'last': 'the Bird',
                  'username': '@twitter',
                  'username2': 'Larry',
                  'username3': 'the Bird',
                  'username4': '@twitter'
                },
                {
                  'check': <MDBInput label=" " type="checkbox" id="checkbox9" />,
                  'first': 'Paul',
                  'last': 'Topolski',
                  'username': '@P_Topolski',
                  'username2': 'Paul',
                  'username3': 'Topolski',
                  'username4': '@P_Topolski'
                },
                {
                  'check': <MDBInput label=" " type="checkbox" id="checkbox10" />,
                  'first': 'Larry',
                  'last': 'the Bird',
                  'username': '@twitter',
                  'username2': 'Larry',
                  'username3': 'the Bird',
                  'username4': '@twitter'
                }
              ]
            };

            return(
              <MDBCard narrow>
                <MDBCardHeader className="view view-cascade gradient-card-header blue-gradient d-flex justify-content-between align-items-center py-2 mx-4 mb-3">
                  <div>
                    <MDBBtn outline rounded size="sm" color="white" className="px-2">
                      <i className="fa fa-th-large mt-0"></i>
                    </MDBBtn>
                    <MDBBtn outline rounded size="sm" color="white" className="px-2">
                      <i className="fa fa-columns mt-0"></i>
                    </MDBBtn>
                  </div>
                  <a href="#" className="white-text mx-3">Table name</a>
                  <div>
                    <MDBBtn outline rounded size="sm" color="white" className="px-2">
                      <i className="fas fa-pencil-alt mt-0"></i>
                    </MDBBtn>
                    <MDBBtn outline rounded size="sm" color="white" className="px-2">
                      <i className="fas fa-times mt-0"></i>
                    </MDBBtn>
                    <MDBBtn outline rounded size="sm" color="white" className="px-2">
                      <i className="fa fa-info-circle mt-0"></i>
                    </MDBBtn>
                  </div>
                </MDBCardHeader>
                <MDBCardBody cascade>
                  <MDBTable btn fixed>
                    <MDBTableHead columns={data_panel.columns} />
                    <MDBTableBody rows={data_panel.rows} />
                  </MDBTable>
                </MDBCardBody>
              </MDBCard>
            );
          };

          export default TablePage;

Advanced table options

For advanced options of the tables have a look at specific documentation pages listed below.

Tables with additional elements and customization options

Tables with buttons, checkboxes, icons, panels & more.
Table responsive

Advanced options of responsive tables
Datatables

MDBootstrap integration with the most popular plugin enhancing the possibilities of standard tables.
Table pagination

Pagination is a simple navigation which lets you split a huge amount of content within the tables into smaller parts.

Table search

MDBootstrap search box enables super fast searching among all the data of the table.
Table sort

This functionality lets you sort the data of the tables according to any specific columns.
Table scroll

If your table is too long or too wide you can limit its size and enable scroll functionality.
Table editable

Table editable allows you to edit existing data within the table and add new data to the table.

React Tables - API

This section present detailed information about Tables usage, properties and customization. Dive into API references to find see all available props and methods.

Imports

To start working with Basic Tables you need to import three components.
Table, TableBody and TableHead extends native HTML tags with MDB's styles and functions. 

        
            
          import React from 'react';
          import { MDBTable, MDBTableBody, MDBTableHead  } from 'mdbreact';

Usage

Our Tables provide to ways to be used in your project.
Basicly build table structure like in normal HTML, or construct object with your data and bind it as a property. 

        
            
          const BasicTable = (props) => {
            return (
              <MDBTable>
                <MDBTableHead>
                  <tr>
                    <th>#</th>
                    <th>First</th>
                    <th>Last</th>
                    <th>Handle</th>
                  </tr>
                </MDBTableHead>
                <MDBTableBody>
                  <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                  </tr>
                </MDBTableBody>
              </MDBTable>
            );
          }
        
        
    
        
            
          const BasicTable = (props) => {
            const data = {
              columns: [
                {
                  label: '#',
                  field: 'id'
                },
                {
                  label: 'First',
                  field: 'first'
                },
                {
                  label: 'Last',
                  field: 'last'
                },
                {
                  label: 'Handle',
                  field: 'handle'
                }
              ],
              rows: [
                {
                  'id': 1,
                  'first': 'Mark',
                  'last': 'Otto',
                  'handle': '@mdo'
                },
                {
                  'id': 2,
                  'first': 'Jacob',
                  'last': 'Thornton',
                  'handle': '@fat'
                },
                {
                  'id': 3,
                  'first': 'Larry',
                  'last': 'the Bird',
                  'handle': '@twitter'
                }
              ]
            };
          
            return (
              <MDBTable>
                <MDBTableHead columns={data.columns} />
                <MDBTableBody rows={data.rows} />
              </MDBTable>
            );
          }

API Reference: Table component

All properties and options refered to MDBTable component.

Properties

Name Type Default Description Example
striped Boolean false Adds zebra-striping to any table row. <MDBTable striped>
bordered Boolean false Adds border on all table's and cell's sides. <MDBTable bordered>
borderless Boolean false Disables border on all table's and cell's sides. <MDBTable borderless>
hover Boolean false Adds hover state on table rows (rows are marked on light-grey color). <MDBTable hover>
small Boolean false Cuts cell's padding by half. <MDBTable small>
reponsive Boolean false Makes table scrollable horizontally when screen width is smaller than table content (under 768px).
It make use of overflow-y: hidden which clips off content that goes beyon the bottom or top edge of the table. 		<MDBTable responsive>
reponsiveSm Boolean false Makes table scrollable horizontally on under 576px wide screens. <MDBTable responsiveSm>
reponsiveMd Boolean false Makes table scrollable horizontally on under 768px wide screens. <MDBTable responsiveMd>
reponsiveLg Boolean false Makes table scrollable horizontally on under 992px wide screens. <MDBTable responsiveLg>
reponsiveXl Boolean false Makes table scrollable horizontally on under 1200px wide screens. <MDBTable responsiveXl>
scrollY Boolean false Allows table to be scrolled vertically if it's content is higher than 200px. Combine it with maxHeight to manipulate table's height. <MDBTable scrollY>
maxHeight String 200px Sets table's maxHeight. You can use px, vh or whatever fits to your needs. <MDBTable maxHeight="400px">
autoWidth Boolean false Automatically adjust columns width to the content. <MDBTable autoWidth>
fixed Boolean false Sets fixed columns width. <MDBTable fixed>

API Reference: TableHead component

All properties and options refered to MDBTableHead component.

Properties

Name Type Default Description Example
color String Changes TableHead background color. Use MDB color classes <MDBTableHead color="primary-color">
textWhite Boolean false Sets TableHead's font color to white. <MDBTableHead textWhite>
columns Object[] Binds your data into the component. <MDBTableHead columns={this.state.columns}>
minimal String Sets the minimal width of the column (sm - 6rem, lg - 9rem). <MDBTableHead> <tr> <th minimal="sm"> Example <th> </tr> </MDBTableHead>

Object options (columns)

Name Type Default Description Example
minimal String Sets the minimal width of the column (sm - 6rem, lg - 9rem). this.state = { columns: [ { label: "Example", field: "example", minimal: "sm" } ] }

API Reference: TableBody component

All properties and options refered to MDBTableBody component.

Properties

Name Type Default Description Example
color String Changes TableBody background color. Use MDB color classes <MDBTableBody color="primary-color">
textWhite Boolean false Sets TableBody's font color to white. <MDBTableBody textWhite>
rows Object[] Binds your data into the component.
You can combine basic Table structure with data object, then your basic structure will be displayed under the binded data. 		<MDBTableBody rows={this.state.rows}>
colSpan Number 1 Spans table cell to the given number of columns. <MDBTableBody> <tr> <td colSan={2}> Example <td> </tr> </MDBTableBody>

Object options (rows)

Name Type Default Description Example
colspan Number 1 Spans table cell to the given number of columns. code must be added After the cell which you want to span. this.state = { rows: [ { colOne: "Cell", colTwo: "Cell spanned", colspan: 2, colThree: "Cell" } ] }

API Reference: Additional Table elements

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

Name Type Default Description Example
<caption> Node A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it. <caption>Example caption</caption>

API Reference: Data object structure

You can use object as source of data for your tables, but you have to remember about proper structure.
Columns must consist of at least 2 properties label and field.
label is displayed inside TableHeader, field is used inside components logic.
Rows are not that important, but you have to remember that key has to correspond to the columns field. 

        
            
          this.state= {
            columns: [
              {
                label: String,
                field: String,
                attributes: {
                  "attribute": "value",
                  ...
                }
              }
              ...
            ],
            rows: [
              {
                fieldName: String/Number/Node,
                colspan: Number,
                clickEvent: this.yourClickHandler
              }
              ...
            ]
          }