Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: fix DataTableDemo.vue scroll-x on mobile devices

Browse Source
This commit is contained in:
sadeghbarati 2023-09-10 13:03:09 +03:30
parent 08fede88a9
commit 758278a676
1 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/www/src/lib/registry/default/example/DataTableDemo.vue
View File

@ -103,7 +103,7 @@ const columns: ColumnDef<Payment>[] = [
return h(Button, { return h(Button, {
variant: 'ghost', variant: 'ghost',
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
}, ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })]) }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
}, },
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')), cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
}, },
@ -128,9 +128,9 @@ const columns: ColumnDef<Payment>[] = [
cell: ({ row }) => { cell: ({ row }) => {
const payment = row.original const payment = row.original
return h(DropdownAction, { return h('div', { class: 'relative' }, h(DropdownAction, {
payment, payment,
}) }))
}, },
}, },
] ]
@ -162,7 +162,7 @@ const table = useVueTable({
<template> <template>
<div class="w-full"> <div class="w-full">
<div class="flex items-center py-4"> <div class="flex gap-2 items-center py-4">
<Input <Input
class="max-w-sm" class="max-w-sm"
placeholder="Filter emails..." placeholder="Filter emails..."
@ -243,7 +243,6 @@ const table = useVueTable({
size="sm" size="sm"
:disabled="!table.getCanNextPage()" :disabled="!table.getCanNextPage()"
@click="table.nextPage()" @click="table.nextPage()"
>
> >
Next Next
</Button> </Button>