vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-08 16:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

Aligned treetable css with table

Browse source
This commit is contained in:
Cagatay Civici 2024-04-29 12:00:43 +03:00
parent 94c6e7d19f
commit b29e165d35
6 changed files with 257 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/lib/treetable/TreeTable.vue
View file

@ -20,7 +20,7 @@
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator')"
:class="cx('paginator', { position: 'top' })"
@page="onPage($event)"
:alwaysShow="alwaysShowPaginator"
:unstyled="unstyled"
@ -129,7 +129,7 @@
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
:class="cx('paginator')"
:class="cx('paginator', { position: 'bottom' })"
@page="onPage($event)"
:alwaysShow="alwaysShowPaginator"
:unstyled="unstyled"

75
components/lib/treetable/style/TreeTableStyle.js
View file

@ -4,82 +4,59 @@ const classes = {
root: ({ instance, props }) => [
'p-treetable p-component',
{
'p-treetable-hoverable-rows': props.rowHover || instance.rowSelectionMode,
'p-treetable-auto-layout': props.autoLayout,
'p-treetable-hoverable': props.rowHover || instance.rowSelectionMode,
'p-treetable-resizable': props.resizableColumns,
'p-treetable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
'p-treetable-gridlines': props.showGridlines,
'p-treetable-scrollable': props.scrollable,
'p-treetable-scrollable-vertical': props.scrollable && props.scrollDirection === 'vertical',
'p-treetable-scrollable-horizontal': props.scrollable && props.scrollDirection === 'horizontal',
'p-treetable-scrollable-both': props.scrollable && props.scrollDirection === 'both',
'p-treetable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
'p-treetable-responsive-scroll': props.responsiveLayout === 'scroll',
'p-treetable-gridlines': props.showGridlines,
'p-treetable-sm': props.size === 'small',
'p-treetable-lg': props.size === 'large'
}
],
loadingWrapper: 'p-treetable-loading',
loadingOverlay: 'p-treetable-loading-overlay p-component-overlay',
loadingWrapper: 'p-treetable-loading', //TODO: required?
loadingOverlay: 'p-treetable-mask p-component-overlay',
loadingIcon: 'p-treetable-loading-icon',
header: 'p-treetable-header',
paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
wrapper: 'p-treetable-wrapper',
paginator: ({ position }) => 'p-treetable-paginator-' + position,
wrapper: 'p-treetable-table-container',
thead: 'p-treetable-thead',
//headercell
headerCell: ({ instance, props, column }) =>
column && instance.hasColumnFilter()
? [
'p-filter-column',
{
'p-frozen-column': instance.columnProp(column, 'frozen')
}
]
: [
{
'p-sortable-column': instance.columnProp('sortable'),
'p-resizable-column': props.resizableColumns,
'p-highlight': instance.isColumnSorted(),
'p-frozen-column': instance.columnProp('frozen')
}
],
columnResizer: 'p-column-resizer',
headerTitle: 'p-column-title',
sortIcon: 'p-sortable-column-icon',
sortBadge: 'p-sortable-column-badge',
headerCell: ({ instance, props }) => [
{
'p-treetable-sortable-column': instance.columnProp('sortable'),
'p-treetable-resizable-column': props.resizableColumns,
'p-treetable-column-sorted': instance.isColumnSorted(),
'p-treetable-frozen-column': instance.columnProp('frozen')
}
],
columnResizer: 'p-treetable-column-resizer',
headerTitle: 'p-treetable-column-title',
sortIcon: 'p-treetable-sort-icon',
sortBadge: 'p-treetable-sort-badge',
tbody: 'p-treetable-tbody',
//ttrow
row: ({ instance }) => [
{
'p-highlight': instance.selected
'p-treetable-row-selected': instance.selected
}
],
//bodycell
bodyCell: ({ instance }) => [
{
'p-frozen-column': instance.columnProp('frozen')
'p-treetable-frozen-column': instance.columnProp('frozen')
}
],
rowToggler: 'p-treetable-toggler p-link',
rowTogglerIcon: 'p-tree-toggler-icon',
rowCheckbox: ({ instance }) => [
'p-treetable-checkbox',
{
'p-indeterminate': instance.partialChecked
}
],
//treetable
emptyMessage: 'p-treetable-emptymessage',
rowToggler: 'p-treetable-row-toggle-button',
rowTogglerIcon: 'p-treetable-row-toggle-icon',
rowCheckbox: ({ instance }) => 'p-treetable-row-checkbox',
emptyMessage: 'p-treetable-empty-message',
tfoot: 'p-treetable-tfoot',
//footercell
footerCell: ({ instance }) => [
{
'p-frozen-column': instance.columnProp('frozen')
'p-treetable-frozen-column': instance.columnProp('frozen')
}
],
//treetable
footer: 'p-treetable-footer',
resizeHelper: 'p-column-resizer-helper p-highlight'
resizeHelper: 'p-treetable-column-resize-indicator'
};
export default BaseStyle.extend({