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