feat: add datatables

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.49
+
+- Adds the `DataTable` component
+
 ## v2.0.48
 
 - Add new icons for the `Icon` component

package.json

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

src/components/DataTable/DataTable.stories.ts

@@ -0,0 +1,115 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import routeDecorator, {
+  routeTemplate
+} from '../../../.storybook/routeDecorator';
+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,
+  decorators: [
+    routeDecorator('/', [
+      {
+        path: '/internal',
+        name: 'InternalLink',
+        component: {
+          template: routeTemplate('internal')
+        }
+      }
+    ])
+  ],
+  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'
+      }
+    ],
+  }
+};