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

Implemented Frozen Rows

pull/104/head
cagataycivici 2019-11-18 17:52:30 +03:00
parent 211ed1ba5a
commit b50286bca6
3 changed files with 40 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,6 +60,17 @@
@cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)" @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/> @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
</template> </template>
<template #frozenbody>
<DTTableBody :value="frozenValue" :columns="columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
:editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
@row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
@row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
@cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
</template>
<template #footer> <template #footer>
<DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" /> <DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" />
</template> </template>
@ -278,7 +289,11 @@ export default {
scrollHeight: { scrollHeight: {
type: String, type: String,
default: null default: null
} },
frozenValue: {
type: Array,
default: null
},
}, },
data() { data() {
return { return {

1
src/components/datatable/ScrollableView.vue
View File

@ -7,6 +7,7 @@
<col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" /> <col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
</colgroup> </colgroup>
<slot name="header"></slot> <slot name="header"></slot>
<slot name="frozenbody"></slot>
</table> </table>
</div> </div>
</div> </div>

32
src/views/datatable/DataTableScrollDemo.vue
View File

@ -20,14 +20,22 @@
<h3>Horizontal and Vertical</h3> <h3>Horizontal and Vertical</h3>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px"> <DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px">
<Column field="vin" header="Vin" headerStyle="width: 250px"></Column> <Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"></Column>
<Column field="year" header="Year" headerStyle="width: 250px"></Column> <Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_1"></Column>
<Column field="brand" header="Brand" headerStyle="width: 250px"></Column> <Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_1"></Column>
<Column field="color" header="Color" headerStyle="width: 250px"></Column> <Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_1"></Column>
<Column field="vin" header="Vin" headerStyle="width: 250px"></Column> <Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_2"></Column>
<Column field="year" header="Year" headerStyle="width: 250px"></Column> <Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_2"></Column>
<Column field="brand" header="Brand" headerStyle="width: 250px"></Column> <Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_2"></Column>
<Column field="color" header="Color" headerStyle="width: 250px"></Column> <Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"></Column>
</DataTable>
<h3>Frozen Rows</h3>
<DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px">
<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> </DataTable>
</div> </div>
@ -55,7 +63,8 @@ import DataTableSubMenu from './DataTableSubMenu';
export default { export default {
data() { data() {
return { return {
cars: null cars: null,
frozenCars: null
} }
}, },
carService: null, carService: null,
@ -64,6 +73,11 @@ export default {
}, },
mounted() { mounted() {
this.carService.getCarsLarge().then(data => this.cars = data); this.carService.getCarsLarge().then(data => this.cars = data);
this.frozenCars = [
{brand: "BMW", year: 2013, color: "Grey", vin: "fh2uf23"},
{brand: "Chevrolet", year: 2011, color: "Black", vin: "4525g23"}
];
}, },
components: { components: {
'DataTableSubMenu': DataTableSubMenu 'DataTableSubMenu': DataTableSubMenu