import{c as F}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d,U as h,o as y,c as b,k as i,r as f,_ as T,M as g,g as C,n as m,l,H as s,w as a,a as n,Q as w}from"./chunks/framework.3f630664.js";import{_ as E}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";const v={class:"relative overflow-x-auto shadow-md sm:rounded-lg"},B={class:"w-full text-sm text-left text-gray-500 dark:text-gray-400"},u=d({__name:"FwbTable",props:{striped:{type:Boolean,default:!1},stripedColumns:{type:Boolean,default:!1},hoverable:{type:Boolean,default:!1}},setup(t){const o=t;return h("hoverable",o.hoverable),h("striped",o.striped),h("stripedColumns",o.stripedColumns),(c,D)=>(y(),b("div",v,[i("table",B,[f(c.$slots,"default")])]))}}),q={};function P(t,o){return y(),b("tbody",null,[f(t.$slots,"default")])}const A=T(q,[["render",P]]),k="px-6 py-4 first:font-medium first:text-gray-900 first:dark:text-white first:whitespace-nowrap last:text-right",$="even:bg-gray-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50";function S(){const t=g("stripedColumns");return{tableCellClasses:C(()=>F(k,{[$]:t}))}}const p=d({__name:"FwbTableCell",setup(t){const{tableCellClasses:o}=S();return(c,D)=>(y(),b("td",{class:m(l(o))},[f(c.$slots,"default")],2))}}),x={},M={class:"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"};function H(t,o){return y(),b("thead",M,[i("tr",null,[f(t.$slots,"default")])])}const _=T(x,[["render",H]]),L="px-6 py-3 text-xs uppercase",R="even:bg-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50";function V(){const t=g("stripedColumns");return{tableHeadCellClasses:C(()=>F(L,{[R]:t}))}}const e=d({__name:"FwbTableHeadCell",setup(t){const{tableHeadCellClasses:o}=V();return(c,D)=>(y(),b("th",{scope:"col",class:m(l(o))},[f(c.$slots,"default")],2))}}),W="bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700",I="odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700",N="hover:bg-gray-50 dark:hover:bg-gray-600";function z(){const t=g("striped"),o=g("hoverable");return{tableRowClasses:C(()=>F(W,{[N]:o,[I]:t}))}}const r=d({__name:"FwbTableRow",setup(t){const{tableRowClasses:o}=z();return(c,D)=>(y(),b("tr",{class:m(l(o))},[f(c.$slots,"default")],2))}}),O={class:"vp-raw"},j=i("span",{class:"sr-only"},"Edit",-1),J={__name:"FwbTableExample",setup(t){return(o,c)=>(y(),b("div",O,[s(l(u),null,{default:a(()=>[s(l(_),null,{default:a(()=>[s(l(e),null,{default:a(()=>[n("Product name")]),_:1}),s(l(e),null,{default:a(()=>[n("Color")]),_:1}),s(l(e),null,{default:a(()=>[n("Category")]),_:1}),s(l(e),null,{default:a(()=>[n("Price")]),_:1}),s(l(e),null,{default:a(()=>[j]),_:1})]),_:1}),s(l(A),null,{default:a(()=>[s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n('Apple MacBook Pro 17"')]),_:1}),s(l(p),null,{default:a(()=>[n("Sliver")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop")]),_:1}),s(l(p),null,{default:a(()=>[n("$2999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Microsoft Surface Pro")]),_:1}),s(l(p),null,{default:a(()=>[n("White")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop PC")]),_:1}),s(l(p),null,{default:a(()=>[n("$1999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Magic Mouse 2")]),_:1}),s(l(p),null,{default:a(()=>[n("Black")]),_:1}),s(l(p),null,{default:a(()=>[n("Accessories")]),_:1}),s(l(p),null,{default:a(()=>[n("$99")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]))}},Q={class:"vp-raw"},U=i("span",{class:"sr-only"},"Edit",-1),G={__name:"FwbTableExampleHoverable",setup(t){return(o,c)=>(y(),b("div",Q,[s(l(u),{hoverable:""},{default:a(()=>[s(l(_),null,{default:a(()=>[s(l(e),null,{default:a(()=>[n("Product name")]),_:1}),s(l(e),null,{default:a(()=>[n("Color")]),_:1}),s(l(e),null,{default:a(()=>[n("Category")]),_:1}),s(l(e),null,{default:a(()=>[n("Price")]),_:1}),s(l(e),null,{default:a(()=>[U]),_:1})]),_:1}),s(l(A),null,{default:a(()=>[s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n('Apple MacBook Pro 17"')]),_:1}),s(l(p),null,{default:a(()=>[n("Sliver")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop")]),_:1}),s(l(p),null,{default:a(()=>[n("$2999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Microsoft Surface Pro")]),_:1}),s(l(p),null,{default:a(()=>[n("White")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop PC")]),_:1}),s(l(p),null,{default:a(()=>[n("$1999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Magic Mouse 2")]),_:1}),s(l(p),null,{default:a(()=>[n("Black")]),_:1}),s(l(p),null,{default:a(()=>[n("Accessories")]),_:1}),s(l(p),null,{default:a(()=>[n("$99")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]))}},K={class:"vp-raw"},X=i("span",{class:"sr-only"},"Edit",-1),Y={__name:"FwbTableExampleStriped",setup(t){return(o,c)=>(y(),b("div",K,[s(l(u),{striped:""},{default:a(()=>[s(l(_),null,{default:a(()=>[s(l(e),null,{default:a(()=>[n("Product name")]),_:1}),s(l(e),null,{default:a(()=>[n("Color")]),_:1}),s(l(e),null,{default:a(()=>[n("Category")]),_:1}),s(l(e),null,{default:a(()=>[n("Price")]),_:1}),s(l(e),null,{default:a(()=>[X]),_:1})]),_:1}),s(l(A),null,{default:a(()=>[s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n('Apple MacBook Pro 17"')]),_:1}),s(l(p),null,{default:a(()=>[n("Sliver")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop")]),_:1}),s(l(p),null,{default:a(()=>[n("$2999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Microsoft Surface Pro")]),_:1}),s(l(p),null,{default:a(()=>[n("White")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop PC")]),_:1}),s(l(p),null,{default:a(()=>[n("$1999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Magic Mouse 2")]),_:1}),s(l(p),null,{default:a(()=>[n("Black")]),_:1}),s(l(p),null,{default:a(()=>[n("Accessories")]),_:1}),s(l(p),null,{default:a(()=>[n("$99")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]))}},Z={class:"vp-raw"},ss=i("span",{class:"sr-only"},"Edit",-1),ls={__name:"FwbTableExampleStripedColumns",setup(t){return(o,c)=>(y(),b("div",Z,[s(l(u),{"striped-columns":""},{default:a(()=>[s(l(_),null,{default:a(()=>[s(l(e),null,{default:a(()=>[n("Product name")]),_:1}),s(l(e),null,{default:a(()=>[n("Color")]),_:1}),s(l(e),null,{default:a(()=>[n("Category")]),_:1}),s(l(e),null,{default:a(()=>[n("Price")]),_:1}),s(l(e),null,{default:a(()=>[ss]),_:1})]),_:1}),s(l(A),null,{default:a(()=>[s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n('Apple MacBook Pro 17"')]),_:1}),s(l(p),null,{default:a(()=>[n("Sliver")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop")]),_:1}),s(l(p),null,{default:a(()=>[n("$2999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Microsoft Surface Pro")]),_:1}),s(l(p),null,{default:a(()=>[n("White")]),_:1}),s(l(p),null,{default:a(()=>[n("Laptop PC")]),_:1}),s(l(p),null,{default:a(()=>[n("$1999")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1}),s(l(r),null,{default:a(()=>[s(l(p),null,{default:a(()=>[n("Magic Mouse 2")]),_:1}),s(l(p),null,{default:a(()=>[n("Black")]),_:1}),s(l(p),null,{default:a(()=>[n("Accessories")]),_:1}),s(l(p),null,{default:a(()=>[n("$99")]),_:1}),s(l(p),null,{default:a(()=>[s(l(E),{href:"#"},{default:a(()=>[n(" Edit ")]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]))}},as=w('

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

',5),ns=w(`

vue

<template>
  <fwb-table>
    <fwb-table-head>
      <fwb-table-head-cell>Product name</fwb-table-head-cell>
      <fwb-table-head-cell>Color</fwb-table-head-cell>
      <fwb-table-head-cell>Category</fwb-table-head-cell>
      <fwb-table-head-cell>Price</fwb-table-head-cell>
      <fwb-table-head-cell>
        <span class="sr-only">Edit</span>
      </fwb-table-head-cell>
    </fwb-table-head>
    <fwb-table-body>
      <fwb-table-row>
        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
        <fwb-table-cell>Sliver</fwb-table-cell>
        <fwb-table-cell>Laptop</fwb-table-cell>
        <fwb-table-cell>$2999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
        <fwb-table-cell>White</fwb-table-cell>
        <fwb-table-cell>Laptop PC</fwb-table-cell>
        <fwb-table-cell>$1999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
        <fwb-table-cell>Black</fwb-table-cell>
        <fwb-table-cell>Accessories</fwb-table-cell>
        <fwb-table-cell>$99</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
    </fwb-table-body>
  </fwb-table>
</template>

<script setup>
import {
  FwbA,
  FwbTable,
  FwbTableBody,
  FwbTableCell,
  FwbTableHead,
  FwbTableHeadCell,
  FwbTableRow,
} from 'flowbite-vue'
</script>

<template>
  <fwb-table>
    <fwb-table-head>
      <fwb-table-head-cell>Product name</fwb-table-head-cell>
      <fwb-table-head-cell>Color</fwb-table-head-cell>
      <fwb-table-head-cell>Category</fwb-table-head-cell>
      <fwb-table-head-cell>Price</fwb-table-head-cell>
      <fwb-table-head-cell>
        <span class="sr-only">Edit</span>
      </fwb-table-head-cell>
    </fwb-table-head>
    <fwb-table-body>
      <fwb-table-row>
        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
        <fwb-table-cell>Sliver</fwb-table-cell>
        <fwb-table-cell>Laptop</fwb-table-cell>
        <fwb-table-cell>$2999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
        <fwb-table-cell>White</fwb-table-cell>
        <fwb-table-cell>Laptop PC</fwb-table-cell>
        <fwb-table-cell>$1999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
        <fwb-table-cell>Black</fwb-table-cell>
        <fwb-table-cell>Accessories</fwb-table-cell>
        <fwb-table-cell>$99</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
    </fwb-table-body>
  </fwb-table>
</template>

<script setup>
import {
  FwbA,
  FwbTable,
  FwbTableBody,
  FwbTableCell,
  FwbTableHead,
  FwbTableHeadCell,
  FwbTableRow,
} from 'flowbite-vue'
</script>

Striped example

`,2),ps=w(`

vue

<template>
  <fwb-table striped>
    <fwb-table-head>
      <fwb-table-head-cell>Product name</fwb-table-head-cell>
      <fwb-table-head-cell>Color</fwb-table-head-cell>
      <fwb-table-head-cell>Category</fwb-table-head-cell>
      <fwb-table-head-cell>Price</fwb-table-head-cell>
      <fwb-table-head-cell>
        <span class="sr-only">Edit</span>
      </fwb-table-head-cell>
    </fwb-table-head>
    <fwb-table-body>
      <fwb-table-row>
        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
        <fwb-table-cell>Sliver</fwb-table-cell>
        <fwb-table-cell>Laptop</fwb-table-cell>
        <fwb-table-cell>$2999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
        <fwb-table-cell>White</fwb-table-cell>
        <fwb-table-cell>Laptop PC</fwb-table-cell>
        <fwb-table-cell>$1999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
        <fwb-table-cell>Black</fwb-table-cell>
        <fwb-table-cell>Accessories</fwb-table-cell>
        <fwb-table-cell>$99</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
    </fwb-table-body>
  </fwb-table>
</template>

<script setup>
import {
  FwbA,
  FwbTable,
  FwbTableBody,
  FwbTableCell,
  FwbTableHead,
  FwbTableHeadCell,
  FwbTableRow,
} from 'flowbite-vue'
</script>

<template>
  <fwb-table striped>
    <fwb-table-head>
      <fwb-table-head-cell>Product name</fwb-table-head-cell>
      <fwb-table-head-cell>Color</fwb-table-head-cell>
      <fwb-table-head-cell>Category</fwb-table-head-cell>
      <fwb-table-head-cell>Price</fwb-table-head-cell>
      <fwb-table-head-cell>
        <span class="sr-only">Edit</span>
      </fwb-table-head-cell>
    </fwb-table-head>
    <fwb-table-body>
      <fwb-table-row>
        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
        <fwb-table-cell>Sliver</fwb-table-cell>
        <fwb-table-cell>Laptop</fwb-table-cell>
        <fwb-table-cell>$2999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
        <fwb-table-cell>White</fwb-table-cell>
        <fwb-table-cell>Laptop PC</fwb-table-cell>
        <fwb-table-cell>$1999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
        <fwb-table-cell>Black</fwb-table-cell>
        <fwb-table-cell>Accessories</fwb-table-cell>
        <fwb-table-cell>$99</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
    </fwb-table-body>
  </fwb-table>
</template>

<script setup>
import {
  FwbA,
  FwbTable,
  FwbTableBody,
  FwbTableCell,
  FwbTableHead,
  FwbTableHeadCell,
  FwbTableRow,
} from 'flowbite-vue'
</script>

Striped columns example

`,2),os=w(`

vue

<template>
  <fwb-table striped-columns>
    <fwb-table-head>
      <fwb-table-head-cell>Product name</fwb-table-head-cell>
      <fwb-table-head-cell>Color</fwb-table-head-cell>
      <fwb-table-head-cell>Category</fwb-table-head-cell>
      <fwb-table-head-cell>Price</fwb-table-head-cell>
      <fwb-table-head-cell><span class="sr-only">Edit</span></fwb-table-head-cell>
    </fwb-table-head>
    <fwb-table-body>
      <fwb-table-row>
        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
        <fwb-table-cell>Sliver</fwb-table-cell>
        <fwb-table-cell>Laptop</fwb-table-cell>
        <fwb-table-cell>$2999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
        <fwb-table-cell>White</fwb-table-cell>
        <fwb-table-cell>Laptop PC</fwb-table-cell>
        <fwb-table-cell>$1999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
        <fwb-table-cell>Black</fwb-table-cell>
        <fwb-table-cell>Accessories</fwb-table-cell>
        <fwb-table-cell>$99</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
    </fwb-table-body>
  </fwb-table>
</template>

<script setup>
import {
  FwbA,
  FwbTable,
  FwbTableBody,
  FwbTableCell,
  FwbTableHead,
  FwbTableHeadCell,
  FwbTableRow,
} from 'flowbite-vue'
</script>

<template>
  <fwb-table striped-columns>
    <fwb-table-head>
      <fwb-table-head-cell>Product name</fwb-table-head-cell>
      <fwb-table-head-cell>Color</fwb-table-head-cell>
      <fwb-table-head-cell>Category</fwb-table-head-cell>
      <fwb-table-head-cell>Price</fwb-table-head-cell>
      <fwb-table-head-cell><span class="sr-only">Edit</span></fwb-table-head-cell>
    </fwb-table-head>
    <fwb-table-body>
      <fwb-table-row>
        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
        <fwb-table-cell>Sliver</fwb-table-cell>
        <fwb-table-cell>Laptop</fwb-table-cell>
        <fwb-table-cell>$2999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
        <fwb-table-cell>White</fwb-table-cell>
        <fwb-table-cell>Laptop PC</fwb-table-cell>
        <fwb-table-cell>$1999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
        <fwb-table-cell>Black</fwb-table-cell>
        <fwb-table-cell>Accessories</fwb-table-cell>
        <fwb-table-cell>$99</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
    </fwb-table-body>
  </fwb-table>
</template>

<script setup>
import {
  FwbA,
  FwbTable,
  FwbTableBody,
  FwbTableCell,
  FwbTableHead,
  FwbTableHeadCell,
  FwbTableRow,
} from 'flowbite-vue'
</script>

Hoverable example

`,2),es=w(`

vue

<template>
  <fwb-table hoverable>
    <fwb-table-head>
      <fwb-table-head-cell>Product name</fwb-table-head-cell>
      <fwb-table-head-cell>Color</fwb-table-head-cell>
      <fwb-table-head-cell>Category</fwb-table-head-cell>
      <fwb-table-head-cell>Price</fwb-table-head-cell>
      <fwb-table-head-cell>
        <span class="sr-only">Edit</span>
      </fwb-table-head-cell>
    </fwb-table-head>
    <fwb-table-body>
      <fwb-table-row>
        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
        <fwb-table-cell>Sliver</fwb-table-cell>
        <fwb-table-cell>Laptop</fwb-table-cell>
        <fwb-table-cell>$2999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
        <fwb-table-cell>White</fwb-table-cell>
        <fwb-table-cell>Laptop PC</fwb-table-cell>
        <fwb-table-cell>$1999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
        <fwb-table-cell>Black</fwb-table-cell>
        <fwb-table-cell>Accessories</fwb-table-cell>
        <fwb-table-cell>$99</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
    </fwb-table-body>
  </fwb-table>
</template>

<script setup>
import {
  FwbA,
  FwbTable,
  FwbTableBody,
  FwbTableCell,
  FwbTableHead,
  FwbTableHeadCell,
  FwbTableRow,
} from 'flowbite-vue'
</script>

<template>
  <fwb-table hoverable>
    <fwb-table-head>
      <fwb-table-head-cell>Product name</fwb-table-head-cell>
      <fwb-table-head-cell>Color</fwb-table-head-cell>
      <fwb-table-head-cell>Category</fwb-table-head-cell>
      <fwb-table-head-cell>Price</fwb-table-head-cell>
      <fwb-table-head-cell>
        <span class="sr-only">Edit</span>
      </fwb-table-head-cell>
    </fwb-table-head>
    <fwb-table-body>
      <fwb-table-row>
        <fwb-table-cell>Apple MacBook Pro 17"</fwb-table-cell>
        <fwb-table-cell>Sliver</fwb-table-cell>
        <fwb-table-cell>Laptop</fwb-table-cell>
        <fwb-table-cell>$2999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Microsoft Surface Pro</fwb-table-cell>
        <fwb-table-cell>White</fwb-table-cell>
        <fwb-table-cell>Laptop PC</fwb-table-cell>
        <fwb-table-cell>$1999</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
      <fwb-table-row>
        <fwb-table-cell>Magic Mouse 2</fwb-table-cell>
        <fwb-table-cell>Black</fwb-table-cell>
        <fwb-table-cell>Accessories</fwb-table-cell>
        <fwb-table-cell>$99</fwb-table-cell>
        <fwb-table-cell>
          <fwb-a href="#">
            Edit
          </fwb-a>
        </fwb-table-cell>
      </fwb-table-row>
    </fwb-table-body>
  </fwb-table>
</template>

<script setup>
import {
  FwbA,
  FwbTable,
  FwbTableBody,
  FwbTableCell,
  FwbTableHead,
  FwbTableHeadCell,
  FwbTableRow,
} from 'flowbite-vue'
</script>

`,1),ys=JSON.parse('{"title":"Vue Table - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/table.md","filePath":"components/table.md"}'),ts={name:"components/table.md"},bs=Object.assign(ts,{setup(t){return(o,c)=>(y(),b("div",null,[as,s(J),ns,s(Y),ps,s(ls),os,s(G),es]))}});export{ys as __pageData,bs as default};

Vue Table - Flowbite ​

Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line ​

Basic example ​

Striped example ​