diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue index a061a71a0..67d3f32a3 100755 --- a/src/views/autocomplete/AutoCompleteDoc.vue +++ b/src/views/autocomplete/AutoCompleteDoc.vue @@ -3,17 +3,22 @@Import
-+ + ++import AutoComplete from 'primevue/autocomplete'; -
AutoComplete uses v-model for two-way binding, requires a list of suggestions and a complete method to query for the results. The complete method gets the query text as event.query property and should update the suggestions with the search results. Example below connects to a remote datasource to fetch the results;
-
+
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountry($event)" field="name" />
-
+
export default {
data() {
return {
@@ -31,35 +36,42 @@ export default {
}
}
}
-Enabling dropdown property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes "blank" or "current" as possible values. "blank" is the default mode to send a query with an empty string whereas "current" setting sends a query with the current value of the input.
-
+
<AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" />
-Multiple mode is enabled using multiple property to select more than one value from the autocomplete. In this case, value reference should be an array.
-
+
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
-AutoComplete can also work with objects using the field property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a Country object that has name and code fields such as {name:"United States",code:"USA"}.
-
+
<AutoComplete field="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" />
-Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection.
-
+
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
<template #item="slotProps">
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
@@ -67,7 +79,7 @@ export default {
</template>
</AutoComplete>
-Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.
@@ -246,8 +258,8 @@ export default { View on GitHub -
+
<h5>Basic</h5>
<AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
@@ -266,9 +278,10 @@ export default {
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
</span>
-
+
import CountryService from '../../service/CountryService';
export default {
@@ -303,7 +316,8 @@ export default {
}
}
}
-Use .p-badge class to display numbers inside badges.
-
+
<span class="p-badge">2</span>
-Tags are optimized for text rather than number and used with the .p-tag class. For more rounded styling like pills, add the .p-tag-rounded class
-
+
<span class="p-tag">New</span>
<span class="p-tag p-tag-rounded">New</span>
-Different options are available as severity levels with.
@@ -31,7 +35,8 @@A badge can easily be positioned relative to another element when both are wrapped inside an element with p-overlay-badge class.
-
+
<span class="p-overlay-badge">
<i class="pi pi-bell" style="font-size: 2em"></i>
<span class="p-badge">2</span>
@@ -41,29 +46,36 @@
<Button type="button" label="New" />
<span class="p-badge p-badge-warning">5</span>
</span>
-Buttons provide integrated badge support with the badge and badgeClass properties.
-
+
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
-Badge sizes are adjusted with additional classes.
-
+
<span class="p-badge">2</span>
<span class="p-badge p-badge-l p-badge-sucess">4</span>
<span class="p-badge p-badge-xl p-badge-warning">6</span>
-In addition, when placed inside another element, badge sizes can also derive their size from their parent.
-
+
<h1>Heading 1 <span class="p-tag p-tag-success">New</span></h1>
<h2>Heading 2 <span class="p-tag p-tag-success">New</span></h2>
-Following is the list of structural style classes, for theming classes visit
+
<h3>Numbers</h3>
<div class="badges">
<span class="p-badge">2</span>
@@ -163,7 +175,7 @@
<span class="p-badge p-badge-xl p-badge-warning">6</span>
</div>
-
+
import BlockUI from 'primevue/blockui';
-BlockUI is controlled using the blocked property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.
-
+
<BlockUI :blocked="blockedPanel">
<Panel header="Header">
Panel Content
</Panel>
</BlockUI>
-
+
export default {
data() {
return {
@@ -35,14 +40,17 @@ export default {
}
}
}
-In full screen mode, instead of a particular element, the whole document gets blocked. Set fullScreen as true in order to enable this functionality.
-
+
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
-Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
@@ -141,7 +149,8 @@ export default { View on GitHub -
+
<h3>Document</h3>
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
@@ -159,9 +168,11 @@ export default {
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</Panel>
</BlockUI>
-
+
export default {
data() {
return {
@@ -185,7 +196,8 @@ export default {
}
}
}
-
+
import Breadcrumb from 'primevue/breadcrumb';
-Breadcrumb uses the common MenuModel API to define the items, visit
Breadcrumb requires a collection of menuitems as its model and a home item.
-
+
<Breadcrumb :home="home" :model="items" />
-
+
export default {
data() {
return {
@@ -31,7 +36,8 @@ export default {
}
}
}
-Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
@@ -101,13 +107,14 @@ export default { View on GitHub -
+
<Breadcrumb :home="home" :model="items" />
-
+
export default {
data() {
return {
@@ -122,7 +129,8 @@ export default {
}
}
}
-
+
import Button from 'primevue/button';
-Button is created using the Button element.
-
+
<Button />
-Text of the button is defined using the label property.
-
+
<Button label="Submit" />
-Icon on a button is specified with icon property and position is configured using iconPos attribute. Default icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.
-
+
<Button label="Submit" icon="pi pi-check" iconPos="right" />
-Events are defined with the standard notation.
-
+
<Button label="Submit" @click="handleClick($event)"/>
-Different options are available as severity levels.
@@ -43,7 +53,8 @@ import Button from 'primevue/button';
+
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
@@ -51,70 +62,87 @@ import Button from 'primevue/button';
<Button label="Warning" class="p-button-warning" />
<Button label="Warning" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />
-Text buttons have transparent background and borders, use p-button-text to apply text button styling. In addition when used with .p-button-plain text buttons ignore severity levels and displayed as a regular text.
-
+
<Button label="Submit" class="p-button-text" />
<Button icon="pi pi-check" class="p-button-text" />
<Button label="Cancel" icon="pi pi-times" class="p-button-text" />
<Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text p-button-text" />
-A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.
-
+
<Button label="Primary" class="p-button-raised p-button-rounded" />
-An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.
-
+
<Button label="Primary" class="p-button-outlined" />
-Use "p-button-link" class to render the button as a link.
-
+
<Button label="Link" class="p-button-link" />
-Badge is a small status indicator for a button. Refer to the
+
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" />
-Wrapping the buttons in a container having a .p-buttonset class, groups the buttons side to side.
-
+
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
-2 more sizes are available in addition to a regular button, for a smaller input add p-button-sm and for a larger one, use p-button-lg.
Note that these classes available to change the size of a particular button, for global scaling see the
+
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
-Custom content can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.
-
+
<Button>
Custom Content
</Button>
-Any property such as style and class are passed to the underlying button element. Following are the additional properties to configure the component.
@@ -206,8 +234,8 @@ import Button from 'primevue/button'; View on GitHub -
+
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Disabled" disabled="disabled" />
@@ -320,13 +348,15 @@ import Button from 'primevue/button';
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
</div>
-
+
button {
margin-right: .5rem;
}
-
+
import Calendar from 'primevue/calendar';
-Two-way value binding is defined using the standard v-model directive referencing to a Date property.
-
+
<Calendar v-model="value" />
-
+
export default {
data() {
return {
@@ -22,13 +27,16 @@ export default {
}
}
}
-Calendar is displayed in a popup by default and inline property needs to be enabled for inline mode.
-
+
<Calendar v-model="value" :inline="true" />
-By default calendar allows selecting one date only whereas multiple dates can be selected by setting selectionMode to multiple. In this @@ -36,16 +44,20 @@ export default { Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date.
-
+
<Calendar v-model="value" selectionMode="single || multiple || range" />
-Default date format is mm/dd/yy, to customize this use dateFormat property or define it at locale settings. Note that standalone property overrides the value in locale settings.
-
+
<Calendar v-model="value" dateFormat="dd.mm.yy" />
-Following options can be a part of the format.
TimePicker is enabled with showTime property and 24 (default) or 12 hour mode is configured using hourFormat option. If you need to use the time picker as standalone, use the timeOnly property.
-
+
<Calendar v-model="value" :showTime="true" />
<Calendar v-model="value" :showTime="true" hourFormat="12" />
<Calendar v-model="value" :showTime="true" :timeOnly="true" />
-To disable entering dates manually, set manualInput to true and to restrict selectable dates with the minDate and maxDate options.
-
+
<Calendar v-model="value" :minDate="minDateValue" maxDate="maxDateValue" />
-To disable specific dates or days, restrict selectable dates use disabledDates and/or disabledDays options.
-
+
<Calendar v-model="value" :disabledDates="invalidDates" :disabledDays="[0,6]" />
-Button bar displays today and clear buttons and enabled using showButtonBar property.
-
+
<Calendar v-model="value" :showButtonBar="true" />
-Displaying multiple months is enabled by setting numberOfMonths property to a value greater than 1.
-
+
<Calendar v-model="value" :numberOfMonths="3" />
-Localization for different languages and formats is defined by binding the locale settings object to the locale property. Following is the default values for English.
-
+
<Calendar v-model="value" :locale="en" />
-
+
export default {
data() {
return {
@@ -127,24 +152,27 @@ export default {
}
}
}
-Calendar UI accepts custom content using header and footer templates.
-
+
<Calendar v-model="value">
<template #header>Header Content</template>
<template #footer>Footer Content</template>
</Calendar>
-In addition, cell contents can be templated using a template named "date". This is a handy feature to highlight specific dates. Note that the date property of the slot props passed to the template is not a date instance but a metadata object to represent a Date with "day", "month" and "year" properties. Example below changes the background color of dates between 10th and 15th of each month.
-
+
<Calendar v-model="value">
<template #date="slotProps">
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
@@ -152,25 +180,31 @@ export default {
</template>
</Calendar>
-
+
.special-day {
text-decoration: line-through;
}
-Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.
-
+
<Calendar v-model="value" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
-Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices.
-
+
<Calendar v-model="value" :touchUI="true" />
-Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.
@@ -543,8 +577,8 @@ export default { View on GitHub -
+
<h5>Popup</h5>
<div class=" p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-4">
@@ -617,9 +651,10 @@ export default {
<h5>Inline</h5>
<Calendar v-model="date14" :inline="true" :showWeek="true" />
-
+
export default {
created() {
let today = new Date();
@@ -675,13 +710,16 @@ export default {
}
}
}
-
+
.special-day {
text-decoration: line-through;
}
-
+
import Card from 'primevue/card';
-Card is used as a container.
-
+
<Card>
Content
</Card>
-Card provides header, title, content and footer as the named templates to place content.
-
+
<Card>
<template slot="header">
<img alt="user header" src="demo/images/usercard.png">
@@ -34,7 +39,8 @@ import Card from 'primevue/card';
<Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
</template>
</Card>
-Following is the list of structural style classes, for theming classes visit
+
<Card style="width: 25rem; margin-bottom: 2em">
<template slot="title">
Simple Card
@@ -111,7 +117,7 @@ import Card from 'primevue/card';
</template>
</Card>
-
+
import Carousel from 'primevue/carousel';
-Carousel requires a collection of items as its value along with a template to render each item.
-
+
<Carousel :value="cars">
<template #item="slotProps">
</template>
</Carousel>
-Number of items per page is defined using the numVisible property whereas number of items to scroll is defined with the numScroll property.
-
+
<Carousel :value="cars" :numVisible="3" :numScroll="1">
<template #item="slotProps">
</template>
</Carousel>
-For responsive design, numVisible and numScroll can be defined using the responsiveOptions property that should be an array of objects whose breakpoint defines the max-width to apply the settings.
-
+
<Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
<h2>Basic</h2>
@@ -55,8 +61,9 @@ import Carousel from 'primevue/carousel';
</template>
</Carousel>
-
+
data() {
return {
responsiveOptions: [
@@ -78,12 +85,14 @@ data() {
]
}
},
-Custom content projection is available using the header and footer templates.
-
+
<Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
<template #header>
<h2>Custom Header</h2>
@@ -95,21 +104,25 @@ data() {
<h2>Custom Footer</h2>
</template>
</Carousel>
-Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the orientation property.
-
+
<Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
Content
</template>
</Carousel>
-When autoplayInterval is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling circular property needs to be enabled. Note that in autoplay mode, circular is enabled by default.
-
+
<Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000">
<template #header>
<h2>Circular, AutoPlay</h2>
@@ -118,7 +131,8 @@ data() {
Content
</template>
</Carousel>
-
+
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
@@ -346,9 +360,10 @@ data() {
</template>
</Carousel>
-
+
import ProductService from '../../service/ProductService';
export default {
@@ -382,9 +397,11 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
}
}
-
+
.product-item {
.product-item-content {
border: 1px solid var(--surface-d);
@@ -399,7 +416,8 @@ export default {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}
}
-
+
<h5>Vertical</h3>
<Chart type="bar" :data="basicData" />
@@ -16,9 +16,10 @@
<h3>Stacked</h3>
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
-
+
export default {
data() {
return {
@@ -161,7 +162,8 @@ export default {
}
}
}
-To begin with, charts.js package needs to be installed in your project.
-
+
npm install chart.js --save
-
+
import Chart from 'primevue/chart';
-Chart type is defined using the type property. Currently there are 6 options available; pie, doughtnut, line, bar, radar and polarArea.
Data of a chart is provided using a binding to the data property, each type has its own format of data. Here is an example of a line chart. For more information refer to the charts.js documentation.
-
+
<Chart type="bar" :data="basicData" />
-
+
export default {
data() {
return {
@@ -45,16 +52,20 @@ export default {
}
}
}
-While a series can be customized per dataset, general chart options are defined with options property. Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js documentation.
-
+
<Chart type="line" :data="data" :options="options" />
-
+
options: {
responsive: true,
hoverMode: 'index',
@@ -77,7 +88,8 @@ options: {
}]
}
}
-Any property as style and class are passed to the main container element. Following is the additional property to configure the component.
diff --git a/src/views/chart/ComboChartDoc.vue b/src/views/chart/ComboChartDoc.vue index 978899464..4bf7d83b7 100755 --- a/src/views/chart/ComboChartDoc.vue +++ b/src/views/chart/ComboChartDoc.vue @@ -2,13 +2,14 @@
+
<Chart type="bar" :data="chartData" :options="chartOptions"/>
-
+
export default {
data() {
return {
@@ -75,7 +76,8 @@ export default {
}
}
}
-
+
<Chart type="doughnut" :data="chartData" />
-
+
export default {
data() {
return {
@@ -33,7 +34,8 @@ export default {
}
}
}
-
+
<h3>Basic</h3>
<Chart type="line" :data="basicData" />
@@ -13,9 +13,10 @@
<h3>Line Styles</h3>
<Chart type="line" :data="lineStylesData" />
-
+
export default {
data() {
return {
@@ -108,7 +109,8 @@ export default {
}
}
}
-
+
<Chart type="pie" :data="chartData" />
-
+
export default {
data() {
return {
@@ -33,7 +34,8 @@ export default {
}
}
}
-
+
<Chart type="polarArea" :data="chartData" />
-
+
export default {
data() {
return {
@@ -41,7 +42,8 @@ export default {
}
}
}
-
+
<Chart type="radar" :data="chartData" />
-
+
export default {
data() {
return {
@@ -40,7 +41,8 @@ export default {
}
}
}
-
+
import Checkbox from 'primevue/checkbox';
-Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.
-
+
<Checkbox v-model="checked" :binary="true" />
-Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.
-
+
<Checkbox name="city" value="Chicago" v-model="cities" />
<Checkbox name="city" value="Los Angeles" v-model="cities" />
<Checkbox name="city" value="New York" v-model="cities" />
<Checkbox name="city" value="San Francisco" v-model="cities" />
-
+
export default {
data() {
return {
@@ -30,7 +37,8 @@ export default {
}
}
}
-As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked by default.
@@ -108,8 +116,8 @@ export default { View on GitHub -
+
<h3>Basic</h3>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
@@ -140,9 +148,10 @@ export default {
<label :for="category.key">{{category.name}}</label>
</div>
-
+
export default {
data() {
return {
@@ -156,7 +165,8 @@ export default {
this.selectedCategories = this.categories.slice(1,3);
}
}
-
+
import Chips from 'primevue/chips';
-An array as the value can be bound using the standard v-model directive.
-
+
<Chips v-model="value" />
-A chip is customized using the chip template where the chip value is passed to the slotProps with the value property.
-
+
<Chips v-model="value">
<template #chip="slotProps">
<div>
@@ -26,7 +30,7 @@ import Chips from 'primevue/chips';
</template>
</Chips>
-Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.
@@ -146,8 +150,8 @@ import Chips from 'primevue/chips'; View on GitHub -
+
<h5>Basic</h5>
<Chips v-model="value1" />
@@ -164,9 +168,10 @@ import Chips from 'primevue/chips';
</template>
</Chips>
-
+
export default {
data() {
return {
@@ -176,7 +181,8 @@ export default {
}
}
}
-
+
import ColorPicker from 'primevue/colorpicker';
-A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".
-
+
<ColorPicker v-model="color" />
-
+
export default {
data() {
return {
@@ -21,13 +26,16 @@ export default {
}
}
}
-ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.
-
+
<ColorPicker v-model="color" :inline="true" />
-Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
@@ -163,17 +171,18 @@ export default { View on GitHub -
+
<h3>Inline</h3>
<ColorPicker v-model="color1" :inline="true" />
<h3>Overlay</h3>
<ColorPicker v-model="color2" />
-
+
export default {
data() {
return {
@@ -182,7 +191,8 @@ export default {
}
}
}
-
+
import ContextMenu from 'primevue/contextmenu';
-ContextMenu uses the common MenuModel API to define the items, visit
ContextMenu requires a collection of menuitems as its model.
-
+
export default {
data() {
return {
@@ -151,23 +154,29 @@ export default {
}
}
}
-Setting global property attaches the context menu to the document.
-
+
<ContextMenu :global="true" :model="items" />
-ContextMenu is attached to a custom element manually using the reference and calling the show(event) method.
-
+
<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick">
<ContextMenu ref="menu" :model="items" />
-
+
export default {
data() {
return {
@@ -180,7 +189,8 @@ export default {
}
}
}
-Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
@@ -306,14 +316,15 @@ export default { View on GitHub -
+
<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true">
<ContextMenu ref="menu" :model="items" />
-
+
export default {
data() {
return {
@@ -456,7 +467,8 @@ export default {
}
}
}
-
+
<DataTable :value="products">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
@@ -30,9 +30,10 @@
<Column field="quantity" header="Quantity"></Column>
</DataTable>
-
+
import ProductService from '../../service/ProductService';
export default {
@@ -49,7 +50,8 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data);
}
}
-
+
<DataTable :value="sales">
<ColumnGroup type="header">
<Row>
@@ -110,9 +110,10 @@
</ColumnGroup>
</DataTable>
-
+
export default {
data() {
return {
@@ -157,7 +158,8 @@ export default {
}
}
}
-
+
<h3>Fit Mode</h3>
<DataTable :value="products" :resizableColumns="true" columnResizeMode="fit">
<Column field="code" header="Code"></Column>
@@ -51,9 +51,10 @@
<Column field="quantity" header="Quantity"></Column>
</DataTable>
-
+
import ProductService from '../../service/ProductService';
export default {
@@ -70,7 +71,8 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data);
}
}
-
+
<DataTable :value="products">
<template #header>
<div style="text-align:left">
@@ -38,9 +38,10 @@
<Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
</DataTable>
-
+
import ProductService from '../../service/ProductService';
export default {
@@ -71,7 +72,8 @@ export default {
}
}
}
-
+
<DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @row-contextmenu="onRowContextMenu">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
@@ -42,9 +42,10 @@
<ContextMenu :model="menuModel" ref="cm" />
-
+
import ProductService from '../../service/ProductService';
export default {
@@ -82,7 +83,8 @@ export default {
}
}
}
-
+
<Toolbar class="p-mb-4">
<template slot="left">
<Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
@@ -277,9 +277,10 @@
</template>
</Dialog>
-
+
import ProductService from '../../service/ProductService';
export default {
@@ -381,7 +382,8 @@ export default {
}
}
}
-
+
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import ColumnGroup from 'primevue/columngroup'; //optional for column grouping
- DataTable requires a value as an array of objects and columns defined with Column component. Throughout the samples, a car interface having vin, brand, year and color properties is used to define an object to be displayed by the datatable. Cars are loaded by a CarService that connects to a server to fetch the cars with a axios. Note that this is only for demo purposes, DataTable does not have any restrictions on how the data is provided.
-
+
import axios from 'axios'
export default class CarService {
@@ -30,10 +33,12 @@ export default class CarService {
return axios.get('demo/data/cars-large.json').then(res => res.data.data);
}
}
- Example response;
-
+
{
"data": [
{"brand": "Volkswagen", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
@@ -48,11 +53,12 @@ export default class CarService {
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
]
}
- Following sample datatable has 4 columns and retrieves the data from a service on mount.
-
+
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@@ -60,9 +66,10 @@ export default class CarService {
<Column field="color" header="Color"></Column>
</DataTable>
-
+
import CarService from '../../service/CarService';
export default {
@@ -79,19 +86,21 @@ export default {
this.carService.getCarsSmall().then(data => this.cars = data);
}
}
-Column components can be dynamically generated using a v-for as well.
-
+
<DataTable :value="cars">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable>
-
+
import CarService from '../../service/CarService';
export default {
@@ -116,7 +125,8 @@ export default {
this.carService.getCarsSmall().then(data => this.cars = data);
}
}
-Field data of a corresponding row is displayed as the cell content by default, this can be customized using a body template where current row data and column properties are passed via the slot props. On the other hand, header and footer sections of a column can either be defined with the properties or the templates. Similarly DataTable itself also provides header and footer properties along with the templates for the main header and footer of the table.
-
+
<DataTable :value="cars">
<template #header>
<div>
@@ -336,14 +346,14 @@ export default {
</template>
</DataTable>
-In addition to the regular table, a smal and a large version are available with different paddings. For a table with smaller paddings use p-datatable-sm class and for a larger one use p-datatable-lg.
-
+
<DataTable :value="cars" class="p-datatable-sm">
<template #header>
Small Table
@@ -374,12 +384,12 @@ export default {
<Column field="color" header="Color"></Column>
</DataTable>
-Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.
-
+
<DataTable :value="sales">
<ColumnGroup type="header">
<Row>
@@ -411,15 +421,15 @@ export default {
</ColumnGroup>
</DataTable>
-Pagination is enabled by setting paginator property to true and defining the rows property defines the number of rows per page.
See the
+
<DataTable :value="cars" :paginator="true" :rows="10">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@@ -427,11 +437,11 @@ export default {
<Column field="color" header="Color"></Column>
</DataTable>
-paginatorLeft and paginatorLeft templates are available to specify custom content at the left and right side.
-
+
<DataTable :value="cars" :paginator="true" :rows="10">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@@ -445,13 +455,13 @@ export default {
</template>
</DataTable>
-Paginator can also be programmed programmatically using a binding to the first property that defines the index of the first element to display. For example setting first to zero will reset the paginator to the very first page. This property also supports "sync" keyword in case you'd like your binding to be updated whenever the user changes the page.
-
+
<DataTable :value="cars" :paginator="true" :rows="10" :first="firstRecordIndex">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@@ -459,14 +469,14 @@ export default {
<Column field="color" header="Color"></Column>
</DataTable>
-Enabling sortable property at column component would be enough to make a column sortable. The property to use when sorting is the field by default and can be customized using the sortField.
-
+
<DataTable :value="cars">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
@@ -474,11 +484,11 @@ export default {
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
-By default sorting is executed on the clicked column only. To enable multiple field sorting, set sortMode property to "multiple" and use metakey when clicking on another column.
-
+
<DataTable :value="cars" sortMode="multiple">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
@@ -486,12 +496,12 @@ export default {
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
-In case you'd like to display the table as sorted per a single column by default on mount or programmatically apply sort, use sortField and sortOrder properties. These two properties also support the "sync" keyword to get updated when the user applies sort a column.
-
+
<DataTable :value="cars" sortField="year" :sortOrder="1">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
@@ -506,11 +516,11 @@ export default {
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
-In multiple mode, use the multiSortMeta property and bind an array of SortMeta objects instead.
-
+
<DataTable :value="cars" sortMode="multiple" :multiSortMeta="multiSortMeta">
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column>
@@ -518,9 +528,10 @@ export default {
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
-
+
data() {
return {
multiSortMeta: [
@@ -529,7 +540,8 @@ data() {
]
}
}
-Filtering is enabled by defining a filter template per column to populate the filters property of the DataTable. The filters @@ -537,8 +549,8 @@ data() { via the slotProps and accepts any form element as the filter element. Default match mode is "startsWith" and this can be configured per column using the filterMatchMode property that also accepts "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom" as available modes.
Optionally a global filter is available to search against all the fields, in this case the special global keyword should be the property to be populated.
-
+
<DataTable :value="cars" :filters="filters" :paginator="true" :rows="10">
<template #header>
<div style="text-align: right">
@@ -575,20 +587,21 @@ data() {
</Column>
</DataTable>
-Custom filtering is implemented by setting the filterMatchMode to "custom" and defining a filter function.
-
+
<Column field="vin" header="Vin" filterMatchMode="myOwnEquals">
<template #filter>
<InputText type="text" v-model="filters['vin']" class="p-column-filter" />
</template>
</Column>
-
+
methods: {
myOwnEquals(value, filter) {
if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
@@ -602,7 +615,8 @@ methods: {
return value.toString().toLowerCase() === filter.toString().toLowerCase();
}
}
-DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the selection property and updated using the sync keyword. @@ -613,8 +627,8 @@ methods: {
In single mode, selection binding is an object reference.
-
+
<DataTable :value="cars" :selection.sync="selectedCar" selectionMode="single" dataKey="vin">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@@ -622,11 +636,11 @@ methods: {
<Column field="color" header="Color"></Column>
</DataTable>
-In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of metaKeySelection property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.
-
+
<DataTable :value="cars" :selection.sync="selectedCars" selectionMode="multiple" dataKey="vin">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@@ -634,11 +648,11 @@ methods: {
<Column field="color" header="Color"></Column>
</DataTable>
-If you prefer a radioButton or a checkbox instead of a row click, use the selectionMode of a column instead. Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox to toggle selection of all rows.
-
+
<DataTable :value="cars" :selection.sync="selectedCars" selectionMode="multiple" dataKey="vin">
<Column selectionMode="multiple"></Column>
<Column field="vin" header="Vin"></Column>
@@ -647,12 +661,12 @@ methods: {
<Column field="color" header="Color"></Column>
</DataTable>
-DataTable supports both horizontal and vertical scrolling as well as frozen columns and rows. Scrollable DataTable is enabled using scrollable property and scrollHeight to define the viewport height.
-
+
<DataTable :value="cars" :scrollable="true" scrollHeight="200px">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@@ -660,12 +674,12 @@ methods: {
<Column field="color" header="Color"></Column>
</DataTable>
-In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically responds to the dialog size changes such as maximizing.
-
+
<Button label="Show" icon="pi pi-external-link" @click="openDialog" />
<Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
<DataTable :value="cars" :scrollable="true" scrollHeight="flex">
@@ -680,12 +694,12 @@ methods: {
</template>
</Dialog>
-FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the Full Page demo for an example.
-
+
<div style="height: calc(100vh - 143px)">
<DataTable :value="cars" :scrollable="true" scrollHeight="flex">
<Column field="vin" header="Vin"></Column>
@@ -695,12 +709,12 @@ methods: {
</DataTable>
</div>
-In horizontal scrolling, it is required to give fixed widths to columns. In general when customizing the column widths of scrollable tables, use colgroup as below to avoid misalignment issues as it will apply both the header, body and footer sections which are different separate elements internally.
-
+
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px">
<Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"></Column>
<Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_1"></Column>
@@ -712,12 +726,12 @@ methods: {
<Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"></Column>
</DataTable>
-Certain columns can be frozen by using the frozen property of the column component. Widths of the frozen section is specified by the frozenWidth property.
-
+
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true">
<template #body="slotProps">
@@ -735,11 +749,11 @@ methods: {
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_3"></Column>
</DataTable>
-Note that frozen columns are enabled, frozen and scrollable cells may have content with varying height which leads to misalignment. Provide fixed height to cells to avoid alignment issues.
-
+
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 300px" bodyStyle="height: 25px" columnKey="vin" :frozen="true">
<template #body="slotProps">
@@ -751,11 +765,11 @@ methods: {
<Column field="color" header="Color" headerStyle="width: 300px" bodyStyle="height: 25px" columnKey="color"></Column>
</DataTable>
-One or more rows can be displayed as fixed using the frozenValue property.
-
+
<DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@@ -763,7 +777,7 @@ methods: {
<Column field="color" header="Color"></Column>
</DataTable>
-When using frozen columns with column grouping, use frozenheadergroup and frozenfootergroup types to define grouping for the frozen section.
@@ -772,8 +786,8 @@ methods: { For smooth scrolling twice the amount of rows property is loaded on a lazy load event. In addition, to avoid performance problems row height is not calculated automatically and should be provided using virtualRowHeight property which defaults to 28px. View the
+
<DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20"
:virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
<Column field="vin" header="Vin">
@@ -798,9 +812,10 @@ methods: {
</Column>
</DataTable>
-
+
import CarService from '../../service/CarService';
export default {
@@ -828,7 +843,8 @@ export default {
}
}
}
-Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks such as paging and sorting. Sample belows imitates lazy paging by using an in memory list. @@ -841,8 +857,8 @@ export default { in lazy filtering, totalRecords should also be updated to align the data with the paginator.
Here is a sample paging implementation with in memory data, a more enhanced example with a backend is being worked on and will be available at a github repository.
-
+
<DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
<Column field="vin" header="Vin"></Column>
@@ -851,9 +867,10 @@ export default {
<Column field="color" header="Color"></Column>
</DataTable>
-
+
import CarService from '../../service/CarService';
export default {
@@ -892,14 +909,15 @@ export default {
}
}
}
-Rows can be expanded to display additional content using the expandedRows property with the sync operator accompanied by a template named "expansion". row-expand and row-collapse are optional callbacks that are invoked when a row is expanded or toggled.
The dataKey property identifies a unique value of a row in the dataset, it is not mandatory in row expansion functionality however being able to define it increases the performance of the table signifantly.
-
+
<DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin"
@row-expand="onRowExpand" @row-collapse="onRowCollapse">
<template #header>
@@ -929,9 +947,10 @@ export default {
</template>
</DataTable>
-
+
import CarService from '../../service/CarService';
export default {
@@ -965,7 +984,8 @@ export default {
}
}
}
-In cell editing provides a rapid and user friendly way to manipulate the data. The datatable provides a flexible API @@ -975,8 +995,8 @@ export default {
Individuals cell editing is configured by setting the editMode to "cell" and defining editors with the "editor" template. The content of the editor defines how the editing is implemented, below example demonstrates two cases. In the first example, simple v-model editors are utilized. This is pretty straightforward in most cases. On the other hand, second example is more advanced to consider validations and ability to revert values with the escape key.
-
+
<h3>Basic Cell Editing</h3>
<p>Simple editors with v-model.</p>
<DataTable :value="cars1" editMode="cell">
@@ -1019,9 +1039,10 @@ export default {
</Column>
</DataTable>
-
+
import CarService from '../../service/CarService';
import Vue from 'vue';
@@ -1104,12 +1125,13 @@ export default {
this.carService.getCarsSmall().then(data => this.cars2 = data);
}
}
-Row Editing is defined by setting cellEdit as "row", defining editingRows with the sync operator to hold the reference to the editing rows and adding a row editor column to provide the editing controls. Note that since editingRows is two-way binding enabled, you may use it to initially display one or more rows in editing more or programmatically toggle row editing.
-
+
<h3>Row Editing</h3>
<DataTable :value="cars" editMode="row" dataKey="vin" :editingRows.sync="editingRows"
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
@@ -1132,9 +1154,10 @@ export default {
<Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"></Column>
</DataTable>
-
+
import CarService from '../../service/CarService';
import Vue from 'vue';
@@ -1164,13 +1187,14 @@ export default {
this.carService.getCarsSmall().then(data => this.cars = data);
}
}
-Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized. In "expand" mode, table width also changes along with the column width. column-resize-end is a callback that passes the resized column header and delta change as a parameter.
-
+
<DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@@ -1178,11 +1202,11 @@ export default {
<Column field="color" header="Color"></Column>
</DataTable>
-It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.
-
+
<DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit | expand">
<Column field="vin" header="Vin" headerStyle="width: 20%"></Column>
<Column field="year" header="Year" headerStyle="width: 40%"></Column>
@@ -1190,13 +1214,13 @@ export default {
<Column field="color" header="Color" headerStyle="width: 20%"></Column>
</DataTable>
-Columns can be reordered using drag drop by setting the reorderableColumns to true. column-reorder is a callback that is invoked when a column is reordered. DataTable keeps the column order state internally using keys that identifies a column using the field property. If the column has no field, use columnKey instead as it is mandatory for columns to have unique keys when reordering is enabled.
-
+
<DataTable :value="cars" :reorderableColumns="true">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@@ -1204,12 +1228,12 @@ export default {
<Column field="color" header="Color"></Column>
</DataTable>
-Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle along with the row-order event which is mandatory to update the new order. Note that the reorder icon can be customized using rowReorderIcon of the column component.
-
+
<DataTable :value="cars" @row-reorder="onRowReorder">
<Column :rowReorder="true" headerStyle="width: 3em" />
<Column field="vin" header="Vin"></Column>
@@ -1218,9 +1242,10 @@ export default {
<Column field="color" header="Color"></Column>
</DataTable>
-
+
import CarService from '../../service/CarService';
export default {
@@ -1243,7 +1268,8 @@ export default {
}
}
}
-Row Grouping comes in two modes, in "subheader" mode rows are grouped by a header row along with an optional group footer. In addition, the groups can be made @@ -1252,8 +1278,8 @@ export default {
Example below demonstrates the all grouping alternatives. Note that data needs to be sorted for grouping which can also be done by the table itself by speficying the sort properties.
-
+
<h3>Subheader Grouping</h3>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1">
@@ -1305,9 +1331,10 @@ export default {
<Column field="price" header="Price"></Column>
</DataTable>
-
+
import CarService from '../../service/CarService';
export default {
@@ -1346,12 +1373,13 @@ export default {
}
}
}
-DataTable can export its data in CSV format using exportCSV() method.
-
+
<DataTable :value="cars" ref="dt">
<template #header>
<div style="text-align: left">
@@ -1364,9 +1392,10 @@ export default {
<Column field="color" header="Color"></Column>
</DataTable>
-
+
import CarService from '../../service/CarService';
export default {
@@ -1388,15 +1417,16 @@ export default {
}
}
}
-Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings. Enabling state is easy as defining a unique stateKey, the storage to keep the state is defined with the stateStorage property that accepts session for sessionStorage and local for localStorage. Currently following features are supported by TableState; paging, sorting, filtering, column resizing, column reordering, row expansion, row group expansion and row selection.
-
+
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
stateStorage="session" stateKey="dt-state-demo-session"
:selection.sync="selectedCar" selectionMode="single" dataKey="vin">
@@ -1438,9 +1468,10 @@ export default {
</template>
</DataTable>
-
+
import CarService from '../../service/CarService';
export default {
@@ -1481,12 +1512,13 @@ export default {
this.carService.getCarsMedium().then(data => this.cars = data);
}
}
-DataTable provides exclusive integration with the ContextMenu component using, contextMenu, contextMenuSelection property along with the row-contextmenu event.
-
+
<DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@@ -1496,9 +1528,10 @@ export default {
<ContextMenu :model="menuModel" ref="cm" />
-
+
import CarService from '../../service/CarService';
export default {
@@ -1533,12 +1566,13 @@ export default {
}
}
}
-When there is no data, you may use the empty template to display a message.
-
+
<DataTable :value="cars">
<template #empty>
No records found
@@ -1549,13 +1583,13 @@ export default {
<Column field="color" header="Color"></Column>
</DataTable>
-A loading status indicator can be displayed when the loading property is enabled. The icon is customized through loadingIcon property. Additionally an option loading template is available to render as the body until the data is loaded.
-
+
<DataTable :value="cars" :loading="loading">
<template #loading>
Loading records, please wait...
@@ -1566,9 +1600,10 @@ export default {
<Column field="color" header="Color"></Column>
</DataTable>
-
+
import CarService from '../../service/CarService';
export default {
@@ -1592,12 +1627,13 @@ export default {
});
}
}
-DataTable display can be optimized according to screen sizes, this example demonstrates a sample demo where columns are stacked on small screens.
-
+
<DataTable :value="cars" class="p-datatable-responsive-demo">
<template #header>
Responsive
@@ -1628,9 +1664,10 @@ export default {
</Column>
</DataTable>
-
+
import CarService from '../../service/CarService';
export default {
@@ -1647,9 +1684,11 @@ export default {
this.carService.getCarsSmall().then(data => this.cars = data);
}
}
-
+
.p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title {
display: none;
}
@@ -1681,13 +1720,14 @@ export default {
}
}
}
-Certain rows or cells can easily be styled based on conditions. Cell styling is implemented with templating whereas row styling utilizes the rowClass property which takes the row data as a parameter and returns the style class as a string.
-
+
<DataTable :value="cars" :rowClass="rowClass">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year" bodyStyle="padding: 0">
@@ -1701,9 +1741,10 @@ export default {
<Column field="color" header="Color"></Column>
</DataTable>
-
+
import CarService from '../../service/CarService';
export default {
@@ -1726,9 +1767,11 @@ export default {
}
}
}
-
+
.year-cell {
padding: 0.429em 0.857rem;
@@ -1743,7 +1786,8 @@ export default {
background-color: #344b5f !important;
color: #ffffff !important;
}
-
+
{
"data": [
{
@@ -2416,10 +2461,11 @@ export default {
}
},
/...
-
+
<DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters" :loading="loading"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
@@ -2514,9 +2560,10 @@ export default {
</Column>
</DataTable>
-
+
import CustomerService from '../../service/CustomerService';
export default {
@@ -2580,9 +2627,11 @@ export default {
}
}
}
-
+
::v-deep(.p-paginator) {
.p-paginator-current {
margin-left: auto;
@@ -2676,7 +2725,8 @@ export default {
}
}
}
-
+
<DataTable :value="products">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable>
-
+
import ProductService from '../../service/ProductService';
export default {
@@ -51,7 +52,8 @@ export default {
this.productService.getProductsSmall().then(data => this.products = data);
}
}
-
+
<h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p>
<DataTable :value="products1" editMode="cell" class="editable-cells-table">
@@ -176,9 +176,10 @@
<Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"></Column>
</DataTable>
-
+
import ProductService from '../../service/ProductService';
export default {
@@ -277,19 +278,22 @@ export default {
this.productService.getProductsSmall().then(data => this.products3 = data);
}
}
-
+
::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0;
padding-bottom: 0;
}
-