Tables

Basic Tables
Default Table

Use table class to show bootstrap-based default table.

Invoice ID Client Due Date Total Status
#INV-0001 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0002 Hazel Nutt 9 Aug 2018 $240 Paid
#INV-0003 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0004 Hazel Nutt 9 Aug 2018 $240 Paid
#INV-0005 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0006 Hazel Nutt 9 Aug 2018 $240 Paid
Striped Rows

Use table-striped class to add zebra-striping to any table row within the <tbody>.

Invoice ID Client Due Date Total Status
#INV-0001 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0002 Hazel Nutt 9 Aug 2018 $240 Paid
#INV-0003 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0004 Hazel Nutt 9 Aug 2018 $240 Paid
#INV-0005 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0006 Hazel Nutt 9 Aug 2018 $240 Paid
Striped columns

Use .table-striped-columns to add zebra-striping to any table column.

Invoice ID Client Due Date Total Status
#INV-0001 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0002 Hazel Nutt 9 Aug 2018 $240 Paid
#INV-0003 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0004 Hazel Nutt 9 Aug 2018 $240 Paid
#INV-0005 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0006 Hazel Nutt 9 Aug 2018 $240 Paid
Table Colors

Use contextual classes to color tables, table rows or individual cells.

Invoice ID Client Due Date Total Status
#INV-0001 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0002 Hazel Nutt 9 Aug 2018 $240 Paid
#INV-0003 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0004 Hazel Nutt 9 Aug 2018 $240 Paid
#INV-0005 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0006 Hazel Nutt 9 Aug 2018 $240 Paid
Hoverable Table

Add .table-hover to enable a hover state on table rows within a <tbody>.

Invoice ID Client Due Date Total Status
#INV-0001 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0002 Hazel Nutt 9 Aug 2018 $240 Paid
#INV-0003 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0004 Hazel Nutt 9 Aug 2018 $240 Paid
#INV-0005 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0006 Hazel Nutt 9 Aug 2018 $240 Paid
Invoice ID Client Due Date Total Status
#INV-0001 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0002 Hazel Nutt 9 Aug 2018 $240 Paid
#INV-0003 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0004 Hazel Nutt 9 Aug 2018 $240 Paid
#INV-0005 Hazel Nutt 9 Aug 2018 $240 Partially Paid
#INV-0006 Hazel Nutt 9 Aug 2018 $240 Paid
Bordered tables

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

Invoice ID Client Due Date Status
#INV-0001 Hazel Nutt 9 Aug 2018 Partially Paid
#INV-0002 Hazel Nutt 9 Aug 2018 Paid
#INV-0003 Hazel Nutt 9 Aug 2018 Partially Paid
#INV-0004 Hazel Nutt 9 Aug 2018 Paid
#INV-0005 Hazel Nutt 9 Aug 2018 Partially Paid
#INV-0006 Hazel Nutt 9 Aug 2018 Paid
Table Border Color

Border color utilities can be added to change colors:

Invoice ID Client Due Date Status
#INV-0001 Hazel Nutt 9 Aug 2018 Partially Paid
#INV-0002 Hazel Nutt 9 Aug 2018 Paid
#INV-0003 Hazel Nutt 9 Aug 2018 Partially Paid
#INV-0004 Hazel Nutt 9 Aug 2018 Paid
#INV-0005 Hazel Nutt 9 Aug 2018 Partially Paid
#INV-0006 Hazel Nutt 9 Aug 2018 Paid
Table without borders

Add .table-borderless for a table without borders.

Invoice ID Client Due Date Status
#INV-0001 Hazel Nutt 9 Aug 2018 Partially Paid
#INV-0002 Hazel Nutt 9 Aug 2018 Paid
#INV-0003 Hazel Nutt 9 Aug 2018 Partially Paid
#INV-0004 Hazel Nutt 9 Aug 2018 Paid
#INV-0005 Hazel Nutt 9 Aug 2018 Partially Paid
#INV-0006 Hazel Nutt 9 Aug 2018 Paid
Data Tables
Default Data Table
Name Username Last Active Date Registered Email Orders Total Spend AOV Country / Region City Region Postal Code
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Data Table Body Scroll
Name Username Last Active Date Registered Email Orders Total Spend AOV Country / Region City Region Postal Code
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Customized Data Table
Product SKU Stock Price Sales Rating Published Action
Image
A4TECH BH300 Bluetooth Wireless Headset Category: electronics/music
CSJ0158 12 $560 256
(42)
12/24/2023 01:05 PM
Image
Premium Blend Tea Category: Drink/tea
CSJ0158 22 $160 756
(380)
10/21/2022 01:05 PM
Image
Chris Adams Body Spray Classic Denim Category: Fashion/perfume
CSJ0158 12 $560 256
(42)
12/24/2023 01:05 PM
Resizable Data Table
Name Username Last Active Date Registered Email Orders Total Spend AOV Country / Region City Region Postal Code
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563
Shaikh Abu Dardah admin December 27, 2022 November 23, 2021 example@info.com 2 $74.00 $74.00 BD Dhaka CA 12563