Docs for Row Grouping
cagataycivici
parent
19c925273f
commit
71d23248fb
|
|
@ -24,7 +24,7 @@
|
|||
<thead class="p-datatable-thead">
|
||||
<tr v-if="!headerColumnGroup">
|
||||
<template v-for="(col,i) of columns">
|
||||
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)"
|
||||
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)"
|
||||
:key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
|
||||
@click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
|
||||
@dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
|
||||
|
|
@ -69,8 +69,8 @@
|
|||
@mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
|
||||
<template v-for="(col,i) of columns">
|
||||
<DTBodyCell v-if="shouldRenderBodyCell(dataToRender, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
|
||||
:rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow"
|
||||
@radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox"
|
||||
:rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow"
|
||||
@radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox"
|
||||
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(dataToRender, col, index) : null" />
|
||||
</template>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -759,6 +759,87 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Row Group</h3>
|
||||
<p>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
|
||||
toggleable by enabling <i>expandableRowGroups</i> as true. On the other hand, the "rowspan" mode uses rowspans instead of a header to group rows. <i>groupRowsBy</i>
|
||||
property defines the field to use in row grouping. Multiple row grouping is available in "rowspan" mode by specifying the <i>groupRowsBy</i> as an array of fields.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Subheader Grouping</h3>
|
||||
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
|
||||
sortMode="single" sortField="brand" :sortOrder="1">
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
<Column field="price" header="Price"></Column>
|
||||
<template #groupheader="slotProps">
|
||||
<span>{{slotProps.data.brand}}</span>
|
||||
</template>
|
||||
<template #groupfooter="slotProps">
|
||||
<td colspan="3" style="text-align: right">Total Price</td>
|
||||
<td>20000</td>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<h3>Expandable Row Groups</h3>
|
||||
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
|
||||
sortMode="single" sortField="brand" :sortOrder="1"
|
||||
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups">
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
<Column field="price" header="Price"></Column>
|
||||
<template #groupheader="slotProps">
|
||||
<span>{{slotProps.data.brand}}</span>
|
||||
</template>
|
||||
<template #groupfooter="slotProps">
|
||||
<td colspan="3" style="text-align: right">Total Price</td>
|
||||
<td>20000</td>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<h3>RowSpan Grouping</h3>
|
||||
<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
|
||||
sortMode="single" sortField="brand" :sortOrder="1">
|
||||
<Column header="#" headerStyle="width:3em">
|
||||
<template #body="slotProps">
|
||||
{{slotProps.index}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
<Column field="price" header="Price"></Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import CarService from '../../service/CarService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
expandedRowGroups: null
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsMedium().then(data => this.cars = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Data Export</h3>
|
||||
|
|
@ -1181,6 +1262,30 @@ export default {
|
|||
<td>pi-chevron-right</td>
|
||||
<td>Icon of the row toggler to display the row as collapsed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rowGroupMode</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Defines the row group mode, valid options are "subheader" and "rowspan".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>groupRowsBy</td>
|
||||
<td>string|array</td>
|
||||
<td>null</td>
|
||||
<td>One or more field names to use in row grouping.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expandableRowGroups</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether the row groups can be expandable.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expandedRowGroups</td>
|
||||
<td>array</td>
|
||||
<td>null</td>
|
||||
<td>An array of group field values whose groups would be rendered as expanded.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -1272,6 +1377,18 @@ export default {
|
|||
event.data: Collapsed row data.</td>
|
||||
<td>Callback to invoke when a row is collapsed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rowgroup-expand</td>
|
||||
<td>event.originalEvent: Browser event<br />
|
||||
event.data: Expanded group value.</td>
|
||||
<td>Callback to invoke when a row group is expanded.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rowgroup-collapse</td>
|
||||
<td>event.originalEvent: Browser event<br />
|
||||
event.data: Collapsed group value.</td>
|
||||
<td>Callback to invoke when a row group is collapsed.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<div class="content-section implementation">
|
||||
<h3>Subheader Grouping</h3>
|
||||
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
|
||||
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
|
||||
sortMode="single" sortField="brand" :sortOrder="1">
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</DataTable>
|
||||
|
||||
<h3>Expandable Row Groups</h3>
|
||||
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
|
||||
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
|
||||
sortMode="single" sortField="brand" :sortOrder="1"
|
||||
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups">
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
|
|
@ -46,14 +46,14 @@
|
|||
</DataTable>
|
||||
|
||||
<h3>RowSpan Grouping</h3>
|
||||
<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
|
||||
<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
|
||||
sortMode="single" sortField="brand" :sortOrder="1">
|
||||
<Column header="#" headerStyle="width:3em">
|
||||
<template #body="slotProps">
|
||||
{{slotProps.index}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Subheader Grouping</h3>
|
||||
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
|
||||
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
|
||||
sortMode="single" sortField="brand" :sortOrder="1">
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
</DataTable>
|
||||
|
||||
<h3>Expandable Row Groups</h3>
|
||||
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
|
||||
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
|
||||
sortMode="single" sortField="brand" :sortOrder="1"
|
||||
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups">
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
|
|
@ -102,14 +102,14 @@
|
|||
</DataTable>
|
||||
|
||||
<h3>RowSpan Grouping</h3>
|
||||
<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
|
||||
<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
|
||||
sortMode="single" sortField="brand" :sortOrder="1">
|
||||
<Column header="#" headerStyle="width:3em">
|
||||
<template #body="slotProps">
|
||||
{{slotProps.index}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
|
|
|
|||
Loading…
Reference in New Issue