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

Add widths to columns

pull/1047/head
Cagatay Civici 2021-03-02 13:08:28 +03:00
parent 8c9227849b
commit 8556e83fbb
1 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/datatable/DataTableEditDemo.vue
View File

@ -14,17 +14,17 @@
<h5>Basic Cell Editing</h5> <h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p> <p>Simple editors with v-model.</p>
<DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll"> <DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll">
<Column field="code" header="Code"> <Column field="code" header="Code" style="width:25%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" /> <InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template> </template>
</Column> </Column>
<Column field="name" header="Name"> <Column field="name" header="Name" style="width:25%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" /> <InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template> </template>
</Column> </Column>
<Column field="inventoryStatus" header="Status"> <Column field="inventoryStatus" header="Status" style="width:25%">
<template #editor="slotProps"> <template #editor="slotProps">
<Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status"> <Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status">
<template #option="slotProps"> <template #option="slotProps">
@ -36,7 +36,7 @@
{{getStatusLabel(slotProps.data.inventoryStatus)}} {{getStatusLabel(slotProps.data.inventoryStatus)}}
</template> </template>
</Column> </Column>
<Column field="price" header="Price"> <Column field="price" header="Price" style="width:25%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" /> <InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template> </template>
@ -48,7 +48,7 @@
<h5>Advanced Cell Editing</h5> <h5>Advanced Cell Editing</h5>
<p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p> <p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll"> <DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"> <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" /> <InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" />
</template> </template>
@ -60,17 +60,17 @@
<h5>Row Editing</h5> <h5>Row Editing</h5>
<DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows" <DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel" responsiveLayout="scroll"> @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel" responsiveLayout="scroll">
<Column field="code" header="Code"> <Column field="code" header="Code" style="width:20%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus /> <InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus />
</template> </template>
</Column> </Column>
<Column field="name" header="Name"> <Column field="name" header="Name" style="width:20%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" /> <InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template> </template>
</Column> </Column>
<Column field="inventoryStatus" header="Status"> <Column field="inventoryStatus" header="Status" style="width:20%">
<template #editor="slotProps"> <template #editor="slotProps">
<Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status"> <Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps"> <template #option="slotProps">
@ -82,12 +82,12 @@
{{getStatusLabel(slotProps.data.inventoryStatus)}} {{getStatusLabel(slotProps.data.inventoryStatus)}}
</template> </template>
</Column> </Column>
<Column field="price" header="Price"> <Column field="price" header="Price" style="width:20%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" /> <InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template> </template>
</Column> </Column>
<Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"></Column> <Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column>
</DataTable> </DataTable>
</div> </div>
</div> </div>
@ -102,17 +102,17 @@
&lt;h5&gt;Basic Cell Editing&lt;/h5&gt; &lt;h5&gt;Basic Cell Editing&lt;/h5&gt;
&lt;p&gt;Simple editors with v-model.&lt;/p&gt; &lt;p&gt;Simple editors with v-model.&lt;/p&gt;
&lt;DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll"&gt; &lt;DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll"&gt;
&lt;Column field="code" header="Code"&gt; &lt;Column field="code" header="Code" style="width:25%"&gt;
&lt;template #editor="slotProps"&gt; &lt;template #editor="slotProps"&gt;
&lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt; &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="name" header="Name"&gt; &lt;Column field="name" header="Name" style="width:25%"&gt;
&lt;template #editor="slotProps"&gt; &lt;template #editor="slotProps"&gt;
&lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt; &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="inventoryStatus" header="Status"&gt; &lt;Column field="inventoryStatus" header="Status" style="width:25%"&gt;
&lt;template #editor="slotProps"&gt; &lt;template #editor="slotProps"&gt;
&lt;Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status"&gt; &lt;Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
@ -124,7 +124,7 @@
{{getStatusLabel(slotProps.data.inventoryStatus)}} {{getStatusLabel(slotProps.data.inventoryStatus)}}
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="price" header="Price"&gt; &lt;Column field="price" header="Price" style="width:25%"&gt;
&lt;template #editor="slotProps"&gt; &lt;template #editor="slotProps"&gt;
&lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt; &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt;
&lt;/template&gt; &lt;/template&gt;
@ -136,7 +136,7 @@
&lt;h5&gt;Advanced Cell Editing&lt;/h5&gt; &lt;h5&gt;Advanced Cell Editing&lt;/h5&gt;
&lt;p&gt;Custom implementation with validations, dynamic columns and reverting values with the escape key.&lt;/p&gt; &lt;p&gt;Custom implementation with validations, dynamic columns and reverting values with the escape key.&lt;/p&gt;
&lt;DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll"&gt; &lt;DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll"&gt;
&lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt; &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%"&gt;
&lt;template #editor="slotProps"&gt; &lt;template #editor="slotProps"&gt;
&lt;InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" /&gt; &lt;InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" /&gt;
&lt;/template&gt; &lt;/template&gt;
@ -148,17 +148,17 @@
&lt;h5&gt;Row Editing&lt;/h5&gt; &lt;h5&gt;Row Editing&lt;/h5&gt;
&lt;DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows" &lt;DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel" responsiveLayout="scroll"&gt; @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel" responsiveLayout="scroll"&gt;
&lt;Column field="code" header="Code"&gt; &lt;Column field="code" header="Code" style="width:20%"&gt;
&lt;template #editor="slotProps"&gt; &lt;template #editor="slotProps"&gt;
&lt;InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus /&gt; &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="name" header="Name"&gt; &lt;Column field="name" header="Name" style="width:20%"&gt;
&lt;template #editor="slotProps"&gt; &lt;template #editor="slotProps"&gt;
&lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt; &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="inventoryStatus" header="Status"&gt; &lt;Column field="inventoryStatus" header="Status" style="width:20%"&gt;
&lt;template #editor="slotProps"&gt; &lt;template #editor="slotProps"&gt;
&lt;Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status"&gt; &lt;Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
@ -175,7 +175,7 @@
&lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt; &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"&gt;&lt;/Column&gt; &lt;Column :rowEditor="true" style="width: 10%;min-width:8rem" bodyStyle="text-align:center"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</code></pre> </code></pre>
@ -322,17 +322,17 @@ export default {
<h5>Basic Cell Editing</h5> <h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p> <p>Simple editors with v-model.</p>
<DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll"> <DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll">
<Column field="code" header="Code"> <Column field="code" header="Code" style="width:25%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" /> <InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template> </template>
</Column> </Column>
<Column field="name" header="Name"> <Column field="name" header="Name" style="width:25%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" /> <InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template> </template>
</Column> </Column>
<Column field="inventoryStatus" header="Status"> <Column field="inventoryStatus" header="Status" style="width:25%">
<template #editor="slotProps"> <template #editor="slotProps">
<Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status"> <Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps"> <template #option="slotProps">
@ -344,7 +344,7 @@ export default {
{{getStatusLabel(slotProps.data.inventoryStatus)}} {{getStatusLabel(slotProps.data.inventoryStatus)}}
</template> </template>
</Column> </Column>
<Column field="price" header="Price"> <Column field="price" header="Price" style="width:25%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" /> <InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template> </template>
@ -356,7 +356,7 @@ export default {
<h5>Advanced Cell Editing</h5> <h5>Advanced Cell Editing</h5>
<p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p> <p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="products2" editMode="cell" @cellEditComplete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll"> <DataTable :value="products2" editMode="cell" @cellEditComplete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"> <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" /> <InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" />
</template> </template>
@ -368,17 +368,17 @@ export default {
<h5>Row Editing</h5> <h5>Row Editing</h5>
<DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows" <DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
@rowEditInit="onRowEditInit" @rowEditCancel="onRowEditCancel" responsiveLayout="scroll"> @rowEditInit="onRowEditInit" @rowEditCancel="onRowEditCancel" responsiveLayout="scroll">
<Column field="code" header="Code"> <Column field="code" header="Code" style="width:20%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus /> <InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus />
</template> </template>
</Column> </Column>
<Column field="name" header="Name"> <Column field="name" header="Name" style="width:20%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" /> <InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template> </template>
</Column> </Column>
<Column field="inventoryStatus" header="Status"> <Column field="inventoryStatus" header="Status" style="width:20%">
<template #editor="slotProps"> <template #editor="slotProps">
<Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status"> <Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" laceholder="Select a Status">
<template #option="slotProps"> <template #option="slotProps">
@ -390,12 +390,12 @@ export default {
{{getStatusLabel(slotProps.data.inventoryStatus)}} {{getStatusLabel(slotProps.data.inventoryStatus)}}
</template> </template>
</Column> </Column>
<Column field="price" header="Price"> <Column field="price" header="Price" style="width:20%">
<template #editor="slotProps"> <template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" /> <InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template> </template>
</Column> </Column>
<Column :rowEditor="true" headerStyle="width:7rem" bodyStyle="text-align:center"></Column> <Column :rowEditor="true" style="width: 10%; min-width:8rem" bodyStyle="text-align:center"></Column>
</DataTable> </DataTable>
</div> </div>
</div> </div>