Ui Table

Tables

Home
Tables

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

Chat Application

eCommerce App

Notes App

Calendar App

Contact Application

Tickets App

Email App

Blog App

Chat Application

eCommerce App

Notes App

Calendar App

Contact Application

Tickets App

Email App

Blog App

HOME

APPS

UI ELEMENTS

FORM ELEMENTS

PAGES

WIDGETS

TABLES

CHARTS

ICONS

AUTH

Tables

Default Table

Sample Code

Striped Rows

Sample Code

Table hover state

Table With Checkboxes

API ( Tables )