fix documentation

src/web/views/Components/Table/Table.vue

@@ -226,6 +226,9 @@
           <template #cell-age="{ row }">
             <AgeCustomCell :age="row.age" />
           </template>
+          <template #cell-tags="{ row }">
+            <TagsCustomCell :tags="row.tags" />
+          </template>
           <template #cell-country="{ row }">
             <CountryCustomCell :country="row.country" />
           </template>
@@ -285,13 +288,15 @@ import Code from "../../Elements/Code/Code.vue";
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
 import AgeCustomCell from "./example/AgeCustomCell.vue";
 import CountryCustomCell from "./example/CountryCustomCell.vue";
+import TagsCustomCell from "./example/TagsCustomCell.vue";
 
 export default {
   components: {
     Code,
     ComponentCode,
     AgeCustomCell,
     CountryCustomCell,
+    TagsCustomCell,
   },
   data() {
     return {
@@ -332,12 +337,20 @@ export default {
             sortable: true,
             defaultSortOrder: "asc",
           },
+          {
+            id: "priority",
+            label: "Priority",
+            width: "200px",
+            align: "center",
+            filter: true,
+          },
           {
             id: "tags",
             label: "Tags",
             width: "200px",
             align: "center",
             filter: true,
+            filterKey: "name",
           },
           {
             id: "country",
@@ -353,42 +366,82 @@ export default {
             firstName: "John",
             lastName: "Doe",
             age: 26,
-            tags: "Tag 4",
+            priority: "High",
+            tags: [
+              {
+                name: "Tag 2",
+                color: "#ff69b4",
+              },
+            ],
             country: "Germany",
           },
           {
             firstName: "Jane",
             lastName: "Doe",
             age: 21,
-            tags: "Tag 2",
+            priority: "Low",
+            tags: [
+              {
+                name: "Tag 2",
+                color: "#ff69b4",
+              },
+            ],
             country: "Austria",
           },
           {
             firstName: "Martine",
             lastName: "Durand",
             age: 35,
-            tags: "Tag 1",
+            priority: "Medium",
+            tags: [
+              {
+                name: "My tag",
+                color: "#2AAA8A",
+              },
+              {
+                name: "Reviewed",
+                color: "#ff6954",
+              },
+            ],
             country: "France",
           },
           {
             firstName: "Giuseppe",
             lastName: "Bompiani",
             age: 64,
-            tags: "Tag 1",
+            priority: "Low",
+            tags: [
+              {
+                name: "Tag 5",
+                color: "#bf70a4",
+              },
+            ],
             country: "Italy",
           },
           {
             firstName: "Enrico",
             lastName: "Fermi",
             age: 41,
-            tags: "Tag 1",
+            priority: "low",
+            tags: [
+              {
+                name: "Missing",
+                color: "#fh69u6",
+              },
+            ],
             country: "Italy",
           },
           {
             firstName: "Lev Davidovitch",
             lastName: "Landau",
             age: 23,
-            tags: "Tag 3",
+            priority: "Medium",
+            tags: [
+              {
+                name: "Tag 2",
+                color: "#ff69b4",
+              },
+            ],
             country: "Russia",
           },
         ],

src/web/views/Components/Table/columns-data.js

@@ -44,4 +44,9 @@ export default [
     "Boolean",
     "If you want to filter the column, set this to true. Sortable by id value.",
   ],
+  [
+    "filterKey",
+    "String",
+    "Set the key to specify a filter by.",
+  ]
 ];

src/web/views/Components/Table/example/TagsCustomCell.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <span
+      v-for="tag in tags"
+      :key="tag.name"
+      :style="{
+        borderColor: tag.color,
+        color: tag.color,
+        backgroundColor: tag.color + 15,
+        marginRight: '6px',
+      }"
+    >
+      {{ tag.name }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tags: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+span {
+  border: 1px solid;
+  border-radius: 12px;
+  padding: 2px 8px;
+  font-size: 12px;
+}
+</style>