DataTable pt demo added

pull/3950/head
Tuğçe Küçükoğlu 2023-05-09 18:05:27 +03:00
parent e1b1f40c9e
commit c7ffcaa08d
3 changed files with 160 additions and 24 deletions

View File

@ -250,6 +250,12 @@ const ColumnProps = [
type: 'boolean',
default: 'false',
description: 'Whether the column is rendered.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Uses to pass attributes to DOM elements inside the component.'
}
];

View File

@ -5,14 +5,45 @@
:value="products"
sortMode="multiple"
:pt="{
table: { style: { minWidth: '50rem' } },
sortBadge: { class: 'bg-primary' }
table: { style: { minWidth: '50rem' } }
}"
>
<Column field="code" header="Code" sortable style="width: 25%"></Column>
<Column field="name" header="Name" sortable style="width: 25%"></Column>
<Column field="category" header="Category" sortable style="width: 25%"></Column>
<Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
<Column
field="code"
header="Code"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
<Column
field="name"
header="Name"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
<Column
field="category"
header="Category"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
<Column
field="quantity"
header="Quantity"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
</DataTable>
</div>
<DocSectionCode :code="code" :service="['ProductService']" />
@ -31,14 +62,45 @@ export default {
:value="products"
sortMode="multiple"
:pt="{
table: { style: { minWidth: '50rem' } },
sortBadge: { class: 'bg-primary' }
table: { style: { minWidth: '50rem' } }
}"
>
<Column field="code" header="Code" sortable style="width: 25%"></Column>
<Column field="name" header="Name" sortable style="width: 25%"></Column>
<Column field="category" header="Category" sortable style="width: 25%"></Column>
<Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
<Column
field="code"
header="Code"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
<Column
field="name"
header="Name"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
<Column
field="category"
header="Category"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
<Column
field="quantity"
header="Quantity"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
</DataTable>`,
options: `
<template>
@ -47,14 +109,45 @@ export default {
:value="products"
sortMode="multiple"
:pt="{
table: { style: { minWidth: '50rem' } },
sortBadge: { class: 'bg-primary' }
table: { style: { minWidth: '50rem' } }
}"
>
<Column field="code" header="Code" sortable style="width: 25%"></Column>
<Column field="name" header="Name" sortable style="width: 25%"></Column>
<Column field="category" header="Category" sortable style="width: 25%"></Column>
<Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
<Column
field="code"
header="Code"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
<Column
field="name"
header="Name"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
<Column
field="category"
header="Category"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
<Column
field="quantity"
header="Quantity"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
</DataTable>
</div>
</template>
@ -80,14 +173,45 @@ export default {
:value="products"
sortMode="multiple"
:pt="{
table: { style: { minWidth: '50rem' } },
sortBadge: { class: 'bg-primary' }
table: { style: { minWidth: '50rem' } }
}"
>
<Column field="code" header="Code" sortable style="width: 25%"></Column>
<Column field="name" header="Name" sortable style="width: 25%"></Column>
<Column field="category" header="Category" sortable style="width: 25%"></Column>
<Column field="quantity" header="Quantity" sortable style="width: 25%"></Column>
<Column
field="code"
header="Code"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
<Column
field="name"
header="Name"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
<Column
field="category"
header="Category"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
<Column
field="quantity"
header="Quantity"
sortable
:pt="{
sortBadge: { class: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}"
/>
</DataTable>
</div>
</template>

View File

@ -29,6 +29,12 @@ export default {
component: DocApiTable,
data: getPTOption('DataTable')
},
{
id: 'pt.doc.column',
label: 'Column PT Options',
component: DocApiTable,
data: getPTOption('Column')
},
{
id: 'pt.demo',
label: 'Demo',