Refactored TreeTable header-footer cells

components/lib/datatable/style/DataTableStyle.js

@@ -10,7 +10,6 @@ const theme = ({ dt }) => `
     width: 100%;
 }
 
-
 .p-datatable-scrollable > .p-datatable-table-container {
     position: relative;
 }

components/lib/themes/aura/treetable/index.js

@@ -7,8 +7,7 @@ export default {
         borderColor: '{treetable.border.color}',
         color: '{content.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
-        fontWeight: '600'
     },
     headerCell: {
         background: '{content.background}',
@@ -20,7 +19,6 @@ export default {
         selectedColor: '{highlight.color}',
         gap: '0.5rem',
         padding: '0.75rem 1rem',
-        fontWeight: '600',
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',
@@ -29,6 +27,9 @@ export default {
             shadow: '{focus.ring.shadow}'
         }
     },
+    columnTitle: {
+        fontWeight: '600'
+    },
     row: {
         background: '{content.background}',
         hoverBackground: '{content.hover.background}',
@@ -53,7 +54,9 @@ export default {
         background: '{content.background}',
         borderColor: '{treetable.border.color}',
         color: '{content.color}',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
+    },
+    columnFooter: {
         fontWeight: '600'
     },
     footer: {
@@ -61,8 +64,7 @@ export default {
         borderColor: '{treetable.border.color}',
         color: '{content.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
-        fontWeight: '600'
     },
     columnResizerWidth: '0.5rem',
     resizeIndicator: {

components/lib/themes/lara/treetable/index.js

@@ -5,8 +5,7 @@ export default {
     header: {
         borderColor: '{treetable.border.color}',
         borderWidth: '1px 0 1px 0',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
-        fontWeight: '700'
     },
     headerCell: {
         selectedBackground: '{highlight.background}',
@@ -15,7 +14,6 @@ export default {
         selectedColor: '{highlight.color}',
         gap: '0.5rem',
         padding: '0.75rem 1rem',
-        fontWeight: '700',
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',
@@ -24,6 +22,9 @@ export default {
             shadow: 'inset {focus.ring.shadow}'
         }
     },
+    columnTitle: {
+        fontWeight: '700'
+    },
     row: {
         background: '{content.background}',
         hoverBackground: '{content.hover.background}',
@@ -46,14 +47,15 @@ export default {
     },
     footerCell: {
         borderColor: '{treetable.border.color}',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
+    },
+    columnFooter: {
         fontWeight: '700'
     },
     footer: {
         borderColor: '{treetable.border.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
-        fontWeight: '700'
     },
     columnResizerWidth: '0.5rem',
     resizeIndicator: {

components/lib/themes/nora/treetable/index.js

@@ -7,8 +7,7 @@ export default {
         borderColor: '{treetable.border.color}',
         color: '{content.color}',
         borderWidth: '1px 0 1px 0',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
-        fontWeight: '700'
     },
     headerCell: {
         background: '{content.background}',
@@ -20,7 +19,6 @@ export default {
         selectedColor: '{highlight.color}',
         gap: '0.5rem',
         padding: '0.75rem 1rem',
-        fontWeight: '700',
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',
@@ -29,6 +27,9 @@ export default {
             shadow: '{focus.ring.shadow}'
         }
     },
+    columnTitle: {
+        fontWeight: '700'
+    },
     row: {
         background: '{content.background}',
         hoverBackground: '{content.hover.background}',
@@ -53,7 +54,9 @@ export default {
         background: '{content.background}',
         borderColor: '{treetable.border.color}',
         color: '{content.color}',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
+    },
+    columnFooter: {
         fontWeight: '700'
     },
     footer: {
@@ -61,8 +64,7 @@ export default {
         borderColor: '{treetable.border.color}',
         color: '{content.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
-        fontWeight: '700'
     },
     columnResizerWidth: '0.5rem',
     resizeIndicator: {

components/lib/treetable/FooterCell.vue

@@ -1,7 +1,7 @@
 <template>
     <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }" :data-p-frozen-column="columnProp('frozen')">
         <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
-        {{ columnProp('footer') }}
+        <span v-if="columnProp('footer')" :class="cx('columnFooter')" v-bind="getColumnPT('columnFooter')">{{ columnProp('footer') }}</span>
     </td>
 </template>
 

components/lib/treetable/style/TreeTableStyle.js

@@ -134,7 +134,6 @@ const theme = ({ dt }) => `
     border-style: solid;
     border-width: ${dt('treetable.header.border.width')};
     padding: ${dt('treetable.header.padding')};
-    font-weight: ${dt('treetable.header.font.weight')};
 }
 
 .p-treetable-footer {
@@ -144,7 +143,6 @@ const theme = ({ dt }) => `
     border-style: solid;
     border-width: ${dt('treetable.footer.border.width')};
     padding: ${dt('treetable.footer.padding')};
-    font-weight: ${dt('treetable.footer.font.weight')};
 }
 
 .p-treetable-header-cell {
@@ -154,15 +152,22 @@ const theme = ({ dt }) => `
     border-style: solid;
     border-width: 0 0 1px 0;
     color: ${dt('treetable.header.cell.color')};
-    font-weight: ${dt('treetable.header.font.weight')};
+    font-weight: normal;
-    transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')}, outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')};
+    text-align: left;
+    transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')}, 
+            outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')};
+}
+
+.p-treetable-column-title {
+    font-weight: ${dt('treetable.column.title.font.weight')};
 }
 
 .p-treetable-tbody > tr {
     outline-color: transparent;
     background: ${dt('treetable.row.background')};
     color: ${dt('treetable.row.color')};
-    transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')}, outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')};
+    transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')}, 
+            outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')};
 }
 
 .p-treetable-tbody > tr > td {
@@ -204,11 +209,13 @@ const theme = ({ dt }) => `
     border-color: ${dt('treetable.footer.cell.border.color')};
     border-style: solid;
     border-width: 0 0 1px 0;
-    font-weight: ${dt('treetable.footer.cell.font.weight')};
     color: ${dt('treetable.footer.cell.color')};
     background: ${dt('treetable.footer.cell.background')};
 }
 
+.p-treetable-column-footer {
+    font-weight: ${dt('treetable.column.footer.font.weight')};
+}
 
 .p-treetable-sortable-column {
     cursor: pointer;
@@ -392,7 +399,8 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {
     background: transparent;
     cursor: pointer;
     border-radius: ${dt('treetable.node.toggle.button.border.radius')};
-    transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')}, outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')};
+    transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')}, 
+            outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')};
     outline-color: transparent;
     user-select: none;
 }