Vue Table - Flowbite
Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line
TIP
Original reference: https://flowbite.com/docs/components/tables/
Basic example
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 |
vue
<template>
<Table>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>
<template>
<Table>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>
Striped example
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 |
vue
<template>
<Table striped>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>
<template>
<Table striped>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>
Striped columns example
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 |
vue
<template>
<Table striped-columns>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>
<template>
<Table striped-columns>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>
Hoverable example
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 |
vue
<template>
<Table hoverable>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>
<template>
<Table hoverable>
<table-head>
<table-head-cell>Product name</table-head-cell>
<table-head-cell>Color</table-head-cell>
<table-head-cell>Category</table-head-cell>
<table-head-cell>Price</table-head-cell>
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
</table-head>
<table-body>
<table-row>
<table-cell>Apple MacBook Pro 17"</table-cell>
<table-cell>Sliver</table-cell>
<table-cell>Laptop</table-cell>
<table-cell>$2999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Microsoft Surface Pro</table-cell>
<table-cell>White</table-cell>
<table-cell>Laptop PC</table-cell>
<table-cell>$1999</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
<table-row>
<table-cell>Magic Mouse 2</table-cell>
<table-cell>Black</table-cell>
<table-cell>Accessories</table-cell>
<table-cell>$99</table-cell>
<table-cell>
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</table-cell>
</table-row>
</table-body>
</Table>
</template>
<script setup>
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
</script>