React Tables - Flowbite

Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells

The table component represents a set of structured elements made up of rows and columns as table cells that can be used to show data sets to your website users.

Get started with multiple variants and styles of these table components.

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

<Table>
  <Table.Head>
    <Table.HeadCell>
      Product name
    </Table.HeadCell>
    <Table.HeadCell>
      Color
    </Table.HeadCell>
    <Table.HeadCell>
      Category
    </Table.HeadCell>
    <Table.HeadCell>
      Price
    </Table.HeadCell>
    <Table.HeadCell>
      <span className="sr-only">
        Edit
      </span>
    </Table.HeadCell>
  </Table.Head>
  <Table.Body className="divide-y">
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Apple MacBook Pro 17"
      </Table.Cell>
      <Table.Cell>
        Sliver
      </Table.Cell>
      <Table.Cell>
        Laptop
      </Table.Cell>
      <Table.Cell>
        $2999
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Microsoft Surface Pro
      </Table.Cell>
      <Table.Cell>
        White
      </Table.Cell>
      <Table.Cell>
        Laptop PC
      </Table.Cell>
      <Table.Cell>
        $1999
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Magic Mouse 2
      </Table.Cell>
      <Table.Cell>
        Black
      </Table.Cell>
      <Table.Cell>
        Accessories
      </Table.Cell>
      <Table.Cell>
        $99
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

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

<Table striped>
  <Table.Head>
    <Table.HeadCell>
      Product name
    </Table.HeadCell>
    <Table.HeadCell>
      Color
    </Table.HeadCell>
    <Table.HeadCell>
      Category
    </Table.HeadCell>
    <Table.HeadCell>
      Price
    </Table.HeadCell>
    <Table.HeadCell>
      <span className="sr-only">
        Edit
      </span>
    </Table.HeadCell>
  </Table.Head>
  <Table.Body className="divide-y">
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Apple MacBook Pro 17"
      </Table.Cell>
      <Table.Cell>
        Sliver
      </Table.Cell>
      <Table.Cell>
        Laptop
      </Table.Cell>
      <Table.Cell>
        $2999
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Microsoft Surface Pro
      </Table.Cell>
      <Table.Cell>
        White
      </Table.Cell>
      <Table.Cell>
        Laptop PC
      </Table.Cell>
      <Table.Cell>
        $1999
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Magic Mouse 2
      </Table.Cell>
      <Table.Cell>
        Black
      </Table.Cell>
      <Table.Cell>
        Accessories
      </Table.Cell>
      <Table.Cell>
        $99
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Google Pixel Phone
      </Table.Cell>
      <Table.Cell>
        Gray
      </Table.Cell>
      <Table.Cell>
        Phone
      </Table.Cell>
      <Table.Cell>
        $799
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Apple Watch 5
      </Table.Cell>
      <Table.Cell>
        Red
      </Table.Cell>
      <Table.Cell>
        Wearables
      </Table.Cell>
      <Table.Cell>
        $999
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</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 hoverable>
  <Table.Head>
    <Table.HeadCell>
      Product name
    </Table.HeadCell>
    <Table.HeadCell>
      Color
    </Table.HeadCell>
    <Table.HeadCell>
      Category
    </Table.HeadCell>
    <Table.HeadCell>
      Price
    </Table.HeadCell>
    <Table.HeadCell>
      <span className="sr-only">
        Edit
      </span>
    </Table.HeadCell>
  </Table.Head>
  <Table.Body className="divide-y">
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Apple MacBook Pro 17"
      </Table.Cell>
      <Table.Cell>
        Sliver
      </Table.Cell>
      <Table.Cell>
        Laptop
      </Table.Cell>
      <Table.Cell>
        $2999
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Microsoft Surface Pro
      </Table.Cell>
      <Table.Cell>
        White
      </Table.Cell>
      <Table.Cell>
        Laptop PC
      </Table.Cell>
      <Table.Cell>
        $1999
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Magic Mouse 2
      </Table.Cell>
      <Table.Cell>
        Black
      </Table.Cell>
      <Table.Cell>
        Accessories
      </Table.Cell>
      <Table.Cell>
        $99
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Checkbox

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 hoverable>
  <Table.Head>
    <Table.HeadCell className="!p-4">
      <Checkbox />
    </Table.HeadCell>
    <Table.HeadCell>
      Product name
    </Table.HeadCell>
    <Table.HeadCell>
      Color
    </Table.HeadCell>
    <Table.HeadCell>
      Category
    </Table.HeadCell>
    <Table.HeadCell>
      Price
    </Table.HeadCell>
    <Table.HeadCell>
      <span className="sr-only">
        Edit
      </span>
    </Table.HeadCell>
  </Table.Head>
  <Table.Body className="divide-y">
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="!p-4">
        <Checkbox />
      </Table.Cell>
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Apple MacBook Pro 17"
      </Table.Cell>
      <Table.Cell>
        Sliver
      </Table.Cell>
      <Table.Cell>
        Laptop
      </Table.Cell>
      <Table.Cell>
        $2999
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="!p-4">
        <Checkbox />
      </Table.Cell>
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Microsoft Surface Pro
      </Table.Cell>
      <Table.Cell>
        White
      </Table.Cell>
      <Table.Cell>
        Laptop PC
      </Table.Cell>
      <Table.Cell>
        $1999
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
    <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
      <Table.Cell className="!p-4">
        <Checkbox />
      </Table.Cell>
      <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
        Magic Mouse 2
      </Table.Cell>
      <Table.Cell>
        Black
      </Table.Cell>
      <Table.Cell>
        Accessories
      </Table.Cell>
      <Table.Cell>
        $99
      </Table.Cell>
      <Table.Cell>
        <a
          className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
          href="/tables"
        >
          Edit
        </a>
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

React Tables - Flowbite

Default table

Striped rows

Hover state

Checkbox

On this page