feat(DataTable): add CSS Variables

gitsindonesia · Nov 22, 2022 · 8e45c5c · 8e45c5c
1 parent 5770f65
commit 8e45c5c
Show file tree

Hide file tree

Showing 3 changed files with 241 additions and 81 deletions.
diff --git a/packages/table/README.md b/packages/table/README.md
@@ -1,6 +1,6 @@
-# GITS Table Component
+# DataTable
 
-> Reusable Table Component
+DataTable component.
 
 ## Installation
 
@@ -19,24 +19,50 @@ yarn add @gits-id/table
 pnpm
 
 ```
-pnpm i @gits-id/table
+pnpm add @gits-id/table
 ```
 
 ## Usage
 
 ```vue
 <script setup lang="ts">
-import Table from '@gits-id/table';
+import VDataTable from '@gits-id/table';
+import '@gits-id/table/dist/style.css';
+
+const states = ['active', 'inactive'];
+
+const items = [...Array(30)].map((_, index) => ({
+  index,
+  name: `User-${index}`,
+  email: `user-${index}@example.com`,
+  age: index + 1 * 10,
+  state: states[Math.floor(Math.random() * states.length)],
+}));
+
+const headers = [
+  {
+    value: 'index',
+    text: 'No.',
+  },
+  {
+    value: 'name',
+    text: 'Name',
+  },
+  {
+    value: 'email',
+    text: 'Email',
+  },
+];
 </script>
 
 <template>
-  <Table />
+  <VDataTable :items="items" :headers="headers" />
 </template>
 ```
 
 ## Documentation
 
-View `Table` documentation [here](https://gits-ui.web.app/?path=/story/components-table--default).
+View full documentation [here](https://gits-ui.web.app/?path=/story/components-table--default).
 
 ## License
 

diff --git a/packages/table/src/VDataTable.stories.ts b/packages/table/src/VDataTable.stories.ts
@@ -51,10 +51,6 @@ export default {
     itemsPerPage: 10,
     items,
     headers,
-    striped: false,
-    hover: false,
-    dense: false,
-    loading: false,
   },
 } as Meta;