DataTable display can be optimized according for different screen sizes, this example demonstrates a demo where columns are stacked on a small screens.
<DataTable :value="products" class="p-datatable-responsive-demo" :paginator="true" :rows="10">
<template #header>
Responsive
</template>
<Column field="code" header="Code">
<template #body="slotProps">
<span class="p-column-title">Code</span>
{{slotProps.data.code}}
</template>
</Column>
<Column field="name" header="Name">
<template #body="slotProps">
<span class="p-column-title">Name</span>
{{slotProps.data.name}}
</template>
</Column>
<Column field="category" header="Category">
<template #body="slotProps">
<span class="p-column-title">Category</span>
{{slotProps.data.category}}
</template>
</Column>
<Column field="quantity" header="Quantity">
<template #body="slotProps">
<span class="p-column-title">Quantity</span>
{{slotProps.data.quantity}}
</template>
</Column>
</DataTable>
import ProductService from '../../service/ProductService';
export default {
data() {
return {
products: null
}
},
productService: null,
created() {
this.productService = new ProductService();
},
mounted() {
this.productService.getProducts().then(data => this.products = data);
}
}
.p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title {
display: none;
}
@media screen and (max-width: 40em) {
::v-deep(.p-datatable) {
&.p-datatable-responsive-demo {
.p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td {
display: none !important;
}
.p-datatable-tbody > tr > td {
text-align: left;
display: block;
width: 100%;
float: left;
clear: left;
border: 0 none;
.p-column-title {
padding: .4rem;
min-width: 30%;
display: inline-block;
margin: -.4em 1em -.4em -.4rem;
font-weight: bold;
}
&:last-child {
border-bottom: 1px solid var(--surface-d);
}
}
}
}
}