@orangelogic/design-system 2.57.0 → 2.58.0

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Filter/Filter.d.ts

@@ -1,4 +1,4 @@
-import { Filter as FilterType, FilterFunction, FilterParams, FilterType as FilterTypeName, IColumn, IFilter } from '../../../../../../../types/src/table';
+import { Filter as FilterType, FilterParams, FilterType as FilterTypeName, IColumn, IFilter } from '../../../../../../../types/src/table';
 import { default as Column } from '../../core/column/Column';
 import { default as Module } from '../../core/Module';
 import { default as Row } from '../../core/row/Row';
@@ -35,17 +35,17 @@ export default class Filter extends Module implements IFilter {
      */
     remoteFilterParams(data: any, config: any, silent: any, params: any): any;
     generatePlaceholder(_text: string): string | undefined;
-    userSetFilter(field: string | FilterType[], type?: FilterTypeName, value?: any, params?: FilterParams): void;
+    userSetFilter(filter: FilterType | FilterType[]): void;
     userRefreshFilter(): void;
-    userAddFilter(field: string | FilterType[], type?: FilterTypeName, value?: any, params?: FilterParams): void;
+    userAddFilter(filter: FilterType | FilterType[]): void;
     userSetHeaderFilterFocus(field: string): void;
     userGetHeaderFilterValue(field: string): any;
     userSetHeaderFilterValue(field: string, value: any): void;
     userRemoveFilter(field: string | FilterType[], type?: FilterTypeName, value?: any): void;
     userClearFilter(all?: boolean): void;
     userClearHeaderFilter(): void;
-    searchRows(field: string | FilterType[], type?: FilterTypeName, value?: any): any[];
-    searchData(field: string | FilterType[], type?: FilterTypeName, value?: any): any[];
+    searchRows(filter: FilterType | FilterType[]): any[];
+    searchData(filter: FilterType | FilterType[]): any[];
     initializeColumnHeaderFilter(column: Column): void;
     initializeColumn(column: Column, _initialValue?: any): void;
     generateHeaderFilterElement(column: IColumn, initialValue?: any, reinitialize?: boolean): void;
@@ -58,6 +58,13 @@ export default class Filter extends Module implements IFilter {
     refreshFilter(): void;
     trackChanges(): void;
     hasChanged(): boolean;
+    /**
+     * Normally, filter operates on a single field. To create a filter that operates on multiple or all fields,
+     * first pass the field names (or none to match all) to this method, then use this method as the filter's field.
+     * @param fields - The fields to match against. If not provided, all fields will be matched.
+     * @returns A function that can be used to match against the data.
+     */
+    createFilterFieldFunction(fields?: string[]): (data: any, filter: FilterType) => boolean;
     /**
      * This function is used to set a new filter on the table data.
      * By default, there are 12 built-in filter operations (see FilterTypeName enum).
@@ -68,8 +75,8 @@ export default class Filter extends Module implements IFilter {
      * @param value - The value to set the filter for.
      * @param params - The parameters to configure the filter.
      */
-    setFilter(field: string | string[] | FilterType[] | FilterFunction, type?: FilterTypeName, value?: any, params?: FilterParams): void;
-    addFilter(field: string | FilterType[], type?: FilterTypeName, value?: any, params?: FilterParams): void;
+    setFilter(filterParams: FilterType | FilterType[]): void;
+    addFilter(filter: FilterType | FilterType[]): void;
     findFilter(filter: FilterType | FilterType[]): FilterItem | false;
     findSubFilters(filters: FilterType[]): FilterItem[] | false;
     getFilters(all?: boolean, ajax?: boolean): FilterType[];
@@ -78,7 +85,7 @@ export default class Filter extends Module implements IFilter {
     removeFilter(field: string | FilterType[], type?: FilterTypeName, value?: any): void;
     clearFilter(all?: boolean): void;
     clearHeaderFilter(): void;
-    search(searchType: 'rows' | 'data', field: string | FilterType[], type?: FilterTypeName, value?: any): any[];
+    search(searchType: 'rows' | 'data', filters: FilterType | FilterType[]): any[];
     filter(rowList: Row[], _filters?: any): Row[];
     filterRow(row: Row, _filters?: any): boolean;
     filterRecurse(filter: FilterItem | FilterItem[], data: any): boolean;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Format/Format.d.ts

@@ -26,7 +26,7 @@ export default class Format extends Module {
      */
     initializeColumn(column: Column): void;
     lookupTypeFormatter(column: Column, type: string): FormatterConfig;
-    lookupFormatter(formatter: string | ((cell: any, params: any, onRendered: (callback: () => void) => void) => any) | undefined): (cell: any, params: any, onRendered: (callback: () => void) => void) => any;
+    static lookupFormatter(formatter: string | ((cell: any, params: any, onRendered: (callback: () => void) => void) => any) | undefined): (cell: any, params: any, onRendered: (callback: () => void) => void) => any;
     cellRendered(cell: Cell): void;
     /**
      * Format the header of a column
@@ -38,7 +38,5 @@ export default class Format extends Module {
     formatHeader(column: Column, title: string, el: HTMLElement): any;
     formatValue(cell: Cell): any;
     formatExportValue(cell: Cell, type: 'print' | 'clipboard' | 'htmlOutput'): any;
-    sanitizeHTML(value: any): string;
-    emptyToSpace(value: any): string;
 }
 export {};

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Format/defaults/formatters/composite.d.ts

@@ -0,0 +1,5 @@
+import { CompositeFormatterParams } from '../../../../../../../../../types/src/table';
+import { default as CellComponent } from '../../../../core/cell/CellComponent';
+import { default as Format } from '../../Format';
+
+export default function composite(this: Format, cell: CellComponent, formatterParams: CompositeFormatterParams, onRendered?: (callback: () => void) => void): HTMLElement | undefined;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Format/defaults/formatters/icon.d.ts

@@ -0,0 +1,13 @@
+import { IconFormatterParams } from '../../../../../../../../../types/src/table';
+import { default as CellComponent } from '../../../../core/cell/CellComponent';
+import { default as Format } from '../../Format';
+
+/**
+ * Formats the value of a cell as an icon.
+ * @param this - The Format instance.
+ * @param cell - The Cell instance.
+ * @param {IconFormatterParams} formatterParams - The formatter parameters.
+ * @param _onRendered - The onRendered callback.
+ * @returns The icon element, or undefined if no icon name could be resolved.
+ */
+export default function icon(this: Format, cell: CellComponent, formatterParams: IconFormatterParams): HTMLElement | undefined;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Format/defaults/formatters/image.d.ts

@@ -1 +1,4 @@
-export default function (this: any, cell: any, formatterParams: any, _onRendered: (callback: () => void) => void): HTMLDivElement | null;
+import { default as CellComponent } from '../../../../core/cell/CellComponent';
+import { default as Format } from '../../Format';
+
+export default function image(this: Format, cell: CellComponent, formatterParams: any): HTMLDivElement | null;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Format/defaults/formatters/number.d.ts

@@ -0,0 +1,13 @@
+import { NumberFormatterParams } from '../../../../../../../../../types/src/table';
+import { default as CellComponent } from '../../../../core/cell/CellComponent';
+import { default as Format } from '../../Format';
+
+/**
+ * Formats the value of a cell as a number using cx-format-number.
+ * @param this - The Format instance.
+ * @param cell - The Cell instance.
+ * @param {NumberFormatterParams} formatterParams - The formatter parameters
+ * @param _onRendered - The onRendered callback.
+ * @returns The format-number element, or undefined if the cell value cannot be converted to a number.
+ */
+export default function number(this: Format, cell: CellComponent, formatterParams: NumberFormatterParams): HTMLElement | undefined;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Format/defaults/formatters/plaintext.d.ts

@@ -1 +1,6 @@
-export default function (this: any, cell: any, _formatterParams: any, _onRendered: (callback: () => void) => void): string;
+import { default as CxLineClamp } from '../../../../../../line-clamp/line-clamp.ts';
+import { PlaintextFormatterParams } from '../../../../../../../../../types/src/table';
+import { default as CellComponent } from '../../../../core/cell/CellComponent';
+import { default as Format } from '../../Format';
+
+export default function plainText(this: Format, cell: CellComponent, formatterParams?: PlaintextFormatterParams): CxLineClamp;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Format/defaults/formatters/textarea.d.ts

@@ -1 +1,4 @@
-export default function textarea(this: any, cell: any): string;
+import { default as CellComponent } from '../../../../core/cell/CellComponent';
+import { default as Format } from '../../Format';
+
+export default function textarea(this: Format, cell: CellComponent): string;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Format/defaults/formatters/time.d.ts

@@ -0,0 +1,9 @@
+import { TimeFormatterParams } from '../../../../../../../../../types/src/table';
+import { default as CellComponent } from '../../../../core/cell/CellComponent';
+import { default as Format } from '../../Format';
+
+/**
+ * Formats the value of a cell as a duration using cx-format-time.
+ * The cell value is the single source of truth for the duration.
+ */
+export default function time(this: Format, cell: CellComponent, formatterParams: TimeFormatterParams): HTMLElement;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Format/defaults/formatters/traffic.d.ts

@@ -1,9 +1,5 @@
-import { TextFormatParams } from '../../../../../../../../../types/src/table';
-import { default as Cell } from '../../../../core/cell/Cell';
+import { TextFormatParams, TrafficFormatterParams } from '../../../../../../../../../types/src/table';
+import { default as CellComponent } from '../../../../core/cell/CellComponent';
 import { default as Format } from '../../Format';
 
-export default function traffic(this: Format, cell: Cell, formatterParams: {
-    colorMap?: Record<any, string>;
-    getColor?: (value: any) => string;
-    textStyle?: Record<string, string>;
-}, _onRendered?: (callback: () => void) => void, textFormatParams?: TextFormatParams): HTMLElement | undefined;
+export default function traffic(this: Format, cell: CellComponent, formatterParams: TrafficFormatterParams, _onRendered?: (callback: () => void) => void, textFormatParams?: TextFormatParams): HTMLElement | undefined;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Format/defaults/formatters/typography.d.ts

@@ -0,0 +1,13 @@
+import { TypographyFormatterParams } from '../../../../../../../../../types/src/table';
+import { default as CellComponent } from '../../../../core/cell/CellComponent';
+import { default as Format } from '../../Format';
+
+/**
+ * Formats the value of a cell as typography.
+ * @param this - The Format instance.
+ * @param cell - The Cell instance.
+ * @param {TypographyFormatterParams} formatterParams - The formatter parameters
+ * @param _onRendered - The onRendered callback.
+ * @returns The typography element, or undefined if the cell value is empty.
+ */
+export default function typography(this: Format, cell: CellComponent, formatterParams: TypographyFormatterParams): HTMLElement | undefined;

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Format/defaults/formatters.d.ts

@@ -3,15 +3,18 @@ import { default as array } from './formatters/array';
 import { default as buttonCross } from './formatters/buttonCross';
 import { default as buttonTick } from './formatters/buttonTick';
 import { default as color } from './formatters/color';
+import { default as composite } from './formatters/composite';
 import { default as datetime } from './formatters/datetime';
 import { default as datetimediff } from './formatters/datetimediff';
 import { default as handle } from './formatters/handle';
 import { default as html } from './formatters/html';
+import { default as icon } from './formatters/icon';
 import { default as image } from './formatters/image';
 import { default as json } from './formatters/json';
 import { default as link } from './formatters/link';
 import { default as lookup } from './formatters/lookup';
 import { default as money } from './formatters/money';
+import { default as number } from './formatters/number';
 import { default as plaintext } from './formatters/plaintext';
 import { default as progress } from './formatters/progress';
 import { default as rownum } from './formatters/rownum';
@@ -19,8 +22,10 @@ import { default as star } from './formatters/star';
 import { default as tag } from './formatters/tag';
 import { default as textarea } from './formatters/textarea';
 import { default as tickCross } from './formatters/tickCross';
+import { default as time } from './formatters/time';
 import { default as toggle } from './formatters/toggle';
 import { default as traffic } from './formatters/traffic';
+import { default as typography } from './formatters/typography';
 
 declare const _default: {
     adaptable: typeof adaptable;
@@ -28,15 +33,18 @@ declare const _default: {
     buttonCross: typeof buttonCross;
     buttonTick: typeof buttonTick;
     color: typeof color;
+    composite: typeof composite;
     datetime: typeof datetime;
     datetimediff: typeof datetimediff;
     handle: typeof handle;
     html: typeof html;
+    icon: typeof icon;
     image: typeof image;
     json: typeof json;
     link: typeof link;
     lookup: typeof lookup;
     money: typeof money;
+    number: typeof number;
     plaintext: typeof plaintext;
     progress: typeof progress;
     rownum: typeof rownum;
@@ -44,7 +52,9 @@ declare const _default: {
     tag: typeof tag;
     textarea: typeof textarea;
     tickCross: typeof tickCross;
+    time: typeof time;
     toggle: typeof toggle;
     traffic: typeof traffic;
+    typography: typeof typography;
 };
 export default _default;

package/library/packages/events/src/cx-table-dropdown-filter-change.d.ts

@@ -0,0 +1,13 @@
+import { TableDropdownFilterDataOption } from '../../types/src/table';
+
+export type CxTableDropdownFilterChangeEvent = CustomEvent<{
+    data: {
+        id: string;
+        option: TableDropdownFilterDataOption;
+    };
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-table-dropdown-filter-change': CxTableDropdownFilterChangeEvent;
+    }
+}

package/library/packages/events/src/cx-table-row-action-click.d.ts

@@ -1,6 +1,7 @@
-import { IRowComponent } from '../../types/src/table';
+import { ICellComponent, IRowComponent } from '../../types/src/table';
 
 export type CxTableRowActionClickEvent = CustomEvent<{
+    cell?: ICellComponent;
     name: string;
     row: IRowComponent | {
         [key: string]: unknown;

package/library/packages/events/src/events.d.ts

@@ -51,6 +51,7 @@ export * from './cx-download-format-picker-select';
 export * from './cx-download-format-request-status';
 export * from './cx-drag-end';
 export * from './cx-drag-start';
+export * from './cx-table-dropdown-filter-change';
 export * from './cx-enter';
 export * from './cx-error';
 export * from './cx-expand';

package/library/packages/types/src/table.d.ts

@@ -1,5 +1,8 @@
 import { ButtonVariant } from './button';
+import { FormatNumberCurrencyDisplay, FormatNumberType } from './format-number';
 import { PaginationCounter } from './pagination';
+import { SpacingProp } from './space';
+import { TypographyVariant } from './typography';
 
 export type CxTableEventName = `cx-table.${string}`;
 export type DropdownSection = Record<string, string>;
@@ -151,6 +154,7 @@ export interface ICell extends ICoreFeature {
     component: ICellComponent | null;
     loaded: boolean;
     calcs?: Record<string, any>;
+    hoverMenuElement: HTMLElement | null;
     build(): void;
     generateElement(): void;
     _configureCell(): void;
@@ -841,6 +845,7 @@ export interface IColumnManager extends ICoreFeature {
     addColumn(definition: ColumnDefinition, before?: boolean, nextToColumn?: IColumn | false): Promise<IColumn>;
     deregisterColumn(column: IColumn): void;
     rerenderColumns(update?: boolean | null, blockRedraw?: boolean): void;
+    refreshVisibilityLayout(): void;
     blockRedraw(): void;
     restoreRedraw(): void;
     redraw(force?: boolean): void;
@@ -893,6 +898,7 @@ export interface ITabulatorFull extends ITabulator {
     getSheetData: (key?: SheetLookup) => unknown[][];
     getPage: () => IPage;
     setFilter: IFilter['setFilter'];
+    createFilterFieldFunction: IFilter['createFilterFieldFunction'];
     clearFilter: IFilter['clearFilter'];
     setSort: (sortList: string | Sorter[], dir?: SortDirection) => void;
 }
@@ -922,7 +928,8 @@ export declare enum HoverMenuPlacement {
 export type HoverMenuOptions = {
     data: RowAction[];
     options: {
-        placement: HoverMenuPlacement;
+        placement?: HoverMenuPlacement;
+        style?: Record<string, string>;
     };
 };
 export interface ISheetComponent {
@@ -1269,17 +1276,18 @@ export interface OptionsRowGrouping {
     groupClosedShowCalcs?: boolean;
     groupUpdateOnCellEdit?: boolean;
 }
-export interface Filter {
-    field: string | FilterFunction;
-    type: FilterType;
+export type FilterPredicate = (filterVal: any, rowVal: any, rowData: any, filterParams: FilterParams) => boolean;
+export type Filter = {
+    field: string | FilterFieldFunction;
+    type: FilterType | FilterPredicate;
     value: any;
     params?: FilterParams;
-}
+};
 export interface FilterParams {
     separator?: string;
     matchAll?: boolean;
 }
-export type FilterFunction = (data: any, filter: Filter) => boolean;
+export type FilterFieldFunction = (data: any, filter: Filter) => boolean;
 export interface OptionsFiltering {
     /** Array of filters to be applied on load. */
     initialFilter?: Filter[];
@@ -1661,6 +1669,8 @@ export interface OptionsGeneral {
     renderVerticalBuffer?: boolean | number;
     /** placeholder element to display on empty table. */
     placeholder?: string | HTMLElement | ((this: ITabulator | ITabulatorFull) => string);
+    /** placeholder text to display when all columns are hidden. */
+    noColumnPlaceholderText?: string | HTMLElement | ((this: ITabulator | ITabulatorFull) => string);
     placeholderHeaderFilter?: string | HTMLElement | ((this: ITabulator | ITabulatorFull) => string);
     /** Footer  element to display for the table. */
     footerElement?: string | HTMLElement;
@@ -1911,7 +1921,13 @@ export interface ColumnLayout {
     width?: number | string;
 }
 export type ColumnResizable = true | false | 'header' | 'cell';
-export interface ColumnDefinition extends ColumnLayout, CellCallbacks {
+export interface FormatterDefinition {
+    /** Set how you would like the data to be formatted. */
+    formatter?: Formatter;
+    /** You can pass an optional additional parameter with the formatter, formatterParams that should contain an object with additional information for configuring the formatter. */
+    formatterParams?: FormatterParams;
+}
+export interface ColumnDefinition extends ColumnLayout, CellCallbacks, FormatterDefinition {
     /** If you want to set the horizontal alignment on a column by column basis, */
     hozAlign?: ColumnDefinitionAlign;
     headerHozAlign?: ColumnDefinitionAlign;
@@ -1952,10 +1968,6 @@ export interface ColumnDefinition extends ColumnLayout, CellCallbacks {
     sorter?: 'string' | 'number' | 'alphanum' | 'boolean' | 'exists' | 'date' | 'time' | 'datetime' | 'array' | ((a: any, b: any, aRow: IRowComponent, bRow: IRowComponent, column: IColumnComponent, dir: SortDirection, sorterParams: Record<string, unknown>) => number);
     /** If you want to dynamically generate the sorterParams at the time the sort is called you can pass a function into the property that should return the params object. */
     sorterParams?: ColumnDefinitionSorterParams | ColumnSorterParamLookupFunction;
-    /** Set how you would like the data to be formatted. */
-    formatter?: Formatter;
-    /** You can pass an optional additional parameter with the formatter, formatterParams that should contain an object with additional information for configuring the formatter. */
-    formatterParams?: FormatterParams;
     /** alter the row height to fit the contents of the cell instead of hiding overflow */
     variableHeight?: boolean;
     /** There are some circumstances where you may want to block edit-ability of a cell for one reason or another. To meet this need you can use the editable option. This lets you set a callback that is executed before the editor is built, if this callback returns true the editor is added, if it returns false the edit is aborted and the cell remains a non editable cell. The function is passed one parameter, the CellComponent of the cell about to be edited. You can also pass a boolean value instead of a function to this property. */
@@ -2152,6 +2164,11 @@ export interface ColumnDefinition extends ColumnLayout, CellCallbacks {
      * The function to determine if the value is empty.
      */
     editorEmptyValueFunc?: (value: unknown) => boolean;
+    /**
+     * Hover menu configuration for this column. When specified, a hover menu will be displayed
+     * inside each cell of this column when the user hovers over the cell.
+     */
+    hoverMenu?: HoverMenuOptions;
 }
 export interface CellCallbacks {
     /** callback for when user clicks on a cell in this column. */
@@ -2202,8 +2219,8 @@ export type ColumnCalc = 'avg' | 'max' | 'min' | 'sum' | 'concat' | 'count' | 'u
 export type ColumnCalcParams = {
     precision: number;
 } | ((values: any, data: any) => any);
-export type Formatter = 'plaintext' | 'textarea' | 'html' | 'money' | 'image' | 'datetime' | 'datetimediff' | 'link' | 'tickCross' | 'color' | 'star' | 'traffic' | 'progress' | 'lookup' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'toggle' | ((cell: ICellComponent, formatterParams: Record<string, unknown>, onRendered: EmptyCallback) => string | HTMLElement);
-export type FormatterParams = MoneyParams | ImageParams | LinkParams | DateTimeParams | DateTimeDifferenceParams | TickCrossParams | TrafficParams | ProgressBarParams | StarRatingParams | RowSelectionParams | JSONRecord | ToggleSwitchParams | ((cell: ICellComponent) => Record<string, unknown>);
+export type Formatter = 'plaintext' | 'textarea' | 'html' | 'money' | 'image' | 'datetime' | 'datetimediff' | 'link' | 'tickCross' | 'color' | 'star' | 'traffic' | 'progress' | 'lookup' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'toggle' | 'time' | ((cell: ICellComponent, formatterParams: Record<string, unknown>, onRendered: EmptyCallback) => string | HTMLElement);
+export type FormatterParams = MoneyParams | ImageParams | LinkParams | DateTimeParams | DateTimeDifferenceParams | TickCrossParams | TrafficParams | ProgressBarParams | StarRatingParams | RowSelectionParams | JSONRecord | ToggleSwitchParams | TimeFormatterParams | ((cell: ICellComponent) => Record<string, unknown>);
 export type TextFormatParams = {
     getColor?: (cell: any) => string;
     colorMap?: Record<any, string>;
@@ -2354,28 +2371,38 @@ export interface LabelValue {
     label: string;
     value: string | number | boolean;
 }
-export interface ListEditorParams extends SharedEditorParams, SharedSelectAutoCompleteEditorParams {
+type ListEditorItem = {
+    label: string;
+    value: string;
+};
+type ListEditorValuesLookupFunction = (cell: ICellComponent, filteredTerm: string) => ListEditorItem[];
+type ListEditorValuesLookup = true | RowRangeLookup | ListEditorValuesLookupFunction;
+/**
+ * List editor parameters
+ * @see https://tabulator.info/docs/6.3/edit#editor-list
+ */
+export interface ListEditorParams extends SharedEditorParams, SharedSelectAutoCompleteEditorParams, FormatterDefinition {
     values?: true | string[] | JSONRecord | string | any[] | LabelValue[];
     valuesURL?: string;
-    valuesLookup?: RowRangeLookup;
+    valuesLookup?: ListEditorValuesLookup;
     valuesLookupField?: string;
     clearable?: boolean;
-    itemFormatter?: (label: string, value: string, item: any, element: HTMLElement) => string;
+    getItemLabel?: (label: string, value: string, item: any, element: HTMLElement) => string;
     sort?: SortDirection;
     emptyValue?: any;
     maxWidth?: boolean;
     placeholderLoading?: string;
     placeholderEmpty?: string;
-    multiselect?: boolean;
     autocomplete?: boolean;
-    filterFunc?: (term: string, label: string, value: string | number | boolean, item: any) => any;
     filterRemote?: boolean;
     filterDelay?: number;
     allowEmpty?: boolean;
     listOnEmpty?: boolean;
     freetext?: boolean;
     showListOnEmpty?: boolean;
+    ajaxResponse?: (url: string, params: Record<string, unknown>, data: any) => any;
     verticalNavigation?: 'editor' | 'table' | 'hybrid';
+    closedByDefault?: boolean;
 }
 export type ValueStringCallback = (value: any) => string;
 export type ValueBooleanCallback = (value: any) => boolean;
@@ -2908,16 +2935,17 @@ export interface IFilter extends IModule {
     headerFilterColumns: IColumn[];
     changed: boolean;
     tableInitialized: boolean;
-    setFilter(field: string | string[] | Filter[] | FilterFunction, type?: FilterType, value?: any, params?: FilterParams): void;
-    addFilter(field: string | Filter[], type?: FilterType, value?: any, params?: FilterParams): void;
+    setFilter(filter: Filter | Filter[]): void;
+    createFilterFieldFunction(fields?: string[]): FilterFieldFunction;
+    addFilter(filter: Filter | Filter[]): void;
     removeFilter(field: string | Filter[], type?: FilterType, value?: any): void;
     getFilters(all?: boolean, ajax?: boolean): Filter[];
     getHeaderFilters(): Filter[];
     clearFilter(all?: boolean): void;
     clearHeaderFilter(): void;
     refreshFilter(): void;
-    searchRows(field: string | Filter[], type?: FilterType, value?: any): any[];
-    searchData(field: string | Filter[], type?: FilterType, value?: any): any[];
+    searchRows(filter: Filter | Filter[]): any[];
+    searchData(filter: Filter | Filter[]): any[];
     setHeaderFilterFocus(column: IColumn): void;
     getHeaderFilterValue(column: IColumn): any;
     setHeaderFilterValue(column: IColumn, value: any): void;
@@ -2928,6 +2956,151 @@ export interface HeaderFilterFunc {
 }
 export type LangObject = Record<string, any>;
 export type TableSelector = string | HTMLElement | ITabulator | TableSelector[];
+/**
+ * @typedef {Object} TrafficFormatterParams
+ * @property {Record<any, string>} [colorMap] - Record mapping cell values to colors. Used when the cell value should be mapped to a specific color.
+ * @property {(value: any) => string} [getColor] - Function to dynamically determine the color based on the cell value. Takes precedence over other color resolution methods.
+ * @property {Record<string, string>} [textStyle] - Object with CSS style properties to apply inline to the text element.
+ */
+export type TrafficFormatterParams = {
+    colorMap?: Record<any, string>;
+    getColor?: (value: any) => string;
+    textStyle?: Record<string, string>;
+};
+/**
+ * @typedef {Object} IconFormatterParams
+ * @property {string} [class] - CSS class name(s) to apply to the icon element.
+ * @property {(value: any) => string} [getIcon] - Function to dynamically determine the icon name based on the cell value. Takes precedence over other icon resolution methods.
+ * @property {string | ((value: any) => string)} [icon] - Static icon name string or function that returns an icon name based on the cell value.
+ * @property {Record<any, string>} [iconMap] - Record mapping cell values to icon names. Used when the cell value should be mapped to a specific icon.
+ * @property {number | string} [size] - Size of the icon. Can be a number (in pixels) or a string (e.g., "24px", "1.5rem").
+ * @property {Record<string, string>} [style] - Object with CSS style properties to apply inline to the icon element.
+ */
+export type IconFormatterParams = {
+    class?: string;
+    getIcon?: (value: any) => string;
+    icon?: string | ((value: any) => string);
+    iconMap?: Record<any, string>;
+    size?: number | string;
+    style?: Record<string, string>;
+};
+/**
+ * @typedef {Object} TimeFormatterParams
+ * @property {string} [color] - Sets --cx-format-time-color on the host.
+ * @property {string} [displayStyle] - long | short | narrow | digital (cx-format-time display-style).
+ * @property {string} [fontSize] - Sets --cx-format-time-font-size on the host.
+ * @property {string} [fontWeight] - Sets --cx-format-time-font-weight on the host.
+ * @property {string} [inputUnit] - ms | s (cx-format-time input-unit).
+ * @property {string} [locale] - BCP 47 locale for Intl output.
+ * @property {string} [placeholder] - Shown when duration is empty.
+ * @property {Record<string, string>} [style] - Inline styles applied via Object.assign on the host style.
+ * @property {string} [unitsFormat] - d, d-h, d-h-m, d-h-m-s, h, h-m, h-m-s, m, m-s, s (cx-format-time units-format).
+ */
+export type TimeFormatterParams = {
+    color?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    inputUnit?: string;
+    locale?: string;
+    placeholder?: string;
+    style?: Record<string, string>;
+    unitsFormat?: string;
+    displayStyle?: string;
+    paramsMapField?: string;
+    paramsMap?: Record<any, TimeFormatterParams>;
+    getParams?: (value: unknown, cell: ICellComponent) => TimeFormatterParams;
+};
+/**
+ * @typedef {Object} TypographyFormatterParams
+ * @property {(value: any) => TypographyVariant} [getVariant] - Function to dynamically determine the typography variant based on the cell value. Takes precedence over other variant resolution methods.
+ * @property {string} [prefix] - String to prepend to the cell value.
+ * @property {string} [suffix] - String to append to the cell value.
+ * @property {TypographyVariant} [variant] - Static typography variant to use for all cells.
+ * @property {Record<any, TypographyVariant>} [variantMap] - Record mapping cell values to typography variants. Used when the cell value should be mapped to a specific variant.
+ */
+export type TypographyFormatterParams = {
+    getVariant?: (value: any) => TypographyVariant;
+    prefix?: string;
+    suffix?: string;
+    variant?: TypographyVariant;
+    variantMap?: Record<any, TypographyVariant>;
+    style?: Record<string, string>;
+};
+/**
+ * @typedef {Object} PlaintextFormatterParams
+ * @property {string} [prefix] - String to prepend to the cell value.
+ * @property {string} [suffix] - String to append to the cell value.
+ */
+export type PlaintextFormatterParams = {
+    prefix?: string;
+    suffix?: string;
+    style?: Record<string, string>;
+};
+/**
+ * @typedef {Object} NumberFormatterParams
+ * @property {string} [currency] - The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting (e.g., `'USD'`, `'EUR'`, `'GBP'`). Defaults to `'USD'`.
+ * @property {FormatNumberCurrencyDisplay} [currencyDisplay] - How to display the currency. Can be `'symbol'` (default), `'code'`, `'name'`, or `'narrowSymbol'`.
+ * @property {number} [maximumFractionDigits] - The maximum number of fraction digits to use. Possible values are 0-20.
+ * @property {number} [maximumSignificantDigits] - The maximum number of significant digits to use. Possible values are 1-21.
+ * @property {number} [minimumFractionDigits] - The minimum number of fraction digits to use. Possible values are 0-20.
+ * @property {number} [minimumIntegerDigits] - The minimum number of integer digits to use. Possible values are 1-21.
+ * @property {number} [minimumSignificantDigits] - The minimum number of significant digits to use. Possible values are 1-21.
+ */
+export type NumberFormatterParams = {
+    currency?: string;
+    currencyDisplay?: FormatNumberCurrencyDisplay;
+    maximumFractionDigits?: number;
+    maximumSignificantDigits?: number;
+    minimumFractionDigits?: number;
+    minimumIntegerDigits?: number;
+    minimumSignificantDigits?: number;
+    noGrouping?: boolean;
+    type?: FormatNumberType;
+};
+export type CompositeElement = {
+    field?: string;
+    valueMap?: Record<string, string>;
+    formatter?: string | ((cell: any, params: any, onRendered: any) => any);
+    formatterParams?: any;
+    getValue?: (cell: any, rowData: any) => any;
+    hideValues?: any;
+    separator?: string | HTMLElement;
+    shouldHide?: (value: any, rowData: any) => boolean;
+    shouldShow?: (value: any, rowData: any) => boolean;
+    showValues?: any;
+    spacing?: string;
+    style?: Record<string, string>;
+    value?: any;
+};
+/**
+ * @typedef {Object} CompositeFormatterParams
+ * @property {('center' | 'end' | 'start' | 'stretch')} [align] - Alignment of elements. Can be `'start'`, `'center'` (default), `'end'`, or `'stretch'`.
+ * @property {Record<string, string>} [containerStyle] - Object with CSS style properties to apply inline to the container.
+ * @property {('column' | 'row')} [direction] - Flex direction for the container. Can be `'column'` or `'row'` (default).
+ * @property {CompositeElement[]} elements - Array of element configurations to render.
+ * @property {string} [gap] - CSS gap property for spacing between elements (e.g., `'8px'`, `'0.5rem'`).
+ */
+export type CompositeFormatterParams = {
+    align?: 'normal' | 'center' | 'start' | 'end' | 'baseline' | 'stretch' | 'flex-start' | 'flex-end';
+    containerStyle?: Record<string, string>;
+    direction?: 'vertical' | 'horizontal';
+    elements: CompositeElement[];
+    gap?: SpacingProp;
+    placeholder?: string;
+    placeholderStyle?: Record<string, string>;
+};
+export type TableDropdownFilterDataOption = {
+    filter?: Filter;
+    id: string;
+    label: string;
+};
+export type TableDropdownFilterData = {
+    field: string;
+    id: string;
+    label: string;
+    defaultOption?: string;
+    options: TableDropdownFilterDataOption[];
+};
 export type SavedSearchItem = {
     recordID: string;
     name: string;

package/library/packages/utils/src/custom-element/i18n.d.ts

@@ -437,6 +437,8 @@ export interface Translation extends DefaultTranslation {
     next: string;
     nextSlide: string;
     noCardsAddedYet: string;
+    noColumnsVisible: string;
+    noData: string;
     noDataAvailable: string;
     noDownloads: string;
     noDownloadsMessage: string;

package/library/packages/utils/src/dom/dom.d.ts

@@ -27,5 +27,6 @@ export declare function getNeededPaddingForBoxShadow(boxShadow: string, appendPx
 export declare function sortByTopPosition<T extends Element>(elements: T[]): T[];
 export declare function getCurrentZIndex(): any;
 export declare function getCortexPopupLayer(): HTMLElement;
-export declare function getElementFromTemplate(template: TemplateResult): HTMLElement;
+export declare function getElementFromTemplate<T extends HTMLElement>(template: TemplateResult): T;
+export declare function getElementFromHTMLString<T extends HTMLElement>(htmlString: string): T | null;
 export declare function isElementInHorizontalView(container: HTMLElement, el: HTMLElement, offset?: number): boolean;

package/library/packages/utils/src/string/string.d.ts

@@ -116,4 +116,5 @@ export declare function padPath(path: string): string;
 export declare function formatTimeToSeconds(timeString: string, options?: TimeFormatOptions): number;
 export declare function extractExtension(filename: string): string | null;
 export declare function sanitizeHTML(html: string): string;
+export declare function emptyToSpace(value: any): string;
 export declare function isGalleryItemCardType(value: unknown): value is GalleryItemCardType;