From 6265c8a9964e930fe20b5d6a2ceba03c166f5c2a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 26 Feb 2021 14:37:43 +0300
Subject: [PATCH] Fine tuning for scrolling

---
 src/views/datatable/DataTableDoc.vue        |  13 +-
 src/views/datatable/DataTableScrollDemo.vue | 176 ++++++++++----------
 2 files changed, 97 insertions(+), 92 deletions(-)

diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index a615ed670..db8fd8ae7 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -908,8 +908,13 @@ matchModes: [
 </code></pre>
 
                 <h5>Column Widths of a Scrollable Table</h5>
-                <p>Scrollable table uses flex layout in vertical scrolling with auto size. As a result use flex property when giving 
-                a width to a column. When horizontal scrolling is enabled, this is not a requirement as columns in horizontal scrolling do not have auto size.</p>
+                <p>Scrollable table uses flex layout so there are a couple of rules to consider when adjusting the widths of columns.</p>
+                <ul>
+                    <li>Use min-width in vertical scrolling only so that when there is enough space columns may grow and for smaller screens a horizontal scrollbar is displayed to provide responsive design.</li>
+                    <li>When horizontal scrolling is enabled, prefer width instead of min-width.
+                    <li>In vertical scrolling only, use flex to disable grow and shrink while defining a initial width. When horizontal scrolling is enabled, this is not required as columns do not grow or shrink in horizontal scrolling.</li>
+                </ul>
+
 <pre v-code><code><template v-pre>
 &lt;Column field="vin" header="Vin" style="flex: 0 0 4rem"&gt;&lt;/Column&gt;
 </template>
@@ -949,7 +954,7 @@ matchModes: [
 </code></pre>
 
                 <h6>Horizontal Scrolling</h6>
-                <p>For horizontal scrolling only, it is required to set <i>scrollDirection</i> to "horizontal" and give widths to columns.</p>
+                <p>For horizontal scrolling, it is required to set <i>scrollDirection</i> to "horizontal" and give fixed widths to columns.</p>
 <pre v-code><code><template v-pre>
 &lt;DataTable :value="customers" :scrollable="true"  scrollDirection="horizontal"&gt;
     &lt;Column field="id" header="Id" footer="Id" :style="{width:'200px'}"&gt;&lt;/Column&gt;
@@ -966,7 +971,7 @@ matchModes: [
 </code></pre>
 
                 <h6>Horizontal and Vertical Scrolling</h6>
-                <p>Set <i>scrollDirection</i> to "both" and give widths to columns to scroll both ways.</p>
+                <p>Set <i>scrollDirection</i> to "both" and give fixed widths to columns to scroll both ways.</p>
 <pre v-code><code><template v-pre>
 &lt;DataTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both"&gt;
     &lt;Column field="id" header="Id" footer="Id" :style="{width:'200px'}"&gt;&lt;/Column&gt;
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index 7c3446fdf..35cb6a2f6 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -11,10 +11,10 @@
             <div class="card">
                 <h5>Vertical</h5>
                 <DataTable :value="customers1" :scrollable="true" scrollHeight="400px" :loading="loading">
-                    <Column field="name" header="Name"></Column>
-                    <Column field="country.name" header="Country"></Column>
-                    <Column field="representative.name" header="Representative"></Column>
-                    <Column field="status" header="Status"></Column>
+                    <Column field="name" header="Name" style="min-width:200px"></Column>
+                    <Column field="country.name" header="Country" style="min-width:200px"></Column>
+                    <Column field="representative.name" header="Representative" style="min-width:200px"></Column>
+                    <Column field="status" header="Status" style="min-width:200px"></Column>
                 </DataTable>
             </div>
 
@@ -28,10 +28,10 @@
 
             <Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
                 <DataTable :value="customers1" :scrollable="true" scrollHeight="flex">
-                    <Column field="name" header="Name"></Column>
-                    <Column field="country.name" header="Country"></Column>
-                    <Column field="representative.name" header="Representative"></Column>
-                    <Column field="status" header="Status"></Column>
+                    <Column field="name" header="Name" style="min-width:200px"></Column>
+                    <Column field="country.name" header="Country" style="min-width:200px"></Column>
+                    <Column field="representative.name" header="Representative" style="min-width:200px"></Column>
+                    <Column field="status" header="Status" style="min-width:200px"></Column>
                 </DataTable>
                 <template #footer>
                     <Button label="Ok" icon="pi pi-check" @click="closeDialog" />
@@ -41,29 +41,29 @@
             <div class="card">
                 <h5>Horizontal and Vertical with Footer</h5>
                 <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both">
-                    <Column field="id" header="Id" footer="Id" :style="{width:'200px'}"></Column>
-                    <Column field="name" header="Name" footer="Name" :style="{width:'200px'}"></Column>
-                    <Column field="country.name" header="Country" footer="Country" :style="{width:'200px'}"></Column>
-                    <Column field="date" header="Date" footer="Date" :style="{width:'200px'}"></Column>
-                    <Column field="balance" header="Balance" footer="Balance" :style="{width:'200px'}">
+                    <Column field="id" header="Id" footer="Id" style="width:100px"></Column>
+                    <Column field="name" header="Name" footer="Name" style="width:200px"></Column>
+                    <Column field="country.name" header="Country" footer="Country" style="width:200px"></Column>
+                    <Column field="date" header="Date" footer="Date" style="width:200px"></Column>
+                    <Column field="balance" header="Balance" footer="Balance" style="width:200px">
                         <template #body="{data}">
                             {{formatCurrency(data.balance)}}
                         </template>
                     </Column>
-                    <Column field="company" header="Company" footer="Company" :style="{width:'200px'}"></Column>
-                    <Column field="status" header="Status" footer="Status" :style="{width:'200px'}"></Column>
-                    <Column field="activity" header="Activity" footer="Activity" :style="{width:'200px'}"></Column>
-                    <Column field="representative.name" header="Representative" footer="Representative" :style="{width:'200px'}"></Column>
+                    <Column field="company" header="Company" footer="Company" style="width:200px"></Column>
+                    <Column field="status" header="Status" footer="Status" style="width:200px"></Column>
+                    <Column field="activity" header="Activity" footer="Activity" style="width:200px"></Column>
+                    <Column field="representative.name" header="Representative" footer="Representative" style="width:200px"></Column>
                 </DataTable>
             </div>
 
             <div class="card">
                 <h5>Frozen Rows</h5>
                 <DataTable :value="unlockedCustomers" :frozenValue="lockedCustomers" :scrollable="true" scrollHeight="400px" :loading="loading">
-                    <Column field="name" header="Name"></Column>
-                    <Column field="country.name" header="Country"></Column>
-                    <Column field="representative.name" header="Representative"></Column>
-                    <Column field="status" header="Status"></Column>
+                    <Column field="name" header="Name" style="min-width:200px"></Column>
+                    <Column field="country.name" header="Country" style="min-width:200px"></Column>
+                    <Column field="representative.name" header="Representative" style="min-width:200px"></Column>
+                    <Column field="status" header="Status" style="min-width:200px"></Column>
                     <Column style="flex: 0 0 4rem">
                         <template #body="{data,frozenRow,index}">
                             <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2"
@@ -75,19 +75,19 @@
 
             <div class="card">
                 <h5>Frozen Columns</h5>
-                <ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style="width: 10rem" />
+                <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="width: 12rem" />
 
                 <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3">
-                    <Column field="name" header="Name" :style="{width:'200px'}" frozen></Column>
-                    <Column field="id" header="Id" :style="{width:'100px'}" :frozen="idFrozen"></Column>
-                    <Column field="name" header="Name" :style="{width:'200px'}"></Column>
-                    <Column field="country.name" header="Country" :style="{width:'200px'}"></Column>
-                    <Column field="date" header="Date" :style="{width:'200px'}"></Column>
-                    <Column field="company" header="Company" :style="{width:'200px'}"></Column>
-                    <Column field="status" header="Status" :style="{width:'200px'}"></Column>
-                    <Column field="activity" header="Activity" :style="{width:'200px'}"></Column>
-                    <Column field="representative.name" header="Representative" :style="{width:'200px'}"></Column>
-                    <Column field="balance" header="Balance" :style="{width:'200px'}" frozen alignFrozen="right">
+                    <Column field="name" header="Name" style="width:160px" frozen></Column>
+                    <Column field="id" header="Id" style="width:100px"></Column>
+                    <Column field="name" header="Name" style="width:200px"></Column>
+                    <Column field="country.name" header="Country" style="width:200px"></Column>
+                    <Column field="date" header="Date" style="width:200px"></Column>
+                    <Column field="company" header="Company" style="width:200px"></Column>
+                    <Column field="status" header="Status" style="width:200px"></Column>
+                    <Column field="activity" header="Activity" style="width:200px"></Column>
+                    <Column field="representative.name" header="Representative" style="width:200px"></Column>
+                    <Column field="balance" header="Balance" style="width:120px" alignFrozen="right" :frozen="balanceFrozen">
                         <template #body="{data}">
                              <span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
                         </template>
@@ -100,20 +100,20 @@
                 <DataTable :value="customersGrouped" rowGroupMode="subheader" groupRowsBy="representative.name"
                     sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px">
                     <Column field="representative.name" header="Representative"></Column>
-                    <Column field="name" header="Name"></Column>
-                    <Column field="country" header="Country">
+                    <Column field="name" header="Name" style="min-width:200px"></Column>
+                    <Column field="country" header="Country" style="min-width:200px">
                         <template #body="slotProps">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
                             <span class="image-text">{{slotProps.data.country.name}}</span>
                         </template>
                     </Column>
-                    <Column field="company" header="Company"></Column>
-                    <Column field="status" header="Status">
+                    <Column field="company" header="Company" style="min-width:200px"></Column>
+                    <Column field="status" header="Status" style="min-width:200px">
                         <template #body="slotProps">
                             <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
                         </template>
                     </Column>
-                    <Column field="date" header="Date"></Column>
+                    <Column field="date" header="Date" style="min-width:200px"></Column>
                     <template #groupheader="slotProps">
                         <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                         <span class="image-text">{{slotProps.data.representative.name}}</span>
@@ -132,59 +132,59 @@
 &lt;div class="card"&gt;
     &lt;h5&gt;Vertical&lt;/h5&gt;
     &lt;DataTable :value="customers1" :scrollable="true" scrollHeight="400px" :loading="loading"&gt;
-        &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
-        &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
-        &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
-        &lt;Column field="status" header="Status"&gt;&lt;/Column&gt;
+        &lt;Column field="name" header="Name" style="min-width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="country.name" header="Country" style="min-width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="representative.name" header="Representative" style="min-width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="status" header="Status" style="min-width:200px"&gt;&lt;/Column&gt;
     &lt;/DataTable&gt;
-    &lt;/div&gt;
+&lt;/div&gt;
 
-    &lt;div class="card"&gt;
+&lt;div class="card"&gt;
     &lt;h5&gt;Flexible Scroll&lt;/h5&gt;
     &lt;p&gt;Flex scroll feature makes the scrollable viewport section dynamic insteaf of a fixed value so that it can grow or shrink relative to the parent size of the table.
         Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.&lt;/p&gt;
 
     &lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
-    &lt;/div&gt;
+&lt;/div&gt;
 
-    &lt;Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
+&lt;Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
     &lt;DataTable :value="customers1" :scrollable="true" scrollHeight="flex"&gt;
-        &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
-        &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
-        &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
-        &lt;Column field="status" header="Status"&gt;&lt;/Column&gt;
+        &lt;Column field="name" header="Name" style="min-width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="country.name" header="Country" style="min-width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="representative.name" header="Representative" style="min-width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="status" header="Status" style="min-width:200px"&gt;&lt;/Column&gt;
     &lt;/DataTable&gt;
     &lt;template #footer&gt;
         &lt;Button label="Ok" icon="pi pi-check" @click="closeDialog" /&gt;
     &lt;/template&gt;
-    &lt;/Dialog&gt;
+&lt;/Dialog&gt;
 
-    &lt;div class="card"&gt;
+&lt;div class="card"&gt;
     &lt;h5&gt;Horizontal and Vertical with Footer&lt;/h5&gt;
     &lt;DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both"&gt;
-        &lt;Column field="id" header="Id" footer="Id" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="name" header="Name" footer="Name" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="country.name" header="Country" footer="Country" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="date" header="Date" footer="Date" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="balance" header="Balance" footer="Balance" :style="{width:'200px'}"&gt;
+        &lt;Column field="id" header="Id" footer="Id" style="width:100px"&gt;&lt;/Column&gt;
+        &lt;Column field="name" header="Name" footer="Name" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="country.name" header="Country" footer="Country" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="date" header="Date" footer="Date" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="balance" header="Balance" footer="Balance" style="width:200px"&gt;
             &lt;template #body="{data}"&gt;
                 {{formatCurrency(data.balance)}}
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="company" header="Company" footer="Company" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="status" header="Status" footer="Status" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="activity" header="Activity" footer="Activity" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="representative.name" header="Representative" footer="Representative" :style="{width:'200px'}"&gt;&lt;/Column&gt;
+        &lt;Column field="company" header="Company" footer="Company" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="status" header="Status" footer="Status" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="activity" header="Activity" footer="Activity" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="representative.name" header="Representative" footer="Representative" style="width:200px"&gt;&lt;/Column&gt;
     &lt;/DataTable&gt;
-    &lt;/div&gt;
+&lt;/div&gt;
 
-    &lt;div class="card"&gt;
+&lt;div class="card"&gt;
     &lt;h5&gt;Frozen Rows&lt;/h5&gt;
     &lt;DataTable :value="unlockedCustomers" :frozenValue="lockedCustomers" :scrollable="true" scrollHeight="400px" :loading="loading"&gt;
-        &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
-        &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
-        &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
-        &lt;Column field="status" header="Status"&gt;&lt;/Column&gt;
+        &lt;Column field="name" header="Name" style="min-width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="country.name" header="Country" style="min-width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="representative.name" header="Representative" style="min-width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="status" header="Status" style="min-width:200px"&gt;&lt;/Column&gt;
         &lt;Column style="flex: 0 0 4rem"&gt;
             &lt;template #body="{data,frozenRow,index}"&gt;
                 &lt;Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length &gt;= 2"
@@ -192,49 +192,49 @@
             &lt;/template&gt;
         &lt;/Column&gt;
     &lt;/DataTable&gt;
-    &lt;/div&gt;
+&lt;/div&gt;
 
-    &lt;div class="card"&gt;
+&lt;div class="card"&gt;
     &lt;h5&gt;Frozen Columns&lt;/h5&gt;
-    &lt;ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style="width: 10rem" /&gt;
+    &lt;ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="width: 12rem" /&gt;
 
     &lt;DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3"&gt;
-        &lt;Column field="name" header="Name" :style="{width:'200px'}" frozen&gt;&lt;/Column&gt;
-        &lt;Column field="id" header="Id" :style="{width:'100px'}" :frozen="idFrozen"&gt;&lt;/Column&gt;
-        &lt;Column field="name" header="Name" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="country.name" header="Country" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="date" header="Date" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="company" header="Company" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="status" header="Status" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="activity" header="Activity" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="representative.name" header="Representative" :style="{width:'200px'}"&gt;&lt;/Column&gt;
-        &lt;Column field="balance" header="Balance" :style="{width:'200px'}" frozen alignFrozen="right"&gt;
+        &lt;Column field="name" header="Name" style="width:160px" frozen&gt;&lt;/Column&gt;
+        &lt;Column field="id" header="Id" style="width:100px"&gt;&lt;/Column&gt;
+        &lt;Column field="name" header="Name" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="country.name" header="Country" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="date" header="Date" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="company" header="Company" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="status" header="Status" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="activity" header="Activity" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="representative.name" header="Representative" style="width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="balance" header="Balance" style="width:120px" alignFrozen="right" :frozen="balanceFrozen"&gt;
             &lt;template #body="{data}"&gt;
                     &lt;span class="p-text-bold"&gt;{{formatCurrency(data.balance)}}&lt;/span&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
     &lt;/DataTable&gt;
-    &lt;/div&gt;
+&lt;/div&gt;
 
-    &lt;div class="card"&gt;
+&lt;div class="card"&gt;
     &lt;h5&gt;Subheader Grouping&lt;/h5&gt;
     &lt;DataTable :value="customersGrouped" rowGroupMode="subheader" groupRowsBy="representative.name"
         sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px"&gt;
         &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
-        &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
-        &lt;Column field="country" header="Country"&gt;
+        &lt;Column field="name" header="Name" style="min-width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="country" header="Country" style="min-width:200px"&gt;
             &lt;template #body="slotProps"&gt;
                 &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /&gt;
                 &lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="company" header="Company"&gt;&lt;/Column&gt;
-        &lt;Column field="status" header="Status"&gt;
+        &lt;Column field="company" header="Company" style="min-width:200px"&gt;&lt;/Column&gt;
+        &lt;Column field="status" header="Status" style="min-width:200px"&gt;
             &lt;template #body="slotProps"&gt;
                 &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="date" header="Date"&gt;&lt;/Column&gt;
+        &lt;Column field="date" header="Date" style="min-width:200px"&gt;&lt;/Column&gt;
         &lt;template #groupheader="slotProps"&gt;
             &lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
             &lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
@@ -243,7 +243,7 @@
             &lt;td style="text-align: right" class="p-text-bold p-pr-6"&gt;Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}&lt;/td&gt;
         &lt;/template&gt;
     &lt;/DataTable&gt;
-    &lt;/div&gt;
+&lt;/div&gt;
 </template>
 </code></pre>
 
@@ -356,7 +356,7 @@ export default {
             unlockedCustomers: null,
             loading: false,
             dialogVisible: false,
-            idFrozen: false
+            balanceFrozen: false
         }
     },
     customerService: null,