SELF-253: Add DataTable

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.51
+
+- Adds the `DataTable` component
+
 ## v2.0.50
 
 - Adjust the margin on the menu's divider if the menu has a footer.

package.json

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

src/components/Badge/Badge.vue

@@ -34,6 +34,7 @@ withDefaults(
 .uic-badge {
   @apply inline-flex flex-row gap-1 items-center justify-center;
   @apply px-4 py-1 border rounded-full;
+  @apply truncate;
 
   &.uic-size {
     &-sm {

src/components/DataTable/DataTable.mdx

@@ -0,0 +1,103 @@
+import { Canvas } from '@storybook/addon-docs';
+import { Primary } from './DataTable.stories';
+
+# DataTable
+
+<Canvas of={Primary} />
+
+## How to Use
+
+### Basic
+
+```html
+<template>
+  <DataTable :data="[{ id: 'test', name: 'John Smith' }]" data-key="id">
+    <Column field="id" header="ID" />
+    <Column field="name" header="Full Name" />
+  </DataTable>
+</template>
+
+<script setup lang="ts">
+  import { Column, DataTable } from '@lob/ui-components';
+</script>
+```
+
+### With Async Data
+
+#### Without Pagination
+
+```html
+<template>
+  <DataTable async :data data-key="id" :error="errorMessage" :loading :total>
+    <Column field="id" header="ID" />
+    <Column field="name" header="Full Name" />
+  </DataTable>
+</template>
+
+<script setup lang="ts">
+  import { Column, DataTable } from '@lob/ui-components';
+
+  const loading = ref(false);
+  const data = ref<{ id: number; name: string }>([]);
+  const total = ref<number>();
+  const errorMessage = ref<string>();
+
+  const fetchData = async () => {
+    isLoading.value = true;
+    try {
+      const response = await fetch('...');
+      data.value = response.data;
+      total.value = response.total;
+    } catch (e) {
+      errorMessage.value = e.message;
+    }
+    isLoading.value = false;
+  };
+</script>
+```
+
+#### With Pagination
+
+Pagination state is handled by the component
+
+There is also support for `next`/ `previous` pagination with the `list` prop
+using the props `next` and `previous` for button state and the events `@next`
+and `@previous`.
+
+```html
+<template>
+  <DataTable
+    async
+    :data
+    data-key="id"
+    :error="errorMessage"
+    :loading
+    :total
+    @paginate="fetchData"
+  >
+    <Column field="id" header="ID" />
+    <Column field="name" header="Full Name" />
+  </DataTable>
+</template>
+
+<script setup lang="ts">
+  import { Column, DataTable } from '@lob/ui-components';
+
+  const loading = ref(false);
+  const data = ref<{ id: number; name: string }>([]);
+  const total = ref<number>([]);
+  const errorMessage = ref<string>();
+
+  const fetchData = async (paginationData) => {
+    isLoading.value = true;
+    try {
+      const response = await fetch('...');
+      data.value = response.data;
+      total.value = response.total;
+    } catch (e) {
+      errorMessage.value = e.message;
+    }
+    isLoading.value = false;
+  };
+</script>
+```

src/components/DataTable/DataTable.stories.ts

@@ -0,0 +1,101 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import Column from 'primevue/column';
+import DataTable from './DataTable.vue';
+import mdx from './DataTable.mdx';
+
+const meta: Meta<typeof DataTable> = {
+  title: 'Components/DataTable',
+  component: DataTable,
+  parameters: {
+    docs: {
+      page: mdx
+    }
+  }
+};
+
+export default meta;
+
+export const Primary: StoryObj<typeof DataTable> = {
+  render: (args) => ({
+    components: { Column, 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" />
+      </DataTable>
+    `
+  }),
+  args: {
+    dataKey: 'id',
+    data: [
+      {
+        id: 1,
+        firstName: 'John',
+        lastName: 'Doe',
+        favoriteColor: 'Blue'
+      },
+      {
+        id: 2,
+        firstName: 'Jane',
+        lastName: 'Doe',
+        favoriteColor: 'Green'
+      },
+      {
+        id: 3,
+        firstName: 'Jack',
+        lastName: 'Doe',
+        favoriteColor: 'Red'
+      },
+      {
+        id: 4,
+        firstName: 'Jill',
+        lastName: 'Doe',
+        favoriteColor: 'Yellow'
+      },
+      {
+        id: 5,
+        firstName: 'Jim',
+        lastName: 'Doe',
+        favoriteColor: 'Purple'
+      },
+      {
+        id: 6,
+        firstName: 'Jenny',
+        lastName: 'Doe',
+        favoriteColor: 'Orange'
+      },
+      {
+        id: 7,
+        firstName: 'Joe',
+        lastName: 'Doe',
+        favoriteColor: 'Black'
+      },
+      {
+        id: 8,
+        firstName: 'Jill',
+        lastName: 'Doe',
+        favoriteColor: 'White'
+      },
+      {
+        id: 9,
+        firstName: 'Jack',
+        lastName: 'Doe',
+        favoriteColor: 'Gray'
+      },
+      {
+        id: 10,
+        firstName: 'Jill',
+        lastName: 'Doe',
+        favoriteColor: 'Brown'
+      },
+      {
+        id: 11,
+        firstName: 'Jill',
+        lastName: 'Doe',
+        favoriteColor: 'Pink'
+      }
+    ]
+  }
+};