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

enable column resizable configuration for datatable and treetable per column

pull/6577/head
Raimund Bauer 2024-10-15 16:15:48 +02:00
parent fb017601e3
commit e67726110f
7 changed files with 34 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/primevue/scripts/components/column.js
View File

@ -29,6 +29,12 @@ const ColumnProps = [
default: 'false',
description: 'Defines if a column is sortable.'
},
{
name: 'resizable',
type: 'boolean',
default: 'false',
description: 'Defines if a column is resizable despite being frozen or other table columns not so.'
},
{
name: 'header',
type: 'any',

4
packages/primevue/src/column/BaseColumn.vue
View File

@ -30,6 +30,10 @@ export default {
type: Boolean,
default: false
},
resizable: {
type: Boolean,
default: false
},
header: {
type: null,
default: null

5
packages/primevue/src/column/Column.d.ts vendored
View File

@ -379,6 +379,11 @@ export interface ColumnProps {
* @defaultValue false
*/
sortable?: boolean | undefined;
/**
* Defines if a column is resizable when not all columns are.
* @defaultValue false
*/
resizable?: boolean | undefined;
/**
* Header content of the column.
*/

11
packages/primevue/src/datatable/HeaderCell.vue
View File

@ -16,13 +16,13 @@
@drop="onDrop"
v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
:data-p-sortable-column="columnProp('sortable')"
:data-p-resizable-column="resizableColumns"
:data-p-resizable-column="isResizable"
:data-p-sorted="isColumnSorted()"
:data-p-filter-column="filterColumn"
:data-p-frozen-column="columnProp('frozen')"
:data-p-reorderable-column="reorderableColumns"
>
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
<span v-if="isResizable" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
<div :class="cx('columnHeaderContent')" v-bind="getColumnPT('columnHeaderContent')">
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ columnProp('header') }}</span>
@ -222,7 +222,7 @@ export default {
index: this.index,
sortable: this.columnProp('sortable') === '' || this.columnProp('sortable'),
sorted: this.isColumnSorted(),
resizable: this.resizableColumns,
resizable: this.isResizable,
size: this.$parentInstance?.$parentInstance?.size,
showGridlines: this.$parentInstance?.$parentInstance?.showGridlines || false
}
@ -364,6 +364,11 @@ export default {
} else {
return null;
}
},
isResizable() {
const rsz = this.columnProp('resizable');
return rsz || (this.resizableColumns && !(rsz === false || this.columnProp('frozen')));
}
},
components: {

2
packages/primevue/src/datatable/style/DataTableStyle.js
View File

@ -73,7 +73,7 @@ const theme = ({ dt }) => `
white-space: nowrap;
}
.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) {
.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column {
background-clip: padding-box;
position: relative;
}

13
packages/primevue/src/treetable/HeaderCell.vue
View File

@ -9,11 +9,11 @@
role="columnheader"
v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
:data-p-sortable-column="columnProp('sortable')"
:data-p-resizable-column="resizableColumns"
:data-p-resizable-column="isResizable"
:data-p-sorted="isColumnSorted()"
:data-p-frozen-column="columnProp('frozen')"
>
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
<span v-if="isResizable" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
<div :class="cx('columnHeaderContent')" v-bind="getColumnPT('columnHeaderContent')">
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ columnProp('header') }}</span>
@ -26,8 +26,8 @@
</template>
<script>
import { getAttribute, getIndex, getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
import BaseComponent from '@primevue/core/basecomponent';
import { getNextElementSibling, getPreviousElementSibling, getOuterWidth, getAttribute, getIndex } from '@primeuix/utils/dom';
import { getVNodeProp } from '@primevue/core/utils';
import SortAltIcon from '@primevue/icons/sortalt';
import SortAmountDownIcon from '@primevue/icons/sortamountdown';
@ -101,7 +101,7 @@ export default {
index: this.index,
sorted: this.isColumnSorted(),
frozen: this.$parentInstance.scrollable && this.columnProp('frozen'),
resizable: this.resizableColumns,
resizable: this.isResizable,
scrollable: this.$parentInstance.scrollable,
showGridlines: this.$parentInstance.showGridlines,
size: this.$parentInstance?.size
@ -231,6 +231,11 @@ export default {
} else {
return null;
}
},
isResizable() {
const rsz = this.columnProp('resizable');
return rsz || (this.resizableColumns && !(rsz === false || this.columnProp('frozen')));
}
},
components: {

2
packages/primevue/src/treetable/style/TreeTableStyle.js
View File

@ -71,7 +71,7 @@ const theme = ({ dt }) => `
white-space: nowrap;
}
.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) {
.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column {
background-clip: padding-box;
position: relative;
}