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

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

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

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

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

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

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

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

@ -5,17 +5,39 @@
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>DataTable - Responsive</h1> <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> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <DataTable :value="cars" class="p-datatable-responsive">
<DataTable :value="cars"> <template #header>
<Column field="vin" header="Vin"></Column> Responsive
<Column field="year" header="Year"></Column> </template>
<Column field="brand" header="Brand"></Column> <Column field="vin" header="Vin">
<Column field="color" header="Color"></Column> <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> </DataTable>
</div> </div>
</div> </div>
@ -43,3 +65,33 @@ export default {
} }
} }
</script> </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>