From 32273fc8b7de5216f370711794448b79dfe4629d Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Wed, 10 Jul 2019 17:20:12 +0300 Subject: [PATCH] Docs for DataTable --- src/components/column/Column.vue | 2 +- src/components/datatable/DataTable.vue | 7 +- src/views/datatable/DataTableDemo.vue | 12 +- src/views/datatable/DataTableDoc.vue | 960 +++++++++++++++++++++++++ 4 files changed, 968 insertions(+), 13 deletions(-) diff --git a/src/components/column/Column.vue b/src/components/column/Column.vue index d149288e2..493a01ba7 100644 --- a/src/components/column/Column.vue +++ b/src/components/column/Column.vue @@ -3,7 +3,7 @@ export default { name: 'column', props: { columnKey: { - type: Object, + type: null, default: null }, field: { diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue index b03143c9e..a58461ec6 100644 --- a/src/components/datatable/DataTable.vue +++ b/src/components/datatable/DataTable.vue @@ -224,6 +224,10 @@ export default { exportFilename: { type: String, default: 'download' + }, + autoLayout: { + type: Boolean, + default: false } }, data() { @@ -826,7 +830,8 @@ export default { containerClass() { return [ 'p-datatable p-component', { - 'p-datatable-hoverable-rows': (this.rowHover || this.selectionMode) + 'p-datatable-hoverable-rows': (this.rowHover || this.selectionMode), + 'p-datatable-auto-layout': this.autoLayout } ]; }, diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue index 22804dfe8..2e1a6ccfe 100644 --- a/src/views/datatable/DataTableDemo.vue +++ b/src/views/datatable/DataTableDemo.vue @@ -22,8 +22,6 @@ - - @@ -39,8 +37,7 @@ export default { data() { return { columns: null, - cars: null, - i: 0 + cars: null } }, carService: null, @@ -57,13 +54,6 @@ export default { mounted() { this.carService.getCarsSmall().then(data => this.cars = data); }, - methods: { - add() { - this.i++; - this.columns.push({field: 'color' + this.i, header: 'Color' + this.i}); - this.columns = [...this.columns]; - } - }, components: { 'DataTableDoc': DataTableDoc, 'DataTableSubMenu': DataTableSubMenu diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue index eb8d81cf6..72e87bfdc 100644 --- a/src/views/datatable/DataTableDoc.vue +++ b/src/views/datatable/DataTableDoc.vue @@ -6,6 +6,966 @@ import DataTable from 'primevue/datatable'; + +

Getting Started

+

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 { + + getCarsSmall() { + return axios.get('demo/data/cars-small.json').then(res => res.data.data); + } + + getCarsMedium() { + return axios.get('demo/data/cars-medium.json').then(res => res.data.data); + } + + getCarsLarge() { + return axios.get('demo/data/cars-large.json').then(res => res.data.data); + } +} + + +

Example response;

+ +{ + "data": [ + {"brand": "Volkswagen", "year": 2012, "color": "Orange", "vin": "dsad231ff"}, + {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"}, + {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"}, + {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"}, + {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"}, + {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"}, + {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"}, + {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"}, + {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"}, + {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"} + ] +} + + +

Following sample datatable has 4 columns and retrieves the data from a service on mount.

+ + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + cars: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars = data); + } +} + + +

Dynamic Columns

+

Column components can be dynamically generated using a v-for as well.

+ + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + columns: null, + cars: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + + this.columns = [ + {field: 'vin', header: 'Vin'}, + {field: 'year', header: 'Year'}, + {field: 'brand', header: 'Brand'}, + {field: 'color', header: 'Color'} + ]; + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars = data); + } +} + + +

Column Component Properties

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
columnKeyanynullIdentifier of a column if field property is not defined.
fieldstringnullProperty of a row data.
sortFieldstringnullProperty of a row data used for sorting, defaults to field.
sortableanyfalseDefines if a column is sortable.
headeranynullHeader content of the column.
footeranynullFooter content of the column.
headerStyleobjectnullInline style of the column.
headerClassstringnullStyle class of the column.
bodyStyleobjectnullInline style of the column.
bodyClassstringnullStyle class of the column.
footerStyleobjectnullInline style of the column.
footerClassstringnullStyle class of the column.
filterMatchModestringnullDefines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in" and "custom".
excludeGlobalFilterbooleanfalseWhether to exclude from global filtering or not.
selectionModestringnullDefines column based selection mode, options are "single" and "multiple".
+
+ +

Auto Layout

+

Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set autoLayout property to true. Note that Scrollable and/or Resizable tables do not support auto layout due to technical limitations.

+ +

Templating

+

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.

+ + + + + +

Pagination

+

Pagination is enabled by setting paginator property to true and defining the rows property defines the number of rows per page. + See the Paginator for the available customization options such as paginator templates, page links, + rows per page options and more which can be passed through the DataTable.

+ + + + + +

paginatorLeft and paginatorLeft templates are available to specify custom content at the left and right side.

+ + + + +

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.

+ + + + +

Lazy Loading

+

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 everytime paging, sorting and filtering happens. Sample belows imitates lazy paging by using an in memory list. + It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI + assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.

+ +

Lazy loading is implemented by handling pagination, sorting and filtering using their own page, sort and filter events in addition to enabling lazy property. Here is a sample paging implementation with in memory data.

+ + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + loading: false, + totalRecords: 0, + cars: null + } + }, + datasource: null, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.loading = true; + + setTimeout(() => { + this.carService.getCarsLarge().then(data => { + this.datasource = data; + this.totalRecords = data.length, + this.cars = this.datasource.slice(0, 10); + this.loading = false; + }); + }, 1000); + }, + methods: { + onPage(event) { + this.loading = true; + + setTimeout(() => { + this.cars = this.datasource.slice(event.first, event.first + event.rows); + this.loading = false; + }, 1000); + } + } +} + + +

Sorting

+

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.

+ + + + + +

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.

+ + + + +

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.

+ + + + +

In multiple mode, use the multiSortMeta property and bind an array of SortMeta objects instead.

+ + + + + +data() { + return { + multiSortMeta: [ + {field: 'year', order: 1}, + {field: 'brand', order: -1} + ] + } +} + +

Filtering

+

Filtering is enabled by defining a filter template per column to populate the

filters

property of the DataTable. The filters + property should be an key-value object where keys are the field name and the value is the filter value. The filter template receives the column properties + 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" and "in" 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.

+ + + + +

Selection

+

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. + Alternatively column based selection can be done using radio buttons or checkboxes using selectionMode of a particular column. In addition row-select and row-unselect + events are provided as optional callbacks.

+ +

The dataKey property identifies a unique value of a row in the dataset, it is not mandatory however being able to define it increases the performance of the table signifantly.

+ +

In single mode, selection binding is an object reference.

+ + + + + +

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.

+ + + + +

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.

+ + + + +

Data Export

+

DataTable can export its data in CSV format using exportCSV() method.

+ + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + cars: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars = data); + }, + methods: { + exportCSV() { + this.$refs.dt.exportCSV(); + } + } +} + +

Properties

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
valuearraynullAn array of objects to display.
dataKeystringnullName of the field that uniquely identifies the a record in the data.
rowsnumbernullNumber of rows to display per page.
firstnumber0Index of the first row to be displayed.
totalRecordsnumbernullNumber of total records, defaults to length of value when not defined.
paginatorbooleanfalseWhen specified as true, enables the pagination.
paginatorPositionstringbottomPosition of the paginator, options are "top","bottom" or "both".
alwaysShowPaginatorbooleantrueWhether to show it even there is only one page.
paginatorTemplatestringFirstPageLink PrevPageLink PageLinks
NextPageLink LastPageLink RowsPerPageDropdown		Template of the paginator.
paginatorLeftElementnullContent for the left side of the paginator.
paginatorRightElementnullContent for the right side of the paginator.
pageLinkSizenumber5Number of page links to display.
rowsPerPageOptionsarraynullArray of integer values to display inside rows per page dropdown.
currentPageReportTemplatestring({currentPage} of {totalPages})Template of the current page report element.
lazybooleanfalseDefines if data is loaded and interacted with in lazy manner.
loadingbooleanfalseDisplays a loader to indicate data load is in progress.
loadingIconstringpi pi-spinnerThe icon to show while indicating data load is in progress.
sortFieldstringnullName of the field to sort data by default.
sortOrdernumbernullOrder to sort the data by default.
defaultSortOrdernumber1Default sort order of an unsorted column.
multiSortMetaarraynullAn array of SortMeta objects to sort the data by default in multiple sort mode.
sortModestringsingleDefines whether sorting works on single column or on multiple columns.
filtersobjectnullFilters object with key-value pairs to define the filters.
selectionanynullSelected row in single mode or an array of values in multiple mode.
selectionModestringnullSpecifies the selection mode, valid values are "single" and "multiple".
compareSelectionBystringdeepEqualsAlgorithm to define if a row is selected, valid values are "equals" that compares by reference and
"deepEquals" that compares all fields.
metaKeySelectionbooleantrueDefines whether metaKey is requred or not for the selection.
+ When true metaKey needs to be pressed to select or unselect an item and
+ when set to false selection of each item + can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
rowHoverbooleanfalseWhen enabled, background of the rows change on hover.
csvSeparatorstring,Character to use as the csv separator.
exportFilenamestringdownloadName of the exported file.
autoLayoutbooleanfalseWhether the cell widths scale according to their content or not.
+
+ +

Events

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
sortevent.originalEvent: Browser event.
+ event.sortField: Field to sort against.
+ event.sortOrder: Sort order as integer.
+ event.multiSortMeta: MultiSort metadata.		Callback to invoke on sort.
pageevent.page: New page number
+ event.first: Index of first record
+ event.rows: Number of rows to display in new page
+ event.pageCount: Total number of pages + 		Callback to invoke on pagination.
filterevent.filters: Collection of active filters.Callback to invoke on filtering.
row-selectevent.originalEvent: Browser event.
+ event.data: Selected row data.
+ event.type: Type of the selection, valid values are "row", "radio" or "checkbox".		Callback to invoke when a row is selected.
row-unselectevent.originalEvent: Browser event.
+ event.data: Unselected row data.
+ event.type: Type of the selection, valid values are "row", "radio" or "checkbox".		Callback to invoke when a row is unselected.
+
+ +

Methods

+
+ + + + + + + + + + + + + + + +
NameParametersDescription
exportCSV-Exports the data to CSV format.
+
+ +

Styling

+

Any attribute such as style and class are passed to the main container element. Following are the additional properties to configure the component.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-datatableContainer element.
p-datatable-headerHeader section.
p-datatable-footerFooter section.
p-column-titleTitle of a column.
p-sortable-columnSortable column header.
p-column-filterFilter element in header.
p-datatable-scrollable-headerContainer of header in a scrollable table.
p-datatable-scrollable-bodyContainer of body in a scrollable table.
p-datatable-scrollable-footerContainer of footer in a scrollable table.
p-datatable-responsiveContainer element of a responsive datatable.
p-datatable-emptymessageCell containing the empty message.
p-rowgroup-headerHeader of a rowgroup.
p-rowgroup-footerFooter of a rowgroup.
+
+ +

Dependencies

+

None.

+ + + + + + View on GitHub + + + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + columns: null, + cars: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + + this.columns = [ + {field: 'vin', header: 'Vin'}, + {field: 'year', header: 'Year'}, + {field: 'brand', header: 'Brand'}, + {field: 'color', header: 'Color'} + ]; + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars = data); + } +} +