Refactor #4024 - DataTable & TreeTable

pull/4030/head
Tuğçe Küçükoğlu 2023-06-05 16:26:08 +03:00
parent 0da0751256
commit f52d1d91ea
5 changed files with 28 additions and 57 deletions

View File

@ -274,13 +274,13 @@ export interface ColumnPassThroughOptions {
*/ */
rowEditorInitIcon?: ColumnPassThroughOptionType; rowEditorInitIcon?: ColumnPassThroughOptionType;
/** /**
* Uses to pass attributes to the row editor edit button's DOM element. * Uses to pass attributes to the row editor save button's DOM element.
*/ */
rowEditorEditButton?: ColumnPassThroughOptionType; rowEditorSaveButton?: ColumnPassThroughOptionType;
/** /**
* Uses to pass attributes to the row editor edit icon's DOM element. * Uses to pass attributes to the row editor save icon's DOM element.
*/ */
rowEditorEditIcon?: ColumnPassThroughOptionType; rowEditorSaveIcon?: ColumnPassThroughOptionType;
/** /**
* Uses to pass attributes to the row editor cancel button's DOM element. * Uses to pass attributes to the row editor cancel button's DOM element.
*/ */
@ -289,7 +289,14 @@ export interface ColumnPassThroughOptions {
* Uses to pass attributes to the row editor cancel icon's DOM element. * Uses to pass attributes to the row editor cancel icon's DOM element.
*/ */
rowEditorCancelIcon?: ColumnPassThroughOptionType; rowEditorCancelIcon?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the footer cell's DOM element.
*/
footerCell?: ColumnPassThroughOptionType;
/**
* Uses to pass attributes to the body cell content's DOM element.
*/
bodyCellContent?: ColumnPassThroughOptionType;
/** /**
* Uses to pass attributes to the hidden input wrapper's DOM element. * Uses to pass attributes to the hidden input wrapper's DOM element.
*/ */

View File

@ -622,10 +622,6 @@ export interface DataTablePassThroughOptions {
* Uses to pass attributes to the footerr ow's DOM element. * Uses to pass attributes to the footerr ow's DOM element.
*/ */
footerRow?: DataTablePassThroughOptionType; footerRow?: DataTablePassThroughOptionType;
/**
* Uses to pass attributes to the footer cell's DOM element.
*/
footerCell?: DataTablePassThroughOptionType;
/** /**
* Uses to pass attributes to the resize helper's DOM element. * Uses to pass attributes to the resize helper's DOM element.
*/ */

View File

@ -16,7 +16,7 @@
</div> </div>
<component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" /> <component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
<template v-else> <template v-else>
<span v-bind="getColumnPT('cellContent')">{{ resolveFieldData(node.data, columnProp('field')) }}</span> <span v-bind="getColumnPT('bodyCellContent')">{{ resolveFieldData(node.data, columnProp('field')) }}</span>
</template> </template>
</td> </td>
</template> </template>

View File

@ -212,21 +212,29 @@ export interface TreeTablePassThroughOptions {
*/ */
headerRow?: TreeTablePassThroughOptionType; headerRow?: TreeTablePassThroughOptionType;
/** /**
* Uses to pass attributes to the header cell's DOM element. * Uses to pass attributes to the header filter row's DOM element.
*/ */
headerCell?: TreeTablePassThroughOptionType; headerFilterRow?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the header filter cell's DOM element.
*/
headerFilterCell?: TreeTablePassThroughOptionType;
/** /**
* Uses to pass attributes to the tbody's DOM element. * Uses to pass attributes to the tbody's DOM element.
*/ */
tbody?: TreeTablePassThroughOptionType; tbody?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the row's DOM element.
*/
row?: TreeTablePassThroughOptionType;
/** /**
* Uses to pass attributes to the empty message's DOM element. * Uses to pass attributes to the empty message's DOM element.
*/ */
emptyMessage?: TreeTablePassThroughOptionType; emptyMessage?: TreeTablePassThroughOptionType;
/** /**
* Uses to pass attributes to the body cell's DOM element. * Uses to pass attributes to the empty message cell's DOM element.
*/ */
bodyCell?: TreeTablePassThroughOptionType; emptyMessageCell?: TreeTablePassThroughOptionType;
/** /**
* Uses to pass attributes to the tfoot's DOM element. * Uses to pass attributes to the tfoot's DOM element.
*/ */
@ -243,46 +251,6 @@ export interface TreeTablePassThroughOptions {
* Uses to pass attributes to the resize helper's DOM element. * Uses to pass attributes to the resize helper's DOM element.
*/ */
resizeHelper?: TreeTablePassThroughOptionType; resizeHelper?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the row toggler's DOM element.
*/
rowToggler?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the row toggler icon's DOM element.
*/
rowTogglerIcon?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the column resizer's DOM element.
*/
columnResizer?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the sort badge's DOM element.
*/
sortBadge?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the header title's DOM element.
*/
headerTitle?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the checkbox wrapper's DOM element.
*/
checkboxWrapper?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to checkbox's DOM element.
*/
checkbox?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the checkbox icon's DOM element.
*/
checkboxIcon?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenInputWrapper?: TreeTablePassThroughOptionType;
/**
* Uses to pass attributes to the hidden input's DOM element.
*/
hiddenInput?: TreeTablePassThroughOptionType;
/** /**
* Uses to pass attributes to the Column helper components. * Uses to pass attributes to the Column helper components.
*/ */

View File

@ -65,9 +65,9 @@
></TTHeaderCell> ></TTHeaderCell>
</template> </template>
</tr> </tr>
<tr v-if="hasColumnFilter()" v-bind="ptm('headerRow')"> <tr v-if="hasColumnFilter()" v-bind="ptm('headerFilterRow')">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i"> <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]" v-bind="ptm('headerCell')"> <th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]" v-bind="ptm('headerFilterCell')">
<component v-if="col.children && col.children.filter" :is="col.children.filter" :column="col" :index="i" /> <component v-if="col.children && col.children.filter" :is="col.children.filter" :column="col" :index="i" />
</th> </th>
</template> </template>
@ -96,7 +96,7 @@
></TTRow> ></TTRow>
</template> </template>
<tr v-else :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')"> <tr v-else :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
<td :colspan="columns.length" v-bind="ptm('bodyCell')"> <td :colspan="columns.length" v-bind="ptm('emptyMessageCell')">
<slot name="empty"></slot> <slot name="empty"></slot>
</td> </td>
</tr> </tr>