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: [
Column Widths of a Scrollable Table
- 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.
+ Scrollable table uses flex layout so there are a couple of rules to consider when adjusting the widths of columns.
+
+ 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.
+ When horizontal scrolling is enabled, prefer width instead of min-width.
+ 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.
+
+
<Column field="vin" header="Vin" style="flex: 0 0 4rem"></Column>
@@ -949,7 +954,7 @@ matchModes: [
Horizontal Scrolling
- For horizontal scrolling only, it is required to set scrollDirection to "horizontal" and give widths to columns.
+ For horizontal scrolling, it is required to set scrollDirection to "horizontal" and give fixed widths to columns.
<DataTable :value="customers" :scrollable="true" scrollDirection="horizontal">
<Column field="id" header="Id" footer="Id" :style="{width:'200px'}"></Column>
@@ -966,7 +971,7 @@ matchModes: [
Horizontal and Vertical Scrolling
- Set scrollDirection to "both" and give widths to columns to scroll both ways.
+ Set scrollDirection to "both" and give fixed widths to columns to scroll both ways.
<DataTable :value="customers" :scrollable="true" scrollHeight="400px" scrollDirection="both">
<Column field="id" header="Id" footer="Id" :style="{width:'200px'}"></Column>
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 @@
Vertical
-
@@ -28,10 +28,10 @@
-
Horizontal and Vertical with Footer
-
+
{{formatCurrency(data.balance)}}
-
Frozen Rows
-
Frozen Columns
-
-
+
{{formatCurrency(data.balance)}}
@@ -100,20 +100,20 @@
+
{{slotProps.data.country.name}}
-
+
{{slotProps.data.status}}
-
{{slotProps.data.representative.name}}
@@ -132,59 +132,59 @@
<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>
+</div>
- <div class="card">
+<div class="card">
<h5>Flexible Scroll</h5>
<p>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.</p>
<Button label="Show" icon="pi pi-external-link" @click="openDialog" />
- </div>
+</div>
- <Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
+<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" />
</template>
- </Dialog>
+</Dialog>
- <div class="card">
+<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>
- <div class="card">
+<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"
@@ -192,49 +192,49 @@
</template>
</Column>
</DataTable>
- </div>
+</div>
- <div class="card">
+<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>
</Column>
</DataTable>
- </div>
+</div>
- <div class="card">
+<div class="card">
<h5>Subheader Grouping</h5>
<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>
@@ -243,7 +243,7 @@
<td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
</template>
</DataTable>
- </div>
+</div>
@@ -356,7 +356,7 @@ export default {
unlockedCustomers: null,
loading: false,
dialogVisible: false,
- idFrozen: false
+ balanceFrozen: false
}
},
customerService: null,