diff --git a/resources/jscomposition/base/buttons/OutlineButton.vue b/resources/jscomposition/base/buttons/OutlineButton.vue
index 3b492172de..d27a27ec11 100644
--- a/resources/jscomposition/base/buttons/OutlineButton.vue
+++ b/resources/jscomposition/base/buttons/OutlineButton.vue
@@ -2,9 +2,8 @@
   <button
     type="button"
     :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
-        tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
-    @click="onClick"
-  >
+      tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+    @click.prevent.stop="onClick">
     <slot />
   </button>
 </template>
diff --git a/resources/jscomposition/base/form/Dropdown.vue b/resources/jscomposition/base/form/Dropdown.vue
index 1e28d9eff9..6c2e839aad 100644
--- a/resources/jscomposition/base/form/Dropdown.vue
+++ b/resources/jscomposition/base/form/Dropdown.vue
@@ -1,18 +1,17 @@
 <template>
-  <div class="tw-relative">
+  <div
+    ref="inputRef"
+    class="tw-relative">
     <slot
       v-bind="{
         toogleShow,
-        data
+        data,
       }"
-      name="input"
-    >
+      name="input">
       <button
-        class="tw-flex tw-w-full tw-justify-between tw-items-center
-          tw-py-2 tw-px-3 tw-ring-1 tw-ring-inset tw-ring-gray-300 tw-rounded-lg
-          focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-primary-400"
-        @click.prevent.stop="toogleShow"
-      >
+        class="tw-flex tw-w-full tw-justify-between tw-items-center tw-py-2 tw-px-3 tw-ring-1 tw-ring-inset
+        tw-ring-gray-300 tw-rounded-lg focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-primary-400"
+        @click.prevent.stop="toogleShow">
         <span>{{ data?.label || data?.value }} </span>
 
         <i class="fas fa-chevron-down" />
@@ -22,36 +21,34 @@
     <transition :name="animation">
       <div
         v-if="show"
-        class="tw-block tw-mt-1 tw-rounded-lg tw-absolute tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
-      >
+        class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
+        :style="{ width: `${widthContainer}px`, top: `${top}px` }">
         <ul class="tw-list-none tw-overflow-hidden tw-rounded">
           <slot
             name="options"
             v-bind="{
               options: optionsModel,
               data,
-              onClick
-            }"
-          >
+              onClick,
+            }">
             <li
-              v-for="(option, index ) in optionsModel"
+              v-for="(option, index) in optionsModel"
               :key="index"
               class="hover:tw-bg-gray-200"
-              @click.prevent.stop="onClick(option, index)"
-            >
+              @click.prevent.stop="onClick(option, index)">
               <slot
                 name="option"
                 v-bind="{
                   option,
-                  data
-                }"
-              >
+                  data,
+                }">
                 <span
                   :class="{
-                    'tw-bg-gray-300': option?.value === data?.value
+                    'tw-bg-gray-300': option?.value === data?.value,
                   }"
-                  class="tw-flex tw-py-2 tw-px-4 transition duration-300"
-                >{{ option.label || option.value }}</span>
+                  class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+                  {{ option.label || option.value }}
+                </span>
               </slot>
             </li>
           </slot>
@@ -63,9 +60,8 @@
 
 <script>
 import {
-  defineComponent, ref, computed, onMounted, onUnmounted,
+  defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
 } from "vue";
-
 /**
  * <Dropdown
  *  animation="fade"
@@ -95,7 +91,10 @@ export default defineComponent({
   },
   emits: ["input", "change"],
   setup(props, { emit }) {
+    const inputRef = ref();
     const show = ref(false);
+    const widthContainer = ref(100);
+    const top = ref(0);
 
     const data = computed({
       get() {
@@ -115,19 +114,42 @@ export default defineComponent({
       },
     });
 
-    const onClick = (option, index) => {
+    const onClick = (option) => {
       show.value = false;
       data.value = option;
 
       emit("change", option);
     };
 
+    const calculatePosition = () => {
+      const rect = inputRef.value?.getBoundingClientRect();
+
+      widthContainer.value = rect.width || 100;
+
+      let container = inputRef.value.parentElement;
+      let topPosition = 0;
+
+      while (container && container !== document.body) {
+        // If the container has scroll, we add their offsets
+        if (container.scrollTop || container.scrollLeft) {
+          topPosition += container.scrollTop;
+        }
+        container = container.parentElement;
+      }
+
+      top.value = inputRef.value.offsetTop - topPosition;
+    };
+
     const addBodyListener = () => {
       show.value = false;
     };
 
-    const toogleShow = () => {
-      show.value = !show.value;
+    const toogleShow = ($event) => {
+      calculatePosition($event);
+
+      nextTick(() => {
+        show.value = !show.value;
+      });
     };
 
     onMounted(() => {
@@ -141,7 +163,10 @@ export default defineComponent({
     return {
       show,
       data,
+      inputRef,
       optionsModel,
+      top,
+      widthContainer,
       onClick,
       toogleShow,
     };
@@ -151,59 +176,71 @@ export default defineComponent({
 
 <style scoped>
 /* Animations */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .1s;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s;
 }
-.fade-enter, .fade-leave-to {
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }
 
 /* Slide-in-up animation*/
-.slide-in-up-enter-active, .slide-in-up-leave-active {
-  transition: all .5s;
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+  transition: all 0.5s;
   transform: translateY(0);
 }
-.slide-in-up-enter, .slide-in-up-leave-to {
+.slide-in-up-enter,
+.slide-in-up-leave-to {
   opacity: 0;
   transform: translateY(20px);
 }
 
 /* Slide-in-right animation*/
-.slide-in-right-enter-active, .slide-in-right-leave-active {
-  transition: all .5s;
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+  transition: all 0.5s;
   transform: translateX(0);
 }
-.slide-in-right-enter, .slide-in-right-leave-to {
+.slide-in-right-enter,
+.slide-in-right-leave-to {
   opacity: 0;
   transform: translateX(20px);
 }
 
 /* Slide-in-left animation*/
-.slide-in-left-enter-active, .slide-in-left-leave-active {
-  transition: all .5s;
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+  transition: all 0.5s;
   transform: translateX(0);
 }
-.slide-in-left-enter, .slide-in-left-leave-to {
+.slide-in-left-enter,
+.slide-in-left-leave-to {
   opacity: 0;
   transform: translateX(-20px);
 }
 
 /* Scale animation*/
-.scale-enter-active, .scale-leave-active {
-  transition: all .5s;
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.5s;
   transform: scale(1);
 }
-.scale-enter, .scale-leave-to {
+.scale-enter,
+.scale-leave-to {
   opacity: 0;
   transform: scale(0);
 }
 
 /* Rotate animation*/
-.rotate-enter-active, .rotate-leave-active {
-  transition: all .5s;
+.rotate-enter-active,
+.rotate-leave-active {
+  transition: all 0.5s;
   transform: scale(1) rotate(-360deg);
 }
-.rotate-enter, .rotate-leave-to {
+.rotate-enter,
+.rotate-leave-to {
   opacity: 0;
   transform: scale(0) rotate(360deg);
 }
diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
index bb53201379..85961890bf 100644
--- a/resources/jscomposition/base/table/BaseTable.vue
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
+  <div
+    class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
       tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
     <table class="tw-w-full tw-border-collapse">
       <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
@@ -9,19 +10,24 @@
             :key="index"
             :columns="columns"
             :column="column">
-            <slot :name="`theader-${column.header}`"> </slot>
+            <slot :name="`theader-${column.field}`" />
+            <template #filter>
+              <slot :name="`theader-filter-${column.field}`" />
+            </template>
           </THeader>
         </tr>
       </thead>
       <tbody>
-        <TRow v-for="(row, indexRow) in data" :key="indexRow">
+        <TRow
+          v-for="(row, indexRow) in data"
+          :key="indexRow">
           <TCell
             v-for="(column, indexColumn) in columns"
             :key="indexColumn"
             :columns="columns"
             :column="column"
             :row="row">
-            <slot :name="`tcell-${indexRow}-${column.field}`"> </slot>
+            <slot :name="`tcell-${indexRow}-${column.field}`" />
           </TCell>
         </TRow>
       </tbody>
@@ -35,17 +41,6 @@ import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 import TCell from "./TCell.vue";
 
-function generateUniqueId(length = 8) {
-  const charset =
-    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let uniqueId = "";
-  for (let i = 0; i < length; i++) {
-    const randomIndex = Math.floor(Math.random() * charset.length);
-    uniqueId += charset[randomIndex];
-  }
-  return uniqueId;
-}
-
 export default defineComponent({
   components: {
     THeader,
@@ -66,7 +61,7 @@ export default defineComponent({
       default: () => ({}),
     },
   },
-  setup(props, { emit }) {
+  setup() {
     return {};
   },
 });
diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue
index cd10c14b54..a23f096302 100644
--- a/resources/jscomposition/base/table/THeader.vue
+++ b/resources/jscomposition/base/table/THeader.vue
@@ -1,17 +1,21 @@
 <template>
   <th>
-    <div class="tw-flex tw-justify-between">
+    <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-justify-between">
       <div
-        class="tw-w-full tw-relative tw-py-4 tw-px-3 tw-text-left
-         tw-overflow-hidden tw-whitespace-nowrap tw-text-ellipsis"
+        class="tw-py-4 tw-px-3 tw-text-left tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
         :style="{ width: width + 'px' }">
         <slot>
           {{ getValue() }}
         </slot>
       </div>
+
+      <div class="tw-h-auto tw-flex tw-items-center">
+        <slot name="filter" />
+      </div>
+
       <div
         :class="{ '!tw-cursor-col-resize': column.resizable }"
-        class="tw-w-[10px] tw-cursor-default tw-border-r tw-border-gray-400"
+        class="tw-w-[5px] tw-cursor-default tw-border-r tw-border-gray-400"
         @mousedown="column.resizable ? columnResize.startResize($event) : null">
         &nbsp;
       </div>
@@ -38,9 +42,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const columnResize = columnResizeComposable(props.column);
 
-    const width = computed(() => {
-      return props.column.width || 200;
-    });
+    const width = computed(() => props.column.width || 200);
 
     const getValue = () => {
       if (isFunction(props.column?.headerFormatter)) {
diff --git a/resources/jscomposition/base/ui/AppPopover.vue b/resources/jscomposition/base/ui/AppPopover.vue
index 306646a0b6..729717638a 100644
--- a/resources/jscomposition/base/ui/AppPopover.vue
+++ b/resources/jscomposition/base/ui/AppPopover.vue
@@ -1,19 +1,19 @@
 <template>
   <div
-    class="tooltip-wrapper"
     ref="tooltipWrapper"
+    class="tooltip-wrapper"
     @mouseenter="($event) => hover && showTooltip($event)"
     @mouseleave="($event) => hover && hideTooltip($event)">
-    <slot name="default"></slot>
+    <slot name="default" />
     <div
       v-if="visible"
+      ref="tooltip"
       class="tooltip-content"
       :style="{
         top: `${tooltipPosition.top}px`,
         left: `${tooltipPosition.left}px`,
       }"
-      :class="calculatedPosition"
-      ref="tooltip">
+      :class="calculatedPosition">
       <slot name="content">
         {{ content }}
       </slot>
@@ -22,7 +22,9 @@
 </template>
 
 <script>
-import { ref, watch, onMounted, nextTick, onUnmounted, computed } from "vue";
+import {
+  ref, watch, onMounted, nextTick, onUnmounted, computed,
+} from "vue";
 
 export default {
   props: {
@@ -50,13 +52,11 @@ export default {
     const visible = props.hover
       ? ref(false)
       : computed({
-          get: () => {
-            return props.value;
-          },
-          set: (val) => {
-            emit("input", val);
-          },
-        });
+        get: () => props.value,
+        set: (val) => {
+          emit("input", val);
+        },
+      });
     const calculatedPosition = ref(props.position);
 
     const calculatePosition = () => {
@@ -87,6 +87,13 @@ export default {
             calculatedPosition.value = "top";
             top = wrapperRect.top - tooltipRect.height - 10;
           }
+
+          const leftaux = wrapperRect.left - tooltipRect.width - 10;
+          // Verify space left
+          if (leftaux < 0) {
+            calculatedPosition.value = "right-bottom";
+            left = wrapperRect.right + 100;
+          }
           break;
         case "left":
           top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
@@ -108,7 +115,7 @@ export default {
           break;
       }
 
-      //Verify if tooltip leaves the viewport
+      // Verify if tooltip leaves the viewport
       top = Math.max(10, Math.min(top, viewportHeight - tooltipRect.height - 10));
       left = Math.max(10, Math.min(left, viewportWidth - tooltipRect.width - 10));
 
@@ -126,6 +133,12 @@ export default {
       visible.value = false;
     };
 
+    const clickIntoPopover = (event) => {
+      if (!tooltipWrapper.value.contains(event.target)) {
+        hideTooltip();
+      }
+    };
+
     // Recalculated position when property visible changes
     const unwatch = watch(
       () => props.value,
@@ -135,7 +148,7 @@ export default {
         } else {
           hideTooltip();
         }
-      }
+      },
     );
 
     onMounted(() => {
@@ -143,11 +156,11 @@ export default {
         showTooltip();
       }
 
-      !props.hover && document.body.addEventListener("click", hideTooltip);
+      !props.hover && document.body.addEventListener("click", clickIntoPopover);
     });
 
     onUnmounted(() => {
-      !props.hover && document.body.removeEventListener("click", hideTooltip);
+      document.body.removeEventListener("click", clickIntoPopover);
       unwatch();
     });
 
@@ -190,4 +203,9 @@ export default {
 .tooltip-content.right {
   transform: translateY(-50%);
 }
+
+.tooltip-content.right-bottom {
+  transform: translateY(-50%);
+  transform: translateX(-50%);
+}
 </style>
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
index ac5248a257..a2a1477a5d 100644
--- a/resources/jscomposition/cases/casesDetail/config/columns.js
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -1,5 +1,6 @@
-import BadgeContainer from "../../casesMain/components/BadgesSection.vue";
-import AvatarContainer from "../../casesMain/components/AvatarContainer.vue";
+import {
+  StatusCell,
+} from "../../../system/index";
 
 export default {};
 
@@ -30,7 +31,6 @@ const assignedColumn = () => ({
   header: "Assigned",
   resizable: true,
   width: 200,
-  cellRenderer: () => AvatarContainer,
 });
 
 const dueDateColumn = () => ({
@@ -67,7 +67,7 @@ const statusColumn = () => ({
   header: "Status",
   resizable: true,
   width: 200,
-  cellRenderer: () => BadgeContainer,
+  cellRenderer: () => StatusCell,
 });
 
 const startedColumn = () => ({
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index 382e9ea959..51e1526489 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -1,10 +1,14 @@
 <template>
-  <div class="tw-w-full tw-space-y-3 tw-flex tw-flex-col tw-overflow-hidden">
+  <div
+    class="tw-w-full tw-space-y-3 tw-flex tw-flex-col tw-overflow-hidden">
     <CaseFilter />
 
     <BadgesSection v-model="badgesData" />
 
-    <BaseTable :columns="columnsConfig" :data="data" class="tw-grow tw-overflow-y-scroll" />
+    <FilterableTable
+      :columns="columnsConfig"
+      :data="data"
+      class="tw-grow tw-overflow-y-scroll" />
 
     <Pagination />
   </div>
@@ -13,33 +17,32 @@
 import { defineComponent, ref, onMounted } from "vue";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
-import { BaseTable, Pagination } from "../../base";
+import { Pagination } from "../../base";
 import { getColumns } from "./config/columns";
-import { Breadcrums } from "../../system";
+import { FilterableTable } from "../../system";
 import { badges } from "./config/badges";
-import { getData, getAllData } from "./api";
+import { getAllData } from "./api";
 
 export default defineComponent({
+  components: {
+    CaseFilter,
+    BadgesSection,
+    Pagination,
+    FilterableTable,
+  },
   props: {
     listId: {
       type: String,
       default: () => "myCases",
     },
   },
-  components: {
-    CaseFilter,
-    BadgesSection,
-    BaseTable,
-    Pagination,
-    Breadcrums,
-  },
-  setup(props, { emit }) {
+  setup(props) {
     const badgesData = ref(badges);
     const columnsConfig = ref();
     const data = ref();
 
     onMounted(async () => {
-      data.value = await getAllData({type: props.listId, page:15});
+      data.value = await getAllData({ type: props.listId, page: 15 });
 
       columnsConfig.value = getColumns(props.listId);
     });
diff --git a/resources/jscomposition/cases/casesMain/CasesMain.vue b/resources/jscomposition/cases/casesMain/CasesMain.vue
index 1535407048..7bdc904212 100644
--- a/resources/jscomposition/cases/casesMain/CasesMain.vue
+++ b/resources/jscomposition/cases/casesMain/CasesMain.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="tw-w-full tw-space-y-4 tw-flex-col tw-flex tw-grow">
-    <Breadcrums :pages="pages"/>
+    <Breadcrums :pages="pages" />
 
-    <div class="tw-mx-4 tw-p-4 tw-bg-white tw-rounded-2xl 
-      tw-border-gray-200 tw-border tw-space-y-4 tw-flex tw-flex-col tw-overflow-hidden tw-grow tw-shadow-md">
+    <div
+      class="tw-mx-4 tw-p-4 tw-bg-white tw-rounded-2xl
+      tw-border-gray-200 tw-border tw-space-y-4 tw-flex
+      tw-flex-col tw-overflow-hidden tw-grow tw-shadow-md">
       <AppCounters
-        class="tw-w-full"
         v-model="countersData"
+        class="tw-w-full"
         @change="onChangeCounter" />
-
       <RouterView :key="route.fullPath" />
     </div>
   </div>
@@ -34,7 +35,7 @@ export default defineComponent({
     const pages = ref([]);
 
     const onChangeCounter = (counter) => {
-      if (typeof counter.url == "function") {
+      if (typeof counter.url === "function") {
         return counter.url();
       }
 
@@ -47,7 +48,7 @@ export default defineComponent({
     onMounted(async () => {
       const resCounters = await getCounters();
       const currentCounter = countersData.value.find((counter) => counter.url === route.path);
-      
+
       countersData.value = formatCounters(resCounters);
       pages.value = [
         configHomeBreadcrum(),
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index 69110dd672..40b201cfcf 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -1,18 +1,17 @@
-import AvatarContainer from "../components/AvatarContainer.vue";
+import moment from "moment";
 import {
   CaseTitleCell,
   TruncatedOptionsCell,
   ParticipantsCell,
   StatusCell,
 } from "../../../system/index";
-import moment from "moment";
 
 const formatDate = (value, format) => {
   let config = "DD/MM/YYYY hh:mm";
   if (
-    typeof ProcessMaker !== "undefined" &&
-    ProcessMaker.user &&
-    ProcessMaker.user.datetime_format
+    typeof ProcessMaker !== "undefined"
+    && ProcessMaker.user
+    && ProcessMaker.user.datetime_format
   ) {
     if (format === "datetime") {
       config = ProcessMaker.user.datetime_format;
@@ -34,13 +33,14 @@ export default {};
 /**
  * Example Column
  * field: String
- * headerName: String
+ * header: String
  * headerFormatter: callback
  * resizable: Boolean
  * visible: Callback
  * formatter: Callback - Build the value in the cell
  * width: Number
  * cellRenderer: Object Vue to custom the cell
+ * filter: This attribute is optional
  */
 
 // My cases: [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
@@ -51,78 +51,96 @@ export default {};
 
 export const caseNumberColumn = () => ({
   field: "case_number",
-  headerName: "Case #",
+  header: "Case #",
   resizable: true,
   width: 100,
+  filter: {
+    type: "string",
+    operators: ["=", ">", ">=", "in", "between"],
+  },
 });
 
 export const caseTitleColumn = () => ({
   field: "case_title",
-  headerName: "Case Title",
+  header: "Case Title",
   resizable: true,
   width: 200,
-  cellRenderer: () => {
-    return CaseTitleCell;
+  cellRenderer: () => CaseTitleCell,
+  filter: {
+    type: "string",
+    operators: ["=", ">", ">=", "in", "between"],
   },
 });
 
 export const processColumn = () => ({
   field: "processes",
-  headerName: "Process",
+  header: "Process",
   resizable: true,
   width: 200,
-  cellRenderer: () => {
-    return TruncatedOptionsCell;
+  cellRenderer: () => TruncatedOptionsCell,
+  filter: {
+    type: "string",
+    operators: ["="],
   },
 });
 
 export const taskColumn = () => ({
   field: "tasks",
-  headerName: "Task",
+  header: "Task",
   resizable: true,
   width: 200,
-  cellRenderer: () => {
-    return TruncatedOptionsCell;
+  cellRenderer: () => TruncatedOptionsCell,
+  filter: {
+    type: "string",
+    operators: ["="],
   },
 });
 
 export const participantsColumn = () => ({
   field: "participants",
-  headerName: "Participants",
+  header: "Participants",
   resizable: true,
   width: 200,
-  cellRenderer: () => {
-    return ParticipantsCell;
+  cellRenderer: () => ParticipantsCell,
+  filter: {
+    type: "string",
+    operators: ["="],
   },
 });
 
 export const statusColumn = () => ({
   field: "case_status",
-  headerName: "Status",
+  header: "Status",
   resizable: true,
   width: 200,
-  cellRenderer: () => {
-    return StatusCell;
+  cellRenderer: () => StatusCell,
+  filter: {
+    type: "string",
+    operators: ["="],
   },
 });
 
 export const startedColumn = () => ({
   field: "initiated_at",
-  headerName: "Started",
+  header: "Started",
   resizable: true,
   width: 200,
-  formatter: (row, column, columns) => {
-    return formatDate(row.initiated_at, "datetime");
+  formatter: (row, column, columns) => formatDate(row.initiated_at, "datetime"),
+  filter: {
+    type: "datetime",
+    operators: ["between", ">", ">=", "<", "<="],
   },
 });
 
 export const completedColumn = () => ({
   field: "completed_at",
-  headerName: "Completed",
+  header: "Completed",
   resizable: true,
   width: 200,
-  formatter: (row, column, columns) => {
-    return formatDate(row.completed_at, "datetime");
+  formatter: (row, column, columns) => formatDate(row.completed_at, "datetime"),
+  filter: {
+    type: "datetime",
+    operators: ["between", ">", ">=", "<", "<="],
   },
 });
 
diff --git a/resources/jscomposition/system/table/FilterableTable.vue b/resources/jscomposition/system/table/FilterableTable.vue
new file mode 100644
index 0000000000..2af1e92220
--- /dev/null
+++ b/resources/jscomposition/system/table/FilterableTable.vue
@@ -0,0 +1,40 @@
+<template>
+  <BaseTable
+    :columns="columns"
+    :data="data"
+    class="tw-grow tw-overflow-y-scroll">
+    <template
+      v-for="(column, index) in columns"
+      v-slot:[`theader-filter-${column.field}`]>
+      <FilterColumn
+        v-if="column.filter"
+        :key="index"
+        :filter="column.filter"/>
+    </template>
+  </BaseTable>
+</template>
+<script>
+import { defineComponent } from "vue";
+import { BaseTable } from "../../base";
+import FilterColumn from "./filter/FilterColumn.vue";
+
+export default defineComponent({
+  components: {
+    BaseTable,
+    FilterColumn,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/CaseTitleCell.vue b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
index 07c430d5c2..f1e0f96701 100644
--- a/resources/jscomposition/system/table/cell/CaseTitleCell.vue
+++ b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
@@ -4,18 +4,21 @@
       v-if="row.case_title_formatted"
       class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
       :style="{ width: column.width + 'px' }"
-      v-html="row.case_title_formatted" />
+      v-html="row.case_title_formatted" 
+      />
     <slot
       v-else
       :columns="columns"
       :column="column"
-      :row="row">
+      :row="row"
+    >
       {{ getValue() }}
     </slot>
   </div>
 </template>
 <script>
 import { defineComponent } from "vue";
+
 export default defineComponent({
   props: {
     columns: {
diff --git a/resources/jscomposition/system/table/cell/ParticipantsCell.vue b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
index ae7ba0a69e..4d00a596bb 100644
--- a/resources/jscomposition/system/table/cell/ParticipantsCell.vue
+++ b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
@@ -2,16 +2,18 @@
   <div class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-center">
     <div
       v-for="(participant, index) in participants"
+      :key="index"
       class="tw-group">
       <AppPopover
         position="bottom"
-        :hover="true">
+        :hover="true"
+      >
         <AppAvatar
-          :key="index"
+
           :class="`${participant.color}`"
           :initials="participant.name[0]"
-          class="tw-cursor-pointer">
-        </AppAvatar>
+          class="tw-cursor-pointer"
+        />
 
         <template #content>
           <div class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
@@ -23,7 +25,8 @@
 
     <span
       v-if="participants.length == 1"
-      class="tw-px-2">
+      class="tw-px-2"
+    >
       {{ participants[0].name }}
     </span>
   </div>
@@ -43,9 +46,7 @@ const colors = [
   "tw-bg-purple-500",
 ];
 
-const getRandomInt = (max) => {
-  return Math.floor(Math.random() * max);
-};
+const getRandomInt = (max) => Math.floor(Math.random() * max);
 
 export default defineComponent({
   components: {
@@ -66,7 +67,7 @@ export default defineComponent({
       default: () => ({}),
     },
   },
-  setup(props, { emit }) {
+  setup(props) {
     const participants = computed(() => {
       const response = props.row[props.column.field].map((e) => ({
         ...e,
diff --git a/resources/jscomposition/system/table/filter/FilterColumn.vue b/resources/jscomposition/system/table/filter/FilterColumn.vue
new file mode 100644
index 0000000000..aa5718a5cb
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/FilterColumn.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <AppPopover
+      v-model="show"
+      :hover="false"
+      position="bottom">
+      <i
+        class="hover:tw-cursor-pointer tw-px-1 fas fa-ellipsis-v"
+        @click.prevent.stop="onClick" />
+
+      <template #content>
+        <div
+          class="tw-shadow-md tw-text-xs tw-p-4 tw-h-60 tw-space-y-2 tw-flex tw-flex-col tw-justify-between
+            tw-font-normal tw-bg-white tw-text-gray-600tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300">
+          <SortingButtons
+            @asc="onAsc"
+            @desc="onDesc" />
+
+          <div class="tw-grow tw-overflow-auto tw-space-y-4">
+            <FilterOperator
+              ref="filterOperatorsRef"
+              :operators="filter.operators"
+              :type="filter.type"
+              @change="(e) => onChangeFilterOperator(e)" />
+          </div>
+
+          <FooterButtons />
+        </div>
+      </template>
+    </AppPopover>
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "vue";
+import { AppPopover } from "../../../base/index";
+import SortingButtons from "./SortingButtons.vue";
+import FilterOperator from "./operator/FilterOperator.vue";
+import FooterButtons from "./FooterButtons.vue";
+
+export default defineComponent({
+  components: {
+    AppPopover,
+    SortingButtons,
+    FilterOperator,
+    FooterButtons,
+  },
+  props: {
+    // FilterInterface {
+    //   operators = []  Array
+    //   type = null String
+    // }
+    filter: Object,
+  },
+  setup() {
+    const show = ref(false);
+
+    // Model that saves the values
+    const filterOperator = ref({
+      id: new Date().getTime(),
+      value: null,
+    });
+
+    const onClick = () => {
+      show.value = !show.value;
+    };
+
+    const onAsc = () => {};
+
+    const onDesc = () => {};
+
+    const onChangeFilterOperator = (element) => {
+      filterOperator.value.value = element;
+    };
+
+    return {
+      show,
+      filterOperator,
+      onClick,
+      onAsc,
+      onDesc,
+      onChangeFilterOperator,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/FooterButtons.vue b/resources/jscomposition/system/table/filter/FooterButtons.vue
new file mode 100644
index 0000000000..7f733e2859
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/FooterButtons.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="tw-flex tw-space-x-2 tw-justify-end tw-font-semibold">
+    <OutlineButton class="!tw-py-2">
+      <span>{{ $t("Cancel") }}</span>
+    </OutlineButton>
+
+    <OutlineButton class="!tw-py-2">
+      <span>{{ $t("Clear") }}</span>
+    </OutlineButton>
+
+    <OutlineButton
+      class="!tw-py-2 tw-bg-gray-500 tw-text-white hover:tw-bg-gray-700">
+      <span>{{ $t("Apply") }}</span>
+    </OutlineButton>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+import { OutlineButton } from "../../../base/index";
+
+export default defineComponent({
+  components: {
+    OutlineButton,
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/SortingButtons.vue b/resources/jscomposition/system/table/filter/SortingButtons.vue
new file mode 100644
index 0000000000..bfc4d66f76
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/SortingButtons.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="tw-flex tw-justify-center tw-text-gray-500 tw-text-xs">
+    <div
+      class="tw-space-x-2 tw-inline-flex tw-items-center
+        tw-rounded-l-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset
+        tw-ring-gray-300 hover:tw-bg-gray-100 focus:tw-z-10"
+      @click="$emit('asc')">
+      <i class="fas fa-sort-amount-up-alt" />
+
+      <span>{{ $t("Sort Ascending") }}</span>
+    </div>
+
+    <div
+      class="tw-space-x-2 -tw-ml-px tw-inline-flex tw-items-center
+        tw-rounded-r-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset tw-ring-gray-300
+        hover:tw-bg-gray-100 focus:tw-z-10"
+      @click="$emit('desc')">
+      <i class="fas fa-sort-amount-down" />
+
+      <span>{{ $t("Sort Descending") }}</span>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/index.js b/resources/jscomposition/system/table/filter/index.js
new file mode 100644
index 0000000000..7f7682fb96
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/index.js
@@ -0,0 +1,11 @@
+import FilterColumn from "./FilterColumn.vue";
+import FooterButtons from "./FooterButtons.vue";
+import SortingButtons from "./SortingButtons.vue";
+
+export * from "./operator";
+
+export {
+  FilterColumn,
+  FooterButtons,
+  SortingButtons,
+};
diff --git a/resources/jscomposition/system/table/filter/operator/BetweenOperator.vue b/resources/jscomposition/system/table/filter/operator/BetweenOperator.vue
new file mode 100644
index 0000000000..19182999e8
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/BetweenOperator.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="tw-flex tw-space-x-2">
+    <input
+      v-for="(element, index) in inputs"
+      :key="index"
+      v-model="inputs[index].value"
+      :placeholder="placeholder"
+      type="text"
+      class="tw-p-2 tw-rounded-md tw-border-0
+        tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
+        focus:tw-ring-2 focus:tw-ring-inset"
+      @change="onChange()">
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  props: {
+    placeholder: {
+      type: String,
+      default: () => ("value"),
+    },
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const inputs = ref([
+      {
+        id: "from",
+        value: null,
+      },
+      {
+        id: "to",
+        value: null,
+      },
+    ]);
+
+    const onChange = () => {
+      emit("change", inputs.value);
+    };
+
+    return {
+      inputs,
+      onChange,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue b/resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue
new file mode 100644
index 0000000000..f89cfb1a6f
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="tw-flex tw-flex-col tw-space-y-2">
+    <input
+      v-for="(element, index) in inputs"
+      :key="index"
+      v-model="inputs[index].value"
+      :placeholder="placeholder"
+      type="datetime-local"
+      class="tw-p-2 tw-rounded-md tw-border-0
+        tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
+        focus:tw-ring-2 focus:tw-ring-inset"
+      @change="onChange()">
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  props: {
+    placeholder: {
+      type: String,
+      default: () => ("value"),
+    },
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const inputs = ref([
+      {
+        id: "from",
+        value: null,
+      },
+      {
+        id: "to",
+        value: null,
+      },
+    ]);
+
+    const onChange = () => {
+      emit("change", inputs.value);
+    };
+
+    return {
+      inputs,
+      onChange,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/operator/DateOperator.vue b/resources/jscomposition/system/table/filter/operator/DateOperator.vue
new file mode 100644
index 0000000000..ffa69b243e
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/DateOperator.vue
@@ -0,0 +1,18 @@
+<template>
+  <input
+    type="datetime-local"
+    class="tw-px-2 tw-block tw-w-full tw-rounded-md
+        tw-border-0 tw-py-2 tw-text-gray-900 tw-shadow-sm tw-ring-1
+          tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
+          focus:tw-ring-2 focus:tw-ring-inset"
+    @change="$emit('change', $event.target.value)">
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/operator/FilterOperator.vue b/resources/jscomposition/system/table/filter/operator/FilterOperator.vue
new file mode 100644
index 0000000000..8e7641af48
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/FilterOperator.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="tw-space-y-2 tw-text-xs">
+    <slot name="header" />
+
+    <Dropdown
+      v-model="operator"
+      :options="operatorsModel"
+      @change="onChangeOperator" />
+
+    <component
+      :is="operatorType?.component()"
+      placeholder="Type value"
+      class="tw-flex-1"
+      @change="onChangeValue" />
+  </div>
+</template>
+<script>
+import {
+  defineComponent, ref, onMounted,
+} from "vue";
+import { Dropdown } from "../../../../base";
+import { getOperatorType } from "./operatorConfig";
+
+const defaultOperators = [
+  {
+    value: "=",
+    label: "=",
+  },
+  {
+    value: ">",
+    label: ">",
+  },
+  {
+    value: ">=",
+    label: ">=",
+  },
+  {
+    value: "<",
+    label: ">",
+  },
+  {
+    value: "<=",
+    label: "<=",
+  },
+  {
+    value: "between",
+    label: "between",
+  },
+  {
+    value: "in",
+    label: "in",
+  },
+  {
+    value: "contains",
+    label: "contains",
+  },
+  {
+    value: "regex",
+    label: "regex",
+  },
+];
+
+export default defineComponent({
+  components: {
+    Dropdown,
+  },
+  props: {
+    operators: {
+      type: Array,
+      default: () => [],
+    },
+    type: {
+      type: String,
+      default: () => "string", // string , number , datetime
+    },
+  },
+  setup(props, { emit }) {
+    const operatorsModel = ref(defaultOperators);
+
+    const operator = ref({
+      value: "=",
+      label: "=",
+    });
+
+    const operatorType = ref();
+
+    const onChangeOperator = (val) => {
+      operatorType.value = getOperatorType(val.value, props.type);
+    };
+
+    // Get the values of the input, datetime, between etc and emit the change to the parent
+    const onChangeValue = (e) => {
+      emit("change", {
+        operator: operator.value.value,
+        value: e,
+      });
+    };
+
+    onMounted(() => {
+      // Selecting the operators to show in dropdown
+      operatorsModel.value = defaultOperators.filter((op) => {
+        if (!props.operators.length) {
+          return op;
+        }
+
+        return props.operators.includes(op.value);
+      });
+
+      // Load first operator with its components
+      operatorType.value = getOperatorType(
+        operatorsModel.value[0].value,
+        props.type,
+      );
+    });
+
+    return {
+      operator,
+      operatorType,
+      operatorsModel,
+      onChangeOperator,
+      onChangeValue,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/operator/InOperator.vue b/resources/jscomposition/system/table/filter/operator/InOperator.vue
new file mode 100644
index 0000000000..b12b073084
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/InOperator.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="tw-space-y-2 tw-items-center">
+    <div
+      v-for="(element, index) in inputs"
+      :key="index"
+      class="tw-flex tw-space-x-1 tw-items-center">
+      <input
+        v-model="inputs[index].value"
+        type="text"
+        class="tw-px-2 tw-block tw-w-full tw-rounded-md tw-border-0
+          tw-py-2 tw-text-gray-900 tw-shadow-sm tw-ring-1 tw-ring-inset
+          tw-ring-gray-300 placeholder:tw-text-gray-400 focus:tw-ring-2
+          focus:tw-ring-inset focus:tw-ring-indigo-600"
+        @change="onChange">
+
+      <span
+        class="tw-h-5 tw-w-6 tw-text-[10px] tw-justify-center
+          tw-flex tw-items-center tw-rounded-md hover:tw-bg-gray-300
+          tw-border tw-border-color-gray-400">
+        <i
+          class="fas fa-plus"
+          @click.prevent.stop="addInput" />
+      </span>
+
+      <span
+        class="tw-h-5 tw-w-6 tw-text-[10px] tw-justify-center
+        tw-flex tw-items-center tw-rounded-md hover:tw-bg-gray-300
+        tw-border tw-border-color-gray-400">
+        <i
+          class="fas fa-minus"
+          @click.prevent.stop="removeInput(index)" />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  setup(props, { emit }) {
+    const inputs = ref([
+      {
+        id: new Date().getTime(),
+        value: null,
+      },
+    ]);
+
+    const addInput = () => {
+      inputs.value.push({
+        id: new Date().getTime(),
+        value: null,
+      });
+    };
+
+    const removeInput = (index) => {
+      inputs.value.splice(index, 1);
+    };
+
+    const onChange = () => {
+      emit("change", inputs.value);
+    };
+
+    return {
+      inputs,
+      addInput,
+      removeInput,
+      onChange,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/operator/InputOperator.vue b/resources/jscomposition/system/table/filter/operator/InputOperator.vue
new file mode 100644
index 0000000000..82ea3fc6b0
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/InputOperator.vue
@@ -0,0 +1,17 @@
+<template>
+  <input
+    type="text"
+    class="tw-px-2 tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-text-gray-900
+      tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
+      focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-indigo-600"
+    @change="$emit('change', $event.target.value)">
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/operator/index.js b/resources/jscomposition/system/table/filter/operator/index.js
new file mode 100644
index 0000000000..b1c78c6c8e
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/index.js
@@ -0,0 +1,15 @@
+import BetweenOperator from "./BetweenOperator.vue";
+import FilterOperator from "./FilterOperator.vue";
+import InOperator from "./InOperator.vue";
+import InputOperator from "./InputOperator.vue";
+import DateOperator from "./DateOperator.vue";
+import DateBetweenOperator from "./DateBetweenOperator.vue";
+
+export {
+  BetweenOperator,
+  FilterOperator,
+  InOperator,
+  InputOperator,
+  DateOperator,
+  DateBetweenOperator,
+};
diff --git a/resources/jscomposition/system/table/filter/operator/operatorConfig.js b/resources/jscomposition/system/table/filter/operator/operatorConfig.js
new file mode 100644
index 0000000000..366769d6c4
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/operatorConfig.js
@@ -0,0 +1,39 @@
+import InputOperator from "./InputOperator.vue";
+import BetweenOperator from "./BetweenOperator.vue";
+import InOperator from "./InOperator.vue";
+import DateOperator from "./DateOperator.vue";
+import DateBetweenOperator from "./DateBetweenOperator.vue";
+
+const operatorType = [
+  {
+    operator: ["=", ">", "<", ">=", "<=", "contains", "regex"],
+    type: ["number", "string"],
+    component: () => InputOperator,
+  },
+  {
+    operator: ["between"],
+    type: ["number", "string"],
+    component: () => BetweenOperator,
+  },
+  {
+    operator: ["in"],
+    type: ["number", "string"],
+    component: () => InOperator,
+  },
+  {
+    operator: ["<", "<=", ">", ">="],
+    type: ["datetime"],
+    component: () => DateOperator,
+  },
+  {
+    operator: ["between"],
+    type: ["datetime"],
+    component: () => DateBetweenOperator,
+  },
+];
+
+export const getOperatorType = (operator = "=", type = "string") => {
+  const response = operatorType.find((e) => e.operator.includes(operator) && e.type.includes(type));
+
+  return response;
+};
diff --git a/resources/jscomposition/system/table/index.js b/resources/jscomposition/system/table/index.js
index 08ba296b39..26f3b8ab32 100644
--- a/resources/jscomposition/system/table/index.js
+++ b/resources/jscomposition/system/table/index.js
@@ -1 +1,8 @@
-export * from "./cell/index"
\ No newline at end of file
+import FilterableTable from "./FilterableTable.vue";
+
+export * from "./cell/index";
+export * from "./filter/index";
+
+export {
+  FilterableTable,
+};