Add indentation property to TreeTable #495

MohanYadav1 · 2020-09-25T08:25:40Z

Tree table toggler left margin is 16 px hardcoded in treetablerow component.

I want to set toggler(expand/collapse) button left margin as 24 px but unable to set because already set as 16 px in treetable row component. We need to pass prop from treetable to treetablerow component so that user can pass required left margin instead fixed 16 px.

…pand/collapse) beacuse it is hardcoded in TreeviewRow component as 16px primefaces#495 primefaces#495

rathiayush · 2020-10-06T13:34:43Z

Any update on this?

cagataycivici · 2020-10-10T12:29:37Z

<TreeTable :indentation="2"

Would make the spacing 2 rem. for a child.

MohanYadav1 · 2020-10-12T09:50:33Z

Thanks @cagataycivici to merge this change, I see you have committed this change into primevue 3.0.0. We are using primevue 2.0.8 and "vue": "2.6.10". After updating primevue version from 2.0.8 to 3.0.0, we are getting below errors:

Error:

ERROR in ./node_modules/primevue/components/paginator/Paginator.vue?vue&type=template&id=7f4b8eab& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/paginator/Paginator.vue?vue&type=template&id=7f4b8eab&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)

Errors compiling template:

cannot be keyed. Place the key on real elements instead.

4 |
5 |
6 |
| ^^^^^^^^^^^
7 | <FirstPageLink v-if="item === 'FirstPageLink'" @click="changePageToFirst($event)" :disabled="isFirstPage" />
8 | <PrevPageLink v-else-if="item === 'PrevPageLink'" @click="changePageToPrev($event)" :disabled="isFirstPage" />

@ ./node_modules/primevue/components/paginator/Paginator.vue?vue&type=template&id=7f4b8eab& 1:0-187 1:0-187
@ ./node_modules/primevue/components/paginator/Paginator.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/treetable/TreeTable.vue?vue&type=script&lang=js&
@ ./node_modules/primevue/components/treetable/TreeTable.vue?vue&type=script&lang=js&
@ ./node_modules/primevue/components/treetable/TreeTable.vue
@ ./node_modules/primevue/treetable.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./sourceLearningLibraryConfiguration/components/Dashboard.vue?vue&type=script&lang=js&
@ ./sourceLearningLibraryConfiguration/components/Dashboard.vue?vue&type=script&lang=js&
@ ./sourceLearningLibraryConfiguration/components/Dashboard.vue
@ ./sourceLearningLibraryConfiguration/routing/vue-router.js
@ ./sourceLearningLibraryConfiguration/app.js
@ multi ./sourceLearningLibraryConfiguration/app.js

ERROR in ./node_modules/primevue/components/treetable/TreeTableRow.vue?vue&type=template&id=0cede5c1& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/treetable/TreeTableRow.vue?vue&type=template&id=0cede5c1&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)

Errors compiling template:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

16 | {{resolveFieldData(node.data, col.props?.field)}}
17 |
18 |
|
19 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
20 | <sub-ttnode v-for="childNode of node.children" :key="childNode.key" :columns="columns" :node="childNode" :parentNode="node" :level="level + 1"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
21 | :expandedKeys="expandedKeys" :selectionMode="selectionMode" :selectionKeys="selectionKeys" :indentation="indentation"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
22 | @node-toggle="$emit('node-toggle', $event)" @node-click="$emit('node-click', $event)" @checkbox-change="onCheckboxChange">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
23 |
| ^^^^^^^^^^^

invalid expression: Unexpected token '.' in

col.props?.columnKey||col.props?.field||i

Raw expression: :key="col.props?.columnKey||col.props?.field||i"

1 |
2 | <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
3 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 | <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="col.props?.expander" :style="togglerStyle" tabindex="-1" v-ripple>
5 |

invalid expression: Unexpected token '.' in

col.props?.bodyStyle

Raw expression: :style="col.props?.bodyStyle"

1 |
2 | <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
3 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 | <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="col.props?.expander" :style="togglerStyle" tabindex="-1" v-ripple>
5 |

invalid expression: Unexpected token '.' in

col.props?.bodyClass

Raw expression: :class="col.props?.bodyClass"

1 |
2 | <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
3 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 | <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="col.props?.expander" :style="togglerStyle" tabindex="-1" v-ripple>
5 |

invalid expression: Unexpected token '.' in

col.props?.expander

Raw expression: v-if="col.props?.expander"

2 | <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
3 |
4 | <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="col.props?.expander" :style="togglerStyle" tabindex="-1" v-ripple>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
5 |
6 |

invalid expression: Unexpected token '.' in

checkboxSelectionMode && col.props?.expander

Raw expression: v-if="checkboxSelectionMode && col.props?.expander"

5 |
6 |
7 | <div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && col.props?.expander" role="checkbox" :aria-checked="checked">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8 |

9 | <input type="checkbox" @Focus="onCheckboxFocus" @blur="onCheckboxBlur" />

invalid expression: Unexpected token '.' in

col.children?.body

Raw expression: :is="col.children?.body"

13 |

14 |
15 |
| ^^^^^^^^^^^^^^^^^^^^^^^^
16 | {{resolveFieldData(node.data, col.props?.field)}}
17 |

invalid expression: Unexpected token '.' in

col.children?.body

Raw expression: v-if="col.children?.body"

13 |
14 |
15 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^
16 | {{resolveFieldData(node.data, col.props?.field)}}
17 |

@ ./node_modules/primevue/components/treetable/TreeTableRow.vue?vue&type=template&id=0cede5c1& 1:0-190 1:0-190
@ ./node_modules/primevue/components/treetable/TreeTableRow.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/treetable/TreeTable.vue?vue&type=script&lang=js&
@ ./node_modules/primevue/components/treetable/TreeTable.vue?vue&type=script&lang=js&
@ ./node_modules/primevue/components/treetable/TreeTable.vue
@ ./node_modules/primevue/treetable.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./sourceLearningLibraryConfiguration/components/Dashboard.vue?vue&type=script&lang=js&
@ ./sourceLearningLibraryConfiguration/components/Dashboard.vue?vue&type=script&lang=js&
@ ./sourceLearningLibraryConfiguration/components/Dashboard.vue
@ ./sourceLearningLibraryConfiguration/routing/vue-router.js
@ ./sourceLearningLibraryConfiguration/app.js
@ multi ./sourceLearningLibraryConfiguration/app.js

ERROR in ./node_modules/primevue/components/treetable/TreeTable.vue?vue&type=template&id=455c8289& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/treetable/TreeTable.vue?vue&type=template&id=455c8289&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)

Errors compiling template:

invalid expression: Unexpected token '.' in

col.props?.columnKey||col.props?.field||i

Raw expression: :key="col.props?.columnKey||col.props?.field||i"

22 |
23 |
24 | <th v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
25 | :tabindex="col.props?.sortable ? '0' : null" :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)">
26 | <span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns">

invalid expression: Unexpected token '.' in

col.props?.headerStyle

Raw expression: :style="col.props?.headerStyle"

22 |
23 |
24 | <th v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
25 | :tabindex="col.props?.sortable ? '0' : null" :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)">
26 | <span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns">

invalid expression: Unexpected token '.' in

col.props?.sortable ? '0' : null

Raw expression: :tabindex="col.props?.sortable ? '0' : null"

22 |
23 |
24 | <th v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
|
25 | :tabindex="col.props?.sortable ? '0' : null" :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
26 | <span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns">

invalid expression: Unexpected token '.' in

col.children?.header

Raw expression: :is="col.children?.header"

25 | :tabindex="col.props?.sortable ? '0' : null" :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)">
26 | <span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns">
27 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
28 | {{col.props?.header}}
29 |

invalid expression: Unexpected token '.' in

col.props?.header

Raw expression: v-if="col.props?.header"

26 | <span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns">
27 |
28 | {{col.props?.header}}
| ^^^^^^^^^^^^^^^^^^^^^^^^
29 |
30 | {{getMultiSortMetaIndex(col) + 1}}

invalid expression: Unexpected token '.' in

_s(col.props?.header)

Raw expression: {{col.props?.header}}

26 | <span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns">
27 |
28 | {{col.props?.header}}
| ^^^^^^^^^^^^^^^^^^^^^
29 |
30 | {{getMultiSortMetaIndex(col) + 1}}

invalid expression: Unexpected token '.' in

col.props?.sortable

Raw expression: v-if="col.props?.sortable"

27 |
28 | {{col.props?.header}}
29 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
30 | {{getMultiSortMetaIndex(col) + 1}}
31 |

invalid expression: Unexpected token '.' in

col.props?.columnKey||col.props?.field||i

Raw expression: :key="col.props?.columnKey||col.props?.field||i"

32 |
33 |
34 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
35 |
36 |

invalid expression: Unexpected token '.' in

col.props?.filterHeaderStyle

Raw expression: :style="col.props?.filterHeaderStyle"

32 |
33 |
34 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
35 |
36 |

invalid expression: Unexpected token '.' in

col.children?.filter

Raw expression: :is="col.children?.filter"

33 |
34 |
35 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
36 |
37 |

invalid expression: Unexpected token '.' in

col.children?.filter

Raw expression: v-if="col.children?.filter"

33 |
34 |
35 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
36 |
37 |

invalid expression: Unexpected token '.' in

col.props?.columnKey||col.props?.field||i

Raw expression: :key="col.props?.columnKey||col.props?.field||i"

39 |
40 |
41 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
42 |
43 | {{col.props?.footer}}

invalid expression: Unexpected token '.' in

col.props?.footerStyle

Raw expression: :style="col.props?.footerStyle"

39 |
40 |
41 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
42 |
43 | {{col.props?.footer}}

invalid expression: Unexpected token '.' in

col.props?.footerClass

Raw expression: :class="col.props?.footerClass"

39 |
40 |
41 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
42 |
43 | {{col.props?.footer}}

invalid expression: Unexpected token '.' in

col.children?.footer

Raw expression: :is="col.children?.footer"

40 |
41 |
42 |
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
43 | {{col.props?.footer}}
44 |

invalid expression: Unexpected token '.' in

"\n                        "+_s(col.props?.footer)+"\n                    "

Raw expression: {{col.props?.footer}}

40 |
41 |
42 |
|
43 | {{col.props?.footer}}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
44 |
| ^^^^^^^^^^^^^^^^^^^^

@ ./node_modules/primevue/components/treetable/TreeTable.vue?vue&type=template&id=455c8289& 1:0-187 1:0-187
@ ./node_modules/primevue/components/treetable/TreeTable.vue
@ ./node_modules/primevue/treetable.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./sourceLearningLibraryConfiguration/components/Dashboard.vue?vue&type=script&lang=js&
@ ./sourceLearningLibraryConfiguration/components/Dashboard.vue?vue&type=script&lang=js&
@ ./sourceLearningLibraryConfiguration/components/Dashboard.vue
@ ./sourceLearningLibraryConfiguration/routing/vue-router.js
@ ./sourceLearningLibraryConfiguration/app.js
@ multi ./sourceLearningLibraryConfiguration/app.js
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

rathiayush · 2020-10-12T10:19:29Z

Hi, @cagataycivici Is support for Primevue 2.0 reached end of life? Is Primevue 3.0.0 compatible with vue 2.x?

MohanYadav1 · 2020-10-12T10:44:48Z

I think we need to merged this same change into branch 2.1.0 for Vue 2x. Please confirm @cagataycivici .

cagataycivici · 2020-10-14T12:10:43Z

PrimeVue 2.x is still maintained, as an example we'll release 2.1.1 today with this enhancement getting ported back to 2.x. See #571.

Note: PrimeVue 3 is not compatible with Vue 2.x., It is for Vue 3 only.

MohanYadav1 added a commit to MohanYadav1/primevue that referenced this issue Sep 25, 2020

Unable to set left margin of my choice in Treetable Toggler button(ex…

2a6c906

…pand/collapse) beacuse it is hardcoded in TreeviewRow component as 16px primefaces#495 primefaces#495

MohanYadav1 mentioned this issue Sep 25, 2020

Unable to set left margin of my choice in Treetable Toggler button(ex… #496

Closed

cagataycivici mentioned this issue Oct 10, 2020

Harcoded 16px margin-left in TreeTable #529

Closed

cagataycivici changed the title ~~Unable to set left margin of my choice in Treetable Toggler button(expand/collapse) beacuse it is hardcoded in TreeviewRow component as 16px~~ Add indentation property to TreeTable Oct 10, 2020

cagataycivici self-assigned this Oct 10, 2020

cagataycivici added the Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add label Oct 10, 2020

cagataycivici added this to the 3.0.0 milestone Oct 10, 2020

cagataycivici closed this as completed in cbbc56f Oct 10, 2020

cagataycivici mentioned this issue Oct 14, 2020

Add indentation property to TreeTable #571

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add indentation property to TreeTable #495

Add indentation property to TreeTable #495

MohanYadav1 commented Sep 25, 2020

rathiayush commented Oct 6, 2020

cagataycivici commented Oct 10, 2020

MohanYadav1 commented Oct 12, 2020

rathiayush commented Oct 12, 2020

MohanYadav1 commented Oct 12, 2020

cagataycivici commented Oct 14, 2020 •

edited

Loading

Add indentation property to TreeTable #495

Add indentation property to TreeTable #495

Comments

MohanYadav1 commented Sep 25, 2020

rathiayush commented Oct 6, 2020

cagataycivici commented Oct 10, 2020

MohanYadav1 commented Oct 12, 2020

rathiayush commented Oct 12, 2020

MohanYadav1 commented Oct 12, 2020

cagataycivici commented Oct 14, 2020 • edited Loading

cagataycivici commented Oct 14, 2020 •

edited

Loading