up

nuxt · Oct 22, 2024 · cfebdf6 · cfebdf6
1 parent 4d41100
commit cfebdf6
Show file tree

Hide file tree

Showing 8 changed files with 1,072 additions and 47 deletions.
diff --git a/docs/app/components/content/examples/table/TableColumnsExample.vue b/docs/app/components/content/examples/table/TableColumnsExample.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+
+const UBadge = resolveComponent('UBadge')
+
+type Payment = {
+  id: string
+  date: string
+  status: 'paid' | 'failed' | 'refunded'
+  email: string
+  amount: number
+}
+
+const data = ref<Payment[]>([{
+  id: '4600',
+  date: '2024-03-11T15:30:00',
+  status: 'paid',
+  email: '[email protected]',
+  amount: 594
+}, {
+  id: '4599',
+  date: '2024-03-11T10:10:00',
+  status: 'failed',
+  email: '[email protected]',
+  amount: 276
+}, {
+  id: '4598',
+  date: '2024-03-11T08:50:00',
+  status: 'refunded',
+  email: '[email protected]',
+  amount: 315
+}, {
+  id: '4597',
+  date: '2024-03-10T19:45:00',
+  status: 'paid',
+  email: '[email protected]',
+  amount: 529
+}, {
+  id: '4596',
+  date: '2024-03-10T15:55:00',
+  status: 'paid',
+  email: '[email protected]',
+  amount: 639
+}])
+
+const columns: TableColumn<Payment>[] = [{
+  accessorKey: 'id',
+  header: '#',
+  cell: ({ row }) => `#${row.getValue('id')}`
+}, {
+  accessorKey: 'date',
+  header: 'Date',
+  cell: ({ row }) => {
+    return new Date(row.getValue('date')).toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  }
+}, {
+  accessorKey: 'status',
+  header: 'Status',
+  cell: ({ row }) => {
+    const color = ({
+      paid: 'success' as const,
+      failed: 'error' as const,
+      refunded: 'neutral' as const
+    })[row.getValue('status') as string]
+
+    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
+  }
+}, {
+  accessorKey: 'email',
+  header: 'Email'
+}, {
+  accessorKey: 'amount',
+  header: () => h('div', { class: 'text-right' }, 'Amount'),
+  cell: ({ row }) => {
+    const amount = Number.parseFloat(row.getValue('amount'))
+
+    const formatted = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount)
+
+    return h('div', { class: 'text-right font-medium' }, formatted)
+  }
+}]
+</script>
+
+<template>
+  <UTable :data="data" :columns="columns" class="flex-1" />
+</template>
diff --git a/docs/content/3.components/table.md b/docs/content/3.components/table.md
@@ -12,6 +12,172 @@ links:
 
 ## Usage
 
+### Data
+
+Use the `data` prop as an array of objects, the columns will be generated based on the keys of the objects.
+
+::component-code
+---
+collapse: true
+class: '!p-0'
+ignore:
+  - data
+  - class
+external:
+  - data
+props:
+  data:
+    - id: '4600'
+      date: '2024-03-11T15:30:00'
+      status: 'paid'
+      email: '[email protected]'
+      amount: 594
+    - id: '4599'
+      date: '2024-03-11T10:10:00'
+      status: 'failed'
+      email: '[email protected]'
+      amount: 276
+    - id: '4598'
+      date: '2024-03-11T08:50:00'
+      status: 'refunded'
+      email: '[email protected]'
+      amount: 315
+    - id: '4597'
+      date: '2024-03-10T19:45:00'
+      status: 'paid'
+      email: '[email protected]'
+      amount: 529
+    - id: '4596'
+      date: '2024-03-10T15:55:00'
+      status: 'paid'
+      email: '[email protected]'
+      amount: 639
+  class: 'flex-1'
+---
+::
+
+### Columns
+
+Use the `columns` prop as an array of objects with the following properties:
+
+- `accessorKey`: The key of the column.
+- `header`: The header of the column.
+- `footer`: The footer of the column.
+
+::component-example
+---
+collapse: true
+class: '!p-0'
+name: 'table-columns-example'
+---
+::
+
+::note{to="https://tanstack.com/table/latest/docs/guide/column-defs" target="_blank"}
+For more information on columns, see the [TanStack Table documentation](https://tanstack.com/table/latest/docs/guide/column-defs).
+::
+
+### Sticky
+
+Use the `sticky` prop to make the header sticky.
+
+::component-code
+---
+collapse: true
+class: '!p-0'
+ignore:
+  - data
+  - class
+external:
+  - data
+props:
+  sticky: true
+  data:
+    - id: '4600'
+      date: '2024-03-11T15:30:00'
+      status: 'paid'
+      email: '[email protected]'
+      amount: 594
+    - id: '4599'
+      date: '2024-03-11T10:10:00'
+      status: 'failed'
+      email: '[email protected]'
+      amount: 276
+    - id: '4598'
+      date: '2024-03-11T08:50:00'
+      status: 'refunded'
+      email: '[email protected]'
+      amount: 315
+    - id: '4597'
+      date: '2024-03-10T19:45:00'
+      status: 'paid'
+      email: '[email protected]'
+      amount: 529
+    - id: '4596'
+      date: '2024-03-10T15:55:00'
+      status: 'paid'
+      email: '[email protected]'
+      amount: 639
+    - id: '4595'
+      date: '2024-03-10T15:55:00'
+      status: 'paid'
+      email: '[email protected]'
+      amount: 639
+    - id: '4594'
+      date: '2024-03-10T15:55:00'
+      status: 'paid'
+      email: '[email protected]'
+      amount: 639
+  class: 'flex-1 max-h-[312px]'
+---
+::
+
+### Loading
+
+Use the `loading` prop to display a loading state, the `loading-color` prop to change its color and the `loading-animation` prop to change its animation.
+
+::component-code
+---
+collapse: true
+class: '!p-0'
+ignore:
+  - data
+  - class
+external:
+  - data
+props:
+  loading: true
+  loadingColor: primary
+  loadingAnimation: carousel
+  data:
+    - id: '4600'
+      date: '2024-03-11T15:30:00'
+      status: 'paid'
+      email: '[email protected]'
+      amount: 594
+    - id: '4599'
+      date: '2024-03-11T10:10:00'
+      status: 'failed'
+      email: '[email protected]'
+      amount: 276
+    - id: '4598'
+      date: '2024-03-11T08:50:00'
+      status: 'refunded'
+      email: '[email protected]'
+      amount: 315
+    - id: '4597'
+      date: '2024-03-10T19:45:00'
+      status: 'paid'
+      email: '[email protected]'
+      amount: 529
+    - id: '4596'
+      date: '2024-03-10T15:55:00'
+      status: 'paid'
+      email: '[email protected]'
+      amount: 639
+  class: 'flex-1'
+---
+::
+
 ## Examples
 
 ## API

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -179,6 +179,7 @@ export default defineNuxtConfig({
         'USlider',
         'USlideover',
         'USwitch',
+        'UTable',
         'UTabs',
         'UTextarea',
         'UTooltip'

diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
@@ -20,7 +20,7 @@ type Payment = {
 
 const table = useTemplateRef('table')
 
-const data: Payment[] = [{
+const data = ref<Payment[]>([{
   id: '4600',
   date: '2024-03-11T15:30:00',
   status: 'paid',
@@ -140,7 +140,7 @@ const data: Payment[] = [{
   status: 'paid',
   email: '[email protected]',
   amount: 567
-}]
+}])
 
 const columns: TableColumn<Payment>[] = [{
   id: 'select',
@@ -258,10 +258,21 @@ const columns: TableColumn<Payment>[] = [{
   }
 }]
 
+const loading = ref(true)
 const columnPinning = ref({
   left: ['id'],
   right: ['actions']
 })
+
+function randomize() {
+  data.value = [...data.value].sort(() => Math.random() - 0.5)
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false
+  }, 1300)
+})
 </script>
 
 <template>
@@ -274,6 +285,8 @@ const columnPinning = ref({
         @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
       />
 
+      <UButton color="neutral" variant="outline" label="Randomize" @click="randomize" />
+
       <UDropdownMenu
         :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
           label: upperFirst(column.id),
@@ -303,7 +316,9 @@ const columnPinning = ref({
       :data="data"
       :columns="columns"
       :column-pinning="columnPinning"
-      class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1 overflow-y-auto"
+      loading
+      sticky
+      class="border border-[var(--ui-border-accented)] rounded-[var(--ui-radius)] flex-1"
     >
       <template #expanded="{ row }">
         <pre>{{ row.original }}</pre>