Table

<template>
  <Table
    :options="table"
    @pageChange="users.fetchPageChange"
    @search="users.fetchSearch"
  />
</template>

<script lang="ts" setup>
import { type IUser, createUsersLoader } from '~/loaders/users'

const users = createUsersLoader()

// useTable turns a page loader into table options: rows, loading/error/empty states and pagination
const table = useTable<IUser>({
  repo: users,
  options: {
    isEnabledSearch: true,
    searchPlaceholder: 'Search users…',
  },
  columns: () => [
    {
      accessorKey: 'name',
      header: 'Name',
    },
    {
      accessorKey: 'email',
      header: 'Email',
      // TEXT truncates with meta.max and shows "-" for empty values
      type: COLUMN_TYPES.TEXT,
      meta: {
        max: 24,
      },
    },
    {
      accessorKey: 'salary',
      header: 'Salary',
      type: COLUMN_TYPES.NUMBER,
    },
    {
      accessorKey: 'createdAt',
      header: 'Joined',
      // DATE / DATE_TIME follow core.date_format and the Thai-year setting
      type: COLUMN_TYPES.DATE,
    },
  ],
})

// The table only renders: fetching is yours. It asks for pages and searches through its events.
onMounted(() =>
  users.fetchPage(1, '', {
    params: {
      limit: 5,
    },
  })
)
</script>

<template>
  <Table
    :options="table"
    is-pin-action
    @pageChange="users.fetchPageChange"
  >
    <!-- 1. A slot named `<accessorKey>-cell` takes over one column -->
    <template #name-cell="{ row }">
      <div class="flex items-center gap-2">
        <Avatar
          :src="row.original.avatar"
          size="xs"
        />
        <span class="font-medium">{{ row.original.name }}</span>
      </div>
    </template>

    <template #isActive-cell="{ row }">
      <Badge
        :color="row.original.isActive ? 'success' : 'neutral'"
        variant="subtle"
        :label="row.original.isActive ? 'Active' : 'Inactive'"
      />
    </template>

    <!-- 2. The column called `actions` is the conventional place for row buttons -->
    <template #actions-cell="{ row }">
      <DropdownMenu :items="actionsOf(row.original)">
        <Button
          icon="ph:dots-three-vertical"
          color="neutral"
          variant="ghost"
          size="sm"
        />
      </DropdownMenu>
    </template>
  </Table>
</template>

<script lang="ts" setup>
import { type IUser, createUsersLoader } from '~/loaders/users'

const users = createUsersLoader()
const dialog = useDialog()

const table = useTable<IUser>({
  repo: users,
  columns: () => [
    {
      accessorKey: 'name',
      header: 'User',
    },
    {
      accessorKey: 'role',
      header: 'Role',
      // 3. `cell` is a function for small transformations that do not need a template
      cell: ({ row }) => row.original.role.toUpperCase(),
    },
    {
      accessorKey: 'salary',
      header: 'Salary',
      cell: ({ row }) => NumberHelper.toCurrency(row.original.salary),
    },
    {
      accessorKey: 'isActive',
      header: 'Status',
    },
    {
      accessorKey: 'actions',
      header: '',
    },
  ],
})

const actionsOf = (user: IUser) => [
  {
    label: 'View',
    icon: 'ph:eye',
    onSelect: () =>
      dialog.info({
        title: user.name,
        description: user.email,
      }),
  },
  {
    label: 'Delete',
    icon: 'ph:trash',
    color: 'error' as const,
    // confirm() rejects when the user cancels, so always add a catch
    onSelect: () =>
      dialog
        .confirm({
          title: `Delete ${user.name}?`,
          type: DialogType.ERROR,
        })
        .then(() => users.deleteRun(user.id))
        .catch(() => {}),
  },
]

onMounted(() =>
  users.fetchPage(1, '', {
    params: {
      limit: 5,
    },
  })
)
</script>

<template>
  <Table
    :options="table"
    :to="(user: IUser) => `/cookbook/crud?id=${user.id}`"
    preserve-query
    @pageChange="users.fetchPageChange"
  />
</template>

<script lang="ts" setup>
import { type IUser, createUsersLoader } from '~/loaders/users'

const users = createUsersLoader()

// `to` makes every cell of a row a real link (middle-click and "open in new tab" work).
// A column called `actions` is left out, so its buttons stay clickable.
// `preserve-query` carries the current ?page=…&q=… along; `target="_blank"` opens a new tab.
const table = useTable<IUser>({
  repo: users,
  options: {
    isHidePaginationTop: true,
  },
  columns: () => [
    {
      accessorKey: 'name',
      header: 'Name',
    },
    {
      accessorKey: 'email',
      header: 'Email',
    },
  ],
})

onMounted(() =>
  users.fetchPage(1, '', {
    params: {
      limit: 5,
    },
  })
)
</script>

<template>
  <TableSimple :options="table" />
</template>

<script lang="ts" setup>
interface IInvoiceLine {
  item: string
  quantity: number
  total: number
}

const lines = ref<IInvoiceLine[]>([
  {
    item: 'Design',
    quantity: 12,
    total: 36000,
  },
  {
    item: 'Development',
    quantity: 40,
    total: 160000,
  },
  {
    item: 'Hosting',
    quantity: 1,
    total: 4500,
  },
])

// No loader: TableSimple renders an array you already have and pages it in the browser when `limit` is set
const table = useTableSimple<IInvoiceLine>({
  items: () => lines.value,
  options: {
    limit: 2,
  },
  columns: () => [
    {
      accessorKey: 'item',
      header: 'Item',
    },
    {
      accessorKey: 'quantity',
      header: 'Qty',
      type: COLUMN_TYPES.NUMBER,
    },
    {
      accessorKey: 'total',
      header: 'Total',
      type: COLUMN_TYPES.NUMBER,
    },
  ],
})
</script>