Source code display for DataTable demos
cagataycivici
parent
8b45eb3db3
commit
8760c67f8b
|
|
@ -20,6 +20,55 @@
|
|||
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars">
|
||||
<template #header>
|
||||
<div style="text-align:left">
|
||||
<MultiSelect v-model="columns" :options="columnOptions" optionLabel="header" placeholder="Select Columns" style="width: 20em"/>
|
||||
</div>
|
||||
</template>
|
||||
<Column field="vin" header="Vin" />
|
||||
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import CarService from '../../service/CarService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: null,
|
||||
columnOptions: null,
|
||||
cars: null
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
|
||||
this.columns = [
|
||||
{field: 'year', header: 'Year'},
|
||||
{field: 'brand', header: 'Brand'},
|
||||
{field: 'color', header: 'Color'}
|
||||
];
|
||||
|
||||
this.columnOptions = [...this.columns];
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -57,6 +57,135 @@
|
|||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" selectionMode="single" :selection.sync="selectedCar" @row-select="onRowSelect" dataKey="vin"
|
||||
:paginator="true" :rows="15">
|
||||
<template #header>
|
||||
CRUD for Cars
|
||||
</template>
|
||||
<Column field="vin" header="Vin" :sortable="true"></Column>
|
||||
<Column field="year" header="Year" :sortable="true"></Column>
|
||||
<Column field="brand" header="Brand" :sortable="true"></Column>
|
||||
<Column field="color" header="Color" :sortable="true"></Column>
|
||||
<template #footer>
|
||||
<div style="text-align:left">
|
||||
<Button abel="Add" icon="pi pi-plus" @click="addNewCar" />
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<Dialog :visible.sync="dialogVisible" :style="{width: '400px'}" header="Car Details" :modal="true">
|
||||
<div class="p-cardialog-content">
|
||||
<div class="p-grid p-fluid" v-if="car">
|
||||
<div class="p-col-4"><label for="vin">Vin</label></div>
|
||||
<div class="p-col-8">
|
||||
<InputText id="vin" v-model="car.vin" :disabled="true" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<div class="p-col-4"><label for="year">Year</label></div>
|
||||
<div class="p-col-8">
|
||||
<InputText id="year" v-model="car.year" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<div class="p-col-4"><label for="brand">Brand</label></div>
|
||||
<div class="p-col-8">
|
||||
<InputText id="brand" v-model="car.brand" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<div class="p-col-4"><label for="color">Color</label></div>
|
||||
<div class="p-col-8">
|
||||
<InputText id="color" v-model="car.color" autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<Button label="Delete" icon="pi pi-times" @click="deleteCar" class="p-button-danger" />
|
||||
<Button label="Save" icon="pi pi-check" @click="saveCar" class="p-button-success" />
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import CarService from '../../service/CarService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
dialogVisible: false,
|
||||
car: null,
|
||||
selectedCar: null
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
},
|
||||
methods: {
|
||||
addNewCar() {
|
||||
this.car = {vin: this.generateVin(), year: '', brand: '', color: ''};
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
deleteCar() {
|
||||
let index = this.findIndexByVin(this.car.vin);
|
||||
this.cars = this.cars.filter((val,i) => i !== index);
|
||||
this.dialogVisible = false;
|
||||
this.car = null;
|
||||
this.selectedCar = null;
|
||||
},
|
||||
saveCar() {
|
||||
let index = this.findIndexByVin(this.car.vin);
|
||||
let cars = [...this.cars];
|
||||
if (index === -1)
|
||||
cars.push(this.car);
|
||||
else
|
||||
cars[index] = this.car;
|
||||
|
||||
this.cars = cars;
|
||||
this.dialogVisible = false;
|
||||
this.car = null;
|
||||
this.selectedCar = null;
|
||||
},
|
||||
onRowSelect(event) {
|
||||
this.car = {...event.data};
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
generateVin() {
|
||||
let result = '';
|
||||
let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
let charactersLength = characters.length;
|
||||
for ( var i = 0; i < 8; i++ ) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return result;
|
||||
},
|
||||
findIndexByVin(vin) {
|
||||
let index = -1;
|
||||
for (let i = 0; i < this.cars.length; i++) {
|
||||
if (this.cars[i].vin === vin) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,52 @@
|
|||
<Column field="color" header="Color"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" ref="dt">
|
||||
<template #header>
|
||||
<div style="text-align: left">
|
||||
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
|
||||
</div>
|
||||
</template>
|
||||
<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: {
|
||||
exportCSV() {
|
||||
this.$refs.dt.exportCSV();
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,94 @@
|
|||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" :filters="filters" :paginator="true" :rows="10">
|
||||
<template #header>
|
||||
<div style="text-align: right">
|
||||
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
|
||||
<InputText v-model="filters['global']" placeholder="Global Search" size="50" />
|
||||
</div>
|
||||
</template>
|
||||
<Column field="vin" header="Vin" filterMatchMode="startsWith">
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['vin']" class="p-column-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year" filterMatchMode="contains">
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['year']" class="p-column-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand" filterMatchMode="equals">
|
||||
<template #filter>
|
||||
<Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color" filterMatchMode="in">
|
||||
<template #filter>
|
||||
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import CarService from '../../service/CarService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
filters: {},
|
||||
brands: [
|
||||
{brand: 'Audi', value: 'Audi'},
|
||||
{brand: 'BMW', value: 'BMW'},
|
||||
{brand: 'Fiat', value: 'Fiat'},
|
||||
{brand: 'Honda', value: 'Honda'},
|
||||
{brand: 'Jaguar', value: 'Jaguar'},
|
||||
{brand: 'Mercedes', value: 'Mercedes'},
|
||||
{brand: 'Renault', value: 'Renault'},
|
||||
{brand: 'Volkswagen', value: 'Volkswagen'},
|
||||
{brand: 'Volvo', value: 'Volvo'}
|
||||
],
|
||||
colors: [
|
||||
{name: 'White', value: 'White'},
|
||||
{name: 'Green', value: 'Green'},
|
||||
{name: 'Silver', value: 'Silver'},
|
||||
{name: 'Black', value: 'Black'},
|
||||
{name: 'Red', value: 'Red'},
|
||||
{name: 'Maroon', value: 'Maroon'},
|
||||
{name: 'Brown', value: 'Brown'},
|
||||
{name: 'Orange', value: 'Orange'},
|
||||
{name: 'Blue', value: 'Blue'}
|
||||
],
|
||||
cars: null
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsLarge().then(data => this.cars = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
<div class="feature-intro">
|
||||
<h1>DataTable - Lazy</h1>
|
||||
<p>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.
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -20,6 +21,67 @@
|
|||
<Column field="color" header="Color"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" :lazy="true" paginator="true" :rows="10"
|
||||
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
|
||||
<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 {
|
||||
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.carService.getCarsLarge().then(data => {
|
||||
this.cars = this.datasource.slice(event.first, event.first + event.rows);
|
||||
this.loading = false;
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -53,8 +115,6 @@ export default {
|
|||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
onPage(event) {
|
||||
this.loading = true;
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,48 @@
|
|||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" :paginator="true" :rows="10">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
<template #paginatorLeft>
|
||||
<Button type="button" icon="pi pi-refresh" />
|
||||
</template>
|
||||
<template #paginatorRight>
|
||||
<Button type="button" icon="pi pi-cloud" />
|
||||
</template>
|
||||
</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.getCarsLarge().then(data => this.cars = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -40,6 +40,95 @@
|
|||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" class="p-datatable-responsive">
|
||||
<template #header>
|
||||
Responsive
|
||||
</template>
|
||||
<Column field="vin" header="Vin">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Vin</span>
|
||||
{{slotProps.data.vin}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Year</span>
|
||||
{{slotProps.data.year}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Brand</span>
|
||||
{{slotProps.data.brand}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Color</span>
|
||||
{{slotProps.data.color}}
|
||||
</template>
|
||||
</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);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
.p-datatable-responsive .p-datatable-thead > tr > th,
|
||||
.p-datatable-responsive .p-datatable-tfoot > tr > td {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.p-datatable-responsive .p-datatable-tbody > tr > td {
|
||||
text-align: left;
|
||||
display: block;
|
||||
border: 0 none;
|
||||
width: 100% !important;
|
||||
float: left;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
|
||||
padding: .4em;
|
||||
min-width: 30%;
|
||||
display: inline-block;
|
||||
margin: -.4em 1em -.4em -.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -73,14 +73,116 @@
|
|||
</DataTable>
|
||||
</div>
|
||||
|
||||
<DataTableDoc />
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3 class="first">Single</h3>
|
||||
<p>In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.</p>
|
||||
<DataTable :value="cars" :selection.sync="selectedCar1" selectionMode="single" dataKey="vin">
|
||||
<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>
|
||||
|
||||
<h3>Multiple</h3>
|
||||
<p>In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required.
|
||||
Setting metaKeySelection property as false enables multiple selection without meta key.</p>
|
||||
<DataTable :value="cars" :selection.sync="selectedCars1" selectionMode="multiple" dataKey="vin">
|
||||
<template #header>
|
||||
Multiple Selection with MetaKey
|
||||
</template>
|
||||
<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 :value="cars" :selection.sync="selectedCars2" selectionMode="multiple" dataKey="vin" :metaKeySelection="false" style="margin-top: 2em">
|
||||
<template #header>
|
||||
Multiple Selection without MetaKey
|
||||
</template>
|
||||
<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>
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>row-select and row-unselects are available as selection events.</p>
|
||||
<DataTable :value="cars" :selection.sync="selectedCar2" selectionMode="single" dataKey="vin"
|
||||
@row-select="onRowSelect" @row-unselect="onRowUnselect">
|
||||
<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>
|
||||
|
||||
<h3>RadioButton</h3>
|
||||
<p>Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".</p>
|
||||
<DataTable :value="cars" :selection.sync="selectedCar3" dataKey="vin">
|
||||
<Column selectionMode="single" headerStyle="width: 3em"></Column>
|
||||
<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>
|
||||
|
||||
<h3>Checkbox</h3>
|
||||
<p>Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".</p>
|
||||
<DataTable :value="cars" :selection.sync="selectedCars3" dataKey="vin">
|
||||
<Column selectionMode="multiple" headerStyle="width: 3em"></Column>
|
||||
<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,
|
||||
selectedCar1: null,
|
||||
selectedCar2: null,
|
||||
selectedCar3: null,
|
||||
selectedCars1: null,
|
||||
selectedCars2: null,
|
||||
selectedCars3: null
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
},
|
||||
methods: {
|
||||
onRowSelect(event) {
|
||||
this.$toast.add({severity: 'info', summary: 'Car Selected', detail: 'Vin: ' + event.data.vin, life: 3000});
|
||||
},
|
||||
onRowUnselect(event) {
|
||||
this.$toast.add({severity: 'warn', summary: 'Car Unselected', detail: 'Vin: ' + event.data.vin, life: 3000});
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CarService from '../../service/CarService';
|
||||
import DataTableSubMenu from './DataTableSubMenu';
|
||||
import DataTableDoc from './DataTableDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -110,12 +212,7 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
'DataTableDoc': DataTableDoc,
|
||||
'DataTableSubMenu': DataTableSubMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -26,6 +26,51 @@
|
|||
<Column field="color" header="Color" :sortable="true"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3 class="first">Single Column</h3>
|
||||
<DataTable :value="cars">
|
||||
<Column field="vin" header="Vin" :sortable="true"></Column>
|
||||
<Column field="year" header="Year" :sortable="true"></Column>
|
||||
<Column field="brand" header="Brand" :sortable="true"></Column>
|
||||
<Column field="color" header="Color" :sortable="true"></Column>
|
||||
</DataTable>
|
||||
|
||||
<h3>Multiple Columns</h3>
|
||||
<DataTable :value="cars" sortMode="multiple">
|
||||
<Column field="vin" header="Vin" :sortable="true"></Column>
|
||||
<Column field="year" header="Year" :sortable="true"></Column>
|
||||
<Column field="brand" header="Brand" :sortable="true"></Column>
|
||||
<Column field="color" header="Color" :sortable="true"></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);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -43,9 +43,6 @@
|
|||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/datatable/datatabletemplatingdemo" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars">
|
||||
|
|
|
|||
Loading…
Reference in New Issue