DataTable pt demo added
parent
e1b1f40c9e
commit
c7ffcaa08d
|
@ -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.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue