React Responsive Table

React Responsive Table - 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

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding property responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using responsive{Sm|Md|Lg|Xl}.

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.

Always responsive

Across every breakpoint, use prop responsive for horizontally scrolling tables.

#	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 TablePage = (props) => {
            const data = {
              columns: [
                {
                  label: '#',
                  field: 'id',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading0',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading1',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading2',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading3',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading4',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading5',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading6',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading7',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading8',
                  sort: 'asc'
                }
              ],
              rows: [
                {
                  'id': 1,
                  'heading0': 'Cell',
                  'heading1': 'Cell',
                  'heading2': 'Cell',
                  'heading3': 'Cell',
                  'heading4': 'Cell',
                  'heading5': 'Cell',
                  'heading6': 'Cell',
                  'heading7': 'Cell',
                  'heading8': 'Cell'
                },
                {
                  'id': 2,
                  'heading0': 'Cell',
                  'heading1': 'Cell',
                  'heading2': 'Cell',
                  'heading3': 'Cell',
                  'heading4': 'Cell',
                  'heading5': 'Cell',
                  'heading6': 'Cell',
                  'heading7': 'Cell',
                  'heading8': 'Cell'
                },
                {
                  'id': 3,
                  'heading0': 'Cell',
                  'heading1': 'Cell',
                  'heading2': 'Cell',
                  'heading3': 'Cell',
                  'heading4': 'Cell',
                  'heading5': 'Cell',
                  'heading6': 'Cell',
                  'heading7': 'Cell',
                  'heading8': 'Cell'
                }
              ]
            };

            return (
              <MDBTable responsive>
                <MDBTableHead columns={data.columns} />
                <MDBTableBody rows={data.rows} />
              </MDBTable>
            );
          };

          export default TablePage;

Breakpoint specific

Use responsive{Sm|Md|Lg|Xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

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

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

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

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

Show code

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

          const TablePage = (props) => {
            const data = {
              columns: [
                {
                  label: '#',
                  field: 'id',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading0',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading1',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading2',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading3',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading4',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading5',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading6',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading7',
                  sort: 'asc'
                },
                {
                  label: 'Heading',
                  field: 'heading8',
                  sort: 'asc'
                }
              ],
              rows: [
                {
                  'id': 1,
                  'heading0': 'Cell',
                  'heading1': 'Cell',
                  'heading2': 'Cell',
                  'heading3': 'Cell',
                  'heading4': 'Cell',
                  'heading5': 'Cell',
                  'heading6': 'Cell',
                  'heading7': 'Cell',
                  'heading8': 'Cell'
                },
                {
                  'id': 2,
                  'heading0': 'Cell',
                  'heading1': 'Cell',
                  'heading2': 'Cell',
                  'heading3': 'Cell',
                  'heading4': 'Cell',
                  'heading5': 'Cell',
                  'heading6': 'Cell',
                  'heading7': 'Cell',
                  'heading8': 'Cell'
                },
                {
                  'id': 3,
                  'heading0': 'Cell',
                  'heading1': 'Cell',
                  'heading2': 'Cell',
                  'heading3': 'Cell',
                  'heading4': 'Cell',
                  'heading5': 'Cell',
                  'heading6': 'Cell',
                  'heading7': 'Cell',
                  'heading8': 'Cell'
                }
              ]
            };

            return (
              <MDBContainer>
                <MDBTable responsiveSm>
                  <MDBTableHead columns={data.columns} />
                  <MDBTableBody rows={data.rows} />
                </MDBTable>

                <MDBTable responsiveMd>
                  <MDBTableHead columns={data.columns} />
                  <MDBTableBody rows={data.rows} />
                </MDBTable>

                <MDBTable responsiveLg>
                  <MDBTableHead columns={data.columns} />
                  <MDBTableBody rows={data.rows} />
                </MDBTable>

                <MDBTable responsiveXl>
                  <MDBTableHead columns={data.columns} />
                  <MDBTableBody rows={data.rows} />
                </MDBTable>
              </MDBContainer>
            );
          };

          export default TablePage;

Bootstrap table column width

Use one of the following properties to manipulate the width of the columns.

Table columns with auto width

Add prop autoWidth to the MDBTable element to set an auto width to the table column.

The width of the columns will automatically adjust to the content of the column. That means it will always take a minimum width required to present its content.

#	Name	Surname	Country	City	Position	Age
1	Kate	Moss	USA	New York City	Web Designer	23
2	Anna	Wintour	United Kingdom	London	Frontend Developer	36
3	Tom	Bond	Spain	Madrid	Photographer	25
4	Jerry	Horwitz	Italy	Bari	Editor-in-chief	41
5	Janis	Joplin	Poland	Warsaw	Video Maker	39
6	Gary	Winogrand	Germany	Berlin	Photographer	37
7	Angie	Smith	USA	San Francisco	Teacher	52
8	John	Mattis	France	Paris	Actor	28
9	Otto	Morris	Germany	Munich	Singer	35

Show code

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

          const TablePage = (props) => {
            const data_people = {
              columns: [
                {
                  label: '#',
                  field: 'id',
                  sort: 'asc',
                },
                {
                  label: 'Name',
                  field: 'name',
                  sort: 'asc'
                },
                {
                  label: 'Surname',
                  field: 'surname',
                  sort: 'asc'
                },
                {
                  label: 'Country',
                  field: 'country',
                  sort: 'asc'
                },
                {
                  label: 'City',
                  field: 'city',
                  sort: 'asc'
                },
                {
                  label: 'Position',
                  field: 'position',
                  sort: 'asc'
                },
                {
                  label: 'Age',
                  field: 'age',
                  sort: 'asc'
                }
              ],
              rows: [
                {
                  'id': '1',
                  'name': 'Kate',
                  'surname': 'Moss',
                  'country': 'USA',
                  'city': 'New York City',
                  'position': 'Web Designer',
                  'age': '23'
                },
                {
                  'id': '2',
                  'name': 'Anna',
                  'surname': 'Wintour',
                  'country': 'United Kingdom',
                  'city': 'London',
                  'position': 'Frontend Developer',
                  'age': '36'
                },
                {
                  'id': '3',
                  'name': 'Tom',
                  'surname': 'Bond',
                  'country': 'Spain',
                  'city': 'Madrid',
                  'position': 'Photographer',
                  'age': '25'
                },
                {
                  'id': '4',
                  'name': 'Jerry',
                  'surname': 'Horwitz',
                  'country': 'Italy',
                  'city': 'Bari',
                  'position': 'Editor-in-chief',
                  'age': '41'
                },
                {
                  'id': '5',
                  'name': 'Janis',
                  'surname': 'Joplin',
                  'country': 'Poland',
                  'city': 'Warsaw',
                  'position': 'Video Maker',
                  'age': '39'
                },
                {
                  'id': '6',
                  'name': 'Gary',
                  'surname': 'Winogrand',
                  'country': 'Germany',
                  'city': 'Berlin',
                  'position': 'Photographer',
                  'age': '37'
                },
                {
                  'id': '7',
                  'name': 'Angie',
                  'surname': 'Smitd',
                  'country': 'USA',
                  'city': 'San Francisco',
                  'position': 'Teacher',
                  'age': '52'
                },
                {
                  'id': '8',
                  'name': 'John',
                  'surname': 'Mattis',
                  'country': 'France',
                  'city': 'Paris',
                  'position': 'Actor',
                  'age': '28'
                },
                {
                  'id': '9',
                  'name': 'Otto',
                  'surname': 'Morris',
                  'country': 'Germany',
                  'city': 'Munich',
                  'position': 'Singer',
                  'age': '35'
                }
              ]
            };

            return(
              <MDBTable autoWidth striped>
                <MDBTableHead columns={data_people.columns} />
                <MDBTableBody rows={data_people.rows} />
              </MDBTable>
            );
          };

          export default TablePage;

Table columns with minimal width

Use property minimal within columns object with value 'lg' / 'sm'. 'lg' gives 9 rem of the minimal width of the column and 'sm' gives 6 rem.

Resize the browser window to see the effect.

#	Lorem ipsum dolor	Lorem ipsum dolor	Lorem ipsum dolor
1	Lorem ipsum dolor	Lorem ipsum dolor	Lorem ipsum dolor
2	Lorem ipsum dolor	Lorem ipsum dolor	Lorem ipsum dolor
3	Lorem ipsum dolor	Lorem ipsum dolor	Lorem ipsum dolor

Show code

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

          const TablePage = (props) => {
            const data_minimal_width = {
              columns: [
                {
                  label: '#',
                  field: 'id',
                  sort: 'asc',
                  minimal: 'sm'
                },
                {
                  label: 'Lorem ipsum dolor',
                  field: 'lorem ipsum dolor',
                  sort: 'asc',
                  minimal: 'lg'
                },
                {
                  label: 'Lorem ipsum dolor',
                  field: 'lorem ipsum',
                  sort: 'asc',
                  minimal: 'sm'
                },
                {
                  label: 'Lorem ipsum dolor',
                  field: 'lorem ',
                  sort: 'asc',
                  minimal: 'lg'
                }
              ],
              rows: [
                {
                  'id': '1',
                  'lorem ipsum dolor': 'Lorem ipsum dolor',
                  'lorem ipsum': 'Lorem ipsum dolor',
                  'lorem': 'Lorem ipsum dolor'
                },
                {
                  'id': '2',
                  'lorem ipsum dolor': 'Lorem ipsum dolor',
                  'lorem ipsum': 'Lorem ipsum dolor',
                  'lorem': 'Lorem ipsum dolor'
                },
                {
                  'id': '3',
                  'lorem ipsum dolor': 'Lorem ipsum dolor',
                  'lorem ipsum': 'Lorem ipsum dolor',
                  'lorem': 'Lorem ipsum dolor'
                }
              ]
            };


            return(
              <MDBTable striped bordered>
                <MDBTableHead columns={data_minimal_width.columns} />
                <MDBTableBody rows={data_minimal_width.rows} />
              </MDBTable>
            );
          };

          export default TablePage;

Table columns with fixed width

Add prop fixed to set a fixed width to the all columns of the table.

#	Name	Surname	Country	City	Position	Age
4	Jerry	Horwitz	Italy	Bari	Editor-in-chief	41
5	Janis	Joplin	Poland	Warsaw	Video Maker	39
6	Gary	Winogrand	Germany	Berlin	Photographer	37
7	Angie	Smith	USA	San Francisco	Teacher	52
8	John	Mattis	France	Paris	Actor	28
9	Otto	Morris	Germany	Munich	Singer	35

Show code

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

          const TablePage = (props) => {
            const data_people = {
              columns: [
                {
                  label: '#',
                  field: 'id',
                  sort: 'asc',
                },
                {
                  label: 'Name',
                  field: 'name',
                  sort: 'asc'
                },
                {
                  label: 'Surname',
                  field: 'surname',
                  sort: 'asc'
                },
                {
                  label: 'Country',
                  field: 'country',
                  sort: 'asc'
                },
                {
                  label: 'City',
                  field: 'city',
                  sort: 'asc'
                },
                {
                  label: 'Position',
                  field: 'position',
                  sort: 'asc'
                },
                {
                  label: 'Age',
                  field: 'age',
                  sort: 'asc'
                }
              ],
              rows: [
                {
                  'id': '1',
                  'name': 'Kate',
                  'surname': 'Moss',
                  'country': 'USA',
                  'city': 'New York City',
                  'position': 'Web Designer',
                  'age': '23'
                },
                {
                  'id': '2',
                  'name': 'Anna',
                  'surname': 'Wintour',
                  'country': 'United Kingdom',
                  'city': 'London',
                  'position': 'Frontend Developer',
                  'age': '36'
                },
                {
                  'id': '3',
                  'name': 'Tom',
                  'surname': 'Bond',
                  'country': 'Spain',
                  'city': 'Madrid',
                  'position': 'Photographer',
                  'age': '25'
                },
                {
                  'id': '4',
                  'name': 'Jerry',
                  'surname': 'Horwitz',
                  'country': 'Italy',
                  'city': 'Bari',
                  'position': 'Editor-in-chief',
                  'age': '41'
                },
                {
                  'id': '5',
                  'name': 'Janis',
                  'surname': 'Joplin',
                  'country': 'Poland',
                  'city': 'Warsaw',
                  'position': 'Video Maker',
                  'age': '39'
                },
                {
                  'id': '6',
                  'name': 'Gary',
                  'surname': 'Winogrand',
                  'country': 'Germany',
                  'city': 'Berlin',
                  'position': 'Photographer',
                  'age': '37'
                },
                {
                  'id': '7',
                  'name': 'Angie',
                  'surname': 'Smitd',
                  'country': 'USA',
                  'city': 'San Francisco',
                  'position': 'Teacher',
                  'age': '52'
                },
                {
                  'id': '8',
                  'name': 'John',
                  'surname': 'Mattis',
                  'country': 'France',
                  'city': 'Paris',
                  'position': 'Actor',
                  'age': '28'
                },
                {
                  'id': '9',
                  'name': 'Otto',
                  'surname': 'Morris',
                  'country': 'Germany',
                  'city': 'Munich',
                  'position': 'Singer',
                  'age': '35'
                }
              ]
            };

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

          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.

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
              }
              ...
            ]
          }