Merge pull request #50 from storyblok/feature/datatable-slots

Update component: sb-data-table
storyblok · Dec 8, 2020 · 0bea6bc · 0bea6bc
2 parents a707058 + d422c39
commit 0bea6bc
Show file tree

Hide file tree

Showing 6 changed files with 277 additions and 46 deletions.
diff --git a/src/components/DataTable/DataTable.stories.js b/src/components/DataTable/DataTable.stories.js
@@ -1,4 +1,8 @@
 import SbDataTable from '.'
+import SbAvatar from '../Avatar'
+import SbAvatarGroup from '../AvatarGroup'
+
+import { SbDataTableColumn } from './components/SbDataTableColumn'
 
 const description = {
   allowSelection: 'Allow row selection.',
@@ -103,16 +107,16 @@ export default {
 
 export const defaultTableHeadersData = [
   {
-    text: 'Dessert (100g serving)',
+    label: 'Dessert (100g serving)',
     value: 'name',
     main: true,
     sortable: true,
   },
-  { text: 'Calories', value: 'calories', sortable: true },
-  { text: 'Fat (g)', value: 'fat' },
-  { text: 'Carbs (g)', value: 'carbs' },
-  { text: 'Protein (g)', value: 'protein' },
-  { text: 'Iron (%)', value: 'iron' },
+  { label: 'Calories', value: 'calories', sortable: true },
+  { label: 'Fat (g)', value: 'fat' },
+  { label: 'Carbs (g)', value: 'carbs' },
+  { label: 'Protein (g)', value: 'protein' },
+  { label: 'Iron (%)', value: 'iron' },
 ]
 
 export const defaultTableItemsData = [
@@ -241,3 +245,100 @@ Striped.parameters = {
     },
   },
 }
+
+export const Slots = (args) => ({
+  components: {
+    SbDataTable,
+    SbAvatarGroup,
+    SbAvatar,
+    SbDataTableColumn,
+  },
+  props: Object.keys(args),
+  template: `
+    <div>
+      <SbDataTable
+        v-bind="{
+          allowSelection,
+          headers,
+          isLoading,
+          items,
+          selectionMode,
+          hideHeader,
+          striped
+        }"
+      >
+        <SbDataTableColumn label="Spaces" :sortable="true" value="title" v-slot="props" width="50%">
+          <span class="sb-data-table__col-main">{{ props.row.title }}</span><br>
+          Edited {{ props.row.editedOn }}
+        </SbDataTableColumn>
+
+        <SbDataTableColumn label="Authors" v-slot="props">
+          <SbAvatarGroup v-for="(author, index) in props.row.authors" :key="index">
+            <SbAvatar v-bind="author" />
+          </SbAvatarGroup>
+        </SbDataTableColumn>
+
+        <SbDataTableColumn label="Static">
+          Static content testing
+        </SbDataTableColumn>
+      </SbDataTable>
+    </div>
+  `,
+})
+
+Slots.args = {
+  heading: [
+    {
+      label: 'Spaces',
+      value: 'title',
+      main: true,
+      sortable: true,
+    },
+    { label: 'Authors' },
+  ],
+  items: [
+    {
+      title: 'My second space',
+      editedOn: '3 days ago',
+      authors: [
+        {
+          name: 'John Doe',
+          src:
+            'https://avatars0.githubusercontent.com/u/20342656?s=460&u=1f62c95c10543861ad74b58a3c03cd774e7a4fa4&v=4',
+        },
+        {
+          name: 'Kobe Bryant',
+          src:
+            'https://avatars0.githubusercontent.com/u/20342656?s=460&u=1f62c95c10543861ad74b58a3c03cd774e7a4fa4&v=4',
+        },
+      ],
+    },
+    {
+      title: 'My first space',
+      editedOn: '3 days ago',
+      authors: [
+        {
+          name: 'John Doe',
+          src:
+            'https://avatars0.githubusercontent.com/u/20342656?s=460&u=1f62c95c10543861ad74b58a3c03cd774e7a4fa4&v=4',
+        },
+        {
+          name: 'Kobe Bryant',
+          src:
+            'https://avatars0.githubusercontent.com/u/20342656?s=460&u=1f62c95c10543861ad74b58a3c03cd774e7a4fa4&v=4',
+        },
+      ],
+    },
+    {
+      title: 'Storyblok Demo',
+      editedOn: '3 days ago',
+      authors: [
+        {
+          name: 'John Doe',
+          src:
+            'https://avatars0.githubusercontent.com/u/20342656?s=460&u=1f62c95c10543861ad74b58a3c03cd774e7a4fa4&v=4',
+        },
+      ],
+    },
+  ],
+}
diff --git a/src/components/DataTable/components/SbDataTableBody.js b/src/components/DataTable/components/SbDataTableBody.js
@@ -16,7 +16,7 @@ export const SbDataTableBodyRow = {
       type: Array,
     },
     row: {
-      type: Object,
+      type: [Object, Array],
     },
     selectedRows: {
       type: Array,
@@ -79,18 +79,20 @@ export const SbDataTableBodyRow = {
               }),
             ]
           ),
-        this.headers.map((elem, index) => {
-          return h(
-            'td',
-            {
-              staticClass: 'sb-data-table__body-cell',
-              class: {
-                'sb-data-table__col-main': mainColumnIndex === index,
-              },
-            },
-            this.row[elem.value]
-          )
-        }),
+        this.$slots.default
+          ? this.$slots.default
+          : this.headers.map((elem, index) => {
+              return h(
+                'td',
+                {
+                  staticClass: 'sb-data-table__body-cell',
+                  class: {
+                    'sb-data-table__col-main': mainColumnIndex === index,
+                  },
+                },
+                this.row[elem.value]
+              )
+            }),
       ]
     )
   },

diff --git a/src/components/DataTable/components/SbDataTableColumn.js b/src/components/DataTable/components/SbDataTableColumn.js
@@ -0,0 +1,45 @@
+/**
+ * SbDataTableColumn
+ *
+ * Render the content inside the component
+ */
+export const SbDataTableColumn = {
+  name: 'SbDataTableColumn',
+
+  props: {
+    label: {
+      type: String,
+    },
+    row: {
+      type: Object,
+    },
+    sortable: {
+      type: Boolean,
+    },
+    value: {
+      type: String,
+    },
+    width: {
+      type: String,
+    },
+  },
+
+  render(h) {
+    return h(
+      'td',
+      {
+        staticClass: 'sb-data-table__body-cell',
+        attrs: {
+          width: this.width,
+        },
+      },
+      [
+        this.$scopedSlots.default({
+          row: {
+            ...this.row,
+          },
+        }),
+      ]
+    )
+  },
+}
diff --git a/src/components/DataTable/components/SbDataTableHeader.js b/src/components/DataTable/components/SbDataTableHeader.js
@@ -80,7 +80,7 @@ export const SbDataTableHeaderCell = {
         },
       },
       [
-        this.column.text,
+        this.column.label,
         this.isSortable &&
           h(SbIcon, {
             class: 'sb-data-table__sort-icon',

diff --git a/src/components/DataTable/data-table.scss b/src/components/DataTable/data-table.scss
@@ -37,6 +37,10 @@
         top: 50%;
         transform: translateY(-50%);
       }
+
+      * {
+        display: none;
+      }
     }
 
     .sb-data-table__col-selection:before,
@@ -75,17 +79,24 @@
 
   &__head-cell, &__body-cell {
     color: $light-gray;
-    font-size: 14px;
+    font-size: $font-size-md;
+    line-height: 1.3;
     font-weight: normal;
     text-align: left;
     padding: 18px 10px;
+    box-sizing: border-box;
 
-    &.sb-data-table__col-main {
-      font-weight: 500;
-      color: $sb-dark-blue;
+    a {
+      text-decoration: none;
+      color: inherit;
     }
   }
 
+  &__col-main {
+    font-weight: $font-weight-medium;
+    color: $sb-dark-blue;
+  }
+
   &__head-cell {
     &:hover {
       .sb-data-table__sort-icon {
@@ -95,7 +106,7 @@
   }
 
   &__sort-icon {
-    margin-left: 10px;
+    margin-left: 1rem;
     opacity: 0;
 
     .sb-data-table--show-icon & {