-
@@ -44,7 +46,7 @@ export default {
-
@@ -139,7 +141,6 @@ const onToggle = (val) => {
}
};
},
-
created() {
this.columns = [
{ field: 'name', header: 'Name' },
@@ -148,10 +149,10 @@ const onToggle = (val) => {
];
this.selectedColumns = this.columns;
},
- mounted() {
- ProductService.getProductsMini().then((data) => (this.products = data));
- },
methods: {
+ loadDemoData() {
+ ProductService.getProductsMini().then((data) => (this.products = data));
+ },
onToggle(value) {
this.selectedColumns = this.columns.filter((col) => value.includes(col));
}
diff --git a/doc/datatable/ConditionalStyleDoc.vue b/doc/datatable/ConditionalStyleDoc.vue
index dd069efbe..21486f042 100644
--- a/doc/datatable/ConditionalStyleDoc.vue
+++ b/doc/datatable/ConditionalStyleDoc.vue
@@ -2,20 +2,22 @@
Particular rows and cells can be styled based on conditions. The rowClass receives a row data as a parameter to return a style class for a row whereas cells are customized using the body template.
-
-
-
-
-
-
+
- {{ slotProps.data.quantity }}
-
-
-
+
+
+
+
+
+
+
+ {{ slotProps.data.quantity }}
+
+
+
-
-
-
- {{ formatCurrency(slotProps.data.price) }}
-
-
-
-
+
+
+
+
+ {{ formatCurrency(slotProps.data.price) }}
+
+
+
+
+ Columns can be created programmatically.
-
-
-
+
+
+
+
+ DataTable can export its data to CSV format.
-
-
-
-
+
-
-
-
-
+
+
+
+
+
+
+
+
+ Enabling showGridlines displays borders between cells.
-
-
-
+
+
+
+
+ Note that, the implementation of checkbox selection in lazy mode needs to be handled manually as in this example since the DataTable cannot know about the whole dataset.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
- 
- {{ data.country.name }}
-
-
-
-
- {{ data.country.name }}
-
- ![]()
- {{ data.representative.name }}
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ data.country.name }}
+
+
+
+
+ {{ data.country.name }}
+
+ ![]()
+ {{ data.representative.name }}
+
+
+
+
-
-
-
+
+
+
+
+
-
-
-
-
- ![]()
+
+
+
+
-
-
-
-
-
+
+
+
-
- {{ formatCurrency(slotProps.data.price) }}
+
+
+ ![]()
+
+
+
+
+ {{ formatCurrency(slotProps.data.price) }}
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
+
+
+
+ {{ formatCurrency(slotProps.data.amount) }}
+
+
+
+
+
+
+
+
+
+
+
+
- Orders for {{ slotProps.data.name }}
+
-
-
-
- {{ formatCurrency(slotProps.data.amount) }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- Orders for {{ slotProps.data.name }}
-In addition to a regular table, alternatives with alternative sizes are available.
-
-
+
-
-
+
+
-
-
+
+
-
-
+
-
-
+
+
+
-
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No customers found.
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No customers found.
-
-
+
-
- {{ data.country.name }}
-
-
-
-
- {{ data.country.name }}
-
- ![]()
- {{ data.representative.name }}
-
-
-
-
- ![]()
- {{ slotProps.option.name }}
-
-
-
+
+ {{ data.country.name }}
+
+
+
+
+ {{ data.country.name }}
+
+ ![]()
+ {{ data.representative.name }}
+
+
+
+
+ ![]()
+ {{ slotProps.option.name }}
+
+
+ Alternating rows are displayed when stripedRows property is present.
-
-
-
+
+
+
+
+ Custom content at header and footer sections are supported via templating.
-
-
-
-
- ![]()
+
+
+
+ ![]()
+
+
+
+
+ {{ formatCurrency(slotProps.data.price) }}
+
+
+
+
+
+
+
+
+ In total there are {{ products ? products.length : 0 }} products.
+
+
+
- Products
-
-
-
-
+
+
+
-
- {{ formatCurrency(slotProps.data.price) }}
-
-
-
-
-
-
-
-
- In total there are {{ products ? products.length : 0 }} products.
-
-
+
+ Products
+
+
-
- Setting columnResizeMode as expand changes the table width as well.
-
-
-
+
+
+
+
+
-
-
-
+
+
+
+
+ Cell editing is enabled by setting editMode as cell, defining input elements with editor templating of a Column and implementing cell-edit-complete to update the state.
-
-
-
- {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
-
-
-
-
+
+
+
+
+
+
+
+ {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
-
-
-
-
+ Cell Editing with Sorting and Filter
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ formatCurrency(data[field]) }}
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ formatCurrency(data[field]) }}
+
+
+
+
+
+ When filterDisplay is set as menu, filtering is done via popups with support for multiple constraints and advanced templating.
-
-
-
-
- {{ data.name }}
-
-
-
-
-
-
-
-
-
-
- No customers found.
- Loading customers data. Please wait.
-
-
- {{ data.country.name }}
+
+
+
+ {{ data.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ formatDate(data.date) }}
+
+
+
+
+
+ {{ formatCurrency(data.balance) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {{ data.country.name }}
+
+
+
+
-
-
-
-
-
-
-
-
- {{ formatDate(data.date) }}
-
-
-
-
-
- {{ formatCurrency(data.balance) }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ No customers found.
+ Loading customers data. Please wait.
+
+
+
-
- Customized Buttons
-
-
-
- ![]()
- {{ data.representative.name }}
-
-
-
-
- ![]()
- {{ slotProps.option.name }}
-
-
-
- {{ filterModel.value ? filterModel.value[0] : 0 }}
- {{ filterModel.value ? filterModel.value[1] : 100 }}
-
-
-
+
+ {{ data.country.name }}
+
+
+
+
+ {{ data.country.name }}
+ Customized Buttons
+
+
+ ![]()
+ {{ data.representative.name }}
+
+
+
+
+ ![]()
+ {{ slotProps.option.name }}
+
+
+
+ {{ filterModel.value ? filterModel.value[0] : 0 }}
+ {{ filterModel.value ? filterModel.value[1] : 100 }}
+
+
+ The optional global filtering searches the data against a single value that is bound to the global key of the filters object. The fields to search against is defined with the globalFilterFields.
-
-
-
-
-
- {{ data.name }}
-
-
-
-
-
-
-
+
Paginator component for more information about the advanced customization options.
-
+
-
+
+
-
-
-
- No customers found.
- Loading customers data. Please wait.
-
-
- {{ data.country.name }}
+
+
+
+ {{ data.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {{ data.country.name }}
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ No customers found.
+ Loading customers data. Please wait.
+
+
-
-
- ![]()
- {{ data.representative.name }}
-
-
-
-
- ![]()
- {{ slotProps.option.name }}
-
-
-
+
+ {{ data.country.name }}
+
+
+
+
+ {{ data.country.name }}
+
+ ![]()
+ {{ data.representative.name }}
+
+
+
+
+ ![]()
+ {{ slotProps.option.name }}
+
+
+ Pagination is enabled by adding paginator property and defining rows per page.
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+ >
+
-
-
- ![]()
- {{ slotProps.data.representative.name }}
-
-
-
-
+
+
+
-
- {{ slotProps.data.country.name }}
-
+
- {{ slotProps.data.country.name }}
-
+
+
+ ![]()
+ {{ slotProps.data.representative.name }}
-
-
-
-
+
+
+
+
+
+
-
-
+
+
+ {{ slotProps.data.country.name }}
+
+
+
+ {{ slotProps.data.country.name }}
+ Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}
- Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}
-
- When rowGroupMode is configured to be rowspan, the grouping column spans multiple rows.
-
-
-
- {{ slotProps.index + 1 }}
-
-
-
-
-
-
-
-
-
-
-
-
-
+
- ![]()
- {{ slotProps.data.representative.name }}
-
-
-
-
- {{ slotProps.data.country.name }}
-
-
-
- {{ slotProps.data.country.name }}
-
+
+
+
+ {{ slotProps.index + 1 }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+ {{ slotProps.data.representative.name }}
+
+
+
+
+ {{ slotProps.data.country.name }}
+
+
+
+ {{ slotProps.data.country.name }}
+
-
-
-
-
+
+
+
+
- ![]()
- {{ slotProps.data.representative.name }}
-
-
-
+
+
-
-
+
+
+
+
+
+
-
-
+
-
- {{ slotProps.data.country.name }}
+ ![]()
+ {{ slotProps.data.representative.name }}
-
-
- {{ slotProps.data.country.name }}
+
+
+ {{ slotProps.data.country.name }}
+
+
+
+ {{ slotProps.data.country.name }}
+ Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}
- Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}
-
- Specifying selectionMode as multiple on a Column, displays a checkbox inside that column for selection.
The header checkbox toggles the selection state of the whole dataset by default, when paginator is enabled you may add selectAll property and select-all-change event to only control the selection of visible rows.
-
-
-
-
+
+
+
+
+
-
+
-
+
-
+
-
-
+
+
+
-
+
+
-
-
-
+
+
+
+
+ DataTable provides row-select and row-unselect events to listen selection events.
-
-
-
+
+
+
+
+
-
-
-
+
-
-
+
+
+
-
+
+ DataTable with selection, pagination, filtering, sorting and templating.
-
-
-
-
- {{ data.name }}
-
-
-
-
-
-
-
-
-
-
-
- No customers found.
-
-
- {{ data.country.name }}
+
+
+
+ {{ data.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ formatDate(data.date) }}
+
+
+
+
+
+ {{ formatCurrency(data.balance) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {{ data.country.name }}
+
+
+
+
-
-
-
-
-
-
-
-
- {{ formatDate(data.date) }}
-
-
-
-
-
- {{ formatCurrency(data.balance) }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ No customers found.
+
+
+
-
-
- ![]()
- {{ data.representative.name }}
-
-
-
-
- ![]()
- {{ slotProps.option.name }}
-
-
-
- {{ filterModel.value ? filterModel.value[0] : 0 }}
- {{ filterModel.value ? filterModel.value[1] : 100 }}
-
-
-
+
+ {{ data.country.name }}
+
+
+
+
+ {{ data.country.name }}
+
+ ![]()
+ {{ data.representative.name }}
+
+
+
+
+ ![]()
+ {{ slotProps.option.name }}
+
+
+
+ {{ filterModel.value ? filterModel.value[0] : 0 }}
+ {{ filterModel.value ? filterModel.value[1] : 100 }}
+
+
+ CRUD implementation example with a Dialog.
-
-
-
-
-
+
+
+
+ ![]()
+
+
+
+
+ {{ formatCurrency(slotProps.data.price) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
-
+
+
-
- ![]()
-
-
-
-
- {{ formatCurrency(slotProps.data.price) }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+ Manage Products
- -
+
+
-