package.docs.components.tables.mdx Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of core Show documentation
Show all versions of core Show documentation
Premium and Open Source dashboard template with responsive and high quality UI.
The newest version!
---
title: Tables
description: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
bootstrapLink: content/tables/
---
## Basic Table
The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwhelming them with visuals.
The `.table` class adds basic styling to a table:
```html code example height="360px" scrollable
Name
Title
Email
Role
Paweł Kuna
UI Designer, Training
[email protected]
User
Edit
Jeffie Lewzey
Chemical Engineer, Support
[email protected]
Admin
Edit
Mallory Hulme
Geologist IV, Support
[email protected]
User
Edit
Dunn Slane
Research Nurse, Sales
[email protected]
Owner
Edit
Emmy Levet
VP Product Management, Accounting
[email protected]
Admin
Edit
```
## Responsive tables
Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.
```html code example height="12rem"
#
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 7
Heading 8
Heading 9
Heading 10
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
```
## No wrap
If you don't want the table cell content to wrap to another line, use the `table-nowrap` class.
```html example height="10rem"
Name
Title
Email
Role
Paweł Kuna
UI Designer, Training
[email protected]
User
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
Edit
```
```html
Name
Title
Email
Role
Paweł Kuna
UI Designer, Training
[email protected]
User
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
Edit
Jeffie Lewzey
Chemical Engineer, Support
[email protected]
Admin
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
Edit
Mallory Hulme
Geologist IV, Support
[email protected]
User
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
Edit
Dunn Slane
Research Nurse, Sales
[email protected]
Owner
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
Edit
Emmy Levet
VP Product Management, Accounting
[email protected]
Admin
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
Edit
```
## Table Variants
```html code example height="360px" scrollable
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
```
## Table with sticky header
```html example code scrollable
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
```