diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
index 85961890bf..5c757cd94e 100644
--- a/resources/jscomposition/base/table/BaseTable.vue
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -2,7 +2,7 @@
   <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">
+    <table class="tw-w-full tw-border-collapse tw-table-fixed">
       <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
         <tr>
           <THeader
diff --git a/resources/jscomposition/base/table/TCell.vue b/resources/jscomposition/base/table/TCell.vue
index 4a2f0267ce..c9e267a9b7 100644
--- a/resources/jscomposition/base/table/TCell.vue
+++ b/resources/jscomposition/base/table/TCell.vue
@@ -1,13 +1,16 @@
 <template>
-  <td class="tw-p-3">
+  <td
+    class="tw-relative"
+    :style="{ width: `${column.width}px` }">
     <div
-      v-if="!column.cellRenderer"
-      :style="{ maxWidth: `${column.width}px` }">
+      v-if="!column.cellRenderer">
       <slot
         :columns="columns"
         :column="column"
         :row="row">
-        {{ getValue() }}
+        <div class="tw-p-3">
+          {{ getValue() }}
+        </div>
       </slot>
     </div>
     <component
diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue
index a23f096302..be3c1e0588 100644
--- a/resources/jscomposition/base/table/THeader.vue
+++ b/resources/jscomposition/base/table/THeader.vue
@@ -1,25 +1,22 @@
 <template>
-  <th>
-    <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-justify-between">
-      <div
-        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>
+  <th
+    class="tw-relative"
+    :style="{ width: width + 'px' }">
+    <div
+      class="tw-py-4 tw-px-3 tw-text-left tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis">
+      <slot>
+        {{ getValue() }}
+      </slot>
+    </div>
 
-      <div
-        :class="{ '!tw-cursor-col-resize': column.resizable }"
-        class="tw-w-[5px] tw-cursor-default tw-border-r tw-border-gray-400"
-        @mousedown="column.resizable ? columnResize.startResize($event) : null">
-        &nbsp;
-      </div>
+    <div class="tw-absolute tw-right-0 tw-top-0 tw-h-full tw-w-5 tw-flex tw-items-center">
+      <slot name="filter" />
     </div>
+
+    <div
+      class="tw-absolute tw-right-0 tw-top-0 tw-w-1
+        tw-h-full tw-cursor-col-resize tw-select-none tw-border-r tw-border-gray-400"
+      @mousedown="column.resizable ? columnResize.startResize($event) : null" />
   </th>
 </template>
 
diff --git a/resources/jscomposition/base/table/composables/columnComposable.js b/resources/jscomposition/base/table/composables/columnComposable.js
index 2ce357f833..dde1e46c5c 100644
--- a/resources/jscomposition/base/table/composables/columnComposable.js
+++ b/resources/jscomposition/base/table/composables/columnComposable.js
@@ -16,7 +16,7 @@ export const columnResizeComposable = (column) => {
   const doResize = (event) => {
     if (isResizing.value) {
       const diff = event.pageX - startX.value;
-      const min = 63;
+      const min = 30;
       const currentWidth = Math.max(min, startWidth.value + diff);
 
       column.width = currentWidth;
diff --git a/resources/jscomposition/base/ui/AppPopover.vue b/resources/jscomposition/base/ui/AppPopover.vue
index f6043eb892..df33d1e9df 100644
--- a/resources/jscomposition/base/ui/AppPopover.vue
+++ b/resources/jscomposition/base/ui/AppPopover.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="tooltipWrapper"
-    class="tooltip-wrapper"
+    class="tw-relative"
     @mouseenter="($event) => hover && showTooltip($event)"
     @mouseleave="($event) => hover && hideTooltip($event)">
     <slot name="default" />
@@ -178,11 +178,6 @@ export default {
 </script>
 
 <style scoped>
-.tooltip-wrapper {
-  display: inline-block;
-  position: relative;
-}
-
 .tooltip-content {
   position: fixed;
   z-index: 1000;
diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js
index 5f710fa384..f1d3f30f26 100644
--- a/resources/jscomposition/cases/casesDetail/api/index.js
+++ b/resources/jscomposition/cases/casesDetail/api/index.js
@@ -1,6 +1,6 @@
-export default {};
+import { api } from "../variables";
 
-const getData = async () => {
+export const getData = async () => {
   const objectsList = [];
 
   for (let i = 0; i <= 31; i += 1) {
@@ -22,4 +22,13 @@ const getData = async () => {
   return objectsList;
 };
 
-export { getData };
+export const getDataTask = async ({ params, pagination }) => {
+  const response = await api.get("tasks-by-case/", {
+    params: {
+      ...params,
+      ...pagination,
+    },
+  });
+
+  return response.data.data;
+};
diff --git a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
index 8840094815..35f4511670 100644
--- a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
+++ b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
@@ -1,9 +1,8 @@
 <template>
-  <div class="container-fluid">
+  <div class="tw-pb-4">
     <Tabs
       :tab-default="tabDefault"
-      :tabs="tabs"
-    />
+      :tabs="tabs" />
   </div>
 </template>
 
diff --git a/resources/jscomposition/cases/casesDetail/components/TabHistory.vue b/resources/jscomposition/cases/casesDetail/components/TabHistory.vue
index cbff365a6f..6a8adf283a 100644
--- a/resources/jscomposition/cases/casesDetail/components/TabHistory.vue
+++ b/resources/jscomposition/cases/casesDetail/components/TabHistory.vue
@@ -6,8 +6,7 @@
       :commentable_type="comentableType"
       :adding="false"
       :readonly="status === 'COMPLETED'"
-      :timeline="false"
-    />
+      :timeline="false" />
   </div>
 </template>
 
@@ -16,7 +15,7 @@ import { defineComponent, ref } from "vue";
 import TimeLine from "../../../../js/components/Timeline.vue";
 import {
   getRequestId, getRequestStatus, getComentableType, getProcessName,
-} from "../api/data";
+} from "../variables";
 
 export default defineComponent({
   components: { TimeLine },
diff --git a/resources/jscomposition/cases/casesDetail/components/Tabs.vue b/resources/jscomposition/cases/casesDetail/components/Tabs.vue
index 0f0f056932..8d1a8514bb 100644
--- a/resources/jscomposition/cases/casesDetail/components/Tabs.vue
+++ b/resources/jscomposition/cases/casesDetail/components/Tabs.vue
@@ -1,29 +1,25 @@
 <template>
   <div class="tw-block">
-    <div class="tw-border-b tw-border-gray-200">
-      <nav
-        class="tw-mb-px tw-flex tw-space-x-8"
-        aria-label="Tabs"
-      >
-        <template v-for="(tab, index) in tabs">
-          <a
-            v-if="tab.show"
-            :key="index"
-            :href="tab.href"
-            class="tw-whitespace-nowrap tw-border-b-2 tw-px-1 tw-py-4 tw-text-sm tw-font-medium"
-            :class="[tabSelected === tab.current ? 'tw-border-blue-500 tw-text-blue-500'
-              : 'tw-border-transparent tw-text-gray-500 hover:tw-border-gray-600 hover:tw-text-gray-600'
-            ]"
-            :aria-current="tab.current ? 'page' : undefined"
-            @click="selectTab(tab)"
-          >
-            {{ tab.name }}
-          </a>
-        </template>
-      </nav>
-      <div class="tw-mt-3">
-        <component :is="content" />
-      </div>
+    <nav
+      class="tw-mb-px tw-flex tw-space-x-8"
+      aria-label="Tabs">
+      <template v-for="(tab, index) in tabs">
+        <a
+          v-if="tab.show"
+          :key="index"
+          :href="tab.href"
+          class="tw-whitespace-nowrap tw-border-b-2 tw-px-1 tw-py-4 tw-text-sm tw-font-medium"
+          :class="[tabSelected === tab.current ? 'tw-border-blue-500 tw-text-blue-500'
+            : 'tw-border-transparent tw-text-gray-500 hover:tw-border-gray-600 hover:tw-text-gray-600'
+          ]"
+          :aria-current="tab.current ? 'page' : undefined"
+          @click="selectTab(tab)">
+          {{ tab.name }}
+        </a>
+      </template>
+    </nav>
+    <div class="tw-mt-3">
+      <component :is="content" />
     </div>
   </div>
 </template>
diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
index d1b033172c..5cd0f71eec 100644
--- a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
@@ -1,21 +1,27 @@
 <template>
-  <div>
-    <BaseTable
+  <div class="tw-w-full tw-space-y-3 tw-flex tw-flex-col tw-overflow-hidden">
+    <SortTable
       id="task-table"
       :columns="columnsConfig"
-      :data="data" />
+      :data="data"
+      class="tw-grow tw-overflow-y-scroll"
+      @changeFilter="onChangeFilter" />
+
     <Pagination
       :total="dataPagination.total"
       :page="dataPagination.page"
-      :pages="dataPagination.pages" />
+      :pages="dataPagination.pages"
+      @perPage="onPerPage"
+      @go="onGo" />
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
-import { BaseTable, Pagination } from "../../../base";
-import { getData } from "../api/index";
+import { SortTable, Pagination } from "../../../system";
+import { getDataTask } from "../api/index";
 import { getColumns } from "../config/columns";
+import { getRequestId } from "../variables";
 
 const data = ref(null);
 const columnsConfig = ref(null);
@@ -26,8 +32,39 @@ const dataPagination = ref({
   perPage: 15,
 });
 
+const formatData = (filter) => ({
+  params: {
+    case_number: getRequestId(),
+    status: "ACTIVE",
+    ...filter,
+  },
+  pagination: {
+    page: dataPagination.value.page,
+    perPage: dataPagination.value.perPage,
+  },
+});
+
+const onGo = async (page) => {
+  dataPagination.value.page = page;
+
+  data.value = await getDataTask(formatData({}));
+};
+
+const onPerPage = async (perPage) => {
+  dataPagination.value.perPage = perPage;
+
+  data.value = await getDataTask(formatData({}));
+};
+
+const onChangeFilter = async (dataFilter) => {
+  data.value = await getDataTask(formatData({
+    order_by: dataFilter.field,
+    order_direction: dataFilter.filter,
+  }));
+};
+
 onMounted(async () => {
-  data.value = await getData();
+  data.value = await getDataTask(formatData({}));
   columnsConfig.value = getColumns("tasks");
 });
 </script>
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
index a08592af5e..a3be35c151 100644
--- a/resources/jscomposition/cases/casesDetail/config/columns.js
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -7,54 +7,58 @@ export default {};
 
 // Column for Task
 const taskNumberColumn = () => ({
-  field: "case_number",
+  field: "id",
   header: "Tasks #",
   resizable: true,
   width: 200,
+  filter: true,
   cellRenderer: () => ({
     component: LinkCell,
     params: {
       click: (row, column, columns) => {
-        window.document.location = `/tasks/${row.case_number}/edit`;
+        window.document.location = `/tasks/${row.id}/edit`;
       },
     },
   }),
 });
 
 const taskNameColumn = () => ({
-  field: "case_title",
+  field: "element_name",
   header: "Task Name",
   resizable: true,
   width: 200,
+  filter: true,
   cellRenderer: () => ({
     component: LinkCell,
     params: {
       click: (row, column, columns) => {
-        window.document.location = `/tasks/${row.case_number}/edit`;
+        window.document.location = `/tasks/${row.id}/edit`;
       },
     },
   }),
 });
 
 const processNameColumn = () => ({
-  field: "process_name",
+  field: "process.name",
   header: "Process",
   resizable: true,
   width: 200,
 });
 
 const assignedColumn = () => ({
-  field: "assigned",
+  field: "user.fullname",
   header: "Assigned",
   resizable: true,
   width: 200,
+  filter: true,
 });
 
 const dueDateColumn = () => ({
-  field: "due_date",
+  field: "due_at",
   header: "Due Date",
   resizable: true,
   width: 200,
+  filter: true,
 });
 
 // Columns for Requests
@@ -63,6 +67,14 @@ const requestNumberColumn = () => ({
   header: "Request #",
   resizable: true,
   width: 200,
+  cellRenderer: () => ({
+    component: LinkCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `/requests/${row.id}`;
+      },
+    },
+  }),
 });
 
 const requestNameColumn = () => ({
@@ -70,6 +82,14 @@ const requestNameColumn = () => ({
   header: "Request Name",
   resizable: true,
   width: 200,
+  cellRenderer: () => ({
+    component: LinkCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `/requests/${row.id}`;
+      },
+    },
+  }),
 });
 
 const currentTaskColumn = () => ({
diff --git a/resources/jscomposition/cases/casesDetail/api/data.js b/resources/jscomposition/cases/casesDetail/variables/index.js
similarity index 81%
rename from resources/jscomposition/cases/casesDetail/api/data.js
rename to resources/jscomposition/cases/casesDetail/variables/index.js
index 15aef3da60..70f1e26039 100644
--- a/resources/jscomposition/cases/casesDetail/api/data.js
+++ b/resources/jscomposition/cases/casesDetail/variables/index.js
@@ -7,3 +7,5 @@ export const getRequestStatus = () => request.status;
 export const getComentableType = () => comentable_type;
 
 export const getProcessName = () => request.process.name;
+
+export const api = window.ProcessMaker?.apiClient;
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index a1746b0f1e..90f90028dc 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -60,7 +60,7 @@ export const caseNumberColumn = () => ({
   resizable: true,
   width: 100,
   filter: {
-    type: "string",
+    dataType: "string",
     operators: ["=", ">", ">=", "in", "between"],
   },
   cellRenderer: () => ({
@@ -87,7 +87,7 @@ export const caseTitleColumn = () => ({
     },
   }),
   filter: {
-    type: "string",
+    dataType: "string",
     operators: ["=", ">", ">=", "in", "between"],
   },
 });
@@ -105,7 +105,7 @@ export const processColumn = () => ({
     },
   }),
   filter: {
-    type: "string",
+    dataType: "string",
     operators: ["="],
   },
 });
@@ -124,7 +124,7 @@ export const taskColumn = () => ({
     },
   }),
   filter: {
-    type: "string",
+    dataType: "string",
     operators: ["="],
   },
 });
@@ -143,7 +143,7 @@ export const participantsColumn = () => ({
     },
   }),
   filter: {
-    type: "string",
+    dataType: "string",
     operators: ["="],
   },
 });
@@ -157,7 +157,7 @@ export const statusColumn = () => ({
     component: StatusCell,
   }),
   filter: {
-    type: "string",
+    dataType: "string",
     operators: ["="],
   },
 });
@@ -169,7 +169,7 @@ export const startedColumn = () => ({
   width: 200,
   formatter: (row, column, columns) => formatDate(row.initiated_at, "datetime"),
   filter: {
-    type: "datetime",
+    dataType: "datetime",
     operators: ["between", ">", ">=", "<", "<="],
   },
 });
@@ -181,7 +181,7 @@ export const completedColumn = () => ({
   width: 200,
   formatter: (row, column, columns) => formatDate(row.completed_at, "datetime"),
   filter: {
-    type: "datetime",
+    dataType: "datetime",
     operators: ["between", ">", ">=", "<", "<="],
   },
 });
diff --git a/resources/jscomposition/system/table/FilterableTable.vue b/resources/jscomposition/system/table/FilterableTable.vue
index 2af1e92220..f58b5ab632 100644
--- a/resources/jscomposition/system/table/FilterableTable.vue
+++ b/resources/jscomposition/system/table/FilterableTable.vue
@@ -5,36 +5,26 @@
     class="tw-grow tw-overflow-y-scroll">
     <template
       v-for="(column, index) in columns"
-      v-slot:[`theader-filter-${column.field}`]>
+      #[`theader-filter-${column.field}`]>
       <FilterColumn
         v-if="column.filter"
-        :key="index"
-        :filter="column.filter"/>
+        :key="`default-${index}`"
+        :filter="column.filter" />
     </template>
   </BaseTable>
 </template>
-<script>
-import { defineComponent } from "vue";
+<script setup>
 import { BaseTable } from "../../base";
-import FilterColumn from "./filter/FilterColumn.vue";
+import { FilterColumn } from "./filter/defaultFilter/index";
 
-export default defineComponent({
-  components: {
-    BaseTable,
-    FilterColumn,
+defineProps({
+  columns: {
+    type: Array,
+    default: () => [],
   },
-  props: {
-    columns: {
-      type: Array,
-      default: () => [],
-    },
-    data: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  setup() {
-    return {};
+  data: {
+    type: Array,
+    default: () => [],
   },
 });
 </script>
diff --git a/resources/jscomposition/system/table/SortTable.vue b/resources/jscomposition/system/table/SortTable.vue
new file mode 100644
index 0000000000..3c1db18512
--- /dev/null
+++ b/resources/jscomposition/system/table/SortTable.vue
@@ -0,0 +1,46 @@
+<template>
+  <BaseTable
+    :key="indexFilter"
+    :columns="columns"
+    :data="data"
+    class="tw-grow tw-overflow-y-scroll">
+    <template
+      v-for="(column, index) in columns"
+      #[`theader-filter-${column.field}`]>
+      <SortableFilter
+        v-if="column.filter"
+        :key="`sortable-${index}`"
+        :state="indexFilter == index ? 'asc': ''"
+        @change="e=> onChangeFilter(column, e, index)" />
+    </template>
+  </BaseTable>
+</template>
+<script setup>
+import { ref } from "vue";
+import { BaseTable } from "../../base";
+import { SortableFilter } from "./filter/sortableFilter/index";
+
+const emit = defineEmits(["changeFilter"]);
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const indexFilter = ref(-1);
+
+const onChangeFilter = (columm, val, index) => {
+  indexFilter.value = index;
+
+  emit("changeFilter", {
+    field: columm.field,
+    filter: val,
+  });
+};
+</script>
diff --git a/resources/jscomposition/system/table/cell/CaseTitleCell.vue b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
index 25fcf91c62..1212cec9c4 100644
--- a/resources/jscomposition/system/table/cell/CaseTitleCell.vue
+++ b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    class="tw-text-nowrap tw-whitespace-nowrap"
-    :style="{ width: column.width + 'px' } ">
+    class="tw-text-nowrap tw-whitespace-nowrap tw-p-3">
     <a
       href="#"
       class="hover:tw-text-blue-500"
diff --git a/resources/jscomposition/system/table/cell/LinkCell.vue b/resources/jscomposition/system/table/cell/LinkCell.vue
index db721c10b1..5456b17a64 100644
--- a/resources/jscomposition/system/table/cell/LinkCell.vue
+++ b/resources/jscomposition/system/table/cell/LinkCell.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
-    :style="{ width: column.width + 'px' } ">
+    class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-p-3">
     <a
       class="hover:tw-text-blue-500"
       href="#"
diff --git a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
index ad71507157..9a341d73c8 100644
--- a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
+++ b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap"
-    :style="{ width: column.width + 'px' }">
+  <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-p-3">
     <div class="tw-overflow-hidden tw-text-ellipsis ">
       {{ row[column.field][0].name }}
     </div>
@@ -10,16 +8,17 @@
       v-model="show"
       :hover="false"
       position="bottom"
-      class="!tw-absolute -tw-right-3">
+      class="!tw-absolute tw-right-0 tw-top-0  tw-h-full tw-flex tw-items-center">
       <div
-        class="hover:tw-bg-gray-200 tw-bg-white tw-px-2 tw-rounded-md hover:tw-cursor-pointer"
+        class="tw-self-center tw-px-2 tw-rounded-md hover:tw-cursor-pointer hover:tw-bg-gray-200 tw-bg-white "
         @click.prevent.stop="onClick">
         <i class="fas fa-ellipsis-v" />
       </div>
 
       <template #content>
         <ul
-          class="tw-bg-white tw-list-none tw-text-gray-600 tw-overflow-hidden tw-rounded-lg tw-w-50 tw-text-sm tw-border tw-border-gray-300">
+          class="tw-bg-white tw-list-none tw-text-gray-600
+            tw-overflow-hidden tw-rounded-lg tw-w-50 tw-text-sm tw-border tw-border-gray-300">
           <li
             v-for="(option, index) in optionsModel"
             :key="index"
@@ -35,11 +34,9 @@
   </div>
 </template>
 <script>
-import { defineComponent, nextTick, ref } from "vue";
+import { defineComponent, ref } from "vue";
 import { AppPopover } from "../../../base/index";
 
-const isTruncated = (element) => element.scrollWidth > element.clientWidth;
-
 export default defineComponent({
   components: {
     AppPopover,
@@ -62,7 +59,7 @@ export default defineComponent({
       default: new Function(),
     },
   },
-  setup(props, { emit }) {
+  setup(props) {
     const show = ref(false);
     const optionsModel = ref(props.row[props.column.field]);
 
diff --git a/resources/jscomposition/system/table/filter/FilterColumn.vue b/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
similarity index 93%
rename from resources/jscomposition/system/table/filter/FilterColumn.vue
rename to resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
index aa5718a5cb..43e625d64f 100644
--- a/resources/jscomposition/system/table/filter/FilterColumn.vue
+++ b/resources/jscomposition/system/table/filter/defaultFilter/FilterColumn.vue
@@ -20,7 +20,7 @@
             <FilterOperator
               ref="filterOperatorsRef"
               :operators="filter.operators"
-              :type="filter.type"
+              :type="filter.dataType"
               @change="(e) => onChangeFilterOperator(e)" />
           </div>
 
@@ -32,7 +32,7 @@
 </template>
 <script>
 import { defineComponent, ref } from "vue";
-import { AppPopover } from "../../../base/index";
+import { AppPopover } from "../../../../base/index";
 import SortingButtons from "./SortingButtons.vue";
 import FilterOperator from "./operator/FilterOperator.vue";
 import FooterButtons from "./FooterButtons.vue";
@@ -47,7 +47,7 @@ export default defineComponent({
   props: {
     // FilterInterface {
     //   operators = []  Array
-    //   type = null String
+    //   dataType = null String
     // }
     filter: Object,
   },
diff --git a/resources/jscomposition/system/table/filter/FooterButtons.vue b/resources/jscomposition/system/table/filter/defaultFilter/FooterButtons.vue
similarity index 91%
rename from resources/jscomposition/system/table/filter/FooterButtons.vue
rename to resources/jscomposition/system/table/filter/defaultFilter/FooterButtons.vue
index 7f733e2859..e6d69b3d2f 100644
--- a/resources/jscomposition/system/table/filter/FooterButtons.vue
+++ b/resources/jscomposition/system/table/filter/defaultFilter/FooterButtons.vue
@@ -16,7 +16,7 @@
 </template>
 <script>
 import { defineComponent } from "vue";
-import { OutlineButton } from "../../../base/index";
+import { OutlineButton } from "../../../../base/index";
 
 export default defineComponent({
   components: {
diff --git a/resources/jscomposition/system/table/filter/SortingButtons.vue b/resources/jscomposition/system/table/filter/defaultFilter/SortingButtons.vue
similarity index 100%
rename from resources/jscomposition/system/table/filter/SortingButtons.vue
rename to resources/jscomposition/system/table/filter/defaultFilter/SortingButtons.vue
diff --git a/resources/jscomposition/system/table/filter/defaultFilter/index.js b/resources/jscomposition/system/table/filter/defaultFilter/index.js
new file mode 100644
index 0000000000..a3208c7eed
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/defaultFilter/index.js
@@ -0,0 +1,11 @@
+import FilterColumn from "./FilterColumn.vue";
+import FooterButtons from "./FooterButtons.vue";
+import SortingButtons from "./SortingButtons.vue";
+
+export * from "./operator/index";
+
+export {
+  FilterColumn,
+  FooterButtons,
+  SortingButtons,
+};
diff --git a/resources/jscomposition/system/table/filter/operator/BetweenOperator.vue b/resources/jscomposition/system/table/filter/defaultFilter/operator/BetweenOperator.vue
similarity index 100%
rename from resources/jscomposition/system/table/filter/operator/BetweenOperator.vue
rename to resources/jscomposition/system/table/filter/defaultFilter/operator/BetweenOperator.vue
diff --git a/resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue b/resources/jscomposition/system/table/filter/defaultFilter/operator/DateBetweenOperator.vue
similarity index 100%
rename from resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue
rename to resources/jscomposition/system/table/filter/defaultFilter/operator/DateBetweenOperator.vue
diff --git a/resources/jscomposition/system/table/filter/operator/DateOperator.vue b/resources/jscomposition/system/table/filter/defaultFilter/operator/DateOperator.vue
similarity index 100%
rename from resources/jscomposition/system/table/filter/operator/DateOperator.vue
rename to resources/jscomposition/system/table/filter/defaultFilter/operator/DateOperator.vue
diff --git a/resources/jscomposition/system/table/filter/operator/FilterOperator.vue b/resources/jscomposition/system/table/filter/defaultFilter/operator/FilterOperator.vue
similarity index 97%
rename from resources/jscomposition/system/table/filter/operator/FilterOperator.vue
rename to resources/jscomposition/system/table/filter/defaultFilter/operator/FilterOperator.vue
index 8e7641af48..d51977d4f4 100644
--- a/resources/jscomposition/system/table/filter/operator/FilterOperator.vue
+++ b/resources/jscomposition/system/table/filter/defaultFilter/operator/FilterOperator.vue
@@ -18,7 +18,7 @@
 import {
   defineComponent, ref, onMounted,
 } from "vue";
-import { Dropdown } from "../../../../base";
+import { Dropdown } from "../../../../../base";
 import { getOperatorType } from "./operatorConfig";
 
 const defaultOperators = [
diff --git a/resources/jscomposition/system/table/filter/operator/InOperator.vue b/resources/jscomposition/system/table/filter/defaultFilter/operator/InOperator.vue
similarity index 100%
rename from resources/jscomposition/system/table/filter/operator/InOperator.vue
rename to resources/jscomposition/system/table/filter/defaultFilter/operator/InOperator.vue
diff --git a/resources/jscomposition/system/table/filter/operator/InputOperator.vue b/resources/jscomposition/system/table/filter/defaultFilter/operator/InputOperator.vue
similarity index 100%
rename from resources/jscomposition/system/table/filter/operator/InputOperator.vue
rename to resources/jscomposition/system/table/filter/defaultFilter/operator/InputOperator.vue
diff --git a/resources/jscomposition/system/table/filter/operator/index.js b/resources/jscomposition/system/table/filter/defaultFilter/operator/index.js
similarity index 100%
rename from resources/jscomposition/system/table/filter/operator/index.js
rename to resources/jscomposition/system/table/filter/defaultFilter/operator/index.js
diff --git a/resources/jscomposition/system/table/filter/operator/operatorConfig.js b/resources/jscomposition/system/table/filter/defaultFilter/operator/operatorConfig.js
similarity index 100%
rename from resources/jscomposition/system/table/filter/operator/operatorConfig.js
rename to resources/jscomposition/system/table/filter/defaultFilter/operator/operatorConfig.js
diff --git a/resources/jscomposition/system/table/filter/index.js b/resources/jscomposition/system/table/filter/index.js
index 7f7682fb96..72464fa69c 100644
--- a/resources/jscomposition/system/table/filter/index.js
+++ b/resources/jscomposition/system/table/filter/index.js
@@ -1,11 +1,2 @@
-import FilterColumn from "./FilterColumn.vue";
-import FooterButtons from "./FooterButtons.vue";
-import SortingButtons from "./SortingButtons.vue";
-
-export * from "./operator";
-
-export {
-  FilterColumn,
-  FooterButtons,
-  SortingButtons,
-};
+export * from "./defaultFilter/index";
+export * from "./sortableFilter/index";
diff --git a/resources/jscomposition/system/table/filter/sortableFilter/SortableFilter.vue b/resources/jscomposition/system/table/filter/sortableFilter/SortableFilter.vue
new file mode 100644
index 0000000000..94a930dd8c
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/sortableFilter/SortableFilter.vue
@@ -0,0 +1,41 @@
+<template>
+  <div
+    :class="{ 'tw-text-blue-500': order }"
+    class="hover:tw-text-blue-600 tw-cursor-pointer">
+    <i
+      v-if="!order"
+      class="fas fa-sort"
+      @click.prevent="onChange('asc')" />
+
+    <i
+      v-if="order == 'asc'"
+      class="fas fa-sort-up"
+      @click.prevent="onChange('desc')" />
+
+    <i
+      v-if="order == 'desc'"
+      class="fas fa-sort-down"
+      @click.prevent="onChange('asc')" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const emit = defineEmits(["change"]);
+
+const props = defineProps({
+  state: {
+    type: String,
+    default: () => (""),
+  },
+});
+
+const order = ref(props.state);
+
+const onChange = (val) => {
+  order.value = val;
+  emit("change", val);
+};
+
+</script>
diff --git a/resources/jscomposition/system/table/filter/sortableFilter/index.js b/resources/jscomposition/system/table/filter/sortableFilter/index.js
new file mode 100644
index 0000000000..6d8f856462
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/sortableFilter/index.js
@@ -0,0 +1,5 @@
+import SortableFilter from "./SortableFilter.vue";
+
+export {
+  SortableFilter,
+};
diff --git a/resources/jscomposition/system/table/index.js b/resources/jscomposition/system/table/index.js
index 26f3b8ab32..f6470d7d1e 100644
--- a/resources/jscomposition/system/table/index.js
+++ b/resources/jscomposition/system/table/index.js
@@ -1,8 +1,12 @@
 import FilterableTable from "./FilterableTable.vue";
+import SortTable from "./SortTable.vue";
+import Pagination from "./Pagination.vue";
 
 export * from "./cell/index";
 export * from "./filter/index";
 
 export {
   FilterableTable,
+  SortTable,
+  Pagination,
 };