@uzum-tech/ui 1.3.1 → 1.4.0

package/es/data-table/src/interface.d.ts

@@ -68,7 +68,7 @@ export declare const dataTableProps: {
     readonly stickyExpandedRows: BooleanConstructor;
     readonly virtualScroll: BooleanConstructor;
     readonly tableLayout: {
-        readonly type: PropType<"fixed" | "auto">;
+        readonly type: PropType<"auto" | "fixed">;
         readonly default: "auto";
     };
     readonly allowCheckingNotLoaded: BooleanConstructor;
@@ -86,7 +86,7 @@ export declare const dataTableProps: {
     };
     readonly flexHeight: BooleanConstructor;
     readonly summaryPlacement: {
-        readonly type: PropType<"bottom" | "top">;
+        readonly type: PropType<"top" | "bottom">;
         readonly default: "bottom";
     };
     readonly paginationBehaviorOnFilter: {
@@ -101,10 +101,10 @@ export declare const dataTableProps: {
         readonly default: {};
     };
     readonly onLoad: PropType<DataTableOnLoad>;
-    readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void> | undefined>;
-    readonly onUpdatePage: PropType<MaybeArray<(page: number) => void> | undefined>;
-    readonly 'onUpdate:pageSize': PropType<MaybeArray<(pageSize: number) => void> | undefined>;
-    readonly onUpdatePageSize: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
+    readonly 'onUpdate:page': PropType<PaginationProps["onUpdate:page"]>;
+    readonly onUpdatePage: PropType<PaginationProps["onUpdate:page"]>;
+    readonly 'onUpdate:pageSize': PropType<PaginationProps["onUpdate:pageSize"]>;
+    readonly onUpdatePageSize: PropType<PaginationProps["onUpdate:pageSize"]>;
     readonly 'onUpdate:sorter': PropType<MaybeArray<OnUpdateSorter>>;
     readonly onUpdateSorter: PropType<MaybeArray<OnUpdateSorter>>;
     readonly 'onUpdate:filters': PropType<MaybeArray<OnUpdateFilters>>;
@@ -114,8 +114,8 @@ export declare const dataTableProps: {
     readonly 'onUpdate:expandedRowKeys': PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
     readonly onUpdateExpandedRowKeys: PropType<MaybeArray<OnUpdateExpandedRowKeys>>;
     readonly onScroll: PropType<(e: Event) => void>;
-    readonly onPageChange: PropType<MaybeArray<(page: number) => void> | undefined>;
-    readonly onPageSizeChange: PropType<MaybeArray<(pageSize: number) => void> | undefined>;
+    readonly onPageChange: PropType<PaginationProps["onUpdate:page"]>;
+    readonly onPageSizeChange: PropType<PaginationProps["onUpdate:pageSize"]>;
     readonly onSorterChange: PropType<MaybeArray<OnUpdateSorter> | undefined>;
     readonly onFiltersChange: PropType<MaybeArray<OnUpdateFilters> | undefined>;
     readonly onCheckedRowKeysChange: PropType<MaybeArray<OnUpdateCheckedRowKeys> | undefined>;
@@ -155,6 +155,9 @@ export declare const dataTableProps: {
         tdTextColor: string;
         thTextColor: string;
         thFontWeight: string;
+        thSubColor: string;
+        thSubFontWeight: string;
+        thSubFontSize: string;
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
@@ -733,12 +736,18 @@ export declare const dataTableProps: {
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>;
                 }>;
@@ -866,12 +875,18 @@ export declare const dataTableProps: {
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>;
                 }>;
@@ -886,12 +901,18 @@ export declare const dataTableProps: {
             iconSizeMedium: string;
             iconSizeLarge: string;
             iconSizeHuge: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            textColor: string;
+            titleFontSizeSmall: string;
+            titleFontSizeMedium: string;
+            titleFontSizeLarge: string;
+            titleFontSizeHuge: string;
+            descriptionFontSizeSmall: string;
+            descriptionFontSizeMedium: string;
+            descriptionFontSizeLarge: string;
+            descriptionFontSizeHuge: string;
+            titleColor: string;
+            descriptionColor: string;
             iconColor: string;
+            iconBgColor: string;
             extraTextColor: string;
         }, any>;
         Popover: import("../../_mixins").Theme<"Popover", {
@@ -1050,6 +1071,9 @@ export declare const dataTableProps: {
         tdTextColor: string;
         thTextColor: string;
         thFontWeight: string;
+        thSubColor: string;
+        thSubFontWeight: string;
+        thSubFontSize: string;
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
@@ -1628,12 +1652,18 @@ export declare const dataTableProps: {
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>;
                 }>;
@@ -1761,12 +1791,18 @@ export declare const dataTableProps: {
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>;
                 }>;
@@ -1781,12 +1817,18 @@ export declare const dataTableProps: {
             iconSizeMedium: string;
             iconSizeLarge: string;
             iconSizeHuge: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            textColor: string;
+            titleFontSizeSmall: string;
+            titleFontSizeMedium: string;
+            titleFontSizeLarge: string;
+            titleFontSizeHuge: string;
+            descriptionFontSizeSmall: string;
+            descriptionFontSizeMedium: string;
+            descriptionFontSizeLarge: string;
+            descriptionFontSizeHuge: string;
+            titleColor: string;
+            descriptionColor: string;
             iconColor: string;
+            iconBgColor: string;
             extraTextColor: string;
         }, any>;
         Popover: import("../../_mixins").Theme<"Popover", {
@@ -1945,6 +1987,9 @@ export declare const dataTableProps: {
         tdTextColor: string;
         thTextColor: string;
         thFontWeight: string;
+        thSubColor: string;
+        thSubFontWeight: string;
+        thSubFontSize: string;
         thButtonColorHover: string;
         thIconColor: string;
         thIconColorActive: string;
@@ -2523,12 +2568,18 @@ export declare const dataTableProps: {
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>;
                 }>;
@@ -2656,12 +2707,18 @@ export declare const dataTableProps: {
                         iconSizeMedium: string;
                         iconSizeLarge: string;
                         iconSizeHuge: string;
-                        fontSizeSmall: string;
-                        fontSizeMedium: string;
-                        fontSizeLarge: string;
-                        fontSizeHuge: string;
-                        textColor: string;
+                        titleFontSizeSmall: string;
+                        titleFontSizeMedium: string;
+                        titleFontSizeLarge: string;
+                        titleFontSizeHuge: string;
+                        descriptionFontSizeSmall: string;
+                        descriptionFontSizeMedium: string;
+                        descriptionFontSizeLarge: string;
+                        descriptionFontSizeHuge: string;
+                        titleColor: string;
+                        descriptionColor: string;
                         iconColor: string;
+                        iconBgColor: string;
                         extraTextColor: string;
                     }, any>;
                 }>;
@@ -2676,12 +2733,18 @@ export declare const dataTableProps: {
             iconSizeMedium: string;
             iconSizeLarge: string;
             iconSizeHuge: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            textColor: string;
+            titleFontSizeSmall: string;
+            titleFontSizeMedium: string;
+            titleFontSizeLarge: string;
+            titleFontSizeHuge: string;
+            descriptionFontSizeSmall: string;
+            descriptionFontSizeMedium: string;
+            descriptionFontSizeLarge: string;
+            descriptionFontSizeHuge: string;
+            titleColor: string;
+            descriptionColor: string;
             iconColor: string;
+            iconBgColor: string;
             extraTextColor: string;
         }, any>;
         Popover: import("../../_mixins").Theme<"Popover", {
@@ -2841,12 +2904,14 @@ export interface CommonColumnInfo<T = InternalRowData> {
     titleAlign?: 'left' | 'center' | 'right';
     ellipsis?: Ellipsis;
     cellProps?: (rowData: T, rowIndex: number) => HTMLAttributes;
+    visible?: boolean;
 }
 export type TableColumnTitle = string | ((column: TableBaseColumn) => VNodeChild);
 export type TableExpandColumnTitle = string | ((column: TableExpandColumn) => VNodeChild);
 export type TableColumnGroupTitle = string | ((column: TableColumnGroup) => VNodeChild);
 export type TableColumnGroup<T = InternalRowData> = {
     title?: TableColumnGroupTitle;
+    subtitle?: string;
     type?: never;
     key: ColumnKey;
     children: Array<TableBaseColumn<T>>;
@@ -2855,9 +2920,24 @@ export type TableColumnGroup<T = InternalRowData> = {
 } & CommonColumnInfo<T>;
 export type TableBaseColumn<T = InternalRowData> = {
     title?: TableColumnTitle;
+    subtitle?: string;
     titleColSpan?: number;
     type?: never;
     key: ColumnKey;
+    editable?: boolean;
+    mask?: string | ((value: string) => string) | {
+        postProcess: (value: string) => string;
+    };
+    placeholder?: string;
+    totalRow?: {
+        type: 'sum' | 'default' | 'diff' | 'multiply' | 'divide' | 'percentage' | 'function';
+        value?: string;
+        fields?: string[];
+        function?: (values: number[]) => number;
+        mask?: string | ((value: string) => string) | {
+            postProcess: (value: string) => string;
+        };
+    };
     tree?: boolean;
     sorter?: boolean | Sorter<T> | 'default';
     defaultSortOrder?: SortOrder;
@@ -2904,6 +2984,7 @@ export type Expandable<T = InternalRowData> = (row: T) => boolean;
 export interface TableExpandColumn<T = InternalRowData> extends Omit<TableSelectionColumn<T>, 'type'> {
     type: 'expand';
     title?: TableExpandColumnTitle;
+    subtitle?: string;
     renderExpand: RenderExpand<T>;
     expandable?: Expandable<T>;
 }
@@ -2994,6 +3075,7 @@ export interface DataTableInjection {
     syncScrollState: (deltaX?: number, deltaY?: number) => void;
     setHeaderScrollLeft: (scrollLeft: number) => void;
     renderCell: Ref<undefined | ((value: any, rowData: object, column: TableBaseColumn) => VNodeChild)>;
+    handleEdit: (value: any, row: any, key: string) => void;
 }
 export declare const dataTableInjectionKey: import("vue").InjectionKey<DataTableInjection>;
 export interface MainTableInjection {

package/es/data-table/src/styles/index.cssr.js

@@ -42,6 +42,9 @@ const fixedColumnStyle = createFixedColumnStyle();
 // --u-loading-size
 // --u-loading-color
 // --u-opacity-loading
+// --u-th-sub-color
+// --u-th-sub-font-weight
+// --u-th-sub-font-size
 // --u-fixed-box-shadow used in Body.tsx
 // --indent-offset for ellipsis & expand trigger
 export default c([cB('data-table', `
@@ -137,7 +140,7 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('data-table-loading
  margin: calc(var(--u-th-padding) * -1);
  padding: var(--u-th-padding);
  box-sizing: border-box;
- `), cM('disabled', null, [cB('data-table-td', 'color: var(--u-td-opacity-disabled);')]), cM('striped', 'background-color: var(--u-merged-td-color-striped);', [cB('data-table-td', 'background-color: var(--u-merged-td-color-striped);')]), cNotM('summary', [c('&:hover', 'background-color: var(--u-merged-td-color-hover);', [c('>', [cB('data-table-td', 'background-color: var(--u-merged-td-color-hover);')])])])]), cB('data-table-th', `
+ `), cM('disabled', null, [cB('data-table-td', 'color: var(--u-td-opacity-disabled);')]), cM('striped', 'background-color: var(--u-merged-td-color-striped);', [cB('data-table-td', 'background-color: var(--u-merged-td-color-striped);')]), c('&:hover', 'background-color: var(--u-merged-td-color-hover);', [c('>', [cB('data-table-td', 'background-color: var(--u-merged-td-color-hover);')])]), c('&:has(.u-data-table-td--editable:hover)', [c('>', [cB('data-table-td', 'background-color: var(--u-merged-td-color);', [cM('editable', [c('&:hover', 'background-color: var(--u-merged-td-color-hover);')])])])])]), cB('data-table-th', `
  padding: var(--u-th-padding);
  position: relative;
  height: var(--u-th-height);
@@ -168,6 +171,10 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('data-table-loading
  `, [cE('title', `
  flex: 1;
  min-width: 0;
+ `), cE('subtitle', `
+ color: var(--u-th-sub-color);
+ font-weight: var(--u-th-sub-font-weight);
+ font-size: var(--u-th-sub-font-size);
  `)]), cE('ellipsis', `
  display: inline-block;
  vertical-align: bottom;
@@ -286,6 +293,23 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('data-table-loading
  `), cM('selection, expand', `
  text-align: center;
  line-height: 0;
+ `), cM('editable', `
+ cursor: pointer;
+ position: relative;
+ 
+ .u-data-table-editable-input {
+ appearance: none;
+ text-align: right;
+ border: none;
+ background: none;
+ outline: none;
+ padding: 0;
+ margin: 0;
+ font: inherit;
+ color: inherit;
+ box-shadow: none;
+ width: '100%';
+ }
  `), fixedColumnStyle]), cB('data-table-empty', `
  box-sizing: border-box;
  padding: var(--u-empty-padding);

package/es/data-table/src/use-check.d.ts

@@ -12,7 +12,7 @@ export declare function useCheck(props: DataTableSetupProps, data: {
     someRowsCheckedRef: ComputedRef<boolean>;
     allRowsCheckedRef: ComputedRef<boolean>;
     headerCheckboxDisabledRef: ComputedRef<boolean>;
-    doUpdateCheckedRowKeys: (keys: RowKey[], row: RowData | undefined, action: 'check' | 'uncheck' | 'checkAll' | 'uncheckAll') => void;
+    doUpdateCheckedRowKeys: (keys: RowKey[], row: RowData | undefined, action: "check" | "uncheck" | "checkAll" | "uncheckAll") => void;
     doCheckAll: (checkWholeTable?: boolean) => void;
     doUncheckAll: (checkWholeTable?: boolean) => void;
     doCheck: (rowKey: RowKey | RowKey[], single: boolean | undefined, rowInfo: RowData) => void;

package/es/data-table/src/use-expand.d.ts

@@ -3,7 +3,7 @@ import type { TreeMate } from 'treemate';
 import type { Expandable, InternalRowData, RowKey, DataTableSetupProps } from './interface';
 export declare function useExpand(props: DataTableSetupProps, treeMateRef: Ref<TreeMate<InternalRowData, InternalRowData, InternalRowData>>): {
     stickyExpandedRowsRef: Ref<boolean>;
-    mergedExpandedRowKeysRef: import("vue").ComputedRef<import("treemate").Key[]>;
+    mergedExpandedRowKeysRef: import("vue").ComputedRef<RowKey[]>;
     renderExpandRef: import("vue").ComputedRef<import("./interface").RenderExpand<any> | undefined>;
     expandableRef: import("vue").ComputedRef<Expandable<any> | undefined>;
     doUpdateExpandedRowKeys: (expandedKeys: RowKey[]) => void;

package/es/data-table/src/use-group-header.js

@@ -15,6 +15,8 @@ function getRowsAndCols(columns, getResizableWidth) {
             maxDepth = currentDepth;
         }
         for (const column of columns) {
+            if (column.visible === false)
+                continue;
             if ('children' in column) {
                 ensureMaxDepth(column.children, currentDepth + 1);
             }
@@ -39,6 +41,8 @@ function getRowsAndCols(columns, getResizableWidth) {
         let hideUntilIndex = 0;
         columns.forEach((column, index) => {
             var _a;
+            if (column.visible === false)
+                return;
             if ('children' in column) {
                 // do not allow colSpan > 1 for non-leaf th
                 // we will execute the calculation logic

package/es/data-table/src/use-mask.d.ts

@@ -0,0 +1,10 @@
+export declare function applyMask(value: string, mask: string): string;
+export declare function processMaskedValue(value: string | number, mask: string | ((value: string) => string) | {
+    postProcess: (value: string) => string;
+}): string;
+export declare function processInputWithMask(value: string, mask: string | ((value: string) => string) | {
+    postProcess: (value: string) => string;
+}): {
+    processedValue: string | number;
+    displayValue: string;
+};

package/es/data-table/src/use-mask.js

@@ -0,0 +1,58 @@
+import { REGEX } from './utils';
+export function applyMask(value, mask) {
+    if (!mask)
+        return value;
+    if (!value || value.trim() === '')
+        return '';
+    const cleanValue = value.replace(REGEX.ONLY_DIGITS, '');
+    if (!cleanValue)
+        return '';
+    let result = '';
+    let valueIndex = 0;
+    for (let i = 0; i < mask.length && valueIndex < cleanValue.length; i++) {
+        if (mask[i] === '#') {
+            result += cleanValue[valueIndex];
+            valueIndex++;
+        }
+        else {
+            result += mask[i];
+        }
+    }
+    return result;
+}
+export function processMaskedValue(value, mask) {
+    if (!mask || value === null || value === undefined) {
+        return String(value);
+    }
+    const stringValue = String(value);
+    if (typeof mask === 'function') {
+        return mask(stringValue);
+    }
+    else if (typeof mask === 'object' && mask.postProcess) {
+        return mask.postProcess(stringValue);
+    }
+    else if (typeof mask === 'string') {
+        return applyMask(stringValue, mask);
+    }
+    return stringValue;
+}
+export function processInputWithMask(value, mask) {
+    if (!mask) {
+        return { processedValue: value, displayValue: value };
+    }
+    if (typeof mask === 'function') {
+        const processedValue = mask(value);
+        return { processedValue, displayValue: processedValue };
+    }
+    else if (typeof mask === 'object' && mask.postProcess) {
+        const displayValue = mask.postProcess(value);
+        const cleanValue = value.replace(REGEX.ONLY_DIGITS, '');
+        const processedValue = cleanValue ? parseFloat(cleanValue) : 0;
+        return { processedValue, displayValue };
+    }
+    else if (typeof mask === 'string') {
+        const displayValue = applyMask(value, mask);
+        return { processedValue: value, displayValue };
+    }
+    return { processedValue: value, displayValue: value };
+}

package/es/data-table/src/utils.d.ts

@@ -2,6 +2,10 @@ import type { CSSProperties } from 'vue';
 import type { SortOrder, TableBaseColumn, InternalRowData, SortOrderFlag, SortState, CreateRowClassName, TableSelectionColumn, TableColumn, TableExpandColumn } from './interface';
 export declare const SELECTION_COL_WIDTH = 40;
 export declare const EXPAND_COL_WIDTH = 40;
+export declare const REGEX: {
+    ONLY_DIGITS: RegExp;
+    ONLY_NUMERIC_AND_DOT: RegExp;
+};
 export declare function getNumberColWidth(col: TableColumn): number | undefined;
 export declare function getStringColWidth(col: TableColumn): string | undefined;
 export declare function getColKey(col: TableColumn): string | number;

package/es/data-table/src/utils.js

@@ -2,6 +2,10 @@ import { depx } from 'seemly';
 import { formatLength } from '../../_utils';
 export const SELECTION_COL_WIDTH = 40;
 export const EXPAND_COL_WIDTH = 40;
+export const REGEX = {
+    ONLY_DIGITS: /\D/g,
+    ONLY_NUMERIC_AND_DOT: /[^\d.]/g
+};
 export function getNumberColWidth(col) {
     if (col.type === 'selection') {
         return col.width === undefined ? SELECTION_COL_WIDTH : depx(col.width);

package/es/data-table/styles/light.d.ts

@@ -35,6 +35,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     tdTextColor: string;
     thTextColor: string;
     thFontWeight: string;
+    thSubColor: string;
+    thSubFontWeight: string;
+    thSubFontSize: string;
     thButtonColorHover: string;
     thIconColor: string;
     thIconColorActive: string;
@@ -93,6 +96,9 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
     tdTextColor: string;
     thTextColor: string;
     thFontWeight: string;
+    thSubColor: string;
+    thSubFontWeight: string;
+    thSubFontSize: string;
     thButtonColorHover: string;
     thIconColor: string;
     thIconColorActive: string;
@@ -671,12 +677,18 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
                     iconSizeMedium: string;
                     iconSizeLarge: string;
                     iconSizeHuge: string;
-                    fontSizeSmall: string;
-                    fontSizeMedium: string;
-                    fontSizeLarge: string;
-                    fontSizeHuge: string;
-                    textColor: string;
+                    titleFontSizeSmall: string;
+                    titleFontSizeMedium: string;
+                    titleFontSizeLarge: string;
+                    titleFontSizeHuge: string;
+                    descriptionFontSizeSmall: string;
+                    descriptionFontSizeMedium: string;
+                    descriptionFontSizeLarge: string;
+                    descriptionFontSizeHuge: string;
+                    titleColor: string;
+                    descriptionColor: string;
                     iconColor: string;
+                    iconBgColor: string;
                     extraTextColor: string;
                 }, any>;
             }>;
@@ -804,12 +816,18 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
                     iconSizeMedium: string;
                     iconSizeLarge: string;
                     iconSizeHuge: string;
-                    fontSizeSmall: string;
-                    fontSizeMedium: string;
-                    fontSizeLarge: string;
-                    fontSizeHuge: string;
-                    textColor: string;
+                    titleFontSizeSmall: string;
+                    titleFontSizeMedium: string;
+                    titleFontSizeLarge: string;
+                    titleFontSizeHuge: string;
+                    descriptionFontSizeSmall: string;
+                    descriptionFontSizeMedium: string;
+                    descriptionFontSizeLarge: string;
+                    descriptionFontSizeHuge: string;
+                    titleColor: string;
+                    descriptionColor: string;
                     iconColor: string;
+                    iconBgColor: string;
                     extraTextColor: string;
                 }, any>;
             }>;
@@ -824,12 +842,18 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
         iconSizeMedium: string;
         iconSizeLarge: string;
         iconSizeHuge: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
-        fontSizeHuge: string;
-        textColor: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        descriptionFontSizeSmall: string;
+        descriptionFontSizeMedium: string;
+        descriptionFontSizeLarge: string;
+        descriptionFontSizeHuge: string;
+        titleColor: string;
+        descriptionColor: string;
         iconColor: string;
+        iconBgColor: string;
         extraTextColor: string;
     }, any>;
     Popover: import("../../_mixins").Theme<"Popover", {

package/es/data-table/styles/light.js

@@ -10,7 +10,7 @@ import { dropdownLight } from '../../dropdown/styles';
 import { commonLight } from '../../_styles/common';
 import { createTheme } from '../../_mixins';
 export const self = (vars) => {
-    const { borderRadius, opacityDisabled, elementsQuaternary, lineHeightBodyLarge, fontBodyMedium, fontBodyLarge, elementsTertiary, containerPrimary, textPrimary, textSecondary, fontWeightBold, elementsPrimary, brandPrimary500, shadowDepth, iconLarge } = vars;
+    const { borderRadius, opacityDisabled, elementsQuaternary, lineHeightBodyLarge, fontBodySmall, fontBodyMedium, fontBodyLarge, elementsTertiary, containerPrimary, textPrimary, textSecondary, fontWeightBold, elementsPrimary, brandPrimary500, fontWeight, shadowDepth, iconLarge } = vars;
     return {
         thPaddingSmall: '8px',
         thPaddingMedium: '8px 16px',
@@ -47,6 +47,9 @@ export const self = (vars) => {
         tdTextColor: textPrimary,
         thTextColor: textSecondary,
         thFontWeight: fontWeightBold,
+        thSubColor: textSecondary,
+        thSubFontWeight: fontWeight,
+        thSubFontSize: fontBodySmall,
         thButtonColorHover: elementsTertiary,
         thIconColor: elementsPrimary,
         thIconColorActive: brandPrimary500,