Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

Component Library

Browse and explore components

Table

A Table is a UI component used to display structured data in rows and columns, allowing users to easily scan, compare, and analyze information.

Default Table

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

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeadCell,
  TableRow,
} from 'flowbite-react'

const DefaultTblCode = () => {
  return (
    <>
      <div className='overflow-x-auto'>
        <Table>
          <TableHead>
            <TableRow>
              <TableHeadCell>Product name</TableHeadCell>
              <TableHeadCell>Color</TableHeadCell>
              <TableHeadCell>Category</TableHeadCell>
              <TableHeadCell>Price</TableHeadCell>
              <TableHeadCell>
                <span className='sr-only'>Edit</span>
              </TableHeadCell>
            </TableRow>
          </TableHead>
          <TableBody className='divide-y divide-border dark:divide-darkborder'>
            <TableRow className='bg-white dark:border-gray-700 dark:bg-gray-800'>
              <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
                {'Apple MacBook Pro 17"'}
              </TableCell>
              <TableCell>Sliver</TableCell>
              <TableCell>Laptop</TableCell>
              <TableCell>$2999</TableCell>
              <TableCell>
                <a
                  href='#'
                  className='font-medium text-primary hover:underline dark:text-primary'>
                  Edit
                </a>
              </TableCell>
            </TableRow>
            <TableRow className='bg-white dark:border-gray-700 dark:bg-gray-800'>
              <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
                Microsoft Surface Pro
              </TableCell>
              <TableCell>White</TableCell>
              <TableCell>Laptop PC</TableCell>
              <TableCell>$1999</TableCell>
              <TableCell>
                <a
                  href='#'
                  className='font-medium text-primary hover:underline dark:text-primary'>
                  Edit
                </a>
              </TableCell>
            </TableRow>
            <TableRow className='bg-white dark:border-gray-700 dark:bg-gray-800'>
              <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
                Magic Mouse 2
              </TableCell>
              <TableCell>Black</TableCell>
              <TableCell>Accessories</TableCell>
              <TableCell>$99</TableCell>
              <TableCell>
                <a
                  href='#'
                  className='font-medium text-primary hover:underline dark:text-primary'>
                  Edit
                </a>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    </>
  )
}

export default DefaultTblCode

Striped Rows

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
Google Pixel Phone	Gray	Phone	$799	Edit
Apple Watch 5	Red	Wearables	$999	Edit

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeadCell,
  TableRow,
} from 'flowbite-react'

const StrippedTblCode = () => {
  return (
    <>
      <div className='overflow-x-auto'>
        <Table striped>
          <TableHead>
            <TableRow>
              <TableHeadCell>Product name</TableHeadCell>
              <TableHeadCell>Color</TableHeadCell>
              <TableHeadCell>Category</TableHeadCell>
              <TableHeadCell>Price</TableHeadCell>
              <TableHeadCell>
                <span className='sr-only'>Edit</span>
              </TableHeadCell>
            </TableRow>
          </TableHead>
          <TableBody className='divide-y divide-border dark:divide-darkborder'>
            <TableRow className='bg-white dark:border-gray-700 dark:bg-gray-800'>
              <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
                {'Apple MacBook Pro 17"'}
              </TableCell>
              <TableCell>Sliver</TableCell>
              <TableCell>Laptop</TableCell>
              <TableCell>$2999</TableCell>
              <TableCell>
                <a
                  href='#'
                  className='font-medium text-primary hover:underline dark:text-primary'>
                  Edit
                </a>
              </TableCell>
            </TableRow>
            <TableRow className='bg-white dark:border-gray-700 dark:bg-gray-800'>
              <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
                Microsoft Surface Pro
              </TableCell>
              <TableCell>White</TableCell>
              <TableCell>Laptop PC</TableCell>
              <TableCell>$1999</TableCell>
              <TableCell>
                <a
                  href='#'
                  className='font-medium text-primary hover:underline dark:text-primary'>
                  Edit
                </a>
              </TableCell>
            </TableRow>
            <TableRow className='bg-white dark:border-gray-700 dark:bg-gray-800'>
              <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
                Magic Mouse 2
              </TableCell>
              <TableCell>Black</TableCell>
              <TableCell>Accessories</TableCell>
              <TableCell>$99</TableCell>
              <TableCell>
                <a
                  href='#'
                  className='font-medium text-primary hover:underline dark:text-primary'>
                  Edit
                </a>
              </TableCell>
            </TableRow>
            <TableRow className='bg-white dark:border-gray-700 dark:bg-gray-800'>
              <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
                Google Pixel Phone
              </TableCell>
              <TableCell>Gray</TableCell>
              <TableCell>Phone</TableCell>
              <TableCell>$799</TableCell>
              <TableCell>
                <a
                  href='#'
                  className='font-medium text-primary hover:underline dark:text-primary'>
                  Edit
                </a>
              </TableCell>
            </TableRow>
            <TableRow className='bg-white dark:border-gray-700 dark:bg-gray-800'>
              <TableCell className='whitespace-nowrap font-medium text-gray-900 dark:text-white'>
                Apple Watch 5
              </TableCell>
              <TableCell>Red</TableCell>
              <TableCell>Wearables</TableCell>
              <TableCell>$999</TableCell>
              <TableCell>
                <a
                  href='#'
                  className='font-medium text-primary hover:underline dark:text-primary'>
                  Edit
                </a>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    </>
  )
}

export default StrippedTblCode

Table hover state

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

Table With Checkboxes

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

API ( Tables )

Prop	Description	Type	Default
hoverable	Enables hover effect on table rows.	boolean	false
striped	Adds zebra-striping to rows within the table body.	boolean	false

Menu

Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

Component Library

INPUTS

DATA DISPLAY

FEEDBACK

NAVIGATION

SURFACES

UTILS

Table

Default Table

Sample Code

Striped Rows

Sample Code

Table hover state

Table With Checkboxes

API ( Tables )