Basic example
Use the following example of a responsive table component to show multiple rows and columns of text data.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | Wild |
import React from 'react'; export default function App() { return ( <div className="flex flex-col"> <div className="overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8"> <div className="overflow-hidden"> <table className="min-w-full text-left text-sm font-light"> <thead className="border-b font-medium dark:border-neutral-500"> <tr> <th scope="col" className="px-6 py-4">#</th> <th scope="col" className="px-6 py-4">First</th> <th scope="col" className="px-6 py-4">Last</th> <th scope="col" className="px-6 py-4">Handle</th> </tr> </thead> <tbody> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-4 font-medium">1</td> <td className="whitespace-nowrap px-6 py-4">Mark</td> <td className="whitespace-nowrap px-6 py-4">Otto</td> <td className="whitespace-nowrap px-6 py-4">@mdo</td> </tr> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-4 font-medium">2</td> <td className="whitespace-nowrap px-6 py-4">Jacob</td> <td className="whitespace-nowrap px-6 py-4">Thornton</td> <td className="whitespace-nowrap px-6 py-4">@fat</td> </tr> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-4 font-medium">3</td> <td className="whitespace-nowrap px-6 py-4">Larry</td> <td className="whitespace-nowrap px-6 py-4">Wild</td> <td className="whitespace-nowrap px-6 py-4">@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> ); } Variants
Below are the color variations that can be used in the table component.
| 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 |
import React from 'react'; export default function App() { return ( <div className="flex flex-col"> <div className="overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8"> <div className="overflow-hidden"> <table className="min-w-full text-center text-sm font-light"> <thead className="border-b font-medium dark:border-neutral-500"> <tr> <th scope="col" className="px-6 py-4">className</th> <th scope="col" className="px-6 py-4">Heading</th> <th scope="col" className="px-6 py-4">Heading</th> </tr> </thead> <tbody> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-4 font-medium"> Default </td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> </tr> <tr className="border-b border-primary-200 bg-primary-100 text-neutral-800"> <td className="whitespace-nowrap px-6 py-4 font-medium"> Primary </td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> </tr> <tr className="border-b border-secondary-200 bg-secondary-100 text-neutral-800"> <td className="whitespace-nowrap px-6 py-4 font-medium"> Secondary </td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> </tr> <tr className="border-b border-success-200 bg-success-100 text-neutral-800"> <td className="whitespace-nowrap px-6 py-4 font-medium"> Success </td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> </tr> <tr className="border-b border-danger-200 bg-danger-100 text-neutral-800"> <td className="whitespace-nowrap px-6 py-4 font-medium"> Danger </td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> </tr> <tr className="border-b border-warning-200 bg-warning-100 text-neutral-800"> <td className="whitespace-nowrap px-6 py-4 font-medium"> Warning </td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> </tr> <tr className="border-b border-info-200 bg-info-100 text-neutral-800"> <td className="whitespace-nowrap px-6 py-4 font-medium"> Info </td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> </tr> <tr className="border-b border-neutral-100 bg-neutral-50 text-neutral-800 dark:bg-neutral-50"> <td className="whitespace-nowrap px-6 py-4 font-medium"> Light </td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> </tr> <tr className="border-b border-neutral-700 bg-neutral-800 text-neutral-50 dark:border-neutral-600 dark:bg-neutral-700"> <td className="whitespace-nowrap px-6 py-4 font-medium"> Dark </td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> </tr> </tbody> </table> </div> </div> </div> </div> ); } Striped
Use this example to increase the readability of the data sets by alternating the background colors of every second table row.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react'; export default function App() { return ( <div className="flex flex-col"> <div className="overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8"> <div className="overflow-hidden"> <table className="min-w-full text-left text-sm font-light"> <thead className="border-b bg-white font-medium dark:border-neutral-500 dark:bg-neutral-600"> <tr> <th scope="col" className="px-6 py-4">#</th> <th scope="col" className="px-6 py-4">First</th> <th scope="col" className="px-6 py-4">Last</th> <th scope="col" className="px-6 py-4">Handle</th> </tr> </thead> <tbody> <tr className="border-b bg-neutral-100 dark:border-neutral-500 dark:bg-neutral-700"> <td className="whitespace-nowrap px-6 py-4 font-medium">1</td> <td className="whitespace-nowrap px-6 py-4">Mark</td> <td className="whitespace-nowrap px-6 py-4">Otto</td> <td className="whitespace-nowrap px-6 py-4">@mdo</td> </tr> <tr className="border-b bg-white dark:border-neutral-500 dark:bg-neutral-600"> <td className="whitespace-nowrap px-6 py-4 font-medium">2</td> <td className="whitespace-nowrap px-6 py-4">Jacob</td> <td className="whitespace-nowrap px-6 py-4">Thornton</td> <td className="whitespace-nowrap px-6 py-4">@fat</td> </tr> <tr className="border-b bg-neutral-100 dark:border-neutral-500 dark:bg-neutral-700"> <td className="whitespace-nowrap px-6 py-4 font-medium">3</td> <td colSpan={2} className="whitespace-nowrap px-6 py-4 text-center"> Larry the Bird </td> <td className="whitespace-nowrap px-6 py-4">@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> ); } Hoverable
Use the hover:{bg-*} utility class from to change the background color of a data row when hovering over the element with the cursor.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | Wild |
import React from 'react'; export default function App() { return ( <div className="flex flex-col"> <div className="overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8"> <div className="overflow-hidden"> <table className="min-w-full text-left text-sm font-light"> <thead className="border-b font-medium dark:border-neutral-500"> <tr> <th scope="col" className="px-6 py-4">#</th> <th scope="col" className="px-6 py-4">First</th> <th scope="col" className="px-6 py-4">Last</th> <th scope="col" className="px-6 py-4">Handle</th> </tr> </thead> <tbody> <tr className="border-b transition duration-300 ease-in-out hover:bg-neutral-100 dark:border-neutral-500 dark:hover:bg-neutral-600"> <td className="whitespace-nowrap px-6 py-4 font-medium">1</td> <td className="whitespace-nowrap px-6 py-4">Mark</td> <td className="whitespace-nowrap px-6 py-4">Otto</td> <td className="whitespace-nowrap px-6 py-4">@mdo</td> </tr> <tr className="border-b transition duration-300 ease-in-out hover:bg-neutral-100 dark:border-neutral-500 dark:hover:bg-neutral-600"> <td className="whitespace-nowrap px-6 py-4 font-medium">2</td> <td className="whitespace-nowrap px-6 py-4">Jacob</td> <td className="whitespace-nowrap px-6 py-4">Thornton</td> <td className="whitespace-nowrap px-6 py-4">@fat</td> </tr> <tr className="border-b transition duration-300 ease-in-out hover:bg-neutral-100 dark:border-neutral-500 dark:hover:bg-neutral-600"> <td className="whitespace-nowrap px-6 py-4 font-medium">3</td> <td className="whitespace-nowrap px-6 py-4">Larry</td> <td className="whitespace-nowrap px-6 py-4">Wild</td> <td className="whitespace-nowrap px-6 py-4">@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> ); } Bordered
Using a bordered table allows you to visibly organize your data with a solid border.
Add the .border class 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 | ||
import React from 'react'; export default function App() { return ( <div className="flex flex-col"> <div className="overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8"> <div className="overflow-hidden"> <table className="min-w-full border text-center text-sm font-light dark:border-neutral-500"> <thead className="border-b font-medium dark:border-neutral-500"> <tr> <th scope="col" className="border-r px-6 py-4 dark:border-neutral-500"> # </th> <th scope="col" className="border-r px-6 py-4 dark:border-neutral-500"> First </th> <th scope="col" className="border-r px-6 py-4 dark:border-neutral-500"> Last </th> <th scope="col" className="px-6 py-4">Handle</th> </tr> </thead> <tbody> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap border-r px-6 py-4 font-medium dark:border-neutral-500"> 1 </td> <td className="whitespace-nowrap border-r px-6 py-4 dark:border-neutral-500"> Mark </td> <td className="whitespace-nowrap border-r px-6 py-4 dark:border-neutral-500"> Otto </td> <td className="whitespace-nowrap px-6 py-4">@mdo</td> </tr> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap border-r px-6 py-4 font-medium dark:border-neutral-500"> 2 </td> <td className="whitespace-nowrap border-r px-6 py-4 dark:border-neutral-500"> Jacob </td> <td className="whitespace-nowrap border-r px-6 py-4 dark:border-neutral-500"> Thornton </td> <td className="whitespace-nowrap px-6 py-4">@fat</td> </tr> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap border-r px-6 py-4 font-medium dark:border-neutral-500"> 3 </td> <td colSpan={2} className="whitespace-nowrap border-r px-6 py-4 dark:border-neutral-500"> Larry the Bird </td> <td className="whitespace-nowrap px-6 py-4">@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> ); } Borderless
Borderless table is useful for layouts where lightness is important and we won't be putting much data in its structure.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react'; export default function App() { return ( <div className="flex flex-col"> <div className="overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8"> <div className="overflow-hidden"> <table className="min-w-full text-center text-sm font-light"> <thead className="font-medium"> <tr> <th scope="col" className="px-6 py-4">#</th> <th scope="col" className="px-6 py-4">First</th> <th scope="col" className="px-6 py-4">Last</th> <th scope="col" className="px-6 py-4">Handle</th> </tr> </thead> <tbody> <tr> <td className="whitespace-nowrap px-6 py-4 font-medium">1</td> <td className="whitespace-nowrap px-6 py-4">Mark</td> <td className="whitespace-nowrap px-6 py-4">Otto</td> <td className="whitespace-nowrap px-6 py-4">@mdo</td> </tr> <tr> <td className="whitespace-nowrap px-6 py-4 font-medium">2</td> <td className="whitespace-nowrap px-6 py-4">Jacob</td> <td className="whitespace-nowrap px-6 py-4">Thornton</td> <td className="whitespace-nowrap px-6 py-4">@fat</td> </tr> <tr> <td className="whitespace-nowrap px-6 py-4 font-medium">3</td> <td colSpan={2} className="whitespace-nowrap px-6 py-4"> Larry the Bird </td> <td className="whitespace-nowrap px-6 py-4">@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> ); } Small
Use small table 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 | ||
import React from 'react'; export default function App() { return ( <div className="flex flex-col"> <div className="overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8"> <div className="overflow-hidden"> <table className="min-w-full text-center text-sm font-light"> <thead className="border-b font-medium dark:border-neutral-500"> <tr> <th scope="col" className="px-6 py-2">#</th> <th scope="col" className="px-6 py-2">First</th> <th scope="col" className="px-6 py-2">Last</th> <th scope="col" className="px-6 py-2">Handle</th> </tr> </thead> <tbody> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-2 font-medium">1</td> <td className="whitespace-nowrap px-6 py-2">Mark</td> <td className="whitespace-nowrap px-6 py-2">Otto</td> <td className="whitespace-nowrap px-6 py-2">@mdo</td> </tr> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-2 font-medium">2</td> <td className="whitespace-nowrap px-6 py-2 ">Jacob</td> <td className="whitespace-nowrap px-6 py-2">Thornton</td> <td className="whitespace-nowrap px-6 py-2">@fat</td> </tr> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-2 font-medium">3</td> <td colSpan={2} className="whitespace-nowrap px-6 py-2"> Larry the Bird </td> <td className="whitespace-nowrap px-6 py-2">@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> ); } Light Head
Use .bg-neutral-50 class to make the head table light.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react'; export default function App() { return ( <div className="flex flex-col"> <div className="overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8"> <div className="overflow-hidden"> <table className="min-w-full text-center text-sm font-light"> <thead className="border-b bg-neutral-50 font-medium dark:border-neutral-500 dark:text-neutral-800"> <tr> <th scope="col" className=" px-6 py-4">#</th> <th scope="col" className=" px-6 py-4">First</th> <th scope="col" className=" px-6 py-4">Last</th> <th scope="col" className=" px-6 py-4">Handle</th> </tr> </thead> <tbody> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-4 font-medium">1</td> <td className="whitespace-nowrap px-6 py-4">Mark</td> <td className="whitespace-nowrap px-6 py-4">Otto</td> <td className="whitespace-nowrap px-6 py-4">@mdo</td> </tr> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-4 font-medium">2</td> <td className="whitespace-nowrap px-6 py-4 ">Jacob</td> <td className="whitespace-nowrap px-6 py-4">Thornton</td> <td className="whitespace-nowrap px-6 py-4">@fat</td> </tr> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-4 font-medium">3</td> <td colSpan={2} className="whitespace-nowrap px-6 py-4"> Larry the Bird </td> <td className="whitespace-nowrap px-6 py-4">@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> ); } Dark Head
Use .bg-neutral-800 class to make the head table dark.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react'; export default function App() { return ( <div className="flex flex-col"> <div className="overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8"> <div className="overflow-hidden"> <table className="min-w-full text-center text-sm font-light"> <thead className="border-b bg-neutral-800 font-medium text-white dark:border-neutral-500 dark:bg-neutral-900"> <tr> <th scope="col" className=" px-6 py-4">#</th> <th scope="col" className=" px-6 py-4">First</th> <th scope="col" className=" px-6 py-4">Last</th> <th scope="col" className=" px-6 py-4">Handle</th> </tr> </thead> <tbody> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-4 font-medium">1</td> <td className="whitespace-nowrap px-6 py-4">Mark</td> <td className="whitespace-nowrap px-6 py-4">Otto</td> <td className="whitespace-nowrap px-6 py-4">@mdo</td> </tr> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-4 font-medium">2</td> <td className="whitespace-nowrap px-6 py-4 ">Jacob</td> <td className="whitespace-nowrap px-6 py-4">Thornton</td> <td className="whitespace-nowrap px-6 py-4">@fat</td> </tr> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-4 font-medium">3</td> <td colSpan={2} className="whitespace-nowrap px-6 py-4"> Larry the Bird </td> <td className="whitespace-nowrap px-6 py-4">@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> ); } Always responsive
Responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Resize the browser window to see the effect.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
import React from 'react'; export default function App() { return ( <div className="flex flex-col overflow-x-auto"> <div className="sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8"> <div className="overflow-x-auto"> <table className="min-w-full text-left text-sm font-light"> <thead className="border-b font-medium dark:border-neutral-500"> <tr> <th scope="col" className="px-6 py-4">#</th> <th scope="col" className="px-6 py-4">Heading</th> <th scope="col" className="px-6 py-4">Heading</th> <th scope="col" className="px-6 py-4">Heading</th> <th scope="col" className="px-6 py-4">Heading</th> <th scope="col" className="px-6 py-4">Heading</th> <th scope="col" className="px-6 py-4">Heading</th> <th scope="col" className="px-6 py-4">Heading</th> <th scope="col" className="px-6 py-4">Heading</th> </tr> </thead> <tbody> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-4 font-medium">1</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> </tr> <tr className="border-b dark:border-neutral-500"> <td className="whitespace-nowrap px-6 py-4 font-medium ">2</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4 ">Cell</td> <td className="whitespace-nowrap px-6 py-4 ">Cell</td> </tr> <tr className="border-b "> <td className="whitespace-nowrap px-6 py-4 font-medium ">3</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> <td className="whitespace-nowrap px-6 py-4">Cell</td> </tr> </tbody> </table> </div> </div> </div> </div> ); } Related resources
If you are looking for more advanced options, try Bootstrap Tables from MDBootstrap.