Apply fixed width to prevent sticky getting pushed out
Cagatay Civici
parent
fe96ac1377
commit
4b6adb30bd
|
|
@ -390,6 +390,10 @@ export default {
|
|||
this.columns.forEach(col => columnOrder.push(this.columnProp(col, 'columnKey')||this.columnProp(col, 'field')));
|
||||
this.d_columnOrder = columnOrder;
|
||||
}
|
||||
|
||||
if (this.scrollable && this.scrollDirection !== 'vertical') {
|
||||
this.updateScrollWidth();
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.unbindColumnResizeEvents();
|
||||
|
|
@ -403,6 +407,10 @@ export default {
|
|||
this.columnWidthsRestored = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.scrollable && this.scrollDirection !== 'vertical') {
|
||||
this.updateScrollWidth();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
columnProp(col, prop) {
|
||||
|
|
@ -1575,6 +1583,9 @@ export default {
|
|||
}
|
||||
|
||||
return cloned;
|
||||
},
|
||||
updateScrollWidth() {
|
||||
this.$refs.table.style.width = this.$refs.table.scrollWidth + 'px';
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -1790,6 +1801,7 @@ export default {
|
|||
.p-datatable-scrollable .p-datatable-thead > tr > th,
|
||||
.p-datatable-scrollable .p-datatable-tbody > tr > td,
|
||||
.p-datatable-scrollable .p-datatable-tfoot > tr > td {
|
||||
display: block;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -156,201 +156,12 @@
|
|||
<LiveEditor name="DataTableDemo" :sources="sources" service="CustomerService" data="customers-large" :components="['Column', 'Dialog', 'Button']" />
|
||||
</div>
|
||||
<pre v-code><code><template v-pre>
|
||||
<div class="card">
|
||||
<h5>Vertical</h5>
|
||||
<DataTable :value="customers" :scrollable="true" scrollHeight="200px" :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>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Flexible Scroll</h5>
|
||||
<p>Flex scroll feature makes the scrollable viewport section dynamic 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>
|
||||
|
||||
<Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
|
||||
<DataTable :value="customers" :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="Company"></Column>
|
||||
</DataTable>
|
||||
<template #footer>
|
||||
<Button label="Ok" icon="pi pi-check" @click="closeDialog" />
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<div class="card">
|
||||
<h5>Virtual Scroll</h5>
|
||||
<DataTable :value="virtualCustomers" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
|
||||
:virtualScroll="true" :virtualRowHeight="45" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
|
||||
<Column field="name" header="Name">
|
||||
<template #loading>
|
||||
<span class="loading-text"></span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="country.name" header="Country">
|
||||
<template #loading>
|
||||
<span class="loading-text"></span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="representative.name" header="Representative">
|
||||
<template #loading>
|
||||
<span class="loading-text"></span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status">
|
||||
<template #loading>
|
||||
<span class="loading-text"></span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Horizontal and Vertical</h5>
|
||||
<DataTable :value="customers" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading">
|
||||
<Column field="id" header="Id" :headerStyle="{width:'250px'}" columnKey="id"></Column>
|
||||
<Column field="name" header="Name" :headerStyle="{width:'250px'}" columnKey="name"></Column>
|
||||
<Column field="country.name" header="Country" :headerStyle="{width:'250px'}" columnKey="country"></Column>
|
||||
<Column field="date" header="Date" :headerStyle="{width:'250px'}" columnKey="date"></Column>
|
||||
<Column field="company" header="Company" :headerStyle="{width:'250px'}" columnKey="company"></Column>
|
||||
<Column field="status" header="Status" :headerStyle="{width:'250px'}" columnKey="status"></Column>
|
||||
<Column field="activity" header="Activity" :headerStyle="{width:'250px'}" columnKey="activity"></Column>
|
||||
<Column field="representative.name" header="Representative" :headerStyle="{width:'250px'}" columnKey="representative"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Frozen Rows</h5>
|
||||
<DataTable :value="customers" :frozenValue="frozenValue" :scrollable="true" scrollHeight="200px" :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>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Frozen Columns</h5>
|
||||
<DataTable :value="customers" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
|
||||
<Column field="name" header="Name" headerStyle="width: 300px" columnKey="name" :frozen="true">
|
||||
<template #body="slotProps">
|
||||
<span style="font-weight: 700">{{slotProps.data.name}}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="id" header="Id" headerStyle="width: 300px" columnKey="id"></Column>
|
||||
<Column field="country.name" header="Country" headerStyle="width: 300px" columnKey="country"></Column>
|
||||
<Column field="date" header="Date" headerStyle="width: 300px" columnKey="date"></Column>
|
||||
<Column field="company" header="Country" headerStyle="width: 300px" columnKey="company"></Column>
|
||||
<Column field="status" header="Status" headerStyle="width: 300px" columnKey="status"></Column>
|
||||
<Column field="activity" header="Activity" headerStyle="width: 300px" columnKey="activity"></Column>
|
||||
<Column field="representative.name" header="Representative" headerStyle="width: 300px" columnKey="representative"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import CustomerService from '../../service/CustomerService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customers: null,
|
||||
virtualCustomers: null,
|
||||
lazyTotalRecords: 0,
|
||||
frozenValue: null,
|
||||
loading: false,
|
||||
dialogVisible: false
|
||||
}
|
||||
},
|
||||
customerService: null,
|
||||
inmemoryData: null,
|
||||
created() {
|
||||
this.customerService = new CustomerService();
|
||||
},
|
||||
mounted() {
|
||||
this.loading = true;
|
||||
|
||||
this.customerService.getCustomersLarge().then(data => {
|
||||
this.customers = data;
|
||||
this.loading = false;
|
||||
});
|
||||
this.customerService.getCustomersXLarge().then(data => this.inmemoryData = data);
|
||||
|
||||
this.frozenValue = [
|
||||
{
|
||||
id: 1255,
|
||||
name: "James McAdams",
|
||||
country: {
|
||||
name: "United States",
|
||||
code: "us"
|
||||
},
|
||||
company: "McAdams Consulting Ltd",
|
||||
date: "2014-02-13",
|
||||
status: "qualified",
|
||||
activity: 23,
|
||||
representative: {
|
||||
name: "Ioni Bowcher",
|
||||
image: "ionibowcher.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5135,
|
||||
name: "Geraldine Bisset",
|
||||
country: {
|
||||
name: "France",
|
||||
code: "fr"
|
||||
},
|
||||
company: "Bisset Group",
|
||||
status: "proposal",
|
||||
date: "2019-05-05",
|
||||
activity: 0,
|
||||
representative: {
|
||||
name: "Amy Elsner",
|
||||
image: "amyelsner.png"
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
setTimeout(() => {
|
||||
this.virtualCustomers = this.loadChunk(0, 40);
|
||||
this.lazyTotalRecords = 500;
|
||||
}, 250);
|
||||
},
|
||||
methods: {
|
||||
loadChunk(index, length) {
|
||||
let chunk = [];
|
||||
for (let i = 0; i < length; i++) {
|
||||
chunk[i] = {...this.inmemoryData[i]};
|
||||
}
|
||||
|
||||
return chunk;
|
||||
},
|
||||
onVirtualScroll(event) {
|
||||
setTimeout(() => {
|
||||
//last chunk
|
||||
if (event.first === 480)
|
||||
this.virtualCustomers = this.loadChunk(event.first, 20)
|
||||
else
|
||||
this.virtualCustomers = this.loadChunk(event.first, event.rows)
|
||||
}, 250);
|
||||
},
|
||||
openDialog() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
closeDialog() {
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
|
|
@ -368,125 +179,6 @@ export default {
|
|||
return {
|
||||
customers: null,
|
||||
customersGrouped: null,
|
||||
virtualCustomers: null,
|
||||
lazyTotalRecords: 0,
|
||||
frozenValue: null,
|
||||
loading: false,
|
||||
dialogVisible: false,
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Vertical</h5>
|
||||
<DataTable :value="customers" :scrollable="true" scrollHeight="200px" :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>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Flexible Scroll</h5>
|
||||
<p>Flex scroll feature makes the scrollable viewport section dynamic 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>
|
||||
|
||||
<Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
|
||||
<DataTable :value="customers" :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="Company"></Column>
|
||||
</DataTable>
|
||||
<template #footer>
|
||||
<Button label="Ok" icon="pi pi-check" @click="closeDialog" />
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<div class="card">
|
||||
<h5>Virtual Scroll</h5>
|
||||
<DataTable :value="virtualCustomers" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
|
||||
:virtualScroll="true" :virtualRowHeight="45" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
|
||||
<Column field="name" header="Name">
|
||||
<template #loading>
|
||||
<span class="loading-text"></span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="country.name" header="Country">
|
||||
<template #loading>
|
||||
<span class="loading-text"></span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="representative.name" header="Representative">
|
||||
<template #loading>
|
||||
<span class="loading-text"></span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status">
|
||||
<template #loading>
|
||||
<span class="loading-text"></span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Horizontal and Vertical</h5>
|
||||
<DataTable :value="customers" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading">
|
||||
<Column field="id" header="Id" :headerStyle="{width:'250px'}" columnKey="id"></Column>
|
||||
<Column field="name" header="Name" :headerStyle="{width:'250px'}" columnKey="name"></Column>
|
||||
<Column field="country.name" header="Country" :headerStyle="{width:'250px'}" columnKey="country"></Column>
|
||||
<Column field="date" header="Date" :headerStyle="{width:'250px'}" columnKey="date"></Column>
|
||||
<Column field="company" header="Company" :headerStyle="{width:'250px'}" columnKey="company"></Column>
|
||||
<Column field="status" header="Status" :headerStyle="{width:'250px'}" columnKey="status"></Column>
|
||||
<Column field="activity" header="Activity" :headerStyle="{width:'250px'}" columnKey="activity"></Column>
|
||||
<Column field="representative.name" header="Representative" :headerStyle="{width:'250px'}" columnKey="representative"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Frozen Rows</h5>
|
||||
<DataTable :value="customers" :frozenValue="frozenValue" :scrollable="true" scrollHeight="200px" :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>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Frozen Columns</h5>
|
||||
<DataTable :value="customers" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
|
||||
<Column field="name" header="Name" headerStyle="width: 300px" columnKey="name" :frozen="true">
|
||||
<template #body="slotProps">
|
||||
<span style="font-weight: 700">{{slotProps.data.name}}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="id" header="Id" headerStyle="width: 300px" columnKey="id"></Column>
|
||||
<Column field="country.name" header="Country" headerStyle="width: 300px" columnKey="country"></Column>
|
||||
<Column field="date" header="Date" headerStyle="width: 300px" columnKey="date"></Column>
|
||||
<Column field="company" header="Country" headerStyle="width: 300px" columnKey="company"></Column>
|
||||
<Column field="status" header="Status" headerStyle="width: 300px" columnKey="status"></Column>
|
||||
<Column field="activity" header="Activity" headerStyle="width: 300px" columnKey="activity"></Column>
|
||||
<Column field="representative.name" header="Representative" headerStyle="width: 300px" columnKey="representative"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomerService from '../service/CustomerService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customers: null,
|
||||
virtualCustomers: null,
|
||||
lazyTotalRecords: 0,
|
||||
frozenValue: null,
|
||||
|
|
@ -494,103 +186,9 @@ export default {
|
|||
dialogVisible: false
|
||||
}
|
||||
},
|
||||
customerService: null,
|
||||
customerService: null,
|
||||
inmemoryData: null,
|
||||
created() {
|
||||
this.customerService = new CustomerService();
|
||||
},
|
||||
mounted() {
|
||||
this.loading = true;
|
||||
|
||||
this.customerService.getCustomersLarge().then(data => {
|
||||
this.customers = data;
|
||||
this.loading = false;
|
||||
});
|
||||
this.customerService.getCustomersXLarge().then(data => this.inmemoryData = data);
|
||||
|
||||
this.frozenValue = [
|
||||
{
|
||||
id: 1255,
|
||||
name: "James McAdams",
|
||||
country: {
|
||||
name: "United States",
|
||||
code: "us"
|
||||
},
|
||||
company: "McAdams Consulting Ltd",
|
||||
date: "2014-02-13",
|
||||
status: "qualified",
|
||||
activity: 23,
|
||||
representative: {
|
||||
name: "Ioni Bowcher",
|
||||
image: "ionibowcher.png"
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5135,
|
||||
name: "Geraldine Bisset",
|
||||
country: {
|
||||
name: "France",
|
||||
code: "fr"
|
||||
},
|
||||
company: "Bisset Group",
|
||||
status: "proposal",
|
||||
date: "2019-05-05",
|
||||
activity: 0,
|
||||
representative: {
|
||||
name: "Amy Elsner",
|
||||
image: "amyelsner.png"
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
setTimeout(() => {
|
||||
this.virtualCustomers = this.loadChunk(0, 40);
|
||||
this.lazyTotalRecords = 500;
|
||||
}, 250);
|
||||
},
|
||||
methods: {
|
||||
loadChunk(index, length) {
|
||||
let chunk = [];
|
||||
for (let i = 0; i < length; i++) {
|
||||
chunk[i] = {...this.inmemoryData[i]};
|
||||
}
|
||||
|
||||
return chunk;
|
||||
},
|
||||
onVirtualScroll(event) {
|
||||
setTimeout(() => {
|
||||
//last chunk
|
||||
if (event.first === 480)
|
||||
this.virtualCustomers = this.loadChunk(event.first, 20)
|
||||
else
|
||||
this.virtualCustomers = this.loadChunk(event.first, event.rows)
|
||||
}, 250);
|
||||
},
|
||||
openDialog() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
closeDialog() {
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
.loading-text {
|
||||
display: block;
|
||||
background-color: #f1f1f1;
|
||||
min-height: 19px;
|
||||
animation: pulse 1s infinite ease-in-out;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
customerService: null,
|
||||
inmemoryData: null,
|
||||
created() {
|
||||
created() {
|
||||
this.customerService = new CustomerService();
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -607,11 +205,11 @@ export default {
|
|||
{
|
||||
id: 1255,
|
||||
name: "James McAdams",
|
||||
country: {
|
||||
country: {
|
||||
name: "United States",
|
||||
code: "us"
|
||||
},
|
||||
company: "McAdams Consulting Ltd",
|
||||
company: "McAdams Consulting Ltd",
|
||||
date: "2014-02-13",
|
||||
status: "qualified",
|
||||
activity: 23,
|
||||
|
|
@ -623,11 +221,11 @@ export default {
|
|||
{
|
||||
id: 5135,
|
||||
name: "Geraldine Bisset",
|
||||
country: {
|
||||
country: {
|
||||
name: "France",
|
||||
code: "fr"
|
||||
},
|
||||
company: "Bisset Group",
|
||||
company: "Bisset Group",
|
||||
status: "proposal",
|
||||
date: "2019-05-05",
|
||||
activity: 0,
|
||||
|
|
@ -691,12 +289,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loading-text {
|
||||
display: block;
|
||||
background-color: #f1f1f1;
|
||||
min-height: 19px;
|
||||
animation: pulse 1s infinite ease-in-out;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
::v-deep(.p-datatable-frozen-tbody) {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -24,8 +24,10 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
if(this.sources.api) this.editComposition = true;
|
||||
else this.editComposition = false;
|
||||
if (this.sources && this.sources.api)
|
||||
this.editComposition = true;
|
||||
else
|
||||
this.editComposition = false;
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue