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

Slots documentation for DataTable

pull/1021/head
Cagatay Civici 2021-02-17 15:34:30 +03:00
parent a1f56b36fb
commit b8475bf014
1 changed files with 134 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
src/views/datatable/DataTableDoc.vue
View File

@ -377,6 +377,72 @@ export default {
</table>
</div>
<h5>Column Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>column: Column node</td>
</tr>
<tr>
<td>body</td>
<td>data: Row data <br />
column: Column node <br />
index: Row index <br />
frozenRow: Is row frozen</td>
</tr>
<tr>
<td>footer</td>
<td>column: Column node</td>
</tr>
<tr>
<td>editor</td>
<td>data: Row data <br />
column: Column node <br />
index: Row index <br />
frozenRow: Is row frozen</td>
</tr>
<tr>
<td>filter</td>
<td>field: Column field <br />
filterModel: {value,matchMode} Filter metadata <br />
filterCallback: Callback function</td>
</tr>
<tr>
<td>filterheader</td>
<td>field: Column field <br />
filterModel: {value,matchMode} Filter metadata <br />
filterCallback: Callback function</td>
</tr>
<tr>
<td>filterfooter</td>
<td>field: Column field <br />
filterModel: {value,matchMode} Filter metadata <br />
filterCallback: Callback function</td>
</tr>
<tr>
<td>filterclear/td>
<td>field: Column field <br />
filterModel: {value,matchMode} Filter metadata <br />
filterCallback: Callback function</td>
</tr>
<tr>
<td>filterapply</td>
<td>field: Column field <br />
filterModel: {value,matchMode} Filter metadata <br />
filterCallback: Callback function</td>
</tr>
</tbody>
</table>
</div>
<h5>Auto Layout</h5>
<p>Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set <i>autoLayout</i> property to true. Note that Scrollable and/or Resizable tables do not support auto layout due to technical limitations.</p>
@ -764,6 +830,29 @@ matchModes: [
]
</code></pre>
<h6>Filter Slots</h6>
<p>Filter menu overlay can be customized even further with various templates including <i>filterheader</i>, <i>filterfooter</i>, <i>filterclear</i>, <i>filterapply</i>. Example here changes the buttons and adds a footer.</p>
<pre v-code><code><template v-pre>
&lt;Column header="Country" filterField="country.name"&gt;
&lt;template #filter="{filterModel}"&gt;
&lt;InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/&gt;
&lt;/template&gt;
&lt;template #filterclear="{filterCallback}"&gt;
&lt;Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"&gt;&lt;/Button&gt;
&lt;/template&gt;
&lt;template #filterapply="{filterCallback}"&gt;
&lt;Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"&gt;&lt;/Button&gt;
&lt;/template&gt;
&lt;template #filterfooter&gt;
&lt;div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold"&gt;Customized Buttons&lt;/div&gt;
&lt;/template&gt;
&lt;/Column&gt;
</template>
</code></pre>
<h5>Selection</h5>
<p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive.
Alternatively column based selection can be done using radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect
@ -2415,6 +2504,51 @@ export default {
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>-</td>
</tr>
<tr>
<td>paginatorLeft</td>
<td>-</td>
</tr>
<tr>
<td>paginatorRight</td>
<td>-</td>
</tr>
<tr>
<td>footer</td>
<td>-</td>
</tr>
<tr>
<td>groupheader</td>
<td>data: Row data <br />
index: Row index</td>
</tr>
<tr>
<td>groupfooter</td>
<td>data: Row data <br />
index: Row index</td>
</tr>
<tr>
<td>expansion</td>
<td>data: Row data <br />
index: Row index</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>