Use Badge as inner component in Tables

components/lib/column/Column.d.ts

@@ -9,6 +9,7 @@
  *
  */
 import { VNode } from 'vue';
+import { BadgePassThroughOptions } from '../badge';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptions } from '../button';
 import { CheckboxPassThroughOptionType } from '../checkbox';
@@ -154,11 +155,11 @@ export interface ColumnPassThroughOptions {
      */
     sortIcon?: ColumnPassThroughOptionType;
     /**
-     * Used to pass attributes to the sort badge's DOM element.
+     * Used to pass attributes to the Badge component.
      */
-    sortBadge?: ColumnPassThroughOptionType;
+    pcSortBadge?: BadgePassThroughOptions;
     /**
-     * Used to pass attributes to the header checkbox's DOM element.
+     * Used to pass attributes to the Checkbox component.
      */
     pcHeaderCheckbox?: CheckboxPassThroughOptionType;
     /**

components/lib/datatable/HeaderCell.vue

@@ -29,7 +29,7 @@
             <span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
                 <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
             </span>
-            <span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getBadgeValue() }}</span>
+            <Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getBadgeValue()" />
             <DTHeaderCheckbox
                 v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
                 :checked="allRowsSelected"
@@ -84,6 +84,7 @@
 </template>
 
 <script>
+import Badge from 'primevue/badge';
 import BaseComponent from 'primevue/basecomponent';
 import SortAltIcon from 'primevue/icons/sortalt';
 import SortAmountDownIcon from 'primevue/icons/sortamountdown';
@@ -365,6 +366,7 @@ export default {
         }
     },
     components: {
+        Badge,
         DTHeaderCheckbox: HeaderCheckbox,
         DTColumnFilter: ColumnFilter,
         SortAltIcon: SortAltIcon,

components/lib/datatable/style/DataTableStyle.d.ts

@@ -22,7 +22,7 @@ export enum DataTableClasses {
     columnHeaderContent = 'p-datatable-column-header-content',
     columnTitle = 'p-datatable-column-title',
     sortIcon = 'p-datatable-sort-icon',
-    sortBadge = 'p-datatable-sort-badge',
+    pcSortBadge = 'p-datatable-sort-badge',
     filter = 'p-datatable-filter',
     filterElementContainer = 'p-datatable-filter-element-container',
     pcColumnFilterButton = 'p-datatable-column-filter-button',

components/lib/datatable/style/DataTableStyle.js

@@ -27,11 +27,9 @@ const theme = ({ dt }) => `
     transition: color ${dt('transition.duration')};
 }
 
-.p-datatable-sort-badge {
+.p-datatable-sort-badge.p-badge {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    border-radius: 50%;
     height: 1rem;
     min-width: 1rem;
     line-height: 1rem;
@@ -625,7 +623,7 @@ const classes = {
     columnHeaderContent: 'p-datatable-column-header-content',
     columnTitle: 'p-datatable-column-title',
     sortIcon: 'p-datatable-sort-icon',
-    sortBadge: 'p-datatable-sort-badge',
+    pcSortBadge: 'p-datatable-sort-badge',
     filter: ({ props }) => [
         'p-datatable-filter',
         {

components/lib/treetable/HeaderCell.vue

@@ -20,12 +20,13 @@
             <span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
                 <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" />
             </span>
-            <span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
+            <Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getMultiSortMetaIndex() + 1" />
         </div>
     </th>
 </template>
 
 <script>
+import Badge from 'primevue/badge';
 import BaseComponent from 'primevue/basecomponent';
 import SortAltIcon from 'primevue/icons/sortalt';
 import SortAmountDownIcon from 'primevue/icons/sortamountdown';
@@ -232,6 +233,7 @@ export default {
         }
     },
     components: {
+        Badge,
         SortAltIcon: SortAltIcon,
         SortAmountUpAltIcon: SortAmountUpAltIcon,
         SortAmountDownIcon: SortAmountDownIcon

components/lib/treetable/style/TreeTableStyle.d.ts

@@ -22,7 +22,7 @@ export enum TreeTableClasses {
     columnResizer = 'p-treetable-column-resizer',
     columnTitle = 'p-treetable-column-title',
     sortIcon = 'p-treetable-sort-icon',
-    sortBadge = 'p-treetable-sort-badge',
+    pcSortBadge = 'p-treetable-sort-badge',
     tbody = 'p-treetable-tbody',
     nodeToggleButton = 'p-treetable-node-toggle-button',
     nodeToggleIcon = 'p-treetable-node-toggle-icon',

components/lib/treetable/style/TreeTableStyle.js

@@ -27,11 +27,9 @@ const theme = ({ dt }) => `
     transition: color ${dt('transition.duration')};
 }
 
-.p-treetable-sort-badge {
+.p-treetable-sort-badge.p-badge {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    border-radius: 50%;
     height: 1rem;
     min-width: 1rem;
     line-height: 1rem;
@@ -465,7 +463,7 @@ const classes = {
     columnHeaderContent: 'p-treetable-column-header-content',
     columnTitle: 'p-treetable-column-title',
     sortIcon: 'p-treetable-sort-icon',
-    sortBadge: 'p-treetable-sort-badge',
+    pcSortBadge: 'p-treetable-sort-badge',
     tbody: 'p-treetable-tbody',
     row: ({ instance }) => [
         {