Refactored DataTable header-footer tokens

components/lib/column/Column.d.ts

@@ -296,6 +296,10 @@ export interface ColumnPassThroughOptions {
      * Used to pass attributes to the footer cell's DOM element.
      */
     footerCell?: ColumnPassThroughOptionType;
+    /**
+     * Used to pass attributes to the footer content DOM element.
+     */
+    columnFooter?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the body cell content's DOM element.
      */

components/lib/datatable/FooterCell.vue

@@ -1,7 +1,7 @@
 <template>
     <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" 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/datatable/style/DataTableStyle.js

@@ -164,7 +164,8 @@ const theme = ({ dt }) => `
     color: ${dt('datatable.filter.constraint.color')};
     border-radius: ${dt('datatable.filter.constraint.border.radius')};
     cursor: pointer;
-    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
+    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, 
+        box-shadow ${dt('datatable.transition.duration')};
 }
 
 .p-datatable-filter-constraint-selected {
@@ -276,7 +277,6 @@ const theme = ({ dt }) => `
     border-style: solid;
     border-width: ${dt('datatable.header.border.width')};
     padding: ${dt('datatable.header.padding')};
-    font-weight: ${dt('datatable.header.font.weight')};
 }
 
 .p-datatable-footer {
@@ -286,7 +286,6 @@ const theme = ({ dt }) => `
     border-style: solid;
     border-width: ${dt('datatable.footer.border.width')};
     padding: ${dt('datatable.footer.padding')};
-    font-weight: ${dt('datatable.footer.font.weight')};
 }
 
 .p-datatable-header-cell {
@@ -296,15 +295,22 @@ const theme = ({ dt }) => `
     border-style: solid;
     border-width: 0 0 1px 0;
     color: ${dt('datatable.header.cell.color')};
-    font-weight: ${dt('datatable.header.font.weight')};
+    font-weight: normal;
-    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
+    text-align: left;
+    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, 
+            outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
+}
+
+.p-datatable-column-title {
+    font-weight: ${dt('datatable.column.title.font.weight')};
 }
 
 .p-datatable-tbody > tr {
     outline-color: transparent;
     background: ${dt('datatable.row.background')};
     color: ${dt('datatable.row.color')};
-    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
+    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, 
+            outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
 }
 
 .p-datatable-tbody > tr > td {
@@ -346,11 +352,14 @@ const theme = ({ dt }) => `
     border-color: ${dt('datatable.footer.cell.border.color')};
     border-style: solid;
     border-width: 0 0 1px 0;
-    font-weight: ${dt('datatable.footer.cell.font.weight')};
     color: ${dt('datatable.footer.cell.color')};
     background: ${dt('datatable.footer.cell.background')};
 }
 
+.p-datatable-column-footer {
+    font-weight: ${dt('datatable.column.footer.font.weight')};
+}
+
 .p-datatable-sortable-column {
     cursor: pointer;
     user-select: none;
@@ -544,7 +553,8 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
     background: transparent;
     cursor: pointer;
     border-radius: ${dt('datatable.row.toggle.button.border.radius')};
-    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
+    transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')}, 
+            outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
     outline-color: transparent;
     user-select: none;
 }
@@ -616,6 +626,7 @@ const classes = {
     columnResizer: 'p-datatable-column-resizer',
     columnHeaderContent: 'p-datatable-column-header-content',
     columnTitle: 'p-datatable-column-title',
+    columnFooter: 'p-datatable-column-footer',
     sortIcon: 'p-datatable-sort-icon',
     pcSortBadge: 'p-datatable-sort-badge',
     filter: ({ props }) => [

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

@@ -8,7 +8,6 @@ export default {
         color: '{content.color}',
         borderWidth: '0 0 1px 0',
         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}',
@@ -52,16 +53,17 @@ export default {
         background: '{content.background}',
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
-        fontWeight: '600'
+    },
+    columnFooter: {
+        fontWeight: '600',
     },
     footer: {
         background: '{content.background}',
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
-        fontWeight: '600'
     },
     dropPointColor: '{primary.color}',
     columnResizerWidth: '0.5rem',

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

@@ -5,8 +5,7 @@ export default {
     header: {
         borderColor: '{datatable.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}',
@@ -45,14 +46,15 @@ export default {
     },
     footerCell: {
         borderColor: '{datatable.border.color}',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
+    },
+    columnFooter: {
         fontWeight: '700'
     },
     footer: {
         borderColor: '{datatable.border.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
-        fontWeight: '700'
     },
     dropPointColor: '{primary.color}',
     columnResizerWidth: '0.5rem',

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

@@ -7,8 +7,7 @@ export default {
         borderColor: '{datatable.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}',
@@ -52,7 +53,9 @@ export default {
         background: '{content.background}',
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
+    },
+    columnFooter: {
         fontWeight: '700'
     },
     footer: {
@@ -60,8 +63,7 @@ export default {
         borderColor: '{datatable.border.color}',
         color: '{content.color}',
         borderWidth: '0 0 1px 0',
-        padding: '0.75rem 1rem',
+        padding: '0.75rem 1rem'
-        fontWeight: '700'
     },
     dropPointColor: '{primary.color}',
     columnResizerWidth: '0.5rem',