#### Basic Table

##### Simple Table

Using the most basic table need to add `.table` class to table tag

Id | Name | Position | Office | Age | Salary
--- | --- | --- | --- | --- | ---
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800
2 | Garrett | Accountant | Tokyo | 63 | $170,750
3 | Ashton Cox | Technical | Francisco | 66 | $86,000
4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060
5 | Airi Satou | Accountant | Tokyo | 33 | $162,700
6 | Williamson | Integration | New York | 61 | $372,000

##### Bordered Tables With Striped

Using the border table need to add `.table-bordered` class to table tag and `.table-striped` class for Strip table

Id | Name | Position | Office | Age | Salary
--- | --- | --- | --- | --- | ---
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800
2 | Garrett | Accountant | Tokyo | 63 | $170,750
3 | Ashton Cox | Technical | Francisco | 66 | $86,000
4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060
5 | Airi Satou | Accountant | Tokyo | 33 | $162,700

##### Hoverable Table

Using the Hoverable table need to add `` class to table tag

Id | Name | Position | Office | Age | Salary
--- | --- | --- | --- | --- | ---
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800
2 | Garrett | Accountant | Tokyo | 63 | $170,750
3 | Ashton Cox | Technical | Francisco | 66 | $86,000
4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060
5 | Airi Satou | Accountant | Tokyo | 33 | $162,700
6 | Williamson | Integration | New York | 61 | $372,000

##### Tables Without Borders

Using the borderless table need to add `.table-borderless` class to table tag

Id | Name | Position | Office | Age | Salary
--- | --- | --- | --- | --- | ---
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800
2 | Garrett | Accountant | Tokyo | 63 | $170,750
3 | Ashton Cox | Technical | Francisco | 66 | $86,000
4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060
5 | Airi Satou | Accountant | Tokyo | 33 | $162,700
6 | Williamson | Integration | New York | 61 | $372,000

##### Dark Table

Using the Dark table need to add `.table-dark` class to table tag

Id | Name | Position | Office | Age | Salary
--- | --- | --- | --- | --- | ---
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800
2 | Garrett | Accountant | Tokyo | 63 | $170,750
3 | Ashton Cox | Technical | Francisco | 66 | $86,000
4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060
5 | Airi Satou | Accountant | Tokyo | 33 | $162,700
6 | Williamson | Integration | New York | 61 | $372,000

##### Primary Table With Striped

Using the primary table need to add `.table-primary` class to table tag

Id | Name | Position | Office | Age | Salary
--- | --- | --- | --- | --- | ---
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800
2 | Garrett | Accountant | Tokyo | 63 | $170,750
3 | Ashton Cox | Technical | Francisco | 66 | $86,000
4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060
5 | Airi Satou | Accountant | Tokyo | 33 | $162,700
6 | Williamson | Integration | New York | 61 | $372,000

##### Small Table

Using the small table need to add `.table-sm` class to table tag

Id | Name | Position | Office | Age | Salary
--- | --- | --- | --- | --- | ---
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800
2 | Garrett | Accountant | Tokyo | 63 | $170,750
3 | Ashton Cox | Technical | Francisco | 66 | $86,000
4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060
5 | Airi Satou | Accountant | Tokyo | 33 | $162,700
6 | Williamson | Integration | New York | 61 | $372,000

##### Large Table

Using the large table need to add `.table-lg` class to table tag

Id | Name | Position | Office | Age | Salary
--- | --- | --- | --- | --- | ---
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800
2 | Garrett | Accountant | Tokyo | 63 | $170,750
3 | Ashton Cox | Technical | Francisco | 66 | $86,000
6 | Williamson | Integration | New York | 61 | $372,000

##### Table With Bottom Border

Using the bottom bordered table need to add `.table-bottom-border` class to table tag

Id | Name | Position | Office | Age | Salary
--- | --- | --- | --- | --- | ---
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800
2 | Garrett | Accountant | Tokyo | 63 | $170,750
3 | Ashton Cox | Technical | Francisco | 66 | $86,000
4 | Evert | Williamson | New York | 60 | $36,000
5 | Murazik | Wava | New York | 49 | $62,000
6 | Williamson | Integration | New York | 56 | $894,000

##### Table Striped Columns

Using the column strip table need to add `.table-striped-columns` class to table tag

Id | Name | Position | Office | Age | Salary
--- | --- | --- | --- | --- | ---
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800
2 | Garrett | Accountant | Tokyo | 63 | $170,750
3 | Ashton Cox | Technical | Francisco | 66 | $86,000
4 | Evert | Williamson | New York | 60 | $36,000
5 | Murazik | Wava | New York | 49 | $62,000
6 | Williamson | Integration | New York | 56 | $894,000

##### Table Variants

Using the Color Variants table need to add `.table-Variants` class to table tag

Id | Name | Position | Office | Age | Salary
--- | --- | --- | --- | --- | ---
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800
2 | Garrett | Accountant | Tokyo | 63 | $170,750
3 | Ashton Cox | Technical | Francisco | 66 | $86,000
4 | Evert | Williamson | New York | 60 | $36,000
5 | Murazik | Wava | New York | 49 | $62,000
6 | Williamson | Integration | New York | 56 | $894,000
6 | Williamson | Integration | New York | 56 | $894,000
6 | Williamson | Integration | New York | 56 | $894,000

##### Nesting Table

Border styles, active styles, and table variants are not inherited by nested tables.

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
Header | Header | Header
--- | --- | ---
A | First | Last
B | First | Last
3 | Larry | the Bird | @twitter
4 | Einar | Miller | @twitter
5 | Layne | Paucek | @twitter

##### 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.

##### Two Way Table

Using the two direction table need to add `.text-end` class to last table head table data

Name | Salary
--- | ---
Tiger Nixon | $320,800
Garrett | $170,750
Ashton Cox | $86,000
Williamson | $547,000
Evie Wunsch | $372,000

##### Always Responsive

Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.

Breakpoint specific

Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` 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 | 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
4 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell

##### Orders

Last 2 Month Report

Id | Product | Qty | Status | Delivery Date | Amount | Progress | Action
--- | --- | --- | --- | --- | --- | --- | ---
#LA456 | ###### T-shirt #389456 | 5 | Oct 27, 2024 | Available | $590 |  |
#LA647 | ###### Watch #487439 | 2 | Aug 10, 2024 | No Available | $890 |  |
#LA438 | ###### Headphones #738456 | 3 | Jan 28, 2024 | No Available | $500 |  |
#LA930 | ###### Iphone #564782 | 1 | Mar 14, 2024 | Available | $1k |  |
#LA263 | ###### Shose #934890 | 1 | Mar 30, 2024 | No Available | $890 |  |
#LA395 | ###### Man's Watch #567892 | 2 | Dec 26, 2024 | No Available | $190 |  |

Id | Product | Qty | Status | Delivery Date | Amount | Progress | Action
--- | --- | --- | --- | --- | --- | --- | ---
#LA284 | ###### T-shirt #389456 | 5 | Apr 24, 2024 | Available | $590 |  |
#LA743 | ###### Headphone #738456 | 3 | Aug 16, 2024 | No Available | $500 |  |
#LA839 | ###### I-phone #564782 | 1 | May 13, 2024 | Available | $1k |  |
#LA384 | ###### T-shirt #936478 | 2 | Oct 09, 2024 | Available | $200 |  |
#LA6372 | ###### Shose #934890 | 1 | Jul 11, 2024 | No Available | $890 |  |
#LA564 | ###### Man's Watch #567892 | 2 | Dec 14, 2024 | No Available | $190 |  |

Id | Product | Qty | Status | Delivery Date | Amount | Progress | Action
--- | --- | --- | --- | --- | --- | --- | ---
#LA475 | ###### Lipstick #389456 | 5 | Apr 01, 2024 | Available | $590 |  |
#LA374 | ###### Lipliner #487439 | 2 | Sep 06, 2024 | No Available | $890 |  |
#LA734 | ###### Cap #738456 | 3 | Jun 08, 2024 | No Available | $500 |  |
#LA857 | ###### EyeShadow-Brush #564782 | 1 | Dec 22, 2024 | Available | $1k |  |
#LA586 | ###### Watch #936478 | 2 | May 26, 2024 | Available | $200 |  |
#LA374 | ###### Cansiler stick #567892 | 2 | Nov 19, 2024 | No Available | $190 |  |

Id | Product | Qty | Status | Delivery Date | Amount | Progress | Action
--- | --- | --- | --- | --- | --- | --- | ---
#la736 | ###### T-shirt #389456 | 5 | Mar 16, 2024 | Available | $590 |  |
#LA956 | ###### Bottle #487439 | 2 | Jul 12, 2024 | No Available | $890 |  |
#LA743 | ###### Headphones #564782 | 1 | Mar 21, 2024 | Available | $1k |  |
#LA424 | ###### Cap #936478 | 2 | Apr 02, 2024 | Available | $200 |  |
#LA174 | ###### Brush #934890 | 1 | Sep 18, 2024 | No Available | $890 |  |
#LA262 | ###### LipStick #567892 | 2 | Aug 07, 2024 | No Available | $190 |  |

##### Custom Table

Members | Task | Status | Hours
--- | --- | --- | ---
###### Mark McKenzie Full stack developer | 21 | High | 3H 09M
###### Smith Acres UI/UX designer | 12 | Medium | 1H 24M
###### Emery McKenzie UI/UX designer | 5 | Low | 1H 0M
###### Lenora Bogisich React Developer | 28 | High | 3H 19M
###### Davis Welsh UI/UX designer | 9 | Medium | 1H 09M
###### Fleta Walsh Wed Designer | 20 | High | 2H 45M
###### Amelia Dev Backend Developer | 20 | High | 2H 45M