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

DataTable size demo updates

pull/4967/head
tugcekucukoglu 2023-12-13 10:37:31 +03:00
parent 4b7cb92a98
commit a34b3b4c0f
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
doc/datatable/SizeDoc.vue
View File

@ -6,7 +6,7 @@
<div class="flex justify-content-center mb-4">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
</div>
<DataTable :value="products" :class="`p-datatable-${size.class}`" tableStyle="min-width: 50rem">
<DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
@ -23,16 +23,16 @@ export default {
data() {
return {
products: null,
size: { label: 'Normal', value: 'normal' },
size: { label: 'Normal', value: 'null' },
sizeOptions: [
{ label: 'Small', value: 'small', class: 'sm' },
{ label: 'Normal', value: 'normal' },
{ label: 'Large', value: 'large', class: 'lg' }
{ label: 'Small', value: 'small' },
{ label: 'Normal', value: 'null' },
{ label: 'Large', value: 'large' }
],
code: {
basic: `
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
<DataTable :value="products" :class="\`p-datatable-\${size.class}\`" tableStyle="min-width: 50rem">
<DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
@ -45,7 +45,7 @@ export default {
<div class="flex justify-content-center mb-4">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
</div>
<DataTable :value="products" :class="\`p-datatable-\${size.class}\`" tableStyle="min-width: 50rem">
<DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
@ -61,11 +61,11 @@ export default {
data() {
return {
products: null,
size: { label: 'Normal', value: 'normal' },
size: { label: 'Normal', value: 'null' },
sizeOptions: [
{ label: 'Small', value: 'small', class: 'sm' },
{ label: 'Normal', value: 'normal' },
{ label: 'Large', value: 'large', class: 'lg' }
{ label: 'Small', value: 'small' },
{ label: 'Normal', value: 'null' },
{ label: 'Large', value: 'large' }
]
};
},
@ -81,7 +81,7 @@ export default {
<div class="flex justify-content-center mb-4">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
</div>
<DataTable :value="products" :class="\`p-datatable-\${size.class}\`" tableStyle="min-width: 50rem">
<DataTable :value="products" :size="size.value" tableStyle="min-width: 50rem">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
@ -99,11 +99,11 @@ onMounted(() => {
});
const products = ref();
const size = ref({ label: 'Normal', value: 'normal' });
const size = ref({ label: 'Normal', value: 'null' });
const sizeOptions = ref([
{ label: 'Small', value: 'small', class: 'sm' },
{ label: 'Normal', value: 'normal' },
{ label: 'Large', value: 'large', class: 'lg' }
{ label: 'Small', value: 'small' },
{ label: 'Normal', value: 'null' },
{ label: 'Large', value: 'large' }
]);
<\/script>