vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Docs for Row Grouping

pull/104/head
cagataycivici 2019-10-21 17:57:37 +03:00
parent 19c925273f
commit 71d23248fb
3 changed files with 128 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/datatable/DataTable.vue
View File

@ -24,7 +24,7 @@
<thead class="p-datatable-thead"> <thead class="p-datatable-thead">
<tr v-if="!headerColumnGroup"> <tr v-if="!headerColumnGroup">
<template v-for="(col,i) of columns"> <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)" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
@click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)" @click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
@dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)" @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)"> @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"> <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)" <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" :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="toggleRow"
@radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox" @radio-change="toggleRowWithRadio" @checkbox-change="toggleRowWithCheckbox"
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(dataToRender, col, index) : null" /> :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(dataToRender, col, index) : null" />
</template> </template>
</tr> </tr>

117
src/views/datatable/DataTableDoc.vue
View File

@ -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>
&lt;h3&gt;Subheader Grouping&lt;/h3&gt;
&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;Column field="price" header="Price"&gt;&lt;/Column&gt;
&lt;template #groupheader="slotProps"&gt;
&lt;span&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;template #groupfooter="slotProps"&gt;
&lt;td colspan="3" style="text-align: right"&gt;Total Price&lt;/td&gt;
&lt;td&gt;20000&lt;/td&gt;
&lt;/template&gt;
&lt;/DataTable&gt;
&lt;h3&gt;Expandable Row Groups&lt;/h3&gt;
&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;Column field="price" header="Price"&gt;&lt;/Column&gt;
&lt;template #groupheader="slotProps"&gt;
&lt;span&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;template #groupfooter="slotProps"&gt;
&lt;td colspan="3" style="text-align: right"&gt;Total Price&lt;/td&gt;
&lt;td&gt;20000&lt;/td&gt;
&lt;/template&gt;
&lt;/DataTable&gt;
&lt;h3&gt;RowSpan Grouping&lt;/h3&gt;
&lt;DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"&gt;
&lt;Column header="#" headerStyle="width:3em"&gt;
&lt;template #body="slotProps"&gt;
&#123;&#123;slotProps.index&#125;&#125;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;Column field="price" header="Price"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</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> </CodeHighlight>
<h3>Data Export</h3> <h3>Data Export</h3>
@ -1181,6 +1262,30 @@ export default {
<td>pi-chevron-right</td> <td>pi-chevron-right</td>
<td>Icon of the row toggler to display the row as collapsed.</td> <td>Icon of the row toggler to display the row as collapsed.</td>
</tr> </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> </tbody>
</table> </table>
</div> </div>
@ -1272,6 +1377,18 @@ export default {
event.data: Collapsed row data.</td> event.data: Collapsed row data.</td>
<td>Callback to invoke when a row is collapsed.</td> <td>Callback to invoke when a row is collapsed.</td>
</tr> </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> </tbody>
</table> </table>
</div> </div>

16
src/views/datatable/DataTableRowGroupDemo.vue
View File

@ -11,7 +11,7 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3>Subheader Grouping</h3> <h3>Subheader Grouping</h3>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" <DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"> sortMode="single" sortField="brand" :sortOrder="1">
<Column field="brand" header="Brand"></Column> <Column field="brand" header="Brand"></Column>
<Column field="vin" header="Vin"></Column> <Column field="vin" header="Vin"></Column>
@ -28,7 +28,7 @@
</DataTable> </DataTable>
<h3>Expandable Row Groups</h3> <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" sortMode="single" sortField="brand" :sortOrder="1"
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"> :expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups">
<Column field="brand" header="Brand"></Column> <Column field="brand" header="Brand"></Column>
@ -46,14 +46,14 @@
</DataTable> </DataTable>
<h3>RowSpan Grouping</h3> <h3>RowSpan Grouping</h3>
<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand" <DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"> sortMode="single" sortField="brand" :sortOrder="1">
<Column header="#" headerStyle="width:3em"> <Column header="#" headerStyle="width:3em">
<template #body="slotProps"> <template #body="slotProps">
{{slotProps.index}} {{slotProps.index}}
</template> </template>
</Column> </Column>
<Column field="brand" header="Brand"></Column> <Column field="brand" header="Brand"></Column>
<Column field="year" header="Year"></Column> <Column field="year" header="Year"></Column>
<Column field="vin" header="Vin"></Column> <Column field="vin" header="Vin"></Column>
<Column field="color" header="Color"></Column> <Column field="color" header="Color"></Column>
@ -67,7 +67,7 @@
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Subheader Grouping&lt;/h3&gt; &lt;h3&gt;Subheader Grouping&lt;/h3&gt;
&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" &lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"&gt; sortMode="single" sortField="brand" :sortOrder="1"&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -84,7 +84,7 @@
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;h3&gt;Expandable Row Groups&lt;/h3&gt; &lt;h3&gt;Expandable Row Groups&lt;/h3&gt;
&lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand" &lt;DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1" sortMode="single" sortField="brand" :sortOrder="1"
:expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"&gt; :expandableRowGroups="true" :expandedRowGroups.sync="expandedRowGroups"&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
@ -102,14 +102,14 @@
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;h3&gt;RowSpan Grouping&lt;/h3&gt; &lt;h3&gt;RowSpan Grouping&lt;/h3&gt;
&lt;DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand" &lt;DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"&gt; sortMode="single" sortField="brand" :sortOrder="1"&gt;
&lt;Column header="#" headerStyle="width:3em"&gt; &lt;Column header="#" headerStyle="width:3em"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
&#123;&#123;slotProps.index&#125;&#125; &#123;&#123;slotProps.index&#125;&#125;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;