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

Responsive demo for DataTable

pull/41/head
cagataycivici 2019-07-09 16:15:42 +03:00
parent ef1f1d8a1c
commit 938462c667
5 changed files with 67 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -830,7 +830,7 @@ export default {
},
allRowsSelected() {
const val = this.processedData;
return (this.value && this.value.length > 0 && this.selection && this.selection.length > 0 && this.selection.length === this.value.length);
return (val && val.length > 0 && this.selection && this.selection.length > 0 && this.selection.length === val.length);
}
},
components: {
@ -995,35 +995,6 @@ export default {
display: none;
}
/* Responsive */
.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;
}
}
/* Loader */
.p-datatable .p-datatable-loading-overlay {
position: absolute;

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

@ -10,8 +10,6 @@
</template>
<script>
import ObjectUtils from '../utils/ObjectUtils';
export default {
inheritAttrs: false,
props: {
@ -30,10 +28,10 @@ export default {
this.$refs.input.focus();
}
},
onFocus(event) {
onFocus() {
this.focused = true;
},
onBlur(event) {
onBlur() {
this.focused = false;
}
}

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

@ -10,8 +10,6 @@
</template>
<script>
import ObjectUtils from '../utils/ObjectUtils';
export default {
inheritAttrs: false,
props: {
@ -35,10 +33,10 @@ export default {
this.$refs.input.focus();
}
},
onFocus(event) {
onFocus() {
this.focused = true;
},
onBlur(event) {
onBlur() {
this.focused = false;
}
}

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

@ -10,8 +10,6 @@
</template>
<script>
import ObjectUtils from '../utils/ObjectUtils';
export default {
inheritAttrs: false,
props: {
@ -37,10 +35,10 @@ export default {
this.$refs.input.focus();
}
},
onFocus(event) {
onFocus() {
this.focused = true;
},
onBlur(event) {
onBlur() {
this.focused = false;
}
}

66
src/views/datatable/DataTableResponsiveDemo.vue
View File

@ -5,17 +5,39 @@
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable - Responsive</h1>
<p>DataTable columns are displayed as stacked in responsive mode if the screen size becomes smaller than a certain breakpoint value.</p>
<p>DataTable display can be optimized according to screen sizes, this example demonstrates a demo where columns are stacked on small screens.</p>
</div>
</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 :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>
</div>
</div>
@ -43,3 +65,33 @@ export default {
}
}
</script>
<style>
.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;
}
}
</style>