Nuxt UI table usage with Hybridly

show.view.vue

<script setup lang="ts">
import { TableColumn } from '@nuxt/ui'
import { formatDateTime, showLocalDateTimes } from '../WebApplication/utils/datetime'

const props = defineProps<{
	table: Table<Module.Aircraft.AircraftData>
}>()

const table = useTable(props, 'table')
const registrationNumber = table.bindFilter('registration_number')

const UButton = resolveComponent('UButton')

const columns: TableColumn<Module.Aircraft.AircraftData>[] = [
	{
		accessorKey: 'id',
		header: () => {
			const sort = table.getSort('id')

			return h(UButton, {
				color: 'neutral',
				variant: 'ghost',
				label: 'Registration',
				icon: sort?.is_active
					? sort.direction === 'asc'
						? 'i-tabler-sort-ascending'
						: 'i-tabler-sort-descending'
					: 'i-tabler-arrows-sort',
				class: '-mx-2.5',
				onClick: () => table.toggleSort('id'),
			})
		},
	},
	{
		accessorKey: 'created_at',
		cell: ({ row }) => formatDateTime(row.getValue('created_at')),
		header: 'Created',
	},
	{
		accessorKey: 'updated_at',
		cell: ({ row }) => formatDateTime(row.getValue('updated_at')),
		header: 'Updated',
	},
	{ accessorKey: 'registration_number', header: 'Registration number' },
	{ accessorKey: 'type', header: 'Aircraft type' },
]
</script>

<template layout="web-application::default">
	<u-input v-model="registrationNumber" />
	<u-button @click="showLocalDateTimes = !showLocalDateTimes">Local date times</u-button>
	<u-table :data="table.data" :columns :ui="{ tbody: 'divide-none', separator: 'hidden', td: 'py-2.5' }" />
</template>