fix: add skeleton and pagination to NeTable

src/components/NeTable.vue

@@ -4,6 +4,7 @@
 -->
 <script lang="ts" setup>
 import { type PropType } from 'vue'
+import NeTableSkeleton from './NeTableSkeleton.vue'
 
 export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 
@@ -15,6 +16,18 @@ defineProps({
   cardBreakpoint: {
     type: String as PropType<Breakpoint>,
     default: 'md'
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  skeletonRows: {
+    type: Number,
+    default: 8
+  },
+  skeletonColumns: {
+    type: Number,
+    default: 4
   }
 })
 
@@ -36,7 +49,19 @@ const tableCardStyle: Record<Breakpoint, string> = {
         tableCardStyle[cardBreakpoint]
       ]"
     >
-      <slot />
+      <template v-if="loading">
+        <NeTableSkeleton
+          :rows="skeletonRows"
+          :columns="skeletonColumns"
+          :card-breakpoint="cardBreakpoint"
+        />
+      </template>
+      <template v-else>
+        <slot />
+      </template>
     </table>
   </div>
+  <div v-if="$slots.paginator" class="mt-6 flex flex-row justify-end">
+    <slot name="paginator" />
+  </div>
 </template>

src/components/NeTableSkeleton.vue

@@ -0,0 +1,44 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<script lang="ts" setup>
+import { type PropType } from 'vue'
+import NeTableHead from './NeTableHead.vue'
+import NeTableHeadCell from './NeTableHeadCell.vue'
+import NeSkeleton from './NeSkeleton.vue'
+import NeTableBody from './NeTableBody.vue'
+import NeTableRow from './NeTableRow.vue'
+import NeTableCell from './NeTableCell.vue'
+
+export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+
+defineProps({
+  rows: {
+    type: Number,
+    required: true
+  },
+  columns: {
+    type: Number,
+    required: true
+  },
+  cardBreakpoint: {
+    type: String as PropType<Breakpoint>,
+    default: 'md'
+  }
+})
+</script>
+<template>
+  <NeTableHead :card-breakpoint="cardBreakpoint">
+    <NeTableHeadCell v-for="i in columns" :key="i">
+      <NeSkeleton size="lg" />
+    </NeTableHeadCell>
+  </NeTableHead>
+  <NeTableBody :card-breakpoint="cardBreakpoint">
+    <NeTableRow v-for="i in rows" :key="i" :card-breakpoint="cardBreakpoint">
+      <NeTableCell v-for="j in columns" :key="j" :card-breakpoint="cardBreakpoint" data-label="">
+        <NeSkeleton size="lg" />
+      </NeTableCell>
+    </NeTableRow>
+  </NeTableBody>
+</template>

stories/NeTable.stories.ts

@@ -17,7 +17,10 @@ const meta: Meta<typeof NeTable> = {
   },
   args: {
     ariaLabel: 'Aria label for the table',
-    cardBreakpoint: 'md'
+    cardBreakpoint: 'md',
+    loading: false,
+    skeletonRows: 8,
+    skeletonColumns: 4
   },
   render: (args) => ({
     components: {
@@ -84,4 +87,12 @@ const meta: Meta<typeof NeTable> = {
 
 export default meta
 
-export const Default: StoryObj<typeof NeTable> = {}
+export const Default: StoryObj<typeof NeTable> = {
+  args: {}
+}
+
+export const Loading: StoryObj<typeof NeTable> = {
+  args: {
+    loading: true
+  }
+}