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