mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
feat(Table): add style to table and column meta (#4513)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
J-Michalek
GitHub
@@ -165,6 +165,8 @@ describe('Table', () => {
|
||||
['with loading', { props: { ...props, loading: true } }],
|
||||
...loadingColors.map((loadingColor: string) => [`with loading color ${loadingColor}`, { props: { ...props, loading: true, loadingColor } }]),
|
||||
...loadingAnimations.map((loadingAnimation: string) => [`with loading animation ${loadingAnimation}`, { props: { ...props, loading: true, loadingAnimation } }]),
|
||||
['with meta prop', { props: { ...props, meta: { class: { tr: 'custom-row-class' }, style: { tr: { backgroundColor: 'lightgray' } } } } }],
|
||||
['with meta field on columns', { props: { ...props, columns: columns.map(c => ({ ...c, meta: { class: { th: 'custom-heading-class', td: 'custom-cell-class' }, style: { th: { backgroundColor: 'black' }, td: { backgroundColor: 'lightgray' } } } })) } }],
|
||||
['with as', { props: { ...props, as: 'section' } }],
|
||||
['with class', { props: { ...props, class: 'absolute' } }],
|
||||
['with ui', { props: { ...props, ui: { base: 'table-auto' } } }],
|
||||
@@ -194,10 +196,10 @@ describe('Table', () => {
|
||||
},
|
||||
...(filter.value === 2
|
||||
? [
|
||||
{
|
||||
accessorKey: 'amount',
|
||||
header: () => h('div', { ['data-test-th']: 'amount' }, 'Amount')
|
||||
} satisfies TableColumn<typeof data[number]>
|
||||
{
|
||||
accessorKey: 'amount',
|
||||
header: () => h('div', { ['data-test-th']: 'amount' }, 'Amount')
|
||||
} satisfies TableColumn<typeof data[number]>
|
||||
]
|
||||
: [])
|
||||
])
|
||||
|
||||
@@ -1574,6 +1574,278 @@ exports[`Table > renders with loading slot correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Table > renders with meta field on columns correctly 1`] = `
|
||||
"<div class="relative overflow-auto">
|
||||
<table class="min-w-full overflow-clip">
|
||||
<!--v-if-->
|
||||
<thead class="relative">
|
||||
<tr class="data-[selected=true]:bg-elevated/50">
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class">
|
||||
<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class">#</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class">Date</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class">Status</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg><span class="truncate">Email</span>
|
||||
<!--v-if-->
|
||||
</button></th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class">
|
||||
<div class="text-right">Amount</div>
|
||||
</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class">
|
||||
<!---->
|
||||
</th>
|
||||
</tr>
|
||||
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#m5gr84i9</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="lowercase">ken99@yahoo.com</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right font-medium">€316.00</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#3u1reuv4</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="lowercase">Abe45@gmail.com</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right font-medium">€242.00</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#derv1ws0</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="lowercase">Monserrat44@gmail.com</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right font-medium">€837.00</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#5kma53ae</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="lowercase">Silas22@gmail.com</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right font-medium">€874.00</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#bhqecj4p</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="lowercase">carmella@hotmail.com</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right font-medium">€721.00</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
</tbody>
|
||||
<tfoot class="relative">
|
||||
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
||||
<tr class="data-[selected=true]:bg-elevated/50">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<!---->
|
||||
</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<!---->
|
||||
</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<!---->
|
||||
</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<!---->
|
||||
</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<!---->
|
||||
</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<div class="text-right font-medium">Total: €2,990.00</div>
|
||||
</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<!---->
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Table > renders with meta prop correctly 1`] = `
|
||||
"<div class="relative overflow-auto">
|
||||
<table class="min-w-full overflow-clip">
|
||||
<!--v-if-->
|
||||
<thead class="relative">
|
||||
<tr class="data-[selected=true]:bg-elevated/50">
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
||||
</tr>
|
||||
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
</tbody>
|
||||
<!--v-if-->
|
||||
</table>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Table > renders with sticky correctly 1`] = `
|
||||
"<div class="relative overflow-auto">
|
||||
<table class="min-w-full overflow-clip">
|
||||
|
||||
@@ -1574,6 +1574,278 @@ exports[`Table > renders with loading slot correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Table > renders with meta field on columns correctly 1`] = `
|
||||
"<div class="relative overflow-auto">
|
||||
<table class="min-w-full overflow-clip">
|
||||
<!--v-if-->
|
||||
<thead class="relative">
|
||||
<tr class="data-[selected=true]:bg-elevated/50">
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class">
|
||||
<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class">#</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class">Date</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class">Status</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Email</span>
|
||||
<!--v-if-->
|
||||
</button></th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class">
|
||||
<div class="text-right">Amount</div>
|
||||
</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class">
|
||||
<!---->
|
||||
</th>
|
||||
</tr>
|
||||
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#m5gr84i9</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="lowercase">ken99@yahoo.com</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right font-medium">€316.00</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#3u1reuv4</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="lowercase">Abe45@gmail.com</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right font-medium">€242.00</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#derv1ws0</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="lowercase">Monserrat44@gmail.com</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right font-medium">€837.00</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#5kma53ae</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="lowercase">Silas22@gmail.com</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right font-medium">€874.00</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="relative flex items-start flex-row">
|
||||
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
||||
<!---->
|
||||
<!---->
|
||||
</button></div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">#bhqecj4p</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">Invalid Date</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="lowercase">carmella@hotmail.com</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right font-medium">€721.00</div>
|
||||
</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
|
||||
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
</tbody>
|
||||
<tfoot class="relative">
|
||||
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
||||
<tr class="data-[selected=true]:bg-elevated/50">
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<!---->
|
||||
</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<!---->
|
||||
</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<!---->
|
||||
</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<!---->
|
||||
</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<!---->
|
||||
</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<div class="text-right font-medium">Total: €2,990.00</div>
|
||||
</th>
|
||||
<th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
|
||||
<!---->
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Table > renders with meta prop correctly 1`] = `
|
||||
"<div class="relative overflow-auto">
|
||||
<table class="min-w-full overflow-clip">
|
||||
<!--v-if-->
|
||||
<thead class="relative">
|
||||
<tr class="data-[selected=true]:bg-elevated/50">
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
||||
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
||||
</tr>
|
||||
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50 custom-row-class" style="background-color: lightgray;">
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
||||
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
||||
</tr>
|
||||
<!--v-if-->
|
||||
</tbody>
|
||||
<!--v-if-->
|
||||
</table>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Table > renders with sticky correctly 1`] = `
|
||||
"<div class="relative overflow-auto">
|
||||
<table class="min-w-full overflow-clip">
|
||||
|
||||
Reference in New Issue
Block a user