React Tables

React Tables - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

React Bootstrap Tables are component with basic tables features. They let you aggregate a huge amount of data and present it in the clear and orderly way.

React tables provide additional benefits like responsiveness and the possibility to manipulate the styles of the tables. You can enhance your tables by adding buttons, checkboxes, panels, and many other additional elements. You can also use an advanced datatables options like sort, search or pagination.

If you want to use basic bootstrap tables have a look at the documentation below.

For more advanced options go to the specific documentation pages listed below:

Basic table

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Show code

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

          const BasicTable = () => {
            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>
            );
          }

          export default BasicTable;

Table head options

To change a background-color of (or any other element) use our color classes names in property color. . If you are going to use a dark background you should also consider white text (to provide a proper contrast) by adding textWhite property.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Show code

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

            const BasicTable = () => {
              return (
                <MDBTable>
                  <MDBTableHead color="primary-color" textWhite>
                    <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>
              );
            }

            export default BasicTable;

Striped rows

Use prop striped to add zebra-striping to any table row within the .

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Show code

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

          const BasicTable = () => {
            return (
              <MDBTable striped>
                <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>
            );
          }

          export default BasicTable;

Bordered table

Add prop bordered for borders on all sides of the table and cells.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Show code

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

          const BasicTable = () => {
            return (
              <MDBTable bordered>
                <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>
            );
          }

          export default BasicTable;

Borderless table

Add prop borderless for a table without borders.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Show code

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

          const BasicTable = () => {
            return (
              <MDBTable borderless>
                <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>
            );
          }

          export default BasicTable;

Hoverable rows

Add prop hover to enable a hover state on table rows.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Show code

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

          const BasicTable = () => {
            return (
              <MDBTable hover>
                <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>
            );
          }

          export default BasicTable;

Small table

Add prop small to make tables more compact by cutting cell padding in half.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Show code

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

          const BasicTable = () => {
            return (
              <MDBTable small>
                <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>
            );
          }

          export default BasicTable;

Captions

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.

List of users
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Show code

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

          const BasicTable = () => {
            return (
              <MDBTable>
                <caption>List of users</caption>
                <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>
            );
          }

          export default BasicTable;

Responsive table

Create responsive table by adding prop responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Note: For more advanced options of responsive tables have a look at Responsive Tables documentation .

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Show code

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

          const BasicTable = () => {
            return (
              <MDBTable responsive>
                <MDBTableHead>
                  <tr>
                    <th>#</th>
                    <th>Heading</th>
                    <th>Heading</th>
                    <th>Heading</th>
                    <th>Heading</th>
                    <th>Heading</th>
                    <th>Heading</th>
                    <th>Heading</th>
                    <th>Heading</th>
                    <th>Heading</th>
                  </tr>
                </MDBTableHead>
                <MDBTableBody>
                  <tr>
                    <td>1</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                  </tr>
                </MDBTableBody>
              </MDBTable>
            );
          }

          export default BasicTable;

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.

Show code

        
            
          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.

Show code

Basic usage
Usage with data obj

        
            
          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.

Show code

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

React Tables - Examples

Here are some example and variations of our basic Table component. Find out how to mix properties, or how does the table with larger amount of data look like.

#	First	Last	Handle	First	Last	Handle
1	Mark	Otto	@mdo	Larry	the Bird	@twitter
2	Jacob	Thornton	@fat	Mark	Otto	@mdo
3	Larry the Bird		@twitter	Jacob	Thornton	@fat
4	Mark	Otto	@mdo	Larry	the Bird	@twitter
5	Jacob	Thornton	@fat	Mark	Otto	@mdo
6	Larry	the Bird	@twitter	Jacob	Thornton	@fat
7	Mark	Otto	@mdo	Larry	the Bird	@twitter
8	Jacob	Thornton	@fat	Mark	Otto	@mdo
9	Larry	the Bird	@twitter	Jacob	Thornton	@fat

Show code

        
            

        import React from 'react';
        import {
          MDBContainer,
          MDBRow,
          MDBCol,
          MDBCard,
          MDBCardBody,
          MDBTable,
          MDBTableBody,
          MDBTableHead
        } from 'mdbreact';

        const TablePage = props => {
          const data_collspan = {
            columns: [
              {
                label: '#',
                field: 'id',
                sort: 'asc'
              },
              {
                label: 'First',
                field: 'first',
                sort: 'asc'
              },
              {
                label: 'Last',
                field: 'last',
                sort: 'asc'
              },
              {
                label: 'Handle',
                field: 'handle',
                sort: 'asc'
              },
              {
                label: 'First',
                field: 'first1',
                sort: 'asc'
              },
              {
                label: 'Last',
                field: 'last1',
                sort: 'asc'
              },
              {
                label: 'Handle',
                field: 'handle1',
                sort: 'asc'
              }
            ],
            rows: [
              {
                id: 1,
                first: 'Mark',
                last: 'Otto',
                handle: '@mdo',
                first1: 'Larry',
                last1: 'the Bird',
                handle1: '@twitter'
              },
              {
                id: 2,
                first: 'Jacob',
                last: 'Thornton',
                handle: '@fat',
                first1: 'Mark',
                last1: 'Otto',
                handle1: '@mdo'
              },
              {
                id: 3,
                first: 'Larry the Bird',
                colspan: 2,
                handle: '@twitter',
                first1: 'Jacob',
                last1: 'Thornton',
                handle1: '@fat'
              },
              {
                id: 4,
                first: 'Mark',
                last: 'Otto',
                handle: '@mdo',
                first1: 'Larry',
                last1: 'the Bird',
                handle1: '@twitter'
              },
              {
                id: 5,
                first: 'Jacob',
                last: 'Thornton',
                handle: '@fat',
                first1: 'Mark',
                last1: 'Otto',
                handle1: '@mdo'
              },
              {
                id: 6,
                first: 'Larry',
                last: 'the Bird',
                handle: '@twitter',
                first1: 'Jacob',
                last1: 'Thornton',
                handle1: '@fat'
              },
              {
                id: 7,
                first: 'Mark',
                last: 'Otto',
                handle: '@mdo',
                first1: 'Larry',
                last1: 'the Bird',
                handle1: '@twitter'
              },
              {
                id: 8,
                first: 'Jacob',
                last: 'Thornton',
                handle: '@fat',
                first1: 'Mark',
                last1: 'Otto',
                handle1: '@mdo'
              },
              {
                id: 9,
                first: 'Larry',
                last: 'the Bird',
                handle: '@twitter',
                first1: 'Jacob',
                last1: 'Thornton',
                handle1: '@fat'
              }
            ]
          };

          return (
            <MDBContainer className='mt-3'>
              <MDBRow className='py-3'>
                <MDBCol md='12'>
                  <MDBTable bordered striped>
                    <MDBTableHead
                      columns={data_collspan.columns}
                      color='default-color'
                      textWhite
                    />
                    <MDBTableBody rows={data_collspan.rows} />
                  </MDBTable>
                </MDBCol>
              </MDBRow>
            </MDBContainer>
          );
        };

        export default TablePage;

Introduction
Examples