diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 17fa74317..b211a3c7f 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -23,6 +23,7 @@ const props = defineProps({
     searchCustomRouteRedirect: { type: String, default: undefined },
     searchRedirect: { type: Boolean, default: true },
     searchMakeFetch: { type: Boolean, default: true },
+    searchUrlQuery: { type: String, default: undefined },
 });
 
 const stateStore = useStateStore();
@@ -70,6 +71,7 @@ if (props.baseUrl) {
             :url="props.searchUrl"
             :label="props.searchbarLabel"
             :info="props.searchbarInfo"
+            :search-url="props.searchUrlQuery"
             :custom-route-redirect-name="searchCustomRouteRedirect"
             :redirect="searchRedirect"
         />
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 0c7a8a3f6..2053efd62 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -67,6 +67,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    searchUrl: {
+        type: String,
+        default: 'params',
+    },
 });
 
 const searchText = ref('');
diff --git a/src/pages/Supplier/Card/SupplierCard.vue b/src/pages/Supplier/Card/SupplierCard.vue
index adf0315da..ed4ce7eb2 100644
--- a/src/pages/Supplier/Card/SupplierCard.vue
+++ b/src/pages/Supplier/Card/SupplierCard.vue
@@ -12,5 +12,6 @@ import SupplierListFilter from '../SupplierListFilter.vue';
         search-data-key="SupplierList"
         search-url="Suppliers/filter"
         searchbar-label="Search suppliers"
+        search-url-query="table"
     />
 </template>
diff --git a/src/pages/Supplier/SupplierList.vue b/src/pages/Supplier/SupplierList.vue
index 8cc2f7422..d8404632c 100644
--- a/src/pages/Supplier/SupplierList.vue
+++ b/src/pages/Supplier/SupplierList.vue
@@ -19,9 +19,6 @@ const columns = computed(() => [
         label: t('supplier.list.tableVisibleColumns.name'),
         name: 'socialName',
         create: true,
-        columnCreate: {
-            component: 'input',
-        },
         columnFilter: {
             name: 'search',
         },
@@ -93,6 +90,11 @@ const columns = computed(() => [
             title: t('Create Supplier'),
             onDataSaved: ({ id }) => tableRef.redirect(id),
             formInitialData: {},
+            mapper: (data) => {
+                data.name = data.socialName;
+                delete data.socialName;
+                return data;
+            },
         }"
         order="id ASC"
         :columns="columns"