Docs for new DataTable features and TypeScript support
cagataycivici
parent
c7e328a65b
commit
772eb9e819
|
|
@ -0,0 +1 @@
|
|||
export * from './components/columngroup/ColumnGroup';
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
'use strict';
|
||||
module.exports = require('./components/columngroup/ColumnGroup.vue');
|
||||
|
||||
|
|
@ -17,4 +17,9 @@ export declare class Column extends Vue {
|
|||
excludeGlobalFilter?: boolean;
|
||||
selectionMode?: string;
|
||||
expander?: boolean;
|
||||
colspan?: number;
|
||||
rowspan?: number;
|
||||
rowReorder?: boolean;
|
||||
rowReorderIcon?: string;
|
||||
reorderableColumn?: boolean;
|
||||
}
|
||||
|
|
@ -77,8 +77,8 @@ export default {
|
|||
rowReorder: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
,rowReorderIcon: {
|
||||
},
|
||||
rowReorderIcon: {
|
||||
type: String,
|
||||
default: 'pi pi-bars'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
export declare class ColumnGroup extends Vue {
|
||||
type?: string;
|
||||
}
|
||||
|
|
@ -34,12 +34,15 @@ export declare class DataTable extends Vue {
|
|||
autoLayout?: boolean;
|
||||
resizableColumns?: boolean;
|
||||
columnResizeMode?: string;
|
||||
reorderableColumns?: boolean;
|
||||
$emit(eventName: 'page', event: Event): this;
|
||||
$emit(eventName: 'sort', event: Event): this;
|
||||
$emit(eventName: 'filter', event: Event): this;
|
||||
$emit(eventName: 'row-select', event: Event): this;
|
||||
$emit(eventName: 'row-unselect', event: Event): this;
|
||||
$emit(eventName: 'column-resize-end', event: Event): this;
|
||||
$emit(eventName: 'column-reorder', event: Event): this;
|
||||
$emit(eventName: 'row-reorder', event: Event): this;
|
||||
$slots: {
|
||||
header: VNode[];
|
||||
paginatorLeft: VNode[];
|
||||
|
|
|
|||
|
|
@ -1058,10 +1058,10 @@ export default {
|
|||
if (allowDrop) {
|
||||
ObjectUtils.reorderArray(this.columnOrder, dragIndex, dropIndex);
|
||||
|
||||
this.$emit('col-reorder', {
|
||||
this.$emit('column-reorder', {
|
||||
originalEvent: event,
|
||||
dragIndex: dragIndex,
|
||||
dropIndex: dropIndex,
|
||||
columns: this.columns
|
||||
dropIndex: dropIndex
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -1163,6 +1163,7 @@ export default {
|
|||
ObjectUtils.reorderArray(processedData, this.draggedRowIndex, dropIndex);
|
||||
|
||||
this.$emit('row-reorder', {
|
||||
originalEvent: event,
|
||||
dragIndex: this.draggedRowIndex,
|
||||
dropIndex: dropIndex,
|
||||
value: processedData
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<CodeHighlight lang="javascript">
|
||||
import DataTable from 'primevue/datatable';
|
||||
import Column from 'primevue/column';
|
||||
import ColumnGroup from 'primevue/columngroup'; //optional for column grouping
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
|
|
@ -219,6 +220,36 @@ export default {
|
|||
<td>null</td>
|
||||
<td>Defines column based selection mode, options are "single" and "multiple".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>colspan</td>
|
||||
<td>number</td>
|
||||
<td>null</td>
|
||||
<td>Number of columns to span for grouping.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rowspan</td>
|
||||
<td>number</td>
|
||||
<td>null</td>
|
||||
<td>Number of rows to span for grouping.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rowReorder</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether this column displays an icon to reorder the rows.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rowReorderIcon</td>
|
||||
<td>string</td>
|
||||
<td>pi pi-bars</td>
|
||||
<td>Icon of the drag handle to reorder rows.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>reorderableColumn</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Defines if the column itself can be reordered with dragging.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -261,6 +292,43 @@ export default {
|
|||
</template>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Column Grouping</h3>
|
||||
<p>Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="sales">
|
||||
<ColumnGroup type="header">
|
||||
<Row>
|
||||
<Column header="Brand" :rowspan="3" />
|
||||
<Column header="Sale Rate" :colspan="4" />
|
||||
</Row>
|
||||
<Row>
|
||||
<Column header="Sales" :colspan="2" />
|
||||
<Column header="Profits" :colspan="2" />
|
||||
</Row>
|
||||
<Row>
|
||||
<Column header="Last Year" />
|
||||
<Column header="This Year" />
|
||||
<Column header="Last Year" />
|
||||
<Column header="This Year" />
|
||||
</Row>
|
||||
</ColumnGroup>
|
||||
<Column field="brand" />
|
||||
<Column field="lastYearSale" />
|
||||
<Column field="thisYearSale" />
|
||||
<Column field="lastYearProfit" />
|
||||
<Column field="thisYearProfit" />
|
||||
<ColumnGroup type="footer">
|
||||
<Row>
|
||||
<Column footer="Totals:" :colspan="3" />
|
||||
<Column footer="$506,202" />
|
||||
<Column footer="$531,020" />
|
||||
</Row>
|
||||
</ColumnGroup>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Pagination</h3>
|
||||
|
|
@ -559,6 +627,60 @@ data() {
|
|||
<Column field="color" header="Color" headerStyle="width: 20%"></Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Column Reorder</h3>
|
||||
<p>Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> 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.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" :reorderableColumns="true">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Row Reorder</h3>
|
||||
<p>Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle.
|
||||
"row-reorder" is a mandatory callback that is invoked when a column is reordered, use this event to update the new order. Note that the reorder icon can be customized using <i>rowReorderIcon</i> of the column component.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" @row-reorder="onRowReorder">
|
||||
<Column :rowReorder="true" headerStyle="width: 3em" />
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
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: {
|
||||
onRowReorder(event) {
|
||||
//update new order
|
||||
this.cars = event.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Data Export</h3>
|
||||
|
|
@ -957,6 +1079,12 @@ export default {
|
|||
<td>fit</td>
|
||||
<td>Defines whether the overall table width should change on column resize, <br/> valid values are "fit" and "expand".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>reorderableColumns</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>When enabled, columns can be reordered using drag and drop..</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -1015,6 +1143,27 @@ export default {
|
|||
event.delta: Change in column width</td>
|
||||
<td>Callback to invoke when a column is resized.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>column-resize-end</td>
|
||||
<td>event.element: DOM element of the resized column.<br />
|
||||
event.delta: Change in column width</td>
|
||||
<td>Callback to invoke when a column is resized.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>column-reorder</td>
|
||||
<td>event.originalEvent: Browser event<br />
|
||||
event.dragIndex: Index of the dragged column<br />
|
||||
event.dropIndex: Index of the dropped column</td>
|
||||
<td>Callback to invoke when a column is reordered.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row-reorder</td>
|
||||
<td>event.originalEvent: Browser event<br />
|
||||
event.originalEvent: Browser event.<br />
|
||||
event.dragIndex: Index of the dragged row<br />
|
||||
value: Reordered value</td>
|
||||
<td>Callback to invoke when a row is reordered.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<DataTable :value="cars" :reorderableColumns="true" @col-reorder="onColReorder" @row-reorder="onRowReorder">
|
||||
<DataTable :value="cars" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder">
|
||||
<Column :rowReorder="true" headerStyle="width: 3em" :reorderableColumn="false" />
|
||||
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
|
||||
</DataTable>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" :reorderableColumns="true" @col-reorder="onColReorder" @row-reorder="onRowReorder">
|
||||
<DataTable :value="cars" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder">
|
||||
<Column :rowReorder="true" headerStyle="width: 3em" :reorderableColumn="false" />
|
||||
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
|
||||
</DataTable>
|
||||
|
|
|
|||
Loading…
Reference in New Issue