The table component is an important UI component that you can use to effectively show complex amounts of data in the form of numbers, text, images, buttons, and links inside a structured layout of rows and columns.
Use the custom React components from Flowbite and the API reference of props to customize the table layout and content and the utility classes from Tailwind CSS to update the styles.
Start using the table component by importing it from the flowbite-react library:
import { Table } from "flowbite-react";
Use this example to show a responsive table component with table head and body featuring cells and rows on multiple levels by using the <Table> React component and the children components such as <TableHead>, <TableBody>, <TableRow> and <TableCell>.
Use the striped React prop on the <Table> component to alternate the background of every second row of the table to increase contrast and readability.
Add the hoverable prop to the <Table> React component to show a hover effect when moving the mouse over a table row. This also helps with readability.
Use this example to show multiple checkbox form elements for each table row that you can use when performing bulk actions.
Product name Color Category Price Edit Apple MacBook Pro 17" Sliver Laptop $2999 Edit Microsoft Surface Pro White Laptop PC $1999 Edit Magic Mouse 2 Black Accessories $99 Edit Theme#To learn more about how to customize the appearance of components, please see the Theme docs.
{
"root": {
"base": "w-full text-left text-sm text-gray-500 dark:text-gray-400",
"shadow": "absolute left-0 top-0 -z-10 h-full w-full rounded-lg bg-white drop-shadow-md dark:bg-black",
"wrapper": "relative"
},
"body": {
"base": "group/body",
"cell": {
"base": "px-6 py-4 group-first/body:group-first/row:first:rounded-tl-lg group-first/body:group-first/row:last:rounded-tr-lg group-last/body:group-last/row:first:rounded-bl-lg group-last/body:group-last/row:last:rounded-br-lg"
}
},
"head": {
"base": "group/head text-xs uppercase text-gray-700 dark:text-gray-400",
"cell": {
"base": "bg-gray-50 px-6 py-3 group-first/head:first:rounded-tl-lg group-first/head:last:rounded-tr-lg dark:bg-gray-700"
}
},
"row": {
"base": "group/row",
"hovered": "hover:bg-gray-50 dark:hover:bg-gray-600",
"striped": "odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700"
}
}RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4