jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
8963a831478c93d042e13c94c8f59e56194acba2
flowbite-vue/docs/.vitepress/dist/assets/components_table.md.a270deef.js
Jaroslav Drzik a27c84b7a9 dist directory
2024-03-12 05:28:28 +01:00

470 lines
99 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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('<h1 id="vue-table-flowbite" tabindex="-1">Vue Table - Flowbite <a class="header-anchor" href="#vue-table-flowbite" aria-label="Permalink to &quot;Vue Table - Flowbite&quot;">​</a></h1><h4 id="button-groups-are-a-tailwind-css-powered-set-of-buttons-sticked-together-in-a-horizontal-line" tabindex="-1">Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line <a class="header-anchor" href="#button-groups-are-a-tailwind-css-powered-set-of-buttons-sticked-together-in-a-horizontal-line" aria-label="Permalink to &quot;Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line&quot;">​</a></h4><hr><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Original reference: <a href="https://flowbite.com/docs/components/tables/" target="_blank" rel="noreferrer">https://flowbite.com/docs/components/tables/</a></p></div><h2 id="basic-example" tabindex="-1">Basic example <a class="header-anchor" href="#basic-example" aria-label="Permalink to &quot;Basic example&quot;">​</a></h2>',5),ns=w(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Product name&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Color&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Category&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Price&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;sr-only&quot;</span><span style="color:#E1E4E8;">&gt;Edit&lt;/</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-head</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-body</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Apple MacBook Pro 17&quot;&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Sliver&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Laptop&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;$2999&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Edit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Microsoft Surface Pro&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;White&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Laptop PC&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;$1999&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Edit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Magic Mouse 2&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Black&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Accessories&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;$99&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Edit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-body</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbA,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTable,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableBody,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableCell,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableHead,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableHeadCell,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableRow,</span></span>
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Product name&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Color&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Category&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Price&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">span</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;sr-only&quot;</span><span style="color:#24292E;">&gt;Edit&lt;/</span><span style="color:#22863A;">span</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-head</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-body</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Apple MacBook Pro 17&quot;&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Sliver&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Laptop&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;$2999&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Edit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Microsoft Surface Pro&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;White&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Laptop PC&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;$1999&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Edit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Magic Mouse 2&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Black&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Accessories&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;$99&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Edit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-body</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> FwbA,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTable,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableBody,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableCell,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableHead,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableHeadCell,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableRow,</span></span>
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="striped-example" tabindex="-1">Striped example <a class="header-anchor" href="#striped-example" aria-label="Permalink to &quot;Striped example&quot;">​</a></h2>`,2),ps=w(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">striped</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Product name&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Color&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Category&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Price&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;sr-only&quot;</span><span style="color:#E1E4E8;">&gt;Edit&lt;/</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-head</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-body</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Apple MacBook Pro 17&quot;&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Sliver&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Laptop&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;$2999&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Edit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Microsoft Surface Pro&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;White&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Laptop PC&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;$1999&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Edit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Magic Mouse 2&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Black&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Accessories&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;$99&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Edit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-body</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbA,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTable,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableBody,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableCell,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableHead,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableHeadCell,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableRow,</span></span>
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">striped</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Product name&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Color&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Category&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Price&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">span</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;sr-only&quot;</span><span style="color:#24292E;">&gt;Edit&lt;/</span><span style="color:#22863A;">span</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-head</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-body</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Apple MacBook Pro 17&quot;&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Sliver&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Laptop&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;$2999&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Edit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Microsoft Surface Pro&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;White&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Laptop PC&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;$1999&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Edit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Magic Mouse 2&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Black&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Accessories&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;$99&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Edit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-body</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> FwbA,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTable,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableBody,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableCell,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableHead,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableHeadCell,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableRow,</span></span>
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="striped-columns-example" tabindex="-1">Striped columns example <a class="header-anchor" href="#striped-columns-example" aria-label="Permalink to &quot;Striped columns example&quot;">​</a></h2>`,2),os=w(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">striped-columns</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Product name&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Color&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Category&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Price&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;sr-only&quot;</span><span style="color:#E1E4E8;">&gt;Edit&lt;/</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-head</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-body</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Apple MacBook Pro 17&quot;&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Sliver&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Laptop&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;$2999&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Edit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Microsoft Surface Pro&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;White&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Laptop PC&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;$1999&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Edit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Magic Mouse 2&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Black&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Accessories&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;$99&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Edit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-body</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbA,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTable,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableBody,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableCell,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableHead,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableHeadCell,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableRow,</span></span>
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">striped-columns</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Product name&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Color&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Category&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Price&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;&lt;</span><span style="color:#22863A;">span</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;sr-only&quot;</span><span style="color:#24292E;">&gt;Edit&lt;/</span><span style="color:#22863A;">span</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-head</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-body</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Apple MacBook Pro 17&quot;&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Sliver&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Laptop&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;$2999&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Edit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Microsoft Surface Pro&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;White&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Laptop PC&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;$1999&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Edit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Magic Mouse 2&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Black&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Accessories&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;$99&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Edit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-body</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> FwbA,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTable,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableBody,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableCell,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableHead,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableHeadCell,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableRow,</span></span>
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="hoverable-example" tabindex="-1">Hoverable example <a class="header-anchor" href="#hoverable-example" aria-label="Permalink to &quot;Hoverable example&quot;">​</a></h2>`,2),es=w(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">hoverable</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Product name&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Color&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Category&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;Price&lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;sr-only&quot;</span><span style="color:#E1E4E8;">&gt;Edit&lt;/</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-head-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-head</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-body</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Apple MacBook Pro 17&quot;&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Sliver&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Laptop&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;$2999&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Edit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Microsoft Surface Pro&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;White&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Laptop PC&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;$1999&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Edit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Magic Mouse 2&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Black&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;Accessories&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;$99&lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Edit</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-cell</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-row</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table-body</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-table</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbA,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTable,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableBody,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableCell,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableHead,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableHeadCell,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbTableRow,</span></span>
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">hoverable</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Product name&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Color&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Category&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;Price&lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">span</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;sr-only&quot;</span><span style="color:#24292E;">&gt;Edit&lt;/</span><span style="color:#22863A;">span</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-head-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-head</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-body</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Apple MacBook Pro 17&quot;&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Sliver&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Laptop&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;$2999&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Edit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Microsoft Surface Pro&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;White&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Laptop PC&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;$1999&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Edit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Magic Mouse 2&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Black&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;Accessories&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;$99&lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Edit</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-cell</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-row</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table-body</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-table</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> FwbA,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTable,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableBody,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableCell,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableHead,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableHeadCell,</span></span>
<span class="line"><span style="color:#24292E;"> FwbTableRow,</span></span>
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,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};
Reference in New Issue View Git Blame Copy Permalink