New demo for the default datatable
cagataycivici
parent
365fbb5542
commit
4c9dbbd2fb
|
|
@ -1818,6 +1818,7 @@ export default {
|
|||
|
||||
.p-datatable .p-column-title {
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-datatable .p-sortable-column {
|
||||
|
|
|
|||
|
|
@ -10,27 +10,73 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<DataTable :value="cars">
|
||||
<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>Dynamic Columns</h3>
|
||||
<DataTable :value="cars">
|
||||
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
|
||||
</DataTable>
|
||||
|
||||
<h3>Styled</h3>
|
||||
<div class="p-card">
|
||||
<div class="p-card-body" style="padding:0">
|
||||
<DataTable :value="cars" class="p-datatable-custom">
|
||||
<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 :value="cars" class="p-datatable-responsive p-datatable-cars" :selection.sync="selectedCar" selectionMode="single"
|
||||
dataKey="vin" :paginator="true" :rows="10" :filters="filters">
|
||||
<template #header>
|
||||
List of Cars
|
||||
<div class="p-datatable-globalfilter-container">
|
||||
<InputText v-model="filters['global']" placeholder="Global Search" />
|
||||
</div>
|
||||
</template>
|
||||
<Column field="vin" header="Vin" :sortable="true">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Vin</span>
|
||||
{{slotProps.data.vin}}
|
||||
</template>
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year" :sortable="true" filterMatchMode="contains">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Year</span>
|
||||
{{slotProps.data.year}}
|
||||
</template>
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand" :sortable="true" filterMatchMode="equals">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Brand</span>
|
||||
<img :alt="slotProps.data.brand" :src="'demo/images/car/' + slotProps.data.brand + '.png'" width="50" style="vertical-align:middle; margin-right: 1em"/>
|
||||
<span style="vertical-align:middle">{{slotProps.data.brand}}</span>
|
||||
</template>
|
||||
<template #filter>
|
||||
<Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
|
||||
<template #option="brandSlotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="brandSlotProps.option.brand" :src="'demo/images/car/' + brandSlotProps.option.brand + '.png'" />
|
||||
<span>{{brandSlotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color" :sortable="true" filterMatchMode="in">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Color</span>
|
||||
{{slotProps.data.color}}
|
||||
</template>
|
||||
<template #filter>
|
||||
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" class="p-column-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Color</span>
|
||||
{{slotProps.data.color}}
|
||||
</template>
|
||||
<template #header>
|
||||
<Button type="button" icon="pi pi-cog"></Button>
|
||||
</template>
|
||||
<template #body>
|
||||
<Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
|
||||
<Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,23 +94,39 @@ import DataTableDoc from './DataTableDoc';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: null,
|
||||
cars: null
|
||||
cars: null,
|
||||
selectedCar: null,
|
||||
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'}
|
||||
]
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
|
||||
this.columns = [
|
||||
{field: 'vin', header: 'Vin'},
|
||||
{field: 'year', header: 'Year'},
|
||||
{field: 'brand', header: 'Brand'},
|
||||
{field: 'color', header: 'Color'}
|
||||
];
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
this.carService.getCarsLarge().then(data => this.cars = data);
|
||||
},
|
||||
components: {
|
||||
'DataTableDoc': DataTableDoc,
|
||||
|
|
@ -74,12 +136,55 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .p-datatable.p-datatable-custom {
|
||||
.p-column-filter {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.p-dropdown-car-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
|
||||
img {
|
||||
margin-right: .5em;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: .125em;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-globalfilter-container {
|
||||
float: right;
|
||||
|
||||
input {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .p-datatable.p-datatable-cars {
|
||||
.p-datatable-header {
|
||||
border: 0 none;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.p-paginator {
|
||||
border: 0 none;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.p-datatable-thead > tr > th {
|
||||
border: 0 none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-column-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr > td {
|
||||
border: 0 none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2249,27 +2249,73 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3 class="first">Basic</h3>
|
||||
<DataTable :value="cars">
|
||||
<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>Dynamic Columns</h3>
|
||||
<DataTable :value="cars">
|
||||
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
|
||||
</DataTable>
|
||||
|
||||
<h3>Styled</h3>
|
||||
<div class="p-card">
|
||||
<div class="p-card-body" style="padding:0">
|
||||
<DataTable :value="cars" class="p-datatable-custom">
|
||||
<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 :value="cars" class="p-datatable-responsive p-datatable-cars" :selection.sync="selectedCar" selectionMode="single"
|
||||
dataKey="vin" :paginator="true" :rows="10" :filters="filters">
|
||||
<template #header>
|
||||
List of Cars
|
||||
<div class="p-datatable-globalfilter-container">
|
||||
<InputText v-model="filters['global']" placeholder="Global Search" />
|
||||
</div>
|
||||
</template>
|
||||
<Column field="vin" header="Vin" :sortable="true">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Vin</span>
|
||||
{{slotProps.data.vin}}
|
||||
</template>
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year" :sortable="true" filterMatchMode="contains">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Year</span>
|
||||
{{slotProps.data.year}}
|
||||
</template>
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand" :sortable="true" filterMatchMode="equals">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Brand</span>
|
||||
<img :alt="slotProps.data.brand" :src="'demo/images/car/' + slotProps.data.brand + '.png'" width="50" style="vertical-align:middle; margin-right: 1em"/>
|
||||
<span style="vertical-align:middle">{{slotProps.data.brand}}</span>
|
||||
</template>
|
||||
<template #filter>
|
||||
<Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
|
||||
<template #option="brandSlotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="brandSlotProps.option.brand" :src="'demo/images/car/' + brandSlotProps.option.brand + '.png'" />
|
||||
<span>{{brandSlotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color" :sortable="true" filterMatchMode="in">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Color</span>
|
||||
{{slotProps.data.color}}
|
||||
</template>
|
||||
<template #filter>
|
||||
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" class="p-column-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Color</span>
|
||||
{{slotProps.data.color}}
|
||||
</template>
|
||||
<template #header>
|
||||
<Button type="button" icon="pi pi-cog"></Button>
|
||||
</template>
|
||||
<template #body>
|
||||
<Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
|
||||
<Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2282,34 +2328,93 @@ import CarService from '../../service/CarService';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: null,
|
||||
cars: null
|
||||
cars: null,
|
||||
selectedCar: null,
|
||||
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'}
|
||||
]
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
|
||||
this.columns = [
|
||||
{field: 'vin', header: 'Vin'},
|
||||
{field: 'year', header: 'Year'},
|
||||
{field: 'brand', header: 'Brand'},
|
||||
{field: 'color', header: 'Color'}
|
||||
];
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
this.carService.getCarsLarge().then(data => this.cars = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
/deep/ .p-datatable.p-datatable-custom {
|
||||
.p-column-filter {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.p-dropdown-car-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
|
||||
img {
|
||||
margin-right: .5em;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: .125em;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-globalfilter-container {
|
||||
float: right;
|
||||
|
||||
input {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .p-datatable.p-datatable-cars {
|
||||
.p-datatable-header {
|
||||
border: 0 none;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.p-paginator {
|
||||
border: 0 none;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.p-datatable-thead > tr > th {
|
||||
border: 0 none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-column-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr > td {
|
||||
border: 0 none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue