diff --git a/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconCaret.vue b/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconCaret.vue
new file mode 100644
index 00000000..35171173
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconCaret.vue
@@ -0,0 +1,19 @@
+<template>
+  <Icon
+    :fill="fill"
+    :fillColor="fillColor"
+    :color="color"
+    :class="classes"
+    :style="style"
+  >
+    <Caret />
+  </Icon>
+</template>
+
+<script>
+import Caret from "../BIMDataLibraryIcons/Caret.vue";
+import makeIcon from "./iconFactory.js";
+export default makeIcon("Caret", Caret);
+</script>
+
+<style scoped lang="scss" src="../_BIMDataIcon.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js b/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js
index 8f07436d..08a66b29 100644
--- a/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js
+++ b/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js
@@ -20,6 +20,7 @@ export { default as BIMDataIconCalendar } from "./BIMDataIconCalendar.vue";
 export { default as BIMDataIconCaliper } from "./BIMDataIconCaliper.vue";
 export { default as BIMDataIconCamera } from "./BIMDataIconCamera.vue";
 export { default as BIMDataIconCancelCamera } from "./BIMDataIconCancelCamera.vue";
+export { default as BIMDataIconCaret } from "./BIMDataIconCaret.vue";
 export { default as BIMDataIconCheck } from "./BIMDataIconCheck.vue";
 export { default as BIMDataIconChevron } from "./BIMDataIconChevron.vue";
 export { default as BIMDataIconClassificationCategory } from "./BIMDataIconClassificationCategory.vue";
diff --git a/src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/Caret.vue b/src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/Caret.vue
new file mode 100644
index 00000000..bc1a5662
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/Caret.vue
@@ -0,0 +1,3 @@
+<template>
+  <path d="M11.7593 17.3077L1.25934 5.69062L22.2593 5.69062L11.7593 17.3077Z" />
+</template>
diff --git a/src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/index.js b/src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/index.js
index 3525c48e..4a60b081 100644
--- a/src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/index.js
+++ b/src/BIMDataComponents/BIMDataIcon/BIMDataLibraryIcons/index.js
@@ -20,6 +20,7 @@ import calendar from "./Calendar.vue";
 import caliper from "./Caliper.vue";
 import camera from "./Camera.vue";
 import cancelCamera from "./CancelCamera.vue";
+import caret from "./Caret.vue";
 import check from "./Check.vue";
 import chevron from "./Chevron.vue";
 import classificationCategory from "./ClassificationCategory.vue";
@@ -189,6 +190,7 @@ export default {
   caliper,
   camera,
   cancelCamera,
+  caret,
   check,
   chevron,
   classificationCategory,
diff --git a/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue b/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue
index dcccfd66..8828bf6d 100644
--- a/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue
+++ b/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue
@@ -26,7 +26,60 @@
                 textAlign: column.align || 'left',
               }"
             >
-              {{ column.id ? column.label || column.id : column }}
+              <div :style="{ display: 'inline-flex', 'align-items': 'center' }">
+                {{ column.id ? column.label || column.id : column }}
+                <slot name="column-header-right"></slot>
+                <ColumnSorting
+                  v-if="column.sortable"
+                  :sortOrder="
+                    !sortObject.order || sortObject.column !== column
+                      ? 'asc'
+                      : sortObject.order
+                  "
+                  :index="j"
+                  :active="j === activeHeadercolumnKey"
+                  @click="toggleSorting(column)"
+                  @set-active="activeHeadercolumnKey = $event"
+                />
+                <div
+                  v-if="column.filter"
+                  v-clickaway="() => awayFromFilter(column)"
+                >
+                  <BIMDataButton
+                    color="primary"
+                    ghost
+                    rounded
+                    icon
+                    class="m-l-6"
+                    :class="{
+                      active: filters.some(
+                        filter => filter.columnKey === column.id,
+                      ),
+                    }"
+                    @click="toggleFiltersMenu(column)"
+                  >
+                    <BIMDataIconCaret size="xxxs" fill color="default" />
+                  </BIMDataButton>
+                  <ColumnFilters
+                    v-if="displayedColumnFilterId === column.id"
+                    :column="column"
+                    :columnData="
+                      computedRows.map(
+                        computedRow => computedRow.data[column.id],
+                      )
+                    "
+                    :filters="
+                      filters.find(filter => filter.columnKey === column.id)
+                        ?.columnFilters ?? []
+                    "
+                    @filter="updateFilters(column, $event)"
+                  >
+                    <template #column-filter-empty>
+                      <slot name="column-filter-empty"></slot>
+                    </template>
+                  </ColumnFilters>
+                </div>
+              </div>
             </th>
           </tr>
           <tr key="head-row-1">
@@ -37,9 +90,9 @@
         </thead>
         <tbody @dragleave="onDragleave">
           <tr
-            v-for="{ key, data } of computedRows"
+            v-for="{ key, data } of displayedRows"
             :key="`body-row-${key}`"
-            v-show="displayedRows.includes(key)"
+            v-show="paginatedRows.includes(key)"
             :style="{ height: `${rowHeight}px` }"
             @drop="onDrop(data, $event)"
             @dragover="onDragover(key, data, $event)"
@@ -83,7 +136,9 @@
     <div
       class="bimdata-table__page-nav"
       v-if="paginated"
-      :style="{ visibility: rows.length > perPage ? 'visible' : 'hidden' }"
+      :style="{
+        visibility: displayedRows.length > perPage ? 'visible' : 'hidden',
+      }"
     >
       <BIMDataButton
         ghost
@@ -95,13 +150,13 @@
         <BIMDataIconChevron size="s" :rotate="180" />
       </BIMDataButton>
       <span class="bimdata-table__page-nav__text">
-        {{ `${pageIndexStart} - ${pageIndexEnd} / ${rows.length}` }}
+        {{ `${pageIndexStart} - ${pageIndexEnd} / ${displayedRows.length}` }}
       </span>
       <BIMDataButton
         ghost
         rounded
         icon
-        :disabled="pageIndexEnd === rows.length"
+        :disabled="pageIndexEnd === displayedRows.length"
         @click="pageIndex++"
       >
         <BIMDataIconChevron size="s" />
@@ -111,19 +166,28 @@
 </template>
 
 <script>
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, shallowReactive } from "vue";
 import { useRowSelection } from "./table-row-selection.js";
+import clickaway from "../../BIMDataDirectives/click-away.js";
+
 // Components
 import BIMDataButton from "../BIMDataButton/BIMDataButton.vue";
 import BIMDataCheckbox from "../BIMDataCheckbox/BIMDataCheckbox.vue";
+import BIMDataIconCaret from "../BIMDataIcon/BIMDataIconStandalone/BIMDataIconCaret.vue";
 import BIMDataIconChevron from "../BIMDataIcon/BIMDataIconStandalone/BIMDataIconChevron.vue";
+import ColumnSorting from "./column-sorting/ColumnSorting.vue";
+import ColumnFilters from "./column-filters/ColumnFilters.vue";
 
 export default {
   components: {
     BIMDataButton,
     BIMDataCheckbox,
+    BIMDataIconCaret,
     BIMDataIconChevron,
+    ColumnSorting,
+    ColumnFilters,
   },
+  directives: { clickaway },
   props: {
     columns: {
       type: Array,
@@ -185,7 +249,7 @@ export default {
   setup(props, { emit }) {
     // Compute rows keys based on props values.
     const computedRows = computed(() =>
-      props.rows.map((row, i) => ({ key: row[props.rowKey] ?? i, data: row }))
+      props.rows.map((row, i) => ({ key: row[props.rowKey] ?? i, data: row })),
     );
 
     const { rowSelection, toggleRowSelection, toggleFullSelection } =
@@ -211,7 +275,7 @@ export default {
               emit("all-deselected");
             }
           },
-        }
+        },
       );
 
     const toggleRow = row => {
@@ -225,70 +289,195 @@ export default {
       }
     };
 
-    const displayedRows = ref([]);
+    const onDrop = (data, event) => {
+      if (props.canDragOverRow(data)) {
+        emit("row-drop", { data, event });
+        dragOveredRowKey.value = null;
+      }
+    };
+    const dragOveredRowKey = ref(null);
+    const onDragover = (key, data, event) => {
+      if (props.canDragOverRow(data)) {
+        event.preventDefault();
+        dragOveredRowKey.value = key;
+      }
+    };
+    const onDragleave = () => {
+      dragOveredRowKey.value = null;
+    };
+
+    const displayedColumnFilterId = ref(null);
+
+    const toggleFiltersMenu = column => {
+      if (displayedColumnFilterId.value === column.id) {
+        displayedColumnFilterId.value = null;
+      } else {
+        displayedColumnFilterId.value = column.id;
+      }
+    };
+
+    const awayFromFilter = column => {
+      if (column.id === displayedColumnFilterId.value) {
+        displayedColumnFilterId.value = null;
+      }
+    };
+
+    const sortObject = shallowReactive({ column: null, order: null });
+    const filteringColumns = ref([]);
+    const sortedRows = computed(() => {
+      if (sortObject.column) {
+        // by default, sort in ascending order
+        const sortOrder = sortObject.order !== "desc" ? 1 : -1;
+        if (sortObject.column.sortFunction) {
+          const sortFunction = (a, b) => {
+            return sortObject.column.sortFunction(a.data, b.data) * sortOrder;
+          };
+          return Array.from(computedRows.value).sort(sortFunction);
+        } else {
+          return Array.from(computedRows.value).sort((a, b) => {
+            if (a.data[sortObject.column.id] < b.data[sortObject.column.id]) {
+              return sortOrder;
+            }
+            if (a.data[sortObject.column.id] > b.data[sortObject.column.id]) {
+              return -sortOrder;
+            }
+            return 0;
+          });
+        }
+      }
+      if (filteringColumns.value.length > 0) {
+        return Array.from(computedRows.value).filter(row => {
+          return (
+            row.data[filteringColumns.value[0].id] ===
+            filteringColumns.value[0].text
+          );
+        });
+      }
+
+      return computedRows.value;
+    });
+
+    const toggleSorting = column => {
+      if (sortObject.column === column) {
+        sortObject.order = sortObject.order === "asc" ? "desc" : "asc";
+      } else {
+        sortObject.column = column;
+        sortObject.order = column.defaultSortOrder ?? "asc";
+      }
+    };
+
+    /**
+     * @typedef {Object} ColumnFilter
+     * @property {number} columnKey
+     * @property {any[]} columnFilters
+     */
+
+    /**
+     * @type { { value: ColumnFilter[] } }
+     */
+    const filters = ref([]);
+
+    const displayedRows = computed(() => {
+      return sortedRows.value.filter(row => {
+        return filters.value.every(filter => {
+          const column = props.columns.find(
+            column => column.id === filter.columnKey,
+          );
+          const columnRowData = row.data[filter.columnKey];
+
+          if (columnRowData === null) return;
+
+          if (Array.isArray(columnRowData)) {
+            return columnRowData.some(columnRowDataElement =>
+              filter.columnFilters.includes(
+                column.filterKey
+                  ? columnRowDataElement[column.filterKey]
+                  : columnRowDataElement,
+              ),
+            );
+          } else {
+            return filter.columnFilters.includes(
+              column.filterKey
+                ? columnRowData[column.filterKey]
+                : columnRowData,
+            );
+          }
+        });
+      });
+    });
+
+    /**
+     * @param {ColumnFilter} columnFilter
+     */
+    const updateFilters = (column, columnFilters) => {
+      filters.value = filters.value.filter(
+        filter => filter.columnKey !== column.id,
+      );
+      if (columnFilters.length > 0) {
+        filters.value.push({
+          columnKey: column.id,
+          columnFilters,
+        });
+      }
+    };
+
+    const paginatedRows = ref([]);
     const pageIndex = ref(0);
     const pageIndexStart = ref(1);
     const pageIndexEnd = ref(props.perPage);
 
     // Reset `pageIndex` when rows array or the number of rows per page change.
     watch(
-      [computedRows, () => props.perPage],
+      [displayedRows, () => props.perPage],
       () => {
         pageIndex.value = 0;
       },
-      { immediate: true }
+      { immediate: true },
     );
-    // Compute `displayedRows` according to rows array and pagination settings.
+    // Compute `paginatedRows` according to rows array and pagination settings.
     watch(
-      [computedRows, () => props.paginated, () => props.perPage, pageIndex],
+      [displayedRows, () => props.paginated, () => props.perPage, pageIndex],
       ([rows, paginated, perPage, index]) => {
         const rowKeys = rows.map(r => r.key);
         if (paginated) {
           const start = perPage * index;
           const end = start + perPage;
 
-          displayedRows.value = rowKeys.slice(start, end);
+          paginatedRows.value = rowKeys.slice(start, end);
           pageIndexStart.value = start + 1;
           pageIndexEnd.value = Math.min(end, rows.length);
         } else {
-          displayedRows.value = rowKeys;
+          paginatedRows.value = rowKeys;
         }
       },
-      { immediate: true }
+      { immediate: true },
     );
 
-    const onDrop = (data, event) => {
-      if (props.canDragOverRow(data)) {
-        emit("row-drop", { data, event });
-        dragOveredRowKey.value = null;
-      }
-    };
-    const dragOveredRowKey = ref(null);
-    const onDragover = (key, data, event) => {
-      if (props.canDragOverRow(data)) {
-        event.preventDefault();
-        dragOveredRowKey.value = key;
-      }
-    };
-    const onDragleave = () => {
-      dragOveredRowKey.value = null;
-    };
-
     return {
       // References
+      activeHeadercolumnKey: null,
       computedRows,
-      displayedRows,
+      paginatedRows,
       pageIndex,
       pageIndexEnd,
       pageIndexStart,
       rowSelection,
       dragOveredRowKey,
+      displayedColumnFilterId,
+      filteringColumns,
+      filters,
+      sortObject,
       // Methods
+      awayFromFilter,
       onDrop,
       onDragover,
       onDragleave,
       toggleAll,
       toggleRow,
+      toggleSorting,
+      updateFilters,
+      toggleFiltersMenu,
+      displayedRows,
     };
   },
 };
diff --git a/src/BIMDataComponents/BIMDataTable/_BIMDataTable.scss b/src/BIMDataComponents/BIMDataTable/_BIMDataTable.scss
index 67f1648e..671cc780 100644
--- a/src/BIMDataComponents/BIMDataTable/_BIMDataTable.scss
+++ b/src/BIMDataComponents/BIMDataTable/_BIMDataTable.scss
@@ -25,6 +25,7 @@
       }
 
       th {
+        position: relative;
         font-weight: bold;
         color: var(--color-primary);
 
@@ -35,6 +36,9 @@
           font-weight: normal;
           color: var(--color-granite-lightest);
         }
+        .active {
+          background-color: #e0eef9;
+        }
       }
 
       td {
diff --git a/src/BIMDataComponents/BIMDataTable/column-filters/ColumnFilters.vue b/src/BIMDataComponents/BIMDataTable/column-filters/ColumnFilters.vue
new file mode 100644
index 00000000..7162ba07
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataTable/column-filters/ColumnFilters.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="column-filters p-12">
+    <div
+      v-if="columnElements.length === 0"
+      class="column-filters__element flex align-center"
+    >
+      <slot name="column-filter-empty"></slot>
+    </div>
+    <div
+      v-for="element in columnElements"
+      :key="element.data"
+      class="column-filters__element flex align-center"
+    >
+      <BIMDataCheckbox
+        :text="element.data"
+        :modelValue="element.checked"
+        @update:modelValue="toggle(element.data, $event)"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { computed } from "vue";
+import BIMDataCheckbox from "../../BIMDataCheckbox/BIMDataCheckbox.vue";
+export default {
+  components: {
+    BIMDataCheckbox,
+  },
+  props: {
+    column: {
+      type: Object,
+      required: true,
+    },
+    columnData: {
+      type: Array,
+      required: true,
+    },
+    filters: {
+      type: Array,
+      required: true,
+    },
+  },
+  emits: ["filter"],
+  setup(props, { emit }) {
+    const column = props.column;
+
+    const elements = computed(() => {
+      const columnData = props.columnData;
+      const newColumnData = columnData.filter(data => data !== null);
+      return [
+        ...new Set(
+          newColumnData.flatMap(data => {
+            if (!Array.isArray(data)) {
+              data = [data];
+            }
+            return column?.filterKey
+              ? data.map(d => d[column?.filterKey])
+              : data;
+          }),
+        ),
+      ];
+    });
+
+    const columnElements = computed(() =>
+      elements.value.map(element => ({
+        data: element,
+        checked: props.filters.includes(element),
+      })),
+    );
+
+    const toggle = (element, checked) => {
+      const newFilters = new Set(props.filters);
+
+      if (checked) {
+        newFilters.add(element);
+      } else {
+        newFilters.delete(element);
+      }
+
+      emit("filter", [...newFilters]);
+    };
+
+    return {
+      columnElements,
+      toggle,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./_ColumnFilters.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataTable/column-filters/_ColumnFilters.scss b/src/BIMDataComponents/BIMDataTable/column-filters/_ColumnFilters.scss
new file mode 100644
index 00000000..aa6ea222
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataTable/column-filters/_ColumnFilters.scss
@@ -0,0 +1,14 @@
+.column-filters {
+  width: 100%;
+  display: grid;
+  position: absolute;
+  left: 0;
+  background-color: var(--color-white);
+  box-shadow: var(--box-shadow);
+  gap: calc(var(--spacing-unit) / 2);
+  border-radius: calc(var(--spacing-unit) / 2);
+  z-index: 1;
+  .bimdata-checkbox {
+    font-weight: 400;
+  }
+}
diff --git a/src/BIMDataComponents/BIMDataTable/column-sorting/ColumnSorting.vue b/src/BIMDataComponents/BIMDataTable/column-sorting/ColumnSorting.vue
new file mode 100644
index 00000000..a8b2d90b
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataTable/column-sorting/ColumnSorting.vue
@@ -0,0 +1,66 @@
+<template>
+  <span
+    :class="[sortOrder === 'asc' ? 'asc' : 'desc', 'm-l-6']"
+    @mousedown.prevent
+  >
+    <BIMDataButton
+      color="primary"
+      ghost
+      rounded
+      icon
+      :class="{ active: active }"
+      @click="toggleActive"
+    >
+      <BIMDataIconCaret
+        :rotate="sortOrder === 'desc' ? 180 : 0"
+        size="xxxs"
+        fill
+        color="default"
+      />
+    </BIMDataButton>
+  </span>
+</template>
+
+<script>
+// Components
+import BIMDataButton from "../../BIMDataButton/BIMDataButton.vue";
+import BIMDataIconCaret from "../../BIMDataIcon/BIMDataIconStandalone/BIMDataIconCaret.vue";
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIconCaret,
+  },
+  props: {
+    sortOrder: {
+      type: String,
+      required: true,
+      validator: value => ["asc", "desc"].includes(value),
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+    active: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const toggleActive = () => {
+      emit("set-active", props.index);
+    };
+    return {
+      toggleActive,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+span {
+  cursor: pointer;
+}
+.active {
+  background-color: #e0eef9;
+}
+</style>
diff --git a/src/web/views/Components/Table/Table.vue b/src/web/views/Components/Table/Table.vue
index c173e722..ecfeb0bb 100644
--- a/src/web/views/Components/Table/Table.vue
+++ b/src/web/views/Components/Table/Table.vue
@@ -14,7 +14,8 @@
             :paginated="simpleExample.paginated"
             :perPage="+simpleExample.perPage"
             @selection-changed="simpleExample.selection = $event"
-          />
+          >
+          </BIMDataTable>
           <div class="selection-box">
             <div class="selection-box__label">Selection :</div>
             <div
@@ -121,6 +122,12 @@
           :rows="eventsData.slice(1)"
         />
       </div>
+      <div class="m-t-12">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 0">
+          Slots:
+        </BIMDataText>
+        <BIMDataTable :columns="slotsData[0]" :rows="slotsData.slice(1)" />
+      </div>
     </div>
 
     <div class="article-wrapper">
@@ -160,9 +167,18 @@
         <Code language="javascript">
           <pre>
             let columns = [
-              { id: "fullName", label: "Name" },
-              { id: "age", label: "Age", width: "64px" },
-              { id: "country", label: "Country", width: "200px", align: "center" }
+            { 
+              id: "fullName",
+              label: "Name",
+              sortable: true, defaultSortOrder: "asc",
+              sortFunction: (a, b) => {
+                const fullNameA = `${a.firstName} ${a.lastName}`;
+                const fullNameB = `${b.firstName} ${b.lastName}`;
+                return fullNameA &lt; fullNameB ? 1 : -1;
+              },
+              { id: "age", label: "Age", width: "64px", sortable: true, defaultSortOrder: "asc" },
+              { id: "tags", label: "Tags", width: "200px", align: "center", filter: true },
+              { id: "country", label: "Country", width: "200px", align: "center", sortable: true, defaultSortOrder: "asc" }
             ];
           </pre>
         </Code>
@@ -210,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>
@@ -262,11 +281,14 @@
 import columnsData from "./columns-data.js";
 import eventsData from "./events-data.js";
 import propsData from "./props-data.js";
+import slotsData from "./slots-data.js";
+
 // Components
 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: {
@@ -274,6 +296,7 @@ export default {
     ComponentCode,
     AgeCustomCell,
     CountryCustomCell,
+    TagsCustomCell,
   },
   data() {
     return {
@@ -298,17 +321,44 @@ export default {
           {
             id: "fullName",
             label: "Name",
+            sortable: true,
+            defaultSortOrder: "asc",
+            sortFunction: (a, b) => {
+              const fullNameA = `${a.firstName} ${a.lastName}`;
+              const fullNameB = `${b.firstName} ${b.lastName}`;
+
+              return fullNameA < fullNameB ? 1 : -1;
+            },
           },
           {
             id: "age",
             label: "Age",
             width: "64px",
+            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",
             label: "Country",
             width: "200px",
             align: "center",
+            sortable: true,
+            defaultSortOrder: "asc",
           },
         ],
         rows: [
@@ -316,36 +366,82 @@ export default {
             firstName: "John",
             lastName: "Doe",
             age: 26,
+            priority: "High",
+            tags: [
+              {
+                name: "Tag 2",
+                color: "#ff69b4",
+              },
+            ],
             country: "Germany",
           },
           {
             firstName: "Jane",
             lastName: "Doe",
             age: 21,
+            priority: "Low",
+            tags: [
+              {
+                name: "Tag 2",
+                color: "#ff69b4",
+              },
+            ],
             country: "Austria",
           },
           {
             firstName: "Martine",
             lastName: "Durand",
             age: 35,
+            priority: "Medium",
+            tags: [
+              {
+                name: "My tag",
+                color: "#2AAA8A",
+              },
+              {
+                name: "Reviewed",
+                color: "#ff6954",
+              },
+            ],
             country: "France",
           },
           {
             firstName: "Giuseppe",
             lastName: "Bompiani",
             age: 64,
+            priority: "Low",
+            tags: [
+              {
+                name: "Tag 5",
+                color: "#bf70a4",
+              },
+            ],
             country: "Italy",
           },
           {
             firstName: "Enrico",
             lastName: "Fermi",
             age: 41,
+            priority: "low",
+            tags: [
+              {
+                name: "Missing",
+                color: "#fh69u6",
+              },
+            ],
             country: "Italy",
           },
           {
             firstName: "Lev Davidovitch",
             lastName: "Landau",
             age: 23,
+            priority: "Medium",
+            tags: [
+              {
+                name: "Tag 2",
+                color: "#ff69b4",
+              },
+            ],
             country: "Russia",
           },
         ],
@@ -354,6 +450,7 @@ export default {
       propsData,
       eventsData,
       columnsData,
+      slotsData,
     };
   },
 };
diff --git a/src/web/views/Components/Table/columns-data.js b/src/web/views/Components/Table/columns-data.js
index 684a1e90..0519b01c 100644
--- a/src/web/views/Components/Table/columns-data.js
+++ b/src/web/views/Components/Table/columns-data.js
@@ -24,4 +24,29 @@ export default [
     "'left' ; 'center' ; 'right'",
     "Set how text is aligned in the column.",
   ],
+  [
+    "sortable",
+    "Boolean",
+    "If you want to sort the column, set this to true. Sortable by id value.",
+  ],
+  [
+    "defaultSortOrder",
+    "'desc' ; 'asc'",
+    "Set the default sort order for the column.",
+  ],
+  [
+    "sortFunction",
+    "Function",
+    "Set a custom sort function for the column. If not specified, the default sort function will be used.",
+  ],
+  [
+    "filter",
+    "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.",
+  ]
 ];
diff --git a/src/web/views/Components/Table/example/TagsCustomCell.vue b/src/web/views/Components/Table/example/TagsCustomCell.vue
new file mode 100644
index 00000000..d4853c2c
--- /dev/null
+++ b/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>
diff --git a/src/web/views/Components/Table/slots-data.js b/src/web/views/Components/Table/slots-data.js
new file mode 100644
index 00000000..9b9fe28e
--- /dev/null
+++ b/src/web/views/Components/Table/slots-data.js
@@ -0,0 +1,24 @@
+/* eslint-disable */
+export default [
+  [ "Slot name", "Description"],
+  [
+    "column-header-right",
+    "Use this slot to add some elements on the right of the column header.",
+  ],
+  [
+    "sub-header",
+    "Use this slot to add elements on the sub-header of the column header.",
+  ],
+  [
+    "cell-${column.id}",
+    "Use this slot with the column id to add custom content in the cell."
+  ],
+  [
+    "placeholder",
+    "Use this slot to add a custom placeholder when the table is empty."
+  ],
+  [
+    "column-filters",
+    "Use this slot to add custom filters for the table."
+  ]
+];