vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Responsive table demos updated

pull/1047/head
Cagatay Civici 2021-02-25 15:49:28 +03:00
parent 4e32291774
commit 9a81a5aeec
20 changed files with 140 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/datatable/DataTable.vue
View File

@ -385,7 +385,7 @@ export default {
this.updateScrollWidth();
}
if (this.responsiveLayout === 'stack') {
if (this.responsiveLayout === 'stack' && !this.scrollable) {
this.createResponsiveStyle();
}
},
@ -1591,6 +1591,12 @@ export default {
border: 0 none;
}
.p-datatable[${this.attributeSelector}].p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
border-top: 0;
border-right: 0;
border-left: 0;
}
.p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td > .p-column-title {
display: block;
}
@ -1769,7 +1775,6 @@ export default {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
white-space: nowrap;
}
.p-datatable .p-sortable-column {

2
src/views/datatable/DataTableColGroupDemo.vue
View File

@ -9,7 +9,7 @@
<div class="content-section implementation">
<div class="card">
<DataTable :value="sales">
<DataTable :value="sales" responsiveLayout="scroll">
<ColumnGroup type="header">
<Row>
<Column header="Product" :rowspan="3" />

44
src/views/datatable/DataTableCrudDemo.vue
View File

@ -24,7 +24,7 @@
<DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="id"
:paginator="true" :rows="10" :filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll">
<template #header>
<div class="table-header">
<h5 class="p-m-0">Manage Products</h5>
@ -35,26 +35,26 @@
</div>
</template>
<Column selectionMode="multiple" headerStyle="width: 3rem" :exportable="false"></Column>
<Column field="code" header="Code" :sortable="true"></Column>
<Column field="name" header="Name" :sortable="true"></Column>
<Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
<Column field="code" header="Code" :sortable="true" style="min-width:12rem"></Column>
<Column field="name" header="Name" :sortable="true" style="min-width:16rem"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true">
<Column field="price" header="Price" :sortable="true" style="min-width:8rem">
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
<Column field="category" header="Category" :sortable="true"></Column>
<Column field="rating" header="Reviews" :sortable="true">
<Column field="category" header="Category" :sortable="true" style="min-width:10rem">></Column>
<Column field="rating" header="Reviews" :sortable="true" style="min-width:12rem">>
<template #body="slotProps">
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
</template>
</Column>
<Column field="inventoryStatus" header="Status" :sortable="true">
<Column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem">>
<template #body="slotProps">
<span :class="'product-badge status-' + (slotProps.data.inventoryStatus ? slotProps.data.inventoryStatus.toLowerCase() : '')">{{slotProps.data.inventoryStatus}}</span>
</template>
@ -192,26 +192,26 @@
&lt;/div&gt;
&lt;/template&gt;
&lt;Column selectionMode="multiple" headerStyle="width: 3rem" :exportable="false"&gt;&lt;/Column&gt;
&lt;Column field="code" header="Code" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column selectionMode="multiple" style="width: 3rem" :exportable="false"&gt;&lt;/Column&gt;
&lt;Column field="code" header="Code" :sortable="true" style="min-width:12rem"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" :sortable="true" style="min-width:16rem"&gt;&lt;/Column&gt;
&lt;Column header="Image"&gt;
&lt;template #body="slotProps"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="price" header="Price" :sortable="true"&gt;
&lt;Column field="price" header="Price" :sortable="true" style="min-width:8rem"&gt;
&lt;template #body="slotProps"&gt;
{{formatCurrency(slotProps.data.price)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="category" header="Category" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="rating" header="Reviews" :sortable="true"&gt;
&lt;Column field="category" header="Category" :sortable="true" style="min-width:10rem"&gt;&lt;/Column&gt;
&lt;Column field="rating" header="Reviews" :sortable="true" style="min-width:12rem"&gt;
&lt;template #body="slotProps"&gt;
&lt;Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="inventoryStatus" header="Status" :sortable="true"&gt;
&lt;Column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem"&gt;
&lt;template #body="slotProps"&gt;
&lt;span :class="'product-badge status-' + (slotProps.data.inventoryStatus ? slotProps.data.inventoryStatus.toLowerCase() : '')"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;/template&gt;
@ -481,26 +481,26 @@ export default {
</div>
</template>
<Column selectionMode="multiple" headerStyle="width: 3rem" :exportable="false"></Column>
<Column field="code" header="Code" :sortable="true"></Column>
<Column field="name" header="Name" :sortable="true"></Column>
<Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
<Column field="code" header="Code" :sortable="true" style="min-width:12rem"></Column>
<Column field="name" header="Name" :sortable="true" style="min-width:16rem"></Column>
<Column header="Image">
<template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="price" header="Price" :sortable="true">
<Column field="price" header="Price" :sortable="true" style="min-width:8rem">
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
<Column field="category" header="Category" :sortable="true"></Column>
<Column field="rating" header="Reviews" :sortable="true">
<Column field="category" header="Category" :sortable="true" style="min-width:10rem"></Column>
<Column field="rating" header="Reviews" :sortable="true" style="min-width:12rem">
<template #body="slotProps">
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
</template>
</Column>
<Column field="inventoryStatus" header="Status" :sortable="true">
<Column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem">
<template #body="slotProps">
<span :class="'product-badge status-' + (slotProps.data.inventoryStatus ? slotProps.data.inventoryStatus.toLowerCase() : '')">{{slotProps.data.inventoryStatus}}</span>
</template>

20
src/views/datatable/DataTableDemo.vue
View File

@ -13,7 +13,7 @@
dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" v-model:filters="filters" filterDisplay="menu" :loading="loading"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
:globalFilterFields="['name','country.name','representative.name','status']">
:globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
<template #header>
<div class="p-d-flex p-jc-between p-ai-center">
<h5 class="p-m-0">Customers</h5>
@ -29,8 +29,8 @@
<template #loading>
Loading customers data. Please wait.
</template>
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
<Column field="name" header="Name" sortable>
<Column selectionMode="multiple" style="min-width: 3rem"></Column>
<Column field="name" header="Name" sortable style="min-width: 14rem">
<template #body="{data}">
{{data.name}}
</template>
@ -38,7 +38,7 @@
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name"/>
</template>
</Column>
<Column field="country.name" header="Country" sortable filterMatchMode="contains">
<Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem">
<template #body="{data}">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{data.country.name}}</span>
@ -47,7 +47,7 @@
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/>
</template>
</Column>
<Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}">
<Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width: 14rem">
<template #body="{data}">
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{data.representative.name}}</span>
@ -64,7 +64,7 @@
</MultiSelect>
</template>
</Column>
<Column field="date" header="Date" sortable dataType="date">
<Column field="date" header="Date" sortable dataType="date" style="min-width: 8rem">
<template #body="{data}">
{{formatDate(data.date)}}
</template>
@ -72,7 +72,7 @@
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
</template>
</Column>
<Column field="balance" header="Balance" sortable dataType="numeric">
<Column field="balance" header="Balance" sortable dataType="numeric" style="min-width: 8rem">
<template #body="{data}">
{{formatCurrency(data.balance)}}
</template>
@ -80,7 +80,7 @@
<InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
</template>
</Column>
<Column field="status" header="Status" sortable :filterMenuStyle="{'width':'14rem'}">
<Column field="status" header="Status" sortable :filterMenuStyle="{'width':'14rem'}" style="min-width: 10rem">
<template #body="{data}">
<span :class="'customer-badge status-' + data.status">{{data.status}}</span>
</template>
@ -95,7 +95,7 @@
</Dropdown>
</template>
</Column>
<Column field="activity" header="Activity" sortable :showFilterMatchModes="false">
<Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 10rem">
<template #body="{data}">
<ProgressBar :value="data.activity" :showValue="false" />
</template>
@ -107,7 +107,7 @@
</div>
</template>
</Column>
<Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<Column headerStyle="min-width: 4rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body>
<Button type="button" icon="pi pi-cog"></Button>
</template>

38
src/views/datatable/DataTableDoc.vue
View File

@ -2611,7 +2611,7 @@ export default {
dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" v-model:filters="filters" filterDisplay="menu" :loading="loading"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
:globalFilterFields="['name','country.name','representative.name','status']"&gt;
:globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll"&gt;
&lt;template #header&gt;
&lt;div class="p-d-flex p-jc-between p-ai-center"&gt;
&lt;h5 class="p-m-0"&gt;Customers&lt;/h5&gt;
@ -2627,8 +2627,8 @@ export default {
&lt;template #loading&gt;
Loading customers data. Please wait.
&lt;/template&gt;
&lt;Column selectionMode="multiple" headerStyle="width: 3rem"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" sortable&gt;
&lt;Column selectionMode="multiple" style="min-width: 3rem"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" sortable style="min-width: 14rem"&gt;
&lt;template #body="{data}"&gt;
{{data.name}}
&lt;/template&gt;
@ -2636,7 +2636,7 @@ export default {
&lt;InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="country.name" header="Country" sortable filterMatchMode="contains"&gt;
&lt;Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem"&gt;
&lt;template #body="{data}"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /&gt;
&lt;span class="image-text"&gt;{{data.country.name}}&lt;/span&gt;
@ -2645,7 +2645,7 @@ export default {
&lt;InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}"&gt;
&lt;Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width: 14rem"&gt;
&lt;template #body="{data}"&gt;
&lt;img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{data.representative.name}}&lt;/span&gt;
@ -2662,7 +2662,7 @@ export default {
&lt;/MultiSelect&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="date" header="Date" sortable dataType="date"&gt;
&lt;Column field="date" header="Date" sortable dataType="date" style="min-width: 8rem"&gt;
&lt;template #body="{data}"&gt;
{{formatDate(data.date)}}
&lt;/template&gt;
@ -2670,7 +2670,7 @@ export default {
&lt;Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="balance" header="Balance" sortable dataType="numeric"&gt;
&lt;Column field="balance" header="Balance" sortable dataType="numeric" style="min-width: 8rem"&gt;
&lt;template #body="{data}"&gt;
{{formatCurrency(data.balance)}}
&lt;/template&gt;
@ -2678,7 +2678,7 @@ export default {
&lt;InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="status" header="Status" sortable :filterMenuStyle="{'width':'14rem'}"&gt;
&lt;Column field="status" header="Status" sortable :filterMenuStyle="{'width':'14rem'}" style="min-width: 10rem"&gt;
&lt;template #body="{data}"&gt;
&lt;span :class="'customer-badge status-' + data.status"&gt;{{data.status}}&lt;/span&gt;
&lt;/template&gt;
@ -2693,7 +2693,7 @@ export default {
&lt;/Dropdown&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="activity" header="Activity" sortable :showFilterMatchModes="false"&gt;
&lt;Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 10rem"&gt;
&lt;template #body="{data}"&gt;
&lt;ProgressBar :value="data.activity" :showValue="false" /&gt;
&lt;/template&gt;
@ -2705,7 +2705,7 @@ export default {
&lt;/div&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible"&gt;
&lt;Column headerStyle="width: 4rem; text-align: center" bodyStyle="text-align: center; overflow: visible"&gt;
&lt;template #body&gt;
&lt;Button type="button" icon="pi pi-cog"&gt;&lt;/Button&gt;
&lt;/template&gt;
@ -2798,7 +2798,7 @@ export default {
dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" v-model:filters="filters" filterDisplay="menu" :loading="loading"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
:globalFilterFields="['name','country.name','representative.name','status']">
:globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
<template #header>
<div class="p-d-flex p-jc-between p-ai-center">
<h5 class="p-m-0">Customers</h5>
@ -2815,7 +2815,7 @@ export default {
Loading customers data. Please wait.
</template>
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
<Column field="name" header="Name" sortable>
<Column field="name" header="Name" sortable style="min-width: 14rem">
<template #body="{data}">
{{data.name}}
</template>
@ -2823,7 +2823,7 @@ export default {
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name"/>
</template>
</Column>
<Column field="country.name" header="Country" sortable filterMatchMode="contains">
<Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem">
<template #body="{data}">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{data.country.name}}</span>
@ -2832,7 +2832,7 @@ export default {
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/>
</template>
</Column>
<Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}">
<Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width: 14rem">
<template #body="{data}">
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{data.representative.name}}</span>
@ -2849,7 +2849,7 @@ export default {
</MultiSelect>
</template>
</Column>
<Column field="date" header="Date" sortable dataType="date">
<Column field="date" header="Date" sortable dataType="date" style="min-width: 8rem">
<template #body="{data}">
{{formatDate(data.date)}}
</template>
@ -2857,7 +2857,7 @@ export default {
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
</template>
</Column>
<Column field="balance" header="Balance" sortable dataType="numeric">
<Column field="balance" header="Balance" sortable dataType="numeric" style="min-width: 8rem">
<template #body="{data}">
{{formatCurrency(data.balance)}}
</template>
@ -2865,7 +2865,7 @@ export default {
<InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
</template>
</Column>
<Column field="status" header="Status" sortable :filterMenuStyle="{'width':'14rem'}">
<Column field="status" header="Status" sortable :filterMenuStyle="{'width':'14rem'}" style="min-width: 10rem">
<template #body="{data}">
<span :class="'customer-badge status-' + data.status">{{data.status}}</span>
</template>
@ -2880,7 +2880,7 @@ export default {
</Dropdown>
</template>
</Column>
<Column field="activity" header="Activity" sortable :showFilterMatchModes="false">
<Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 10rem">
<template #body="{data}">
<ProgressBar :value="data.activity" :showValue="false" />
</template>
@ -2892,7 +2892,7 @@ export default {
</div>
</template>
</Column>
<Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<Column headerStyle="width: 4rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body>
<Button type="button" icon="pi pi-cog"></Button>
</template>

18
src/views/datatable/DataTableEditDemo.vue
View File

@ -13,7 +13,7 @@
<div class="card">
<h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p>
<DataTable :value="products1" editMode="cell" class="editable-cells-table">
<DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll">
<Column field="code" header="Code">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
@ -47,7 +47,7 @@
<div class="card">
<h5>Advanced Cell Editing</h5>
<p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" >
<DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
<template #editor="slotProps">
<InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" />
@ -59,7 +59,7 @@
<div class="card">
<h5>Row Editing</h5>
<DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel" responsiveLayout="scroll">
<Column field="code" header="Code">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus />
@ -101,7 +101,7 @@
<pre v-code><code><template v-pre>
&lt;h5&gt;Basic Cell Editing&lt;/h5&gt;
&lt;p&gt;Simple editors with v-model.&lt;/p&gt;
&lt;DataTable :value="products1" editMode="cell" class="editable-cells-table"&gt;
&lt;DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll"&gt;
&lt;Column field="code" header="Code"&gt;
&lt;template #editor="slotProps"&gt;
&lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt;
@ -135,7 +135,7 @@
&lt;div class="card"&gt;
&lt;h5&gt;Advanced Cell Editing&lt;/h5&gt;
&lt;p&gt;Custom implementation with validations, dynamic columns and reverting values with the escape key.&lt;/p&gt;
&lt;DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" &gt;
&lt;DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll"&gt;
&lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;
&lt;template #editor="slotProps"&gt;
&lt;InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" /&gt;
@ -147,7 +147,7 @@
&lt;div class="card"&gt;
&lt;h5&gt;Row Editing&lt;/h5&gt;
&lt;DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel"&gt;
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel" responsiveLayout="scroll"&gt;
&lt;Column field="code" header="Code"&gt;
&lt;template #editor="slotProps"&gt;
&lt;InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus /&gt;
@ -321,7 +321,7 @@ export default {
<div class="card">
<h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p>
<DataTable :value="products1" editMode="cell" class="editable-cells-table">
<DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll">
<Column field="code" header="Code">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
@ -355,7 +355,7 @@ export default {
<div class="card">
<h5>Advanced Cell Editing</h5>
<p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="products2" editMode="cell" @cellEditComplete="onCellEditComplete" class="editable-cells-table" >
<DataTable :value="products2" editMode="cell" @cellEditComplete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
<template #editor="slotProps">
<InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" />
@ -367,7 +367,7 @@ export default {
<div class="card">
<h5>Row Editing</h5>
<DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
@rowEditInit="onRowEditInit" @rowEditCancel="onRowEditCancel">
@rowEditInit="onRowEditInit" @rowEditCancel="onRowEditCancel" responsiveLayout="scroll">
<Column field="code" header="Code">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus />

58
src/views/datatable/DataTableFilterDemo.vue
View File

@ -12,7 +12,7 @@
<h5>Filter Menu</h5>
<p>Filters are displayed in an overlay.</p>
<DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10"
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1"
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
:globalFilterFields="['name','country.name','representative.name','balance','status']">
<template #header>
<div class="p-d-flex p-jc-between">
@ -29,7 +29,7 @@
<template #loading>
Loading customers data. Please wait.
</template>
<Column field="name" header="Name">
<Column field="name" header="Name" style="min-width:12rem">
<template #body="{data}">
{{data.name}}
</template>
@ -37,7 +37,7 @@
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name"/>
</template>
</Column>
<Column header="Country" filterField="country.name">
<Column header="Country" filterField="country.name" style="min-width:12rem">
<template #body="{data}">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{data.country.name}}</span>
@ -55,7 +55,7 @@
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
</template>
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}">
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem">
<template #body="{data}">
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{data.representative.name}}</span>
@ -72,7 +72,7 @@
</MultiSelect>
</template>
</Column>
<Column header="Date" filterField="date" dataType="date">
<Column header="Date" filterField="date" dataType="date" style="min-width:10rem">
<template #body="{data}">
{{formatDate(data.date)}}
</template>
@ -80,7 +80,7 @@
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
</template>
</Column>
<Column header="Balance" filterField="balance" dataType="numeric">
<Column header="Balance" filterField="balance" dataType="numeric" style="min-width:10rem">
<template #body="{data}">
{{formatCurrency(data.balance)}}
</template>
@ -88,7 +88,7 @@
<InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
</template>
</Column>
<Column field="status" header="Status" :filterMenuStyle="{'width':'14rem'}">
<Column field="status" header="Status" :filterMenuStyle="{'width':'14rem'}" style="min-width:12rem">
<template #body="{data}">
<span :class="'customer-badge status-' + data.status">{{data.status}}</span>
</template>
@ -104,7 +104,7 @@
</Dropdown>
</template>
</Column>
<Column field="activity" header="Activity" :showFilterMatchModes="false">
<Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width:12rem">
<template #body="{data}">
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
</template>
@ -116,7 +116,7 @@
</div>
</template>
</Column>
<Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" bodyClass="p-text-center">
<Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem">
<template #body="{data}">
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
</template>
@ -131,7 +131,7 @@
<h5>Filter Row</h5>
<p>Filters are displayed inline within a separate row.</p>
<DataTable :value="customers2" :paginator="true" class="p-datatable-customers" :rows="10"
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2"
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
:globalFilterFields="['name','country.name','representative.name','status']">
<template #header>
<div class="p-d-flex p-jc-end">
@ -147,7 +147,7 @@
<template #loading>
Loading customers data. Please wait.
</template>
<Column field="name" header="Name">
<Column field="name" header="Name" style="min-width:12rem">
<template #body="{data}">
{{data.name}}
</template>
@ -155,7 +155,7 @@
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" v-tooltip.top.focus="'Hit enter key to filter'"/>
</template>
</Column>
<Column header="Country" filterField="country.name">
<Column header="Country" filterField="country.name" style="min-width:12rem">
<template #body="{data}">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{data.country.name}}</span>
@ -164,7 +164,7 @@
<InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" v-tooltip.top.focus="'Filter as you type'"/>
</template>
</Column>
<Column header="Agent" filterField="representative" :showFilterMenu="false">
<Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width:14rem">
<template #body="{data}">
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{data.representative.name}}</span>
@ -180,7 +180,7 @@
</MultiSelect>
</template>
</Column>
<Column field="status" header="Status" :showFilterMenu="false">
<Column field="status" header="Status" :showFilterMenu="false" style="min-width:12rem">
<template #body="{data}">
<span :class="'customer-badge status-' + data.status">{{data.status}}</span>
</template>
@ -196,7 +196,7 @@
</Dropdown>
</template>
</Column>
<Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 6rem">
<Column field="verified" header="Verified" dataType="boolean" style="min-width:6rem">
<template #body="{data}">
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
</template>
@ -216,7 +216,7 @@
&lt;h5&gt;Filter Menu&lt;/h5&gt;
&lt;p&gt;Filters are displayed in an overlay.&lt;/p&gt;
&lt;DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10"
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1"
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
:globalFilterFields="['name','country.name','representative.name','balance','status']"&gt;
&lt;template #header&gt;
&lt;div class="p-d-flex p-jc-between"&gt;
@ -233,7 +233,7 @@
&lt;template #loading&gt;
Loading customers data. Please wait.
&lt;/template&gt;
&lt;Column field="name" header="Name"&gt;
&lt;Column field="name" header="Name" style="min-width:12rem"&gt;
&lt;template #body="{data}"&gt;
{{data.name}}
&lt;/template&gt;
@ -241,7 +241,7 @@
&lt;InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Country" filterField="country.name"&gt;
&lt;Column header="Country" filterField="country.name" style="min-width:12rem"&gt;
&lt;template #body="{data}"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /&gt;
&lt;span class="image-text"&gt;{{data.country.name}}&lt;/span&gt;
@ -259,7 +259,7 @@
&lt;div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold"&gt;Customized Buttons&lt;/div&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}"&gt;
&lt;Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem"&gt;
&lt;template #body="{data}"&gt;
&lt;img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{data.representative.name}}&lt;/span&gt;
@ -276,7 +276,7 @@
&lt;/MultiSelect&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Date" filterField="date" dataType="date"&gt;
&lt;Column header="Date" filterField="date" dataType="date" style="min-width:10rem"&gt;
&lt;template #body="{data}"&gt;
{{formatDate(data.date)}}
&lt;/template&gt;
@ -284,7 +284,7 @@
&lt;Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Balance" filterField="balance" dataType="numeric"&gt;
&lt;Column header="Balance" filterField="balance" dataType="numeric" style="min-width:10rem"&gt;
&lt;template #body="{data}"&gt;
{{formatCurrency(data.balance)}}
&lt;/template&gt;
@ -292,7 +292,7 @@
&lt;InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="status" header="Status" :filterMenuStyle="{'width':'14rem'}"&gt;
&lt;Column field="status" header="Status" :filterMenuStyle="{'width':'14rem'}" style="min-width:12rem"&gt;
&lt;template #body="{data}"&gt;
&lt;span :class="'customer-badge status-' + data.status"&gt;{{data.status}}&lt;/span&gt;
&lt;/template&gt;
@ -320,7 +320,7 @@
&lt;/div&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" bodyClass="p-text-center"&gt;
&lt;Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem"&gt;
&lt;template #body="{data}"&gt;
&lt;i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"&gt;&lt;/i&gt;
&lt;/template&gt;
@ -335,7 +335,7 @@
&lt;h5&gt;Filter Row&lt;/h5&gt;
&lt;p&gt;Filters are displayed inline within a separate row.&lt;/p&gt;
&lt;DataTable :value="customers2" :paginator="true" class="p-datatable-customers" :rows="10"
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2"
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
:globalFilterFields="['name','country.name','representative.name','status']"&gt;
&lt;template #header&gt;
&lt;div class="p-d-flex p-jc-end"&gt;
@ -351,7 +351,7 @@
&lt;template #loading&gt;
Loading customers data. Please wait.
&lt;/template&gt;
&lt;Column field="name" header="Name"&gt;
&lt;Column field="name" header="Name" style="min-width:12rem"&gt;
&lt;template #body="{data}"&gt;
{{data.name}}
&lt;/template&gt;
@ -359,7 +359,7 @@
&lt;InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" v-tooltip.top.focus="'Hit enter key to filter'"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Country" filterField="country.name"&gt;
&lt;Column header="Country" filterField="country.name" style="min-width:12rem"&gt;
&lt;template #body="{data}"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /&gt;
&lt;span class="image-text"&gt;{{data.country.name}}&lt;/span&gt;
@ -368,7 +368,7 @@
&lt;InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" v-tooltip.top.focus="'Filter as you type'"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Agent" filterField="representative" :showFilterMenu="false"&gt;
&lt;Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width:14rem"&gt;
&lt;template #body="{data}"&gt;
&lt;img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{data.representative.name}}&lt;/span&gt;
@ -384,7 +384,7 @@
&lt;/MultiSelect&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="status" header="Status" :showFilterMenu="false"&gt;
&lt;Column field="status" header="Status" :showFilterMenu="false" style="min-width:12rem"&gt;
&lt;template #body="{data}"&gt;
&lt;span :class="'customer-badge status-' + data.status"&gt;{{data.status}}&lt;/span&gt;
&lt;/template&gt;
@ -400,7 +400,7 @@
&lt;/Dropdown&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 6rem"&gt;
&lt;Column field="verified" header="Verified" dataType="boolean" style="min-width:6rem"&gt;
&lt;template #body="{data}"&gt;
&lt;i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"&gt;&lt;/i&gt;
&lt;/template&gt;

8
src/views/datatable/DataTableRowExpandDemo.vue
View File

@ -10,7 +10,7 @@
<div class="content-section implementation">
<div class="card">
<DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
@row-expand="onRowExpand" @row-collapse="onRowCollapse">
@row-expand="onRowExpand" @row-collapse="onRowCollapse" responsiveLayout="scroll">
<template #header>
<div class="table-header-container">
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
@ -43,7 +43,7 @@
<template #expansion="slotProps">
<div class="orders-subtable">
<h5>Orders for {{slotProps.data.name}}</h5>
<DataTable :value="slotProps.data.orders">
<DataTable :value="slotProps.data.orders" responsiveLayout="scroll">
<Column field="id" header="Id" sortable></Column>
<Column field="customer" header="Customer" sortable></Column>
<Column field="date" header="Date" sortable></Column>
@ -77,7 +77,7 @@
</div>
<pre v-code><code><template v-pre>
&lt;DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
@row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt;
@row-expand="onRowExpand" @row-collapse="onRowCollapse" responsiveLayout="scroll"&gt;
&lt;template #header&gt;
&lt;div class="table-header-container"&gt;
&lt;Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" /&gt;
@ -110,7 +110,7 @@
&lt;template #expansion="slotProps"&gt;
&lt;div class="orders-subtable"&gt;
&lt;h5&gt;Orders for {{slotProps.data.name}}&lt;/h5&gt;
&lt;DataTable :value="slotProps.data.orders"&gt;
&lt;DataTable :value="slotProps.data.orders" responsiveLayout="scroll"&gt;
&lt;Column field="id" header="Id" sortable&gt;&lt;/Column&gt;
&lt;Column field="customer" header="Customer" sortable&gt;&lt;/Column&gt;
&lt;Column field="date" header="Date" sortable&gt;&lt;/Column&gt;

10
src/views/datatable/DataTableRowGroupDemo.vue
View File

@ -43,7 +43,7 @@
<h5>Expandable Row Groups</h5>
<p>Group customers by their representative.</p>
<DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1"
sortMode="single" sortField="representative.name" :sortOrder="1" responsiveLayout="scroll"
:expandableRowGroups="true" v-model:expandedRowGroups="expandedRowGroups"
@rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse">
<Column field="representative.name" header="Representative"></Column>
@ -75,7 +75,7 @@
<div class="card">
<h5>RowSpan Grouping</h5>
<DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1">
sortMode="single" sortField="representative.name" :sortOrder="1" responsiveLayout="scroll">
<Column header="#" headerStyle="width:3em">
<template #body="slotProps">
{{slotProps.index}}
@ -115,7 +115,7 @@
&lt;div class="card"&gt;
&lt;h5&gt;Subheader Grouping&lt;/h5&gt;
&lt;p&gt;Group customers by their representative.&lt;/p&gt;
&lt;DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
&lt;DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name" responsiveLayout="scroll"
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;
@ -147,7 +147,7 @@
&lt;h5&gt;Expandable Row Groups&lt;/h5&gt;
&lt;p&gt;Group customers by their representative.&lt;/p&gt;
&lt;DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1"
sortMode="single" sortField="representative.name" :sortOrder="1" responsiveLayout="scroll"
:expandableRowGroups="true" v-model:expandedRowGroups="expandedRowGroups"
@rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"&gt;
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
@ -179,7 +179,7 @@
&lt;div class="card"&gt;
&lt;h5&gt;RowSpan Grouping&lt;/h5&gt;
&lt;DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name"
sortMode="single" sortField="representative.name" :sortOrder="1"&gt;
sortMode="single" sortField="representative.name" :sortOrder="1" responsiveLayout="scroll"&gt;
&lt;Column header="#" headerStyle="width:3em"&gt;
&lt;template #body="slotProps"&gt;
{{slotProps.index}}

40
src/views/datatable/DataTableStateDemo.vue
View File

@ -12,19 +12,19 @@
<h5>Session Storage</h5>
<DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters1"
v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
stateStorage="session" stateKey="dt-state-demo-session">
stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll">
<template #header>
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="filters1['global']" placeholder="Global Search" />
</span>
</template>
<Column field="name" header="Name" :sortable="true">
<Column field="name" header="Name" :sortable="true" style="width:25%">
<template #filter>
<InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Search by name"/>
</template>
</Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains">
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%">
<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>
@ -33,7 +33,7 @@
<InputText type="text" v-model="filters1['country.name']" class="p-column-filter" placeholder="Search by country"/>
</template>
</Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%">
<template #body="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>
@ -49,7 +49,7 @@
</MultiSelect>
</template>
</Column>
<Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
<Column field="status" header="Status" :sortable="true" filterMatchMode="equals" style="width:25%">
<template #body="slotProps">
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
</template>
@ -71,19 +71,19 @@
<h5>Local Storage</h5>
<DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters2"
v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
stateStorage="session" stateKey="dt-state-demo-local">
stateStorage="session" stateKey="dt-state-demo-local" responsiveLayout="scroll">
<template #header>
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="filters2['global']" placeholder="Global Search" />
</span>
</template>
<Column field="name" header="Name" :sortable="true">
<Column field="name" header="Name" :sortable="true" style="width:25%">
<template #filter>
<InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Search by name"/>
</template>
</Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains">
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%">
<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>
@ -92,7 +92,7 @@
<InputText type="text" v-model="filters2['country.name']" class="p-column-filter" placeholder="Search by country"/>
</template>
</Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%">
<template #body="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>
@ -108,7 +108,7 @@
</MultiSelect>
</template>
</Column>
<Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
<Column field="status" header="Status" :sortable="true" filterMatchMode="equals" style="width:25%">
<template #body="slotProps">
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
</template>
@ -138,19 +138,19 @@
&lt;h5&gt;Session Storage&lt;/h5&gt;
&lt;DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters1"
v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
stateStorage="session" stateKey="dt-state-demo-session"&gt;
stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll"&gt;
&lt;template #header&gt;
&lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText v-model="filters1['global']" placeholder="Global Search" /&gt;
&lt;/span&gt;
&lt;/template&gt;
&lt;Column field="name" header="Name" :sortable="true"&gt;
&lt;Column field="name" header="Name" :sortable="true" style="width:25%"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains"&gt;
&lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%"&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;
@ -159,7 +159,7 @@
&lt;InputText type="text" v-model="filters1['country.name']" class="p-column-filter" placeholder="Search by country"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in"&gt;
&lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%"&gt;
&lt;template #body="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;
@ -175,7 +175,7 @@
&lt;/MultiSelect&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals"&gt;
&lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals" style="width:25%"&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;
@ -197,19 +197,19 @@
&lt;h5&gt;Local Storage&lt;/h5&gt;
&lt;DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters2"
v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
stateStorage="session" stateKey="dt-state-demo-local"&gt;
stateStorage="session" stateKey="dt-state-demo-local" responsiveLayout="scroll"&gt;
&lt;template #header&gt;
&lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText v-model="filters2['global']" placeholder="Global Search" /&gt;
&lt;/span&gt;
&lt;/template&gt;
&lt;Column field="name" header="Name" :sortable="true"&gt;
&lt;Column field="name" header="Name" :sortable="true" style="width:25%"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains"&gt;
&lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%"&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;
@ -218,7 +218,7 @@
&lt;InputText type="text" v-model="filters2['country.name']" class="p-column-filter" placeholder="Search by country"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in"&gt;
&lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%"&gt;
&lt;template #body="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;
@ -234,7 +234,7 @@
&lt;/MultiSelect&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals"&gt;
&lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals" style="width:25%"&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;

3
src/views/datatable/DataTableTemplatingDemo.vue
View File

@ -27,7 +27,6 @@
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
<Column field="category" header="Category"></Column>
<Column field="rating" header="Reviews">
<template #body="slotProps">
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
@ -70,7 +69,6 @@
{{formatCurrency(slotProps.data.price)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="rating" header="Reviews"&gt;
&lt;template #body="slotProps"&gt;
&lt;Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" /&gt;
@ -165,7 +163,6 @@ export default {
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
<Column field="category" header="Category"></Column>
<Column field="rating" header="Reviews">
<template #body="slotProps">
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />

2
src/views/deferredcontent/DeferredContentDemo.vue
View File

@ -21,7 +21,7 @@
</div>
<DeferredContent @load="onDataLoad">
<DataTable :value="products">
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>

2
src/views/deferredcontent/DeferredContentDoc.vue
View File

@ -86,7 +86,7 @@ import DeferredContent from 'primevue/deferredcontent';
&lt;/div&gt;
&lt;DeferredContent @load="onDataLoad"&gt;
&lt;DataTable :value="products"&gt;
&lt;DataTable :value="products" responsiveLayout="scroll"&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;

2
src/views/filterservice/FilterServiceDemo.vue
View File

@ -12,7 +12,7 @@
<h5>Table Integration</h5>
<p>A custom equals filter that checks for exact case sensitive value is registered and defined as a match mode of a column filter.</p>
<DataTable :value="customers" :paginator="true" :rows="10"
<DataTable :value="customers" :paginator="true" :rows="10" responsiveLayout="scroll"
dataKey="id" v-model:filters="filters" filterDisplay="row" :loading="loading">
<template #empty>
No customers found.

2
src/views/filterservice/FilterServiceDoc.vue
View File

@ -206,7 +206,7 @@ FilterService.filters['isPrimeNumber'](568985673); //false
</a>
</div>
<pre v-code><code><template v-pre>
&lt;DataTable :value="customers" :paginator="true" :rows="10"
&lt;DataTable :value="customers" :paginator="true" :rows="10" responsiveLayout="scroll"
dataKey="id" v-model:filters="filters" filterDisplay="row" :loading="loading"&gt;
&lt;template #empty&gt;
No customers found.

2
src/views/overlaypanel/OverlayPanelDemo.vue
View File

@ -12,7 +12,7 @@
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
<Column field="name" header="Name" sortable></Column>
<Column header="Image">
<template #body="slotProps">

2
src/views/overlaypanel/OverlayPanelDoc.vue
View File

@ -161,7 +161,7 @@ toggle(event) {
&lt;Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /&gt;
&lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"&gt;
&lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"&gt;
&lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll"&gt;
&lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
&lt;Column header="Image"&gt;
&lt;template #body="slotProps"&gt;

12
src/views/responsive/ResponsiveDemo.vue
View File

@ -263,7 +263,7 @@
<DataTable :value="customers" :paginator="true" :rows="10"
dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" responsiveLayout="scroll">
<template #header>
<div class="p-d-flex p-ai-center p-jc-between">
DataTable
@ -276,24 +276,24 @@
<template #empty>
No customers found.
</template>
<Column selectionMode="multiple" headerStyle="width: 3em"></Column>
<Column field="name" header="Name" :sortable="true">
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
<Column field="name" header="Name" :sortable="true" style="min-width:16rem">
<template #body="slotProps">
{{slotProps.data.name}}
</template>
</Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains">
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="min-width:16rem">
<template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" />
<span class="image-text">{{slotProps.data.country.name}}</span>
</template>
</Column>
<Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
<Column field="status" header="Status" :sortable="true" filterMatchMode="equals" style="min-width:16rem">
<template #body="slotProps">
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
</template>
</Column>
<Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte">
<Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte" style="min-width:16rem">
<template #body="slotProps">
<ProgressBar :value="slotProps.data.activity" :showValue="false" style="width: 100px"/>
</template>

2
src/views/skeleton/SkeletonDemo.vue
View File

@ -114,7 +114,7 @@
</div>
<h5>DataTable</h5>
<DataTable :value="products">
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code">
<template #body>
<Skeleton></Skeleton>

2
src/views/skeleton/SkeletonDoc.vue
View File

@ -389,7 +389,7 @@ export default {
</div>
<h5>DataTable</h5>
<DataTable :value="products">
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code">
<template #body>
<Skeleton></Skeleton>