feat: add empty slot to datatable (#495)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.55
+
+- Add `empty` slot to `DataTable`
+
 ## v2.0.54
 
 - Fixes the `DataTable` error rendering

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.54",
+  "version": "2.0.55",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/DataTable/DataTable.stories.ts

@@ -21,9 +21,9 @@ export const Primary: StoryObj<typeof DataTable> = {
     setup: () => ({ args }),
     template: `
       <DataTable v-bind="args">
-        <Column field="firstName" header="First Name" />
-        <Column field="lastName" header="Last Name" />
-        <Column field="favoriteColor" header="Favorite Color" />
+        <Column field="firstName" header="First Name" class="w-96" />
+        <Column field="lastName" header="Last Name" class="w-96" />
+        <Column field="favoriteColor" header="Favorite Color" class="w-96" />
       </DataTable>
     `
   }),

src/components/DataTable/DataTable.vue

@@ -37,7 +37,8 @@
     <template #empty>
       <template v-if="!loading">
         <Alert v-if="error" variant="error">{{ error }}</Alert>
-        <Alert v-else variant="info">No results</Alert>
+        <Alert v-else-if="!$slots['empty']" variant="info">No results</Alert>
+        <slot v-else name="empty" />
       </template>
     </template>
 
@@ -49,7 +50,7 @@
 
     <Column v-if="clickable" class="w-14 text-center">
       <template #body>
-        <Icon :icon="IconName.DETAILS" size="xl" />
+        <Icon :icon="IconName.DETAILS" size="xl" class="mx-auto" />
       </template>
     </Column>
 
@@ -170,6 +171,7 @@ defineEmits<{
 defineSlots<{
   default(): any;
   toolbar(): any;
+  empty(): any;
 }>();
 </script>
 
@@ -311,6 +313,6 @@ defineSlots<{
   @apply py-2;
 }
 .uic-datatable-toolbar {
-  @apply py-2;
+  @apply pb-6;
 }
 </style>

src/components/DataTable/DataTableTotalResults.vue

@@ -32,7 +32,11 @@ const totalRows = computed(() => {
   if (typeof props.total !== 'number') {
     return '-';
   }
-  return props.total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  const commaFormatted = props.total
+    .toString()
+    .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  // When our ES total is 10,000, we want to display 10,000+.
+  return props.total === 10000 ? `${commaFormatted}+` : commaFormatted;
 });
 </script>