refactor: refs #8606 modified table width and order

src/pages/Zone/ZoneList.vue

@@ -65,7 +65,6 @@ const tableFilter = {
 
 const columns = computed(() => [
     {
-        align: 'left',
         name: 'id',
         label: t('list.id'),
         chip: {
@@ -75,6 +74,8 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
+        columnClass: 'shrink-column',
+        component: 'number',
     },
     {
         align: 'left',
@@ -106,7 +107,6 @@ const columns = computed(() => [
         format: (row, dashIfEmpty) => dashIfEmpty(row?.agencyMode?.name),
     },
     {
-        align: 'left',
         name: 'price',
         label: t('list.price'),
         cardVisible: true,
@@ -114,6 +114,8 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
+        columnClass: 'shrink-column',
+        component: 'number',
     },
     {
         align: 'center',
@@ -177,6 +179,8 @@ function formatRow(row) {
             <ZoneFilterPanel data-key="ZonesList" />
         </template>
     </RightMenu>
+    <div class="table-container">
+        <div class="column items-center">
             <VnTable
                 ref="tableRef"
                 data-key="ZonesList"
@@ -192,6 +196,7 @@ function formatRow(row) {
                 redirect="zone"
                 :right-search="false"
                 table-height="85vh"
+                order="id ASC"
             >
                 <template #column-addressFk="{ row }">
                     {{ dashIfEmpty(formatRow(row)) }}
@@ -239,6 +244,8 @@ function formatRow(row) {
                     />
                 </template>
             </VnTable>
+        </div>
+    </div>
 </template>
 
 <i18n>
@@ -246,3 +253,20 @@ es:
     Search zone: Buscar zona
     You can search zones by id or name: Puedes buscar zonas por id o nombre
 </i18n>
+
+<style lang="scss" scoped>
+.table-container {
+    display: flex;
+    justify-content: center;
+}
+.column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 70%;
+}
+
+:deep(.shrink-column) {
+    width: 8%;
+}
+</style>