diff --git a/src/components/04_product-service/TableProduct.vue b/src/components/04_product-service/TableProduct.vue
index 6197bd32..6541dc94 100644
--- a/src/components/04_product-service/TableProduct.vue
+++ b/src/components/04_product-service/TableProduct.vue
@@ -6,6 +6,8 @@ import { Product } from 'stores/product-service/types';
 
 import KebabAction from 'src/components/shared/KebabAction.vue';
 
+import { MainButton } from 'components/button';
+
 import useOptionStore from 'stores/options';
 import { formatNumberDecimal } from 'stores/utils';
 import { dateFormat } from 'src/utils/datetime';
@@ -14,6 +16,7 @@ const optionStore = useOptionStore();
 const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
 
 const selectedItem = defineModel<Product[]>('selectedItem');
+const isSort = ref<boolean>(false);
 
 const props = withDefaults(
   defineProps<{
@@ -24,6 +27,7 @@ const props = withDefaults(
     currentPage?: number;
     pageSize?: number;
     useKebabAction?: boolean;
+    useSortAction?: boolean;
   }>(),
   {
     row: () => [],
@@ -42,6 +46,7 @@ defineEmits<{
   (e: 'delete'): void;
   (e: 'changeStatus'): void;
   (e: 'select', data: any): void;
+  (e: 'sort', isSort: boolean): void;
 }>();
 </script>
 
@@ -64,7 +69,17 @@ defineEmits<{
         style="background-color: hsla(var(--info-bg) / 0.07)"
         :props="props"
       >
-        <q-th auto-width></q-th>
+        <q-th auto-width>
+          <!-- <MainButton
+            icon="mdi-sort"
+            color="0 0% 0%"
+            @click="
+              () => {
+                $emit('sort', (isSort = !isSort));
+              }
+            "
+          /> -->
+        </q-th>
         <template v-for="col in props.cols" :key="col.name" :props="props">
           <q-th>
             {{ $t(col.label) }}
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index bb2a5d54..d63b0909 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -581,7 +581,10 @@ async function fetchListGroups() {
   }
 }
 
-async function fetchListOfProductIsAdd(productGroupId: string) {
+async function fetchListOfProductIsAdd(
+  productGroupId: string,
+  isSort?: boolean,
+) {
   const res = await fetchListProduct({
     status:
       currentStatus.value === 'INACTIVE'
@@ -592,6 +595,8 @@ async function fetchListOfProductIsAdd(productGroupId: string) {
     productGroupId,
     shared: true,
     pageSize: 150,
+    orderField: 'name',
+    orderBy: true ? 'asc' : 'desc',
   });
 
   if (res) {
@@ -3496,6 +3501,11 @@ watch(
           :fieldSelected="tbControl.product.fieldSelected"
           :grid="modeViewIsAdd"
           v-model:selectedItem="selectProduct"
+          @sort="
+            (isSort) => {
+              fetchListOfProductIsAdd(currentIdGroup, isSort);
+            }
+          "
           @select="
             (data) => {
               {
diff --git a/src/stores/product-service/index.ts b/src/stores/product-service/index.ts
index 29ab0844..210177b8 100644
--- a/src/stores/product-service/index.ts
+++ b/src/stores/product-service/index.ts
@@ -138,6 +138,8 @@ const useProductServiceStore = defineStore('api-product-service', () => {
     productGroupId?: string;
     status?: string;
     shared?: boolean;
+    orderField?: string;
+    orderBy?: 'asc' | 'desc';
   }) {
     const params = new URLSearchParams();