@knime/kds-table 0.2.2 → 0.3.1

package/dist/src/components/TableUI.vue.d.ts

@@ -1,8 +1,13 @@
 import { PropType, Ref, nextTick } from 'vue';
-import { DataConfig } from '../types/DataConfig';
+import { ActionConfig, ActionState } from '../types/ActionConfig';
+import { ColumnConfig } from '../types/ColumnConfig';
+import { ColFilterValues, ColSortValue } from '../types/ColumnState';
 import { VirtualElementAnchor } from '../types/DataValueView';
-import { FilterConfig } from '../types/FilterConfig';
-import { TableConfig } from '../types/TableConfig';
+import { FilterValue } from '../types/FilterConfig';
+import { PageConfig, PageState } from '../types/PageConfig';
+import { RowConfig } from '../types/RowConfig';
+import { SubMenuConfig } from '../types/SubMenuConfig';
+import { TableConfig, TableState } from '../types/TableConfig';
 import { default as TableCore } from './TableCore.vue';
 import { CellPosition, Rect, RectId } from './composables/useCellSelection';
 import { default as Header } from './layout/Header.vue';
@@ -22,11 +27,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
      */
     data: {
         type: PropType<Array<Array<any>>>;
-        default: () => never[];
-    };
-    currentSelection: {
-        type: PropType<Array<Array<boolean>>>;
-        default: () => never[];
+        required: true;
     };
     /**
      * It specifies how many (empty) rows should be simultated above the given rows in this.data[0]
@@ -50,6 +51,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: ArrayConstructor;
         default: () => never[];
     };
+    currentSelection: {
+        type: PropType<Array<Array<boolean>>>;
+        default: () => never[];
+    };
     /**
      * analogous to currentSelection but for the bottomData
      */
@@ -57,21 +62,66 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<boolean[]>;
         default: () => never[];
     };
-    totalSelected: {
-        type: NumberConstructor;
-        default: number;
+    /** Stable per-column definitions. */
+    columns: {
+        type: PropType<ColumnConfig[]>;
+        required: true;
     };
-    /**
-     * Config props.
-     */
-    dataConfig: {
-        type: PropType<DataConfig>;
+    /** Per-column widths, keyed by column id. */
+    colSizes: {
+        type: PropType<number[]>;
+        default: () => never[];
+    };
+    /** Per-column filter values, keyed by column id. */
+    colFilterValues: {
+        type: PropType<ColFilterValues>;
         default: () => {};
     };
+    /** Active sorts, ordered by sort priority. */
+    colSortValues: {
+        type: PropType<ColSortValue[]>;
+        default: () => never[];
+    };
+    /** Feature switches for the table. */
     tableConfig: {
         type: PropType<TableConfig>;
         default: () => {};
-        validate(tableConfig: any): boolean;
+    };
+    /** Runtime totals and flags for the table. */
+    tableState: {
+        type: PropType<TableState>;
+        default: () => {};
+    };
+    /** Pagination config; its presence enables pagination. */
+    pageConfig: {
+        type: PropType<PageConfig | undefined>;
+        default: undefined;
+    };
+    /** Runtime pagination state. */
+    pageState: {
+        type: PropType<PageState | undefined>;
+        default: undefined;
+    };
+    /** Action-bar config; its presence enables the action bar. */
+    actionConfig: {
+        type: PropType<ActionConfig | undefined>;
+        default: undefined;
+    };
+    /** Runtime state of the action bar. */
+    actionState: {
+        type: PropType<ActionState | undefined>;
+        default: undefined;
+        required: false;
+    };
+    /** Per-row and per-group submenu config. */
+    subMenuConfig: {
+        type: PropType<SubMenuConfig>;
+        default: () => {};
+    };
+    /** Appearance of the table's rows. */
+    rowConfig: {
+        type: PropType<RowConfig>;
+        default: () => {};
     };
     disableRowHeightTransition: {
         type: BooleanConstructor;
@@ -92,8 +142,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 compact: boolean;
             };
             readonly tableConfig: TableConfig;
+            readonly subMenuConfig: SubMenuConfig;
             readonly totalWidth: null | number;
-            readonly columnSizes: number[];
+            readonly colSizes: number[];
             readonly currentRowHeight: number | "dynamic";
             readonly columnResize: {
                 active: boolean;
@@ -121,7 +172,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                         itemSize: number;
                         compact: boolean;
                     };
-                    readonly columnSizes: number[];
+                    readonly colSizes: number[];
                     readonly specialColumnSizes: {
                         selectionSize: number;
                         deletionSize: number;
@@ -243,8 +294,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 compact: boolean;
             };
             tableConfig: TableConfig;
+            subMenuConfig: SubMenuConfig;
             totalWidth: null | number;
-            columnSizes: number[];
+            colSizes: number[];
             currentRowHeight: number | "dynamic";
             columnResize: {
                 active: boolean;
@@ -301,8 +353,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             compact: boolean;
         };
         tableConfig: TableConfig;
+        subMenuConfig: SubMenuConfig;
         totalWidth: null | number;
-        columnSizes: number[];
+        colSizes: number[];
         currentRowHeight: number | "dynamic";
         columnResize: {
             active: boolean;
@@ -349,8 +402,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 compact: boolean;
             };
             readonly tableConfig: TableConfig;
+            readonly subMenuConfig: SubMenuConfig;
             readonly totalWidth: null | number;
-            readonly columnSizes: number[];
+            readonly colSizes: number[];
             readonly currentRowHeight: number | "dynamic";
             readonly columnResize: {
                 active: boolean;
@@ -378,7 +432,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                         itemSize: number;
                         compact: boolean;
                     };
-                    readonly columnSizes: number[];
+                    readonly colSizes: number[];
                     readonly specialColumnSizes: {
                         selectionSize: number;
                         deletionSize: number;
@@ -500,8 +554,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 compact: boolean;
             };
             tableConfig: TableConfig;
+            subMenuConfig: SubMenuConfig;
             totalWidth: null | number;
-            columnSizes: number[];
+            colSizes: number[];
             currentRowHeight: number | "dynamic";
             columnResize: {
                 active: boolean;
@@ -558,8 +613,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             compact: boolean;
         };
         tableConfig: TableConfig;
+        subMenuConfig: SubMenuConfig;
         totalWidth: null | number;
-        columnSizes: number[];
+        colSizes: number[];
         currentRowHeight: number | "dynamic";
         columnResize: {
             active: boolean;
@@ -600,32 +656,24 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: PropType<TableConfig>;
             default: () => {};
         };
-        columnHeaders: {
-            type: PropType<Array<string>>;
-            default: () => never[];
-        };
-        columnSubHeaders: {
-            type: PropType<Array<string | undefined>>;
-            default: () => never[];
-        };
-        columnSizes: {
-            type: PropType<Array<number>>;
-            default: () => never[];
+        actionConfig: {
+            type: PropType<ActionConfig>;
+            default: () => {};
         };
-        columnSubMenuItems: {
-            type: PropType<Array<import('packages/components/dist/src').KdsMenuItem[] | undefined>>;
+        columns: {
+            type: PropType<ColumnConfig[]>;
             default: () => never[];
         };
-        columnHeaderColors: {
-            type: PropType<Array<string | null>>;
-            default: () => never[];
+        colFilterValues: {
+            type: PropType<ColFilterValues>;
+            default: () => {};
         };
-        columnDeletables: {
-            type: PropType<Array<boolean | undefined>>;
+        colSizes: {
+            type: PropType<number[]>;
             default: () => never[];
         };
-        columnEditables: {
-            type: PropType<Array<boolean | undefined>>;
+        colSortValues: {
+            type: PropType<ColSortValue[]>;
             default: () => never[];
         };
         isSelected: {
@@ -633,7 +681,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             default: boolean;
         };
         getDragHandleHeight: {
-            type: FunctionConstructor;
+            type: PropType<() => number>;
             default: () => number;
         };
         showNewColumnButton: {
@@ -646,12 +694,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
     }>> & Readonly<{
         onColumnResize?: ((index: number, newSize: number) => any) | undefined;
+        onColumnSort?: ((index: number, direction: 0 | 1 | -1) => any) | undefined;
+        onOpenActionBarFilterControl?: ((index: number) => any) | undefined;
+        onClearColumnFilter?: ((index: number) => any) | undefined;
+        onColumnResizeStart?: (() => any) | undefined;
+        onColumnResizeEnd?: (() => any) | undefined;
+        onAllColumnsResize?: ((newSize: number) => any) | undefined;
         onHeaderSelect?: ((selected: boolean) => any) | undefined;
         onShowColumnBorder?: (() => any) | undefined;
         onHideColumnBorder?: (() => any) | undefined;
-        onColumnResizeEnd?: (() => any) | undefined;
-        onColumnResizeStart?: (() => any) | undefined;
-        onAllColumnsResize?: ((newSize: number) => any) | undefined;
         onMoveDownFromHeaderCell?: ((index: number) => any) | undefined;
         onHeaderCellSelect?: ((index: number) => any) | undefined;
         "onUpdate:newColumnButtonWidth"?: ((width: number) => any) | undefined;
@@ -662,49 +713,32 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         onHeaderCellStartEditing?: ((index: number, initialValue?: string | undefined) => any) | undefined;
         onDeleteColumn?: ((index: number) => any) | undefined;
     }>, {
-        indexedColumnHeaders: Ref<[string, number][], [string, number][]>;
+        indexedColumns: Ref<[ColumnConfig, number][], [ColumnConfig, number][]>;
         headerStyles: import('vue').MaybeRef<import('vue').CSSProperties>;
         onHeaderCellKeydown: (event: KeyboardEvent, columnIndex: number) => void;
-        scrollContainer: Ref<HTMLElement | null, HTMLElement | null>;
-        dragIndex: Ref<number | null, number | null>;
-        columnSizeOnDragStart: Ref<number, number>;
-        pageXOnDragStart: Ref<number, number>;
-        currentPageX: Ref<number, number>;
-        autoScrollOffset: Ref<number, number>;
-        emitColumnResize: () => void;
-        startAutoScroll: (clientX: number) => void;
-        updateAutoScroll: (clientX: number) => void;
-        stopAutoScroll: () => void;
     }, {
-        hoverIndex: null | number;
         minimumColumnWidth: number;
-        maximumSubMenuWidth: number;
-        currentDragHandlerHeight: number;
-        borderTop: number;
+        resizingColumnIndex: null | number;
         focusedHeaderIndex: null | number;
     }, {
-        enableColumnResizing(): boolean;
-        hasSubHeaders(): boolean;
-        currentResizeDragHandleWidth(): 0 | 5;
         headerSelectionOverlayStyle(): Record<string, string> | null;
     }, {
+        columnSize(columnIndex: number): number;
+        sortDirection(columnIndex: number): -1 | 0 | 1;
         onHeaderCellFocus(columnIndex: number): void;
         onHeaderCellBlur(columnIndex: number): void;
         emitNewColumnButtonWidth(): void;
         onSelect(): void;
         onHeaderClick(ind: number): void;
-        onPointerOver(event: PointerEvent, columnIndex: number): void;
-        onPointerLeave(event: Event): void;
-        onPointerDown(event: PointerEvent & {
-            target: HTMLElement;
-        }, columnIndex: number): void;
-        onPointerUp(event: PointerEvent): void;
-        onPointerMove: import('raf-throttle').Throttled<(event: PointerEvent) => void>;
+        onColumnResizeStart(columnIndex: number): void;
+        onColumnResizeEnd(): void;
+        onColumnResize(columnIndex: number, newSize: number): void;
+        onAllColumnsResize(newSize: number): void;
+        onColumnSort(columnIndex: number, direction: -1 | 0 | 1): void;
+        onOpenActionBarFilterControl(columnIndex: number): void;
+        onClearColumnFilter(columnIndex: number): void;
         onNewColumnButtonClick(event: MouseEvent): void;
         onNewColumnButtonKeydownLeft(event: KeyboardEvent): void;
-        unthrottledOnPointerMove(event: PointerEvent): void;
-        onLostPointerCapture: import('raf-throttle').Throttled<(event: any) => void>;
-        dragHandleHeight(isDragging: boolean): number;
         onDeleteColumn(ind: number): void;
         getHeaderCellWidths(): number[];
         onKeydownTab(): void;
@@ -712,6 +746,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         onKeydownRight(columnIndex: number): void;
         onKeydownDown(columnIndex: number): void;
         focusHeaderCell(cellInd: number): void;
+        isColumnHeaderFocusable(cellInd: number): boolean;
         focusNewColumnButton(): void;
         focusSelectionCheckbox(): void;
     }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -722,6 +757,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         columnResizeEnd: () => true;
         columnResizeStart: () => true;
         allColumnsResize: (newSize: number) => true;
+        columnSort: (index: number, direction: -1 | 0 | 1) => true;
+        openActionBarFilterControl: (index: number) => true;
+        clearColumnFilter: (index: number) => true;
         moveDownFromHeaderCell: (index: number) => true;
         headerCellSelect: (index: number) => true;
         "update:newColumnButtonWidth": (width: number) => true;
@@ -732,15 +770,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         headerCellStartEditing: (index: number, initialValue?: string) => true;
         deleteColumn: (index: number) => true;
     }, import('vue').PublicProps, {
-        columnSizes: number[];
+        columns: ColumnConfig[];
+        colSizes: number[];
         tableConfig: TableConfig;
-        getDragHandleHeight: Function;
-        columnHeaders: string[];
-        columnSubHeaders: (string | undefined)[];
-        columnSubMenuItems: (import('packages/components/dist/src').KdsMenuItem[] | undefined)[];
-        columnHeaderColors: (string | null)[];
-        columnDeletables: (boolean | undefined)[];
-        columnEditables: (boolean | undefined)[];
+        getDragHandleHeight: () => number;
+        colFilterValues: ColFilterValues;
+        colSortValues: ColSortValue[];
+        actionConfig: ActionConfig;
         isSelected: boolean;
         showNewColumnButton: boolean;
         selectedHeaderIndex: number | null;
@@ -835,347 +871,214 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         } & import('packages/components/dist/src/buttons/types').WithDestructive)> & Readonly<{
             onClick?: ((event: MouseEvent) => any) | undefined;
         }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-        KdsMenuButton: import('vue').DefineComponent<({
-            modelValue?: boolean;
-        } & import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-        } & {
-            label: string;
-            leadingIcon?: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: import('packages/components/dist/src').KdsIconName;
-            ariaLabel?: never;
-        } & {
-            items: import('packages/components/dist/src').KdsMenuItem[];
-            menuMaxHeight?: string;
-        }) | ({
-            modelValue?: boolean;
-        } & import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-        } & {
-            label?: never;
-            leadingIcon: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: never;
-            ariaLabel: string;
-        } & {
-            items: import('packages/components/dist/src').KdsMenuItem[];
-            menuMaxHeight?: string;
-        }), {
-            menuButtonEl: Readonly<import('vue').ShallowRef<import('vue').CreateComponentPublicInstanceWithMixins<Readonly<({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label: string;
-                leadingIcon?: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: import('packages/components/dist/src').KdsIconName;
-                ariaLabel?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label?: never;
-                leadingIcon: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: never;
-                ariaLabel: string;
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                "update:modelValue": (value: boolean) => any;
-            }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        HeaderCell: {
+            new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+                column: ColumnConfig;
+                colFilterValue?: FilterValue;
+                tableConfig: TableConfig;
+                actionConfig: ActionConfig;
+                sortDirection: -1 | 0 | 1;
+                columnSize?: number;
+                focused: boolean;
+                selected: boolean;
+                otherColumnResizing: boolean;
+                getDragHandleHeight: () => number;
+            }> & Readonly<{
+                onColumnResize?: ((newSize: number) => any) | undefined;
+                onOnColumnSort?: ((direction: 0 | 1 | -1) => any) | undefined;
+                onOpenActionBarFilterControl?: (() => any) | undefined;
+                onClearColumnFilter?: (() => any) | undefined;
+                onOnHeaderCellFocus?: (() => any) | undefined;
+                onOnHeaderCellBlur?: (() => any) | undefined;
+                onOnHeaderClick?: (() => any) | undefined;
+                onOnKeydownTab?: (() => any) | undefined;
+                onOnKeydownLeft?: (() => any) | undefined;
+                onOnKeydownRight?: (() => any) | undefined;
+                onOnKeydownDown?: (() => any) | undefined;
+                onOnHeaderCellKeydown?: ((event: KeyboardEvent) => any) | undefined;
+                onOnDeleteColumn?: (() => any) | undefined;
+                onColumnResizeStart?: (() => any) | undefined;
+                onColumnResizeEnd?: (() => any) | undefined;
+                onAllColumnsResize?: ((newSize: number) => any) | undefined;
+            }>, {
+                getHeaderCellWidth: () => number;
+                focus: () => void;
+                isFocusable: () => boolean;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                columnResize: (newSize: number) => any;
+                onColumnSort: (direction: 0 | 1 | -1) => any;
+                openActionBarFilterControl: () => any;
+                clearColumnFilter: () => any;
+                onHeaderCellFocus: () => any;
+                onHeaderCellBlur: () => any;
+                onHeaderClick: () => any;
+                onKeydownTab: () => any;
+                onKeydownLeft: () => any;
+                onKeydownRight: () => any;
+                onKeydownDown: () => any;
+                onHeaderCellKeydown: (event: KeyboardEvent) => any;
+                onDeleteColumn: () => any;
+                columnResizeStart: () => any;
+                columnResizeEnd: () => any;
+                allColumnsResize: (newSize: number) => any;
+            }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+                columnHeader: HTMLTableCellElement;
+                content: HTMLDivElement;
+                mainHeader: HTMLDivElement;
+                headerText: HTMLSpanElement;
+                columnDeleteButton: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<(import('packages/components/dist/src/types/testId').WithTestId & {
+                    size?: import('packages/components/dist/src').KdsButtonSize;
+                    disabled?: boolean;
+                    title?: string;
+                    variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+                } & {
+                    label: string;
+                    leadingIcon?: import('packages/components/dist/src').KdsIconName;
+                    trailingIcon?: import('packages/components/dist/src').KdsIconName;
+                    ariaLabel?: never;
+                } & import('packages/components/dist/src/buttons/types').WithDestructive) | (import('packages/components/dist/src/types/testId').WithTestId & {
+                    size?: import('packages/components/dist/src').KdsButtonSize;
+                    disabled?: boolean;
+                    title?: string;
+                    variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+                } & {
+                    label?: never;
+                    leadingIcon: import('packages/components/dist/src').KdsIconName;
+                    trailingIcon?: never;
+                    ariaLabel: string;
+                } & import('packages/components/dist/src/buttons/types').WithDestructive)> & Readonly<{
+                    onClick?: ((event: MouseEvent) => any) | undefined;
+                }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                    click: (event: MouseEvent) => any;
+                }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, {} & (Readonly<(import('packages/components/dist/src/types/testId').WithTestId & {
+                    size?: import('packages/components/dist/src').KdsButtonSize;
+                    disabled?: boolean;
+                    title?: string;
+                    variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+                } & {
+                    label: string;
+                    leadingIcon?: import('packages/components/dist/src').KdsIconName;
+                    trailingIcon?: import('packages/components/dist/src').KdsIconName;
+                    ariaLabel?: never;
+                } & import('packages/components/dist/src/buttons/types').WithDestructive) | (import('packages/components/dist/src/types/testId').WithTestId & {
+                    size?: import('packages/components/dist/src').KdsButtonSize;
+                    disabled?: boolean;
+                    title?: string;
+                    variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+                } & {
+                    label?: never;
+                    leadingIcon: import('packages/components/dist/src').KdsIconName;
+                    trailingIcon?: never;
+                    ariaLabel: string;
+                } & import('packages/components/dist/src/buttons/types').WithDestructive)> & Readonly<{
+                    onClick?: ((event: MouseEvent) => any) | undefined;
+                }>), {}, {}, {}, {}, {}> | null;
+            }, HTMLTableCellElement, import('vue').ComponentProvideOptions, {
                 P: {};
                 B: {};
                 D: {};
                 C: {};
                 M: {};
                 Defaults: {};
-            }, {} & (Readonly<({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label: string;
-                leadingIcon?: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: import('packages/components/dist/src').KdsIconName;
-                ariaLabel?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label?: never;
-                leadingIcon: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: never;
-                ariaLabel: string;
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>), {}, {}, {}, {}, {}> | null>>;
+            }, Readonly<{
+                column: ColumnConfig;
+                colFilterValue?: FilterValue;
+                tableConfig: TableConfig;
+                actionConfig: ActionConfig;
+                sortDirection: -1 | 0 | 1;
+                columnSize?: number;
+                focused: boolean;
+                selected: boolean;
+                otherColumnResizing: boolean;
+                getDragHandleHeight: () => number;
+            }> & Readonly<{
+                onColumnResize?: ((newSize: number) => any) | undefined;
+                onOnColumnSort?: ((direction: 0 | 1 | -1) => any) | undefined;
+                onOpenActionBarFilterControl?: (() => any) | undefined;
+                onClearColumnFilter?: (() => any) | undefined;
+                onOnHeaderCellFocus?: (() => any) | undefined;
+                onOnHeaderCellBlur?: (() => any) | undefined;
+                onOnHeaderClick?: (() => any) | undefined;
+                onOnKeydownTab?: (() => any) | undefined;
+                onOnKeydownLeft?: (() => any) | undefined;
+                onOnKeydownRight?: (() => any) | undefined;
+                onOnKeydownDown?: (() => any) | undefined;
+                onOnHeaderCellKeydown?: ((event: KeyboardEvent) => any) | undefined;
+                onOnDeleteColumn?: (() => any) | undefined;
+                onColumnResizeStart?: (() => any) | undefined;
+                onColumnResizeEnd?: (() => any) | undefined;
+                onAllColumnsResize?: ((newSize: number) => any) | undefined;
+            }>, {
+                getHeaderCellWidth: () => number;
+                focus: () => void;
+                isFocusable: () => boolean;
+            }, {}, {}, {}, {}>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & import('vue').ComponentOptionsBase<Readonly<{
+            column: ColumnConfig;
+            colFilterValue?: FilterValue;
+            tableConfig: TableConfig;
+            actionConfig: ActionConfig;
+            sortDirection: -1 | 0 | 1;
+            columnSize?: number;
+            focused: boolean;
+            selected: boolean;
+            otherColumnResizing: boolean;
+            getDragHandleHeight: () => number;
+        }> & Readonly<{
+            onColumnResize?: ((newSize: number) => any) | undefined;
+            onOnColumnSort?: ((direction: 0 | 1 | -1) => any) | undefined;
+            onOpenActionBarFilterControl?: (() => any) | undefined;
+            onClearColumnFilter?: (() => any) | undefined;
+            onOnHeaderCellFocus?: (() => any) | undefined;
+            onOnHeaderCellBlur?: (() => any) | undefined;
+            onOnHeaderClick?: (() => any) | undefined;
+            onOnKeydownTab?: (() => any) | undefined;
+            onOnKeydownLeft?: (() => any) | undefined;
+            onOnKeydownRight?: (() => any) | undefined;
+            onOnKeydownDown?: (() => any) | undefined;
+            onOnHeaderCellKeydown?: ((event: KeyboardEvent) => any) | undefined;
+            onOnDeleteColumn?: (() => any) | undefined;
+            onColumnResizeStart?: (() => any) | undefined;
+            onColumnResizeEnd?: (() => any) | undefined;
+            onAllColumnsResize?: ((newSize: number) => any) | undefined;
+        }>, {
+            getHeaderCellWidth: () => number;
+            focus: () => void;
+            isFocusable: () => boolean;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            "update:modelValue": (value: boolean) => any;
-            itemClick: (id: string) => any;
-        }, string, import('vue').PublicProps, Readonly<({
-            modelValue?: boolean;
-        } & import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-        } & {
-            label: string;
-            leadingIcon?: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: import('packages/components/dist/src').KdsIconName;
-            ariaLabel?: never;
-        } & {
-            items: import('packages/components/dist/src').KdsMenuItem[];
-            menuMaxHeight?: string;
-        }) | ({
-            modelValue?: boolean;
-        } & import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-        } & {
-            label?: never;
-            leadingIcon: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: never;
-            ariaLabel: string;
-        } & {
-            items: import('packages/components/dist/src').KdsMenuItem[];
-            menuMaxHeight?: string;
-        })> & Readonly<{
-            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            onItemClick?: ((id: string) => any) | undefined;
-        }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-            menuButton: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label: string;
-                leadingIcon?: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: import('packages/components/dist/src').KdsIconName;
-                ariaLabel?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label?: never;
-                leadingIcon: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: never;
-                ariaLabel: string;
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                "update:modelValue": (value: boolean) => any;
-            }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, {} & (Readonly<({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label: string;
-                leadingIcon?: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: import('packages/components/dist/src').KdsIconName;
-                ariaLabel?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label?: never;
-                leadingIcon: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: never;
-                ariaLabel: string;
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>), {}, {}, {}, {}, {}> | null;
-            popover: ({
-                $: import('vue').ComponentInternalInstance;
-                $data: {};
-                $props: ({
-                    readonly modelValue?: boolean | undefined;
-                    readonly role?: import('packages/components/dist/src').KdsPopoverRole | undefined;
-                    readonly popoverType?: import('packages/components/dist/src').KdsPopoverType | undefined;
-                    readonly fullWidth?: boolean | undefined;
-                    readonly maxInlineSize?: string | undefined;
-                    readonly content?: string | undefined;
-                    readonly placement?: Exclude<import('packages/components/dist/src').KdsPopoverPlacement, "custom"> | undefined;
-                    readonly customPlacementPosition?: never | undefined;
-                    readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-                } | {
-                    readonly modelValue?: boolean | undefined;
-                    readonly role?: import('packages/components/dist/src').KdsPopoverRole | undefined;
-                    readonly popoverType?: import('packages/components/dist/src').KdsPopoverType | undefined;
-                    readonly fullWidth?: boolean | undefined;
-                    readonly maxInlineSize?: string | undefined;
-                    readonly content?: string | undefined;
-                    readonly placement: "custom";
-                    readonly customPlacementPosition: {
-                        x: number;
-                        y: number;
-                    };
-                    readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-                }) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-                $attrs: import('vue').Attrs;
-                $refs: {
-                    [x: string]: unknown;
-                } & {
-                    popoverEl: HTMLDivElement;
-                };
-                $slots: Readonly<{
-                    [name: string]: import('vue').Slot<any> | undefined;
-                }>;
-                $root: import('vue').ComponentPublicInstance | null;
-                $parent: import('vue').ComponentPublicInstance | null;
-                $host: Element | null;
-                $emit: (event: "update:modelValue", value: boolean) => void;
-                $el: HTMLDivElement;
-                $options: import('vue').ComponentOptionsBase<Readonly<({
-                    modelValue?: boolean;
-                } & {
-                    role?: import('packages/components/dist/src').KdsPopoverRole;
-                    popoverType?: import('packages/components/dist/src').KdsPopoverType;
-                    fullWidth?: boolean;
-                    maxInlineSize?: string;
-                    content?: string;
-                } & {
-                    placement?: Exclude<import('packages/components/dist/src').KdsPopoverPlacement, "custom">;
-                    customPlacementPosition?: never;
-                }) | ({
-                    modelValue?: boolean;
-                } & {
-                    role?: import('packages/components/dist/src').KdsPopoverRole;
-                    popoverType?: import('packages/components/dist/src').KdsPopoverType;
-                    fullWidth?: boolean;
-                    maxInlineSize?: string;
-                    content?: string;
-                } & {
-                    placement: "custom";
-                    customPlacementPosition: {
-                        x: number;
-                        y: number;
-                    };
-                })> & Readonly<{
-                    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-                }>, {
-                    anchorStyle: Record<string, string>;
-                    popoverId: string;
-                }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                    "update:modelValue": (value: boolean) => any;
-                }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
-                    beforeCreate?: (() => void) | (() => void)[];
-                    created?: (() => void) | (() => void)[];
-                    beforeMount?: (() => void) | (() => void)[];
-                    mounted?: (() => void) | (() => void)[];
-                    beforeUpdate?: (() => void) | (() => void)[];
-                    updated?: (() => void) | (() => void)[];
-                    activated?: (() => void) | (() => void)[];
-                    deactivated?: (() => void) | (() => void)[];
-                    beforeDestroy?: (() => void) | (() => void)[];
-                    beforeUnmount?: (() => void) | (() => void)[];
-                    destroyed?: (() => void) | (() => void)[];
-                    unmounted?: (() => void) | (() => void)[];
-                    renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-                    renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-                    errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
-                };
-                $forceUpdate: () => void;
-                $nextTick: typeof nextTick;
-                $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
-            } & Readonly<{}> & Omit<{} & (Readonly<({
-                modelValue?: boolean;
-            } & {
-                role?: import('packages/components/dist/src').KdsPopoverRole;
-                popoverType?: import('packages/components/dist/src').KdsPopoverType;
-                fullWidth?: boolean;
-                maxInlineSize?: string;
-                content?: string;
-            } & {
-                placement?: Exclude<import('packages/components/dist/src').KdsPopoverPlacement, "custom">;
-                customPlacementPosition?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & {
-                role?: import('packages/components/dist/src').KdsPopoverRole;
-                popoverType?: import('packages/components/dist/src').KdsPopoverType;
-                fullWidth?: boolean;
-                maxInlineSize?: string;
-                content?: string;
-            } & {
-                placement: "custom";
-                customPlacementPosition: {
-                    x: number;
-                    y: number;
-                };
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>), "anchorStyle" | "popoverId"> & {
-                anchorStyle: Record<string, string>;
-                popoverId: string;
-            } & {} & import('vue').ComponentCustomProperties & {} & {
-                $slots: {
-                    default?(_: {}): any;
-                };
-            }) | null;
-            menuContainer: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/components/dist/src/containers/MenuContainer').KdsMenuContainerProps> & Readonly<{
-                onItemClick?: ((id: string) => any) | undefined;
-            }>, {
-                focus: () => void;
-            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                itemClick: (id: string) => any;
-            }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
-                containerEl: HTMLDivElement;
-            }, HTMLDivElement, import('vue').ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, Readonly<import('packages/components/dist/src/containers/MenuContainer').KdsMenuContainerProps> & Readonly<{
-                onItemClick?: ((id: string) => any) | undefined;
-            }>, {
-                focus: () => void;
-            }, {}, {}, {}, {}> | null;
-        }, any>;
+            columnResize: (newSize: number) => any;
+            onColumnSort: (direction: 0 | 1 | -1) => any;
+            openActionBarFilterControl: () => any;
+            clearColumnFilter: () => any;
+            onHeaderCellFocus: () => any;
+            onHeaderCellBlur: () => any;
+            onHeaderClick: () => any;
+            onKeydownTab: () => any;
+            onKeydownLeft: () => any;
+            onKeydownRight: () => any;
+            onKeydownDown: () => any;
+            onHeaderCellKeydown: (event: KeyboardEvent) => any;
+            onDeleteColumn: () => any;
+            columnResizeStart: () => any;
+            columnResizeEnd: () => any;
+            allColumnsResize: (newSize: number) => any;
+        }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+            $slots: {
+                subHeader?(_: {
+                    subHeader: string;
+                }): any;
+            };
+        });
     } & import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
@@ -1188,32 +1091,24 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: PropType<TableConfig>;
             default: () => {};
         };
-        columnHeaders: {
-            type: PropType<Array<string>>;
-            default: () => never[];
-        };
-        columnSubHeaders: {
-            type: PropType<Array<string | undefined>>;
-            default: () => never[];
-        };
-        columnSizes: {
-            type: PropType<Array<number>>;
-            default: () => never[];
+        actionConfig: {
+            type: PropType<ActionConfig>;
+            default: () => {};
         };
-        columnSubMenuItems: {
-            type: PropType<Array<import('packages/components/dist/src').KdsMenuItem[] | undefined>>;
+        columns: {
+            type: PropType<ColumnConfig[]>;
             default: () => never[];
         };
-        columnHeaderColors: {
-            type: PropType<Array<string | null>>;
-            default: () => never[];
+        colFilterValues: {
+            type: PropType<ColFilterValues>;
+            default: () => {};
         };
-        columnDeletables: {
-            type: PropType<Array<boolean | undefined>>;
+        colSizes: {
+            type: PropType<number[]>;
             default: () => never[];
         };
-        columnEditables: {
-            type: PropType<Array<boolean | undefined>>;
+        colSortValues: {
+            type: PropType<ColSortValue[]>;
             default: () => never[];
         };
         isSelected: {
@@ -1221,7 +1116,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             default: boolean;
         };
         getDragHandleHeight: {
-            type: FunctionConstructor;
+            type: PropType<() => number>;
             default: () => number;
         };
         showNewColumnButton: {
@@ -1234,12 +1129,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
     }>> & Readonly<{
         onColumnResize?: ((index: number, newSize: number) => any) | undefined;
+        onColumnSort?: ((index: number, direction: 0 | 1 | -1) => any) | undefined;
+        onOpenActionBarFilterControl?: ((index: number) => any) | undefined;
+        onClearColumnFilter?: ((index: number) => any) | undefined;
+        onColumnResizeStart?: (() => any) | undefined;
+        onColumnResizeEnd?: (() => any) | undefined;
+        onAllColumnsResize?: ((newSize: number) => any) | undefined;
         onHeaderSelect?: ((selected: boolean) => any) | undefined;
         onShowColumnBorder?: (() => any) | undefined;
         onHideColumnBorder?: (() => any) | undefined;
-        onColumnResizeEnd?: (() => any) | undefined;
-        onColumnResizeStart?: (() => any) | undefined;
-        onAllColumnsResize?: ((newSize: number) => any) | undefined;
         onMoveDownFromHeaderCell?: ((index: number) => any) | undefined;
         onHeaderCellSelect?: ((index: number) => any) | undefined;
         "onUpdate:newColumnButtonWidth"?: ((width: number) => any) | undefined;
@@ -1250,49 +1148,32 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         onHeaderCellStartEditing?: ((index: number, initialValue?: string | undefined) => any) | undefined;
         onDeleteColumn?: ((index: number) => any) | undefined;
     }>, {
-        indexedColumnHeaders: Ref<[string, number][], [string, number][]>;
+        indexedColumns: Ref<[ColumnConfig, number][], [ColumnConfig, number][]>;
         headerStyles: import('vue').MaybeRef<import('vue').CSSProperties>;
         onHeaderCellKeydown: (event: KeyboardEvent, columnIndex: number) => void;
-        scrollContainer: Ref<HTMLElement | null, HTMLElement | null>;
-        dragIndex: Ref<number | null, number | null>;
-        columnSizeOnDragStart: Ref<number, number>;
-        pageXOnDragStart: Ref<number, number>;
-        currentPageX: Ref<number, number>;
-        autoScrollOffset: Ref<number, number>;
-        emitColumnResize: () => void;
-        startAutoScroll: (clientX: number) => void;
-        updateAutoScroll: (clientX: number) => void;
-        stopAutoScroll: () => void;
     }, {
-        hoverIndex: null | number;
         minimumColumnWidth: number;
-        maximumSubMenuWidth: number;
-        currentDragHandlerHeight: number;
-        borderTop: number;
+        resizingColumnIndex: null | number;
         focusedHeaderIndex: null | number;
     }, {
-        enableColumnResizing(): boolean;
-        hasSubHeaders(): boolean;
-        currentResizeDragHandleWidth(): 0 | 5;
         headerSelectionOverlayStyle(): Record<string, string> | null;
     }, {
+        columnSize(columnIndex: number): number;
+        sortDirection(columnIndex: number): -1 | 0 | 1;
         onHeaderCellFocus(columnIndex: number): void;
         onHeaderCellBlur(columnIndex: number): void;
         emitNewColumnButtonWidth(): void;
         onSelect(): void;
         onHeaderClick(ind: number): void;
-        onPointerOver(event: PointerEvent, columnIndex: number): void;
-        onPointerLeave(event: Event): void;
-        onPointerDown(event: PointerEvent & {
-            target: HTMLElement;
-        }, columnIndex: number): void;
-        onPointerUp(event: PointerEvent): void;
-        onPointerMove: import('raf-throttle').Throttled<(event: PointerEvent) => void>;
+        onColumnResizeStart(columnIndex: number): void;
+        onColumnResizeEnd(): void;
+        onColumnResize(columnIndex: number, newSize: number): void;
+        onAllColumnsResize(newSize: number): void;
+        onColumnSort(columnIndex: number, direction: -1 | 0 | 1): void;
+        onOpenActionBarFilterControl(columnIndex: number): void;
+        onClearColumnFilter(columnIndex: number): void;
         onNewColumnButtonClick(event: MouseEvent): void;
         onNewColumnButtonKeydownLeft(event: KeyboardEvent): void;
-        unthrottledOnPointerMove(event: PointerEvent): void;
-        onLostPointerCapture: import('raf-throttle').Throttled<(event: any) => void>;
-        dragHandleHeight(isDragging: boolean): number;
         onDeleteColumn(ind: number): void;
         getHeaderCellWidths(): number[];
         onKeydownTab(): void;
@@ -1300,18 +1181,17 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         onKeydownRight(columnIndex: number): void;
         onKeydownDown(columnIndex: number): void;
         focusHeaderCell(cellInd: number): void;
+        isColumnHeaderFocusable(cellInd: number): boolean;
         focusNewColumnButton(): void;
         focusSelectionCheckbox(): void;
     }, {
-        columnSizes: number[];
+        columns: ColumnConfig[];
+        colSizes: number[];
         tableConfig: TableConfig;
-        getDragHandleHeight: Function;
-        columnHeaders: string[];
-        columnSubHeaders: (string | undefined)[];
-        columnSubMenuItems: (import('packages/components/dist/src').KdsMenuItem[] | undefined)[];
-        columnHeaderColors: (string | null)[];
-        columnDeletables: (boolean | undefined)[];
-        columnEditables: (boolean | undefined)[];
+        getDragHandleHeight: () => number;
+        colFilterValues: ColFilterValues;
+        colSortValues: ColSortValue[];
+        actionConfig: ActionConfig;
         isSelected: boolean;
         showNewColumnButton: boolean;
         selectedHeaderIndex: number | null;
@@ -1320,32 +1200,24 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: PropType<TableConfig>;
             default: () => {};
         };
-        columnHeaders: {
-            type: PropType<Array<string>>;
-            default: () => never[];
-        };
-        columnSubHeaders: {
-            type: PropType<Array<string | undefined>>;
-            default: () => never[];
-        };
-        columnSizes: {
-            type: PropType<Array<number>>;
-            default: () => never[];
+        actionConfig: {
+            type: PropType<ActionConfig>;
+            default: () => {};
         };
-        columnSubMenuItems: {
-            type: PropType<Array<import('packages/components/dist/src').KdsMenuItem[] | undefined>>;
+        columns: {
+            type: PropType<ColumnConfig[]>;
             default: () => never[];
         };
-        columnHeaderColors: {
-            type: PropType<Array<string | null>>;
-            default: () => never[];
+        colFilterValues: {
+            type: PropType<ColFilterValues>;
+            default: () => {};
         };
-        columnDeletables: {
-            type: PropType<Array<boolean | undefined>>;
+        colSizes: {
+            type: PropType<number[]>;
             default: () => never[];
         };
-        columnEditables: {
-            type: PropType<Array<boolean | undefined>>;
+        colSortValues: {
+            type: PropType<ColSortValue[]>;
             default: () => never[];
         };
         isSelected: {
@@ -1353,7 +1225,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             default: boolean;
         };
         getDragHandleHeight: {
-            type: FunctionConstructor;
+            type: PropType<() => number>;
             default: () => number;
         };
         showNewColumnButton: {
@@ -1366,12 +1238,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
     }>> & Readonly<{
         onColumnResize?: ((index: number, newSize: number) => any) | undefined;
+        onColumnSort?: ((index: number, direction: 0 | 1 | -1) => any) | undefined;
+        onOpenActionBarFilterControl?: ((index: number) => any) | undefined;
+        onClearColumnFilter?: ((index: number) => any) | undefined;
+        onColumnResizeStart?: (() => any) | undefined;
+        onColumnResizeEnd?: (() => any) | undefined;
+        onAllColumnsResize?: ((newSize: number) => any) | undefined;
         onHeaderSelect?: ((selected: boolean) => any) | undefined;
         onShowColumnBorder?: (() => any) | undefined;
         onHideColumnBorder?: (() => any) | undefined;
-        onColumnResizeEnd?: (() => any) | undefined;
-        onColumnResizeStart?: (() => any) | undefined;
-        onAllColumnsResize?: ((newSize: number) => any) | undefined;
         onMoveDownFromHeaderCell?: ((index: number) => any) | undefined;
         onHeaderCellSelect?: ((index: number) => any) | undefined;
         "onUpdate:newColumnButtonWidth"?: ((width: number) => any) | undefined;
@@ -1382,49 +1257,32 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         onHeaderCellStartEditing?: ((index: number, initialValue?: string | undefined) => any) | undefined;
         onDeleteColumn?: ((index: number) => any) | undefined;
     }>, {
-        indexedColumnHeaders: Ref<[string, number][], [string, number][]>;
+        indexedColumns: Ref<[ColumnConfig, number][], [ColumnConfig, number][]>;
         headerStyles: import('vue').MaybeRef<import('vue').CSSProperties>;
         onHeaderCellKeydown: (event: KeyboardEvent, columnIndex: number) => void;
-        scrollContainer: Ref<HTMLElement | null, HTMLElement | null>;
-        dragIndex: Ref<number | null, number | null>;
-        columnSizeOnDragStart: Ref<number, number>;
-        pageXOnDragStart: Ref<number, number>;
-        currentPageX: Ref<number, number>;
-        autoScrollOffset: Ref<number, number>;
-        emitColumnResize: () => void;
-        startAutoScroll: (clientX: number) => void;
-        updateAutoScroll: (clientX: number) => void;
-        stopAutoScroll: () => void;
     }, {
-        hoverIndex: null | number;
         minimumColumnWidth: number;
-        maximumSubMenuWidth: number;
-        currentDragHandlerHeight: number;
-        borderTop: number;
+        resizingColumnIndex: null | number;
         focusedHeaderIndex: null | number;
     }, {
-        enableColumnResizing(): boolean;
-        hasSubHeaders(): boolean;
-        currentResizeDragHandleWidth(): 0 | 5;
         headerSelectionOverlayStyle(): Record<string, string> | null;
     }, {
+        columnSize(columnIndex: number): number;
+        sortDirection(columnIndex: number): -1 | 0 | 1;
         onHeaderCellFocus(columnIndex: number): void;
         onHeaderCellBlur(columnIndex: number): void;
         emitNewColumnButtonWidth(): void;
         onSelect(): void;
         onHeaderClick(ind: number): void;
-        onPointerOver(event: PointerEvent, columnIndex: number): void;
-        onPointerLeave(event: Event): void;
-        onPointerDown(event: PointerEvent & {
-            target: HTMLElement;
-        }, columnIndex: number): void;
-        onPointerUp(event: PointerEvent): void;
-        onPointerMove: import('raf-throttle').Throttled<(event: PointerEvent) => void>;
+        onColumnResizeStart(columnIndex: number): void;
+        onColumnResizeEnd(): void;
+        onColumnResize(columnIndex: number, newSize: number): void;
+        onAllColumnsResize(newSize: number): void;
+        onColumnSort(columnIndex: number, direction: -1 | 0 | 1): void;
+        onOpenActionBarFilterControl(columnIndex: number): void;
+        onClearColumnFilter(columnIndex: number): void;
         onNewColumnButtonClick(event: MouseEvent): void;
         onNewColumnButtonKeydownLeft(event: KeyboardEvent): void;
-        unthrottledOnPointerMove(event: PointerEvent): void;
-        onLostPointerCapture: import('raf-throttle').Throttled<(event: any) => void>;
-        dragHandleHeight(isDragging: boolean): number;
         onDeleteColumn(ind: number): void;
         getHeaderCellWidths(): number[];
         onKeydownTab(): void;
@@ -1432,6 +1290,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         onKeydownRight(columnIndex: number): void;
         onKeydownDown(columnIndex: number): void;
         focusHeaderCell(cellInd: number): void;
+        isColumnHeaderFocusable(cellInd: number): boolean;
         focusNewColumnButton(): void;
         focusSelectionCheckbox(): void;
     }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -1442,6 +1301,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         columnResizeEnd: () => true;
         columnResizeStart: () => true;
         allColumnsResize: (newSize: number) => true;
+        columnSort: (index: number, direction: -1 | 0 | 1) => true;
+        openActionBarFilterControl: (index: number) => true;
+        clearColumnFilter: (index: number) => true;
         moveDownFromHeaderCell: (index: number) => true;
         headerCellSelect: (index: number) => true;
         "update:newColumnButtonWidth": (width: number) => true;
@@ -1452,15 +1314,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         headerCellStartEditing: (index: number, initialValue?: string) => true;
         deleteColumn: (index: number) => true;
     }, import('vue').PublicProps, {
-        columnSizes: number[];
+        columns: ColumnConfig[];
+        colSizes: number[];
         tableConfig: TableConfig;
-        getDragHandleHeight: Function;
-        columnHeaders: string[];
-        columnSubHeaders: (string | undefined)[];
-        columnSubMenuItems: (import('packages/components/dist/src').KdsMenuItem[] | undefined)[];
-        columnHeaderColors: (string | null)[];
-        columnDeletables: (boolean | undefined)[];
-        columnEditables: (boolean | undefined)[];
+        getDragHandleHeight: () => number;
+        colFilterValues: ColFilterValues;
+        colSortValues: ColSortValue[];
+        actionConfig: ActionConfig;
         isSelected: boolean;
         showNewColumnButton: boolean;
         selectedHeaderIndex: number | null;
@@ -1555,347 +1415,214 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         } & import('packages/components/dist/src/buttons/types').WithDestructive)> & Readonly<{
             onClick?: ((event: MouseEvent) => any) | undefined;
         }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-        KdsMenuButton: import('vue').DefineComponent<({
-            modelValue?: boolean;
-        } & import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-        } & {
-            label: string;
-            leadingIcon?: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: import('packages/components/dist/src').KdsIconName;
-            ariaLabel?: never;
-        } & {
-            items: import('packages/components/dist/src').KdsMenuItem[];
-            menuMaxHeight?: string;
-        }) | ({
-            modelValue?: boolean;
-        } & import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-        } & {
-            label?: never;
-            leadingIcon: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: never;
-            ariaLabel: string;
-        } & {
-            items: import('packages/components/dist/src').KdsMenuItem[];
-            menuMaxHeight?: string;
-        }), {
-            menuButtonEl: Readonly<import('vue').ShallowRef<import('vue').CreateComponentPublicInstanceWithMixins<Readonly<({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label: string;
-                leadingIcon?: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: import('packages/components/dist/src').KdsIconName;
-                ariaLabel?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label?: never;
-                leadingIcon: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: never;
-                ariaLabel: string;
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                "update:modelValue": (value: boolean) => any;
-            }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        HeaderCell: {
+            new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+                column: ColumnConfig;
+                colFilterValue?: FilterValue;
+                tableConfig: TableConfig;
+                actionConfig: ActionConfig;
+                sortDirection: -1 | 0 | 1;
+                columnSize?: number;
+                focused: boolean;
+                selected: boolean;
+                otherColumnResizing: boolean;
+                getDragHandleHeight: () => number;
+            }> & Readonly<{
+                onColumnResize?: ((newSize: number) => any) | undefined;
+                onOnColumnSort?: ((direction: 0 | 1 | -1) => any) | undefined;
+                onOpenActionBarFilterControl?: (() => any) | undefined;
+                onClearColumnFilter?: (() => any) | undefined;
+                onOnHeaderCellFocus?: (() => any) | undefined;
+                onOnHeaderCellBlur?: (() => any) | undefined;
+                onOnHeaderClick?: (() => any) | undefined;
+                onOnKeydownTab?: (() => any) | undefined;
+                onOnKeydownLeft?: (() => any) | undefined;
+                onOnKeydownRight?: (() => any) | undefined;
+                onOnKeydownDown?: (() => any) | undefined;
+                onOnHeaderCellKeydown?: ((event: KeyboardEvent) => any) | undefined;
+                onOnDeleteColumn?: (() => any) | undefined;
+                onColumnResizeStart?: (() => any) | undefined;
+                onColumnResizeEnd?: (() => any) | undefined;
+                onAllColumnsResize?: ((newSize: number) => any) | undefined;
+            }>, {
+                getHeaderCellWidth: () => number;
+                focus: () => void;
+                isFocusable: () => boolean;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                columnResize: (newSize: number) => any;
+                onColumnSort: (direction: 0 | 1 | -1) => any;
+                openActionBarFilterControl: () => any;
+                clearColumnFilter: () => any;
+                onHeaderCellFocus: () => any;
+                onHeaderCellBlur: () => any;
+                onHeaderClick: () => any;
+                onKeydownTab: () => any;
+                onKeydownLeft: () => any;
+                onKeydownRight: () => any;
+                onKeydownDown: () => any;
+                onHeaderCellKeydown: (event: KeyboardEvent) => any;
+                onDeleteColumn: () => any;
+                columnResizeStart: () => any;
+                columnResizeEnd: () => any;
+                allColumnsResize: (newSize: number) => any;
+            }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+                columnHeader: HTMLTableCellElement;
+                content: HTMLDivElement;
+                mainHeader: HTMLDivElement;
+                headerText: HTMLSpanElement;
+                columnDeleteButton: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<(import('packages/components/dist/src/types/testId').WithTestId & {
+                    size?: import('packages/components/dist/src').KdsButtonSize;
+                    disabled?: boolean;
+                    title?: string;
+                    variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+                } & {
+                    label: string;
+                    leadingIcon?: import('packages/components/dist/src').KdsIconName;
+                    trailingIcon?: import('packages/components/dist/src').KdsIconName;
+                    ariaLabel?: never;
+                } & import('packages/components/dist/src/buttons/types').WithDestructive) | (import('packages/components/dist/src/types/testId').WithTestId & {
+                    size?: import('packages/components/dist/src').KdsButtonSize;
+                    disabled?: boolean;
+                    title?: string;
+                    variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+                } & {
+                    label?: never;
+                    leadingIcon: import('packages/components/dist/src').KdsIconName;
+                    trailingIcon?: never;
+                    ariaLabel: string;
+                } & import('packages/components/dist/src/buttons/types').WithDestructive)> & Readonly<{
+                    onClick?: ((event: MouseEvent) => any) | undefined;
+                }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                    click: (event: MouseEvent) => any;
+                }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, {} & (Readonly<(import('packages/components/dist/src/types/testId').WithTestId & {
+                    size?: import('packages/components/dist/src').KdsButtonSize;
+                    disabled?: boolean;
+                    title?: string;
+                    variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+                } & {
+                    label: string;
+                    leadingIcon?: import('packages/components/dist/src').KdsIconName;
+                    trailingIcon?: import('packages/components/dist/src').KdsIconName;
+                    ariaLabel?: never;
+                } & import('packages/components/dist/src/buttons/types').WithDestructive) | (import('packages/components/dist/src/types/testId').WithTestId & {
+                    size?: import('packages/components/dist/src').KdsButtonSize;
+                    disabled?: boolean;
+                    title?: string;
+                    variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+                } & {
+                    label?: never;
+                    leadingIcon: import('packages/components/dist/src').KdsIconName;
+                    trailingIcon?: never;
+                    ariaLabel: string;
+                } & import('packages/components/dist/src/buttons/types').WithDestructive)> & Readonly<{
+                    onClick?: ((event: MouseEvent) => any) | undefined;
+                }>), {}, {}, {}, {}, {}> | null;
+            }, HTMLTableCellElement, import('vue').ComponentProvideOptions, {
                 P: {};
                 B: {};
                 D: {};
                 C: {};
                 M: {};
                 Defaults: {};
-            }, {} & (Readonly<({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label: string;
-                leadingIcon?: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: import('packages/components/dist/src').KdsIconName;
-                ariaLabel?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label?: never;
-                leadingIcon: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: never;
-                ariaLabel: string;
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>), {}, {}, {}, {}, {}> | null>>;
-        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            "update:modelValue": (value: boolean) => any;
-            itemClick: (id: string) => any;
-        }, string, import('vue').PublicProps, Readonly<({
-            modelValue?: boolean;
-        } & import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-        } & {
-            label: string;
-            leadingIcon?: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: import('packages/components/dist/src').KdsIconName;
-            ariaLabel?: never;
-        } & {
-            items: import('packages/components/dist/src').KdsMenuItem[];
-            menuMaxHeight?: string;
-        }) | ({
-            modelValue?: boolean;
-        } & import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-        } & {
-            label?: never;
-            leadingIcon: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: never;
-            ariaLabel: string;
-        } & {
-            items: import('packages/components/dist/src').KdsMenuItem[];
-            menuMaxHeight?: string;
-        })> & Readonly<{
-            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            onItemClick?: ((id: string) => any) | undefined;
-        }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-            menuButton: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label: string;
-                leadingIcon?: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: import('packages/components/dist/src').KdsIconName;
-                ariaLabel?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label?: never;
-                leadingIcon: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: never;
-                ariaLabel: string;
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                "update:modelValue": (value: boolean) => any;
-            }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, {} & (Readonly<({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label: string;
-                leadingIcon?: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: import('packages/components/dist/src').KdsIconName;
-                ariaLabel?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label?: never;
-                leadingIcon: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: never;
-                ariaLabel: string;
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>), {}, {}, {}, {}, {}> | null;
-            popover: ({
-                $: import('vue').ComponentInternalInstance;
-                $data: {};
-                $props: ({
-                    readonly modelValue?: boolean | undefined;
-                    readonly role?: import('packages/components/dist/src').KdsPopoverRole | undefined;
-                    readonly popoverType?: import('packages/components/dist/src').KdsPopoverType | undefined;
-                    readonly fullWidth?: boolean | undefined;
-                    readonly maxInlineSize?: string | undefined;
-                    readonly content?: string | undefined;
-                    readonly placement?: Exclude<import('packages/components/dist/src').KdsPopoverPlacement, "custom"> | undefined;
-                    readonly customPlacementPosition?: never | undefined;
-                    readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-                } | {
-                    readonly modelValue?: boolean | undefined;
-                    readonly role?: import('packages/components/dist/src').KdsPopoverRole | undefined;
-                    readonly popoverType?: import('packages/components/dist/src').KdsPopoverType | undefined;
-                    readonly fullWidth?: boolean | undefined;
-                    readonly maxInlineSize?: string | undefined;
-                    readonly content?: string | undefined;
-                    readonly placement: "custom";
-                    readonly customPlacementPosition: {
-                        x: number;
-                        y: number;
-                    };
-                    readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-                }) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-                $attrs: import('vue').Attrs;
-                $refs: {
-                    [x: string]: unknown;
-                } & {
-                    popoverEl: HTMLDivElement;
-                };
-                $slots: Readonly<{
-                    [name: string]: import('vue').Slot<any> | undefined;
-                }>;
-                $root: import('vue').ComponentPublicInstance | null;
-                $parent: import('vue').ComponentPublicInstance | null;
-                $host: Element | null;
-                $emit: (event: "update:modelValue", value: boolean) => void;
-                $el: HTMLDivElement;
-                $options: import('vue').ComponentOptionsBase<Readonly<({
-                    modelValue?: boolean;
-                } & {
-                    role?: import('packages/components/dist/src').KdsPopoverRole;
-                    popoverType?: import('packages/components/dist/src').KdsPopoverType;
-                    fullWidth?: boolean;
-                    maxInlineSize?: string;
-                    content?: string;
-                } & {
-                    placement?: Exclude<import('packages/components/dist/src').KdsPopoverPlacement, "custom">;
-                    customPlacementPosition?: never;
-                }) | ({
-                    modelValue?: boolean;
-                } & {
-                    role?: import('packages/components/dist/src').KdsPopoverRole;
-                    popoverType?: import('packages/components/dist/src').KdsPopoverType;
-                    fullWidth?: boolean;
-                    maxInlineSize?: string;
-                    content?: string;
-                } & {
-                    placement: "custom";
-                    customPlacementPosition: {
-                        x: number;
-                        y: number;
-                    };
-                })> & Readonly<{
-                    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-                }>, {
-                    anchorStyle: Record<string, string>;
-                    popoverId: string;
-                }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                    "update:modelValue": (value: boolean) => any;
-                }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
-                    beforeCreate?: (() => void) | (() => void)[];
-                    created?: (() => void) | (() => void)[];
-                    beforeMount?: (() => void) | (() => void)[];
-                    mounted?: (() => void) | (() => void)[];
-                    beforeUpdate?: (() => void) | (() => void)[];
-                    updated?: (() => void) | (() => void)[];
-                    activated?: (() => void) | (() => void)[];
-                    deactivated?: (() => void) | (() => void)[];
-                    beforeDestroy?: (() => void) | (() => void)[];
-                    beforeUnmount?: (() => void) | (() => void)[];
-                    destroyed?: (() => void) | (() => void)[];
-                    unmounted?: (() => void) | (() => void)[];
-                    renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-                    renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-                    errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
-                };
-                $forceUpdate: () => void;
-                $nextTick: typeof nextTick;
-                $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
-            } & Readonly<{}> & Omit<{} & (Readonly<({
-                modelValue?: boolean;
-            } & {
-                role?: import('packages/components/dist/src').KdsPopoverRole;
-                popoverType?: import('packages/components/dist/src').KdsPopoverType;
-                fullWidth?: boolean;
-                maxInlineSize?: string;
-                content?: string;
-            } & {
-                placement?: Exclude<import('packages/components/dist/src').KdsPopoverPlacement, "custom">;
-                customPlacementPosition?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & {
-                role?: import('packages/components/dist/src').KdsPopoverRole;
-                popoverType?: import('packages/components/dist/src').KdsPopoverType;
-                fullWidth?: boolean;
-                maxInlineSize?: string;
-                content?: string;
-            } & {
-                placement: "custom";
-                customPlacementPosition: {
-                    x: number;
-                    y: number;
-                };
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>), "anchorStyle" | "popoverId"> & {
-                anchorStyle: Record<string, string>;
-                popoverId: string;
-            } & {} & import('vue').ComponentCustomProperties & {} & {
-                $slots: {
-                    default?(_: {}): any;
-                };
-            }) | null;
-            menuContainer: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/components/dist/src/containers/MenuContainer').KdsMenuContainerProps> & Readonly<{
-                onItemClick?: ((id: string) => any) | undefined;
-            }>, {
-                focus: () => void;
-            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                itemClick: (id: string) => any;
-            }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
-                containerEl: HTMLDivElement;
-            }, HTMLDivElement, import('vue').ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, Readonly<import('packages/components/dist/src/containers/MenuContainer').KdsMenuContainerProps> & Readonly<{
-                onItemClick?: ((id: string) => any) | undefined;
+            }, Readonly<{
+                column: ColumnConfig;
+                colFilterValue?: FilterValue;
+                tableConfig: TableConfig;
+                actionConfig: ActionConfig;
+                sortDirection: -1 | 0 | 1;
+                columnSize?: number;
+                focused: boolean;
+                selected: boolean;
+                otherColumnResizing: boolean;
+                getDragHandleHeight: () => number;
+            }> & Readonly<{
+                onColumnResize?: ((newSize: number) => any) | undefined;
+                onOnColumnSort?: ((direction: 0 | 1 | -1) => any) | undefined;
+                onOpenActionBarFilterControl?: (() => any) | undefined;
+                onClearColumnFilter?: (() => any) | undefined;
+                onOnHeaderCellFocus?: (() => any) | undefined;
+                onOnHeaderCellBlur?: (() => any) | undefined;
+                onOnHeaderClick?: (() => any) | undefined;
+                onOnKeydownTab?: (() => any) | undefined;
+                onOnKeydownLeft?: (() => any) | undefined;
+                onOnKeydownRight?: (() => any) | undefined;
+                onOnKeydownDown?: (() => any) | undefined;
+                onOnHeaderCellKeydown?: ((event: KeyboardEvent) => any) | undefined;
+                onOnDeleteColumn?: (() => any) | undefined;
+                onColumnResizeStart?: (() => any) | undefined;
+                onColumnResizeEnd?: (() => any) | undefined;
+                onAllColumnsResize?: ((newSize: number) => any) | undefined;
             }>, {
+                getHeaderCellWidth: () => number;
                 focus: () => void;
-            }, {}, {}, {}, {}> | null;
-        }, any>;
+                isFocusable: () => boolean;
+            }, {}, {}, {}, {}>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & import('vue').ComponentOptionsBase<Readonly<{
+            column: ColumnConfig;
+            colFilterValue?: FilterValue;
+            tableConfig: TableConfig;
+            actionConfig: ActionConfig;
+            sortDirection: -1 | 0 | 1;
+            columnSize?: number;
+            focused: boolean;
+            selected: boolean;
+            otherColumnResizing: boolean;
+            getDragHandleHeight: () => number;
+        }> & Readonly<{
+            onColumnResize?: ((newSize: number) => any) | undefined;
+            onOnColumnSort?: ((direction: 0 | 1 | -1) => any) | undefined;
+            onOpenActionBarFilterControl?: (() => any) | undefined;
+            onClearColumnFilter?: (() => any) | undefined;
+            onOnHeaderCellFocus?: (() => any) | undefined;
+            onOnHeaderCellBlur?: (() => any) | undefined;
+            onOnHeaderClick?: (() => any) | undefined;
+            onOnKeydownTab?: (() => any) | undefined;
+            onOnKeydownLeft?: (() => any) | undefined;
+            onOnKeydownRight?: (() => any) | undefined;
+            onOnKeydownDown?: (() => any) | undefined;
+            onOnHeaderCellKeydown?: ((event: KeyboardEvent) => any) | undefined;
+            onOnDeleteColumn?: (() => any) | undefined;
+            onColumnResizeStart?: (() => any) | undefined;
+            onColumnResizeEnd?: (() => any) | undefined;
+            onAllColumnsResize?: ((newSize: number) => any) | undefined;
+        }>, {
+            getHeaderCellWidth: () => number;
+            focus: () => void;
+            isFocusable: () => boolean;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            columnResize: (newSize: number) => any;
+            onColumnSort: (direction: 0 | 1 | -1) => any;
+            openActionBarFilterControl: () => any;
+            clearColumnFilter: () => any;
+            onHeaderCellFocus: () => any;
+            onHeaderCellBlur: () => any;
+            onHeaderClick: () => any;
+            onKeydownTab: () => any;
+            onKeydownLeft: () => any;
+            onKeydownRight: () => any;
+            onKeydownDown: () => any;
+            onHeaderCellKeydown: (event: KeyboardEvent) => any;
+            onDeleteColumn: () => any;
+            columnResizeStart: () => any;
+            columnResizeEnd: () => any;
+            allColumnsResize: (newSize: number) => any;
+        }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+            $slots: {
+                subHeader?(_: {
+                    subHeader: string;
+                }): any;
+            };
+        });
     } & import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
@@ -1908,32 +1635,24 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: PropType<TableConfig>;
             default: () => {};
         };
-        columnHeaders: {
-            type: PropType<Array<string>>;
-            default: () => never[];
-        };
-        columnSubHeaders: {
-            type: PropType<Array<string | undefined>>;
-            default: () => never[];
-        };
-        columnSizes: {
-            type: PropType<Array<number>>;
-            default: () => never[];
+        actionConfig: {
+            type: PropType<ActionConfig>;
+            default: () => {};
         };
-        columnSubMenuItems: {
-            type: PropType<Array<import('packages/components/dist/src').KdsMenuItem[] | undefined>>;
+        columns: {
+            type: PropType<ColumnConfig[]>;
             default: () => never[];
         };
-        columnHeaderColors: {
-            type: PropType<Array<string | null>>;
-            default: () => never[];
+        colFilterValues: {
+            type: PropType<ColFilterValues>;
+            default: () => {};
         };
-        columnDeletables: {
-            type: PropType<Array<boolean | undefined>>;
+        colSizes: {
+            type: PropType<number[]>;
             default: () => never[];
         };
-        columnEditables: {
-            type: PropType<Array<boolean | undefined>>;
+        colSortValues: {
+            type: PropType<ColSortValue[]>;
             default: () => never[];
         };
         isSelected: {
@@ -1941,7 +1660,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             default: boolean;
         };
         getDragHandleHeight: {
-            type: FunctionConstructor;
+            type: PropType<() => number>;
             default: () => number;
         };
         showNewColumnButton: {
@@ -1954,12 +1673,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
     }>> & Readonly<{
         onColumnResize?: ((index: number, newSize: number) => any) | undefined;
+        onColumnSort?: ((index: number, direction: 0 | 1 | -1) => any) | undefined;
+        onOpenActionBarFilterControl?: ((index: number) => any) | undefined;
+        onClearColumnFilter?: ((index: number) => any) | undefined;
+        onColumnResizeStart?: (() => any) | undefined;
+        onColumnResizeEnd?: (() => any) | undefined;
+        onAllColumnsResize?: ((newSize: number) => any) | undefined;
         onHeaderSelect?: ((selected: boolean) => any) | undefined;
         onShowColumnBorder?: (() => any) | undefined;
         onHideColumnBorder?: (() => any) | undefined;
-        onColumnResizeEnd?: (() => any) | undefined;
-        onColumnResizeStart?: (() => any) | undefined;
-        onAllColumnsResize?: ((newSize: number) => any) | undefined;
         onMoveDownFromHeaderCell?: ((index: number) => any) | undefined;
         onHeaderCellSelect?: ((index: number) => any) | undefined;
         "onUpdate:newColumnButtonWidth"?: ((width: number) => any) | undefined;
@@ -1970,49 +1692,32 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         onHeaderCellStartEditing?: ((index: number, initialValue?: string | undefined) => any) | undefined;
         onDeleteColumn?: ((index: number) => any) | undefined;
     }>, {
-        indexedColumnHeaders: Ref<[string, number][], [string, number][]>;
+        indexedColumns: Ref<[ColumnConfig, number][], [ColumnConfig, number][]>;
         headerStyles: import('vue').MaybeRef<import('vue').CSSProperties>;
         onHeaderCellKeydown: (event: KeyboardEvent, columnIndex: number) => void;
-        scrollContainer: Ref<HTMLElement | null, HTMLElement | null>;
-        dragIndex: Ref<number | null, number | null>;
-        columnSizeOnDragStart: Ref<number, number>;
-        pageXOnDragStart: Ref<number, number>;
-        currentPageX: Ref<number, number>;
-        autoScrollOffset: Ref<number, number>;
-        emitColumnResize: () => void;
-        startAutoScroll: (clientX: number) => void;
-        updateAutoScroll: (clientX: number) => void;
-        stopAutoScroll: () => void;
     }, {
-        hoverIndex: null | number;
         minimumColumnWidth: number;
-        maximumSubMenuWidth: number;
-        currentDragHandlerHeight: number;
-        borderTop: number;
+        resizingColumnIndex: null | number;
         focusedHeaderIndex: null | number;
     }, {
-        enableColumnResizing(): boolean;
-        hasSubHeaders(): boolean;
-        currentResizeDragHandleWidth(): 0 | 5;
         headerSelectionOverlayStyle(): Record<string, string> | null;
     }, {
+        columnSize(columnIndex: number): number;
+        sortDirection(columnIndex: number): -1 | 0 | 1;
         onHeaderCellFocus(columnIndex: number): void;
         onHeaderCellBlur(columnIndex: number): void;
         emitNewColumnButtonWidth(): void;
         onSelect(): void;
         onHeaderClick(ind: number): void;
-        onPointerOver(event: PointerEvent, columnIndex: number): void;
-        onPointerLeave(event: Event): void;
-        onPointerDown(event: PointerEvent & {
-            target: HTMLElement;
-        }, columnIndex: number): void;
-        onPointerUp(event: PointerEvent): void;
-        onPointerMove: import('raf-throttle').Throttled<(event: PointerEvent) => void>;
+        onColumnResizeStart(columnIndex: number): void;
+        onColumnResizeEnd(): void;
+        onColumnResize(columnIndex: number, newSize: number): void;
+        onAllColumnsResize(newSize: number): void;
+        onColumnSort(columnIndex: number, direction: -1 | 0 | 1): void;
+        onOpenActionBarFilterControl(columnIndex: number): void;
+        onClearColumnFilter(columnIndex: number): void;
         onNewColumnButtonClick(event: MouseEvent): void;
         onNewColumnButtonKeydownLeft(event: KeyboardEvent): void;
-        unthrottledOnPointerMove(event: PointerEvent): void;
-        onLostPointerCapture: import('raf-throttle').Throttled<(event: any) => void>;
-        dragHandleHeight(isDragging: boolean): number;
         onDeleteColumn(ind: number): void;
         getHeaderCellWidths(): number[];
         onKeydownTab(): void;
@@ -2020,18 +1725,17 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         onKeydownRight(columnIndex: number): void;
         onKeydownDown(columnIndex: number): void;
         focusHeaderCell(cellInd: number): void;
+        isColumnHeaderFocusable(cellInd: number): boolean;
         focusNewColumnButton(): void;
         focusSelectionCheckbox(): void;
     }, {
-        columnSizes: number[];
+        columns: ColumnConfig[];
+        colSizes: number[];
         tableConfig: TableConfig;
-        getDragHandleHeight: Function;
-        columnHeaders: string[];
-        columnSubHeaders: (string | undefined)[];
-        columnSubMenuItems: (import('packages/components/dist/src').KdsMenuItem[] | undefined)[];
-        columnHeaderColors: (string | null)[];
-        columnDeletables: (boolean | undefined)[];
-        columnEditables: (boolean | undefined)[];
+        getDragHandleHeight: () => number;
+        colFilterValues: ColFilterValues;
+        colSortValues: ColSortValue[];
+        actionConfig: ActionConfig;
         isSelected: boolean;
         showNewColumnButton: boolean;
         selectedHeaderIndex: number | null;
@@ -2176,29 +1880,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     minRowHeight(): number;
     initialRowHeight(): number | "dynamic";
     currentRowHeight(): number | "dynamic";
-    columnHeaders(): string[];
-    columnSubHeaders(): (string | undefined)[];
-    columnHeaderSubMenuItems(): (import('packages/components/dist/src').KdsMenuItem[] | undefined)[];
-    columnSizes(): number[];
-    columnTypes(): (import('..').ColumnType | undefined)[];
     selectedHeaderIndex(): number | null;
-    columnKeys(): (string | number | symbol)[];
-    columnSortConfigs(): boolean[];
-    columnFilterConfigs(): (FilterConfig | undefined)[];
-    columnHeaderColors(): (string | null)[];
-    columnDeletables(): (boolean | undefined)[];
-    columnEditables(): (boolean | undefined)[];
     slottedColumns(): any[];
-    tableHeaderClass(): (string | {
-        "sub-menu-active": number | undefined;
-    })[];
     topDataLength(): number;
     totalTableLength(): number;
     numPlaceholderRows(): 1 | 0;
     placeholderRowRowIndex(): number;
     scrollData(): DataItem[][];
     currentSelectionMap(): (rowInd: number, groupInd: number) => boolean;
-    enableRowResize(): boolean | undefined;
     scrollerItemSize(): number;
     sortControlOptions(): {
         selectableColumns: {
@@ -2227,6 +1916,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     onDeleteColumn(colInd: number): void;
     onDeleteRow(rowInd: number): void;
     onColumnSort(colInd: number | undefined, sortDirection: -1 | 0 | 1): void;
+    onActionBarColumnSort(columnId: string | undefined, sortDirection: -1 | 0 | 1): void;
     onSelectAll(selected: boolean): void;
     onDataValueView(cellInd: number, rowInd: number, anchor: VirtualElementAnchor): void;
     onRowSelect(selected: boolean, rowInd: number, groupInd: number): void;
@@ -2277,7 +1967,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     onAllColumnsResize(newColumnSize: number): void;
     onColumnResizeStart(): void;
     onColumnResizeEnd(): void;
-    getCellContentSlotName(columnKeys: any, columnId: any): string;
+    getCellContentSlotName(columns: ColumnConfig[], columnId: number): string;
     getHeaderComponent(): InstanceType<typeof Header>;
     getTableCoreComponent(): InstanceType<typeof TableCore>;
     getSelectionOverlayComponent(): InstanceType<typeof CellSelectionOverlay>;
@@ -2301,7 +1991,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     pageChange: (newPageNumber: number) => true;
     pageSizeUpdate: (newPageSize: number) => true;
     columnSort: (colInd: number | undefined, sortDirection: -1 | 0 | 1) => true;
-    columnFilter: (colInd: number, value: FilterConfig["modelValue"]) => true;
+    columnFilter: (colInd: number, value: FilterValue) => true;
     selectAll: (selected: boolean) => true;
     rowSelect: (selected: boolean, rowInd: number, groupInd: number, isTop: boolean) => true;
     tableInput: (event: any) => true;
@@ -2360,11 +2050,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
      */
     data: {
         type: PropType<Array<Array<any>>>;
-        default: () => never[];
-    };
-    currentSelection: {
-        type: PropType<Array<Array<boolean>>>;
-        default: () => never[];
+        required: true;
     };
     /**
      * It specifies how many (empty) rows should be simultated above the given rows in this.data[0]
@@ -2388,6 +2074,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: ArrayConstructor;
         default: () => never[];
     };
+    currentSelection: {
+        type: PropType<Array<Array<boolean>>>;
+        default: () => never[];
+    };
     /**
      * analogous to currentSelection but for the bottomData
      */
@@ -2395,21 +2085,66 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<boolean[]>;
         default: () => never[];
     };
-    totalSelected: {
-        type: NumberConstructor;
-        default: number;
+    /** Stable per-column definitions. */
+    columns: {
+        type: PropType<ColumnConfig[]>;
+        required: true;
     };
-    /**
-     * Config props.
-     */
-    dataConfig: {
-        type: PropType<DataConfig>;
+    /** Per-column widths, keyed by column id. */
+    colSizes: {
+        type: PropType<number[]>;
+        default: () => never[];
+    };
+    /** Per-column filter values, keyed by column id. */
+    colFilterValues: {
+        type: PropType<ColFilterValues>;
         default: () => {};
     };
+    /** Active sorts, ordered by sort priority. */
+    colSortValues: {
+        type: PropType<ColSortValue[]>;
+        default: () => never[];
+    };
+    /** Feature switches for the table. */
     tableConfig: {
         type: PropType<TableConfig>;
         default: () => {};
-        validate(tableConfig: any): boolean;
+    };
+    /** Runtime totals and flags for the table. */
+    tableState: {
+        type: PropType<TableState>;
+        default: () => {};
+    };
+    /** Pagination config; its presence enables pagination. */
+    pageConfig: {
+        type: PropType<PageConfig | undefined>;
+        default: undefined;
+    };
+    /** Runtime pagination state. */
+    pageState: {
+        type: PropType<PageState | undefined>;
+        default: undefined;
+    };
+    /** Action-bar config; its presence enables the action bar. */
+    actionConfig: {
+        type: PropType<ActionConfig | undefined>;
+        default: undefined;
+    };
+    /** Runtime state of the action bar. */
+    actionState: {
+        type: PropType<ActionState | undefined>;
+        default: undefined;
+        required: false;
+    };
+    /** Per-row and per-group submenu config. */
+    subMenuConfig: {
+        type: PropType<SubMenuConfig>;
+        default: () => {};
+    };
+    /** Appearance of the table's rows. */
+    rowConfig: {
+        type: PropType<RowConfig>;
+        default: () => {};
     };
     disableRowHeightTransition: {
         type: BooleanConstructor;
@@ -2420,11 +2155,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     "onUpdate:available-width"?: ((newAvailableWidth: number) => any) | undefined;
     onPageChange?: ((newPageNumber: number) => any) | undefined;
     onPageSizeUpdate?: ((newPageSize: number) => any) | undefined;
-    onColumnFilter?: ((colInd: number, value: string | number | string[] | [null] | null | undefined) => any) | undefined;
+    onColumnFilter?: ((colInd: number, value: FilterValue) => any) | undefined;
     onColumnSort?: ((colInd: number | undefined, sortDirection: 0 | 1 | -1) => any) | undefined;
     onResetTemporaryView?: (() => any) | undefined;
-    onColumnResizeEnd?: (() => any) | undefined;
     onColumnResizeStart?: (() => any) | undefined;
+    onColumnResizeEnd?: (() => any) | undefined;
     onAllColumnsResize?: ((newColumnSize: number) => any) | undefined;
     onNewColumnButtonClick?: (() => any) | undefined;
     onHeaderCellStartEditing?: ((columnIndex: number, initialValue?: string | undefined) => any) | undefined;
@@ -2460,714 +2195,111 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             maxY: number;
         }) => void;
     }) => any) | undefined;
-    onCutSelection?: ((cutSelectionParams: {
-        rect: Rect;
-        id: RectId | null;
-    }) => any) | undefined;
-    onDeleteSelection?: ((deleteSelectionParams: {
-        rect: Rect;
-        id: RectId | null;
-    }) => any) | undefined;
-    onCellSelectionChange?: ((cellPosition: CellPosition | null) => any) | undefined;
-    onCloseDataValueView?: (() => any) | undefined;
-    onNewRowButtonClick?: ((lastPosition: {
-        columnInd: number;
-        rectId: number | null;
-    } | null) => any) | undefined;
-}>, {
-    data: any[][];
-    tableConfig: TableConfig;
-    disableRowHeightTransition: boolean;
-    currentSelection: boolean[][];
-    numRowsAbove: number;
-    numRowsBelow: number;
-    bottomData: unknown[];
-    currentBottomSelection: boolean[];
-    totalSelected: number;
-    dataConfig: DataConfig;
-}, {}, {
-    PageControls: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        pageConfig: {
-            type: PropType<import('..').PageConfig>;
-            default: () => {};
-        };
-    }>, {}, {}, {
-        showPageNavigationControls(): boolean;
-        pageSizeItems(): {
-            id: string;
-            text: string;
-        }[];
-    }, {
-        createText(size: number): string;
-        onPageSizeSelect(newPageSize: string): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("pageChange" | "pageSizeUpdate")[], "pageChange" | "pageSizeUpdate", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        pageConfig: {
-            type: PropType<import('..').PageConfig>;
-            default: () => {};
-        };
-    }>> & Readonly<{
-        onPageChange?: ((...args: any[]) => any) | undefined;
-        onPageSizeUpdate?: ((...args: any[]) => any) | undefined;
-    }>, {
-        pageConfig: import('..').PageConfig;
-    }, {}, {
-        PageNavigation: import('vue').DefineComponent<{
-            currentItems?: number;
-            pageSize?: number;
-            currentPage?: number;
-        }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            pageChange: (newPageNumber: number) => any;
-        }, string, import('vue').PublicProps, Readonly<{
-            currentItems?: number;
-            pageSize?: number;
-            currentPage?: number;
-        }> & Readonly<{
-            onPageChange?: ((newPageNumber: number) => any) | undefined;
-        }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-        PageRowRange: import('vue').DefineComponent<{
-            currentItems?: number;
-            pageSize?: number;
-            currentPage?: number;
-            showTableSize?: boolean;
-            rowLabel?: string;
-        }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
-            currentItems?: number;
-            pageSize?: number;
-            currentPage?: number;
-            showTableSize?: boolean;
-            rowLabel?: string;
-        }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-        KdsMenuButton: import('vue').DefineComponent<({
-            modelValue?: boolean;
-        } & import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-        } & {
-            label: string;
-            leadingIcon?: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: import('packages/components/dist/src').KdsIconName;
-            ariaLabel?: never;
-        } & {
-            items: import('packages/components/dist/src').KdsMenuItem[];
-            menuMaxHeight?: string;
-        }) | ({
-            modelValue?: boolean;
-        } & import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-        } & {
-            label?: never;
-            leadingIcon: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: never;
-            ariaLabel: string;
-        } & {
-            items: import('packages/components/dist/src').KdsMenuItem[];
-            menuMaxHeight?: string;
-        }), {
-            menuButtonEl: Readonly<import('vue').ShallowRef<import('vue').CreateComponentPublicInstanceWithMixins<Readonly<({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label: string;
-                leadingIcon?: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: import('packages/components/dist/src').KdsIconName;
-                ariaLabel?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label?: never;
-                leadingIcon: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: never;
-                ariaLabel: string;
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                "update:modelValue": (value: boolean) => any;
-            }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, {} & (Readonly<({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label: string;
-                leadingIcon?: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: import('packages/components/dist/src').KdsIconName;
-                ariaLabel?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label?: never;
-                leadingIcon: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: never;
-                ariaLabel: string;
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>), {}, {}, {}, {}, {}> | null>>;
-        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            "update:modelValue": (value: boolean) => any;
-            itemClick: (id: string) => any;
-        }, string, import('vue').PublicProps, Readonly<({
-            modelValue?: boolean;
-        } & import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-        } & {
-            label: string;
-            leadingIcon?: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: import('packages/components/dist/src').KdsIconName;
-            ariaLabel?: never;
-        } & {
-            items: import('packages/components/dist/src').KdsMenuItem[];
-            menuMaxHeight?: string;
-        }) | ({
-            modelValue?: boolean;
-        } & import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-        } & {
-            label?: never;
-            leadingIcon: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: never;
-            ariaLabel: string;
-        } & {
-            items: import('packages/components/dist/src').KdsMenuItem[];
-            menuMaxHeight?: string;
-        })> & Readonly<{
-            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            onItemClick?: ((id: string) => any) | undefined;
-        }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-            menuButton: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label: string;
-                leadingIcon?: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: import('packages/components/dist/src').KdsIconName;
-                ariaLabel?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label?: never;
-                leadingIcon: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: never;
-                ariaLabel: string;
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                "update:modelValue": (value: boolean) => any;
-            }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, {} & (Readonly<({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label: string;
-                leadingIcon?: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: import('packages/components/dist/src').KdsIconName;
-                ariaLabel?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & import('packages/components/dist/src/types/testId').WithTestId & {
-                size?: import('packages/components/dist/src').KdsButtonSize;
-                disabled?: boolean;
-                title?: string;
-                variant?: import('packages/components/dist/src').KdsToggleButtonVariant | undefined;
-            } & {
-                label?: never;
-                leadingIcon: import('packages/components/dist/src').KdsIconName;
-                trailingIcon?: never;
-                ariaLabel: string;
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>), {}, {}, {}, {}, {}> | null;
-            popover: ({
-                $: import('vue').ComponentInternalInstance;
-                $data: {};
-                $props: ({
-                    readonly modelValue?: boolean | undefined;
-                    readonly role?: import('packages/components/dist/src').KdsPopoverRole | undefined;
-                    readonly popoverType?: import('packages/components/dist/src').KdsPopoverType | undefined;
-                    readonly fullWidth?: boolean | undefined;
-                    readonly maxInlineSize?: string | undefined;
-                    readonly content?: string | undefined;
-                    readonly placement?: Exclude<import('packages/components/dist/src').KdsPopoverPlacement, "custom"> | undefined;
-                    readonly customPlacementPosition?: never | undefined;
-                    readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-                } | {
-                    readonly modelValue?: boolean | undefined;
-                    readonly role?: import('packages/components/dist/src').KdsPopoverRole | undefined;
-                    readonly popoverType?: import('packages/components/dist/src').KdsPopoverType | undefined;
-                    readonly fullWidth?: boolean | undefined;
-                    readonly maxInlineSize?: string | undefined;
-                    readonly content?: string | undefined;
-                    readonly placement: "custom";
-                    readonly customPlacementPosition: {
-                        x: number;
-                        y: number;
-                    };
-                    readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-                }) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-                $attrs: import('vue').Attrs;
-                $refs: {
-                    [x: string]: unknown;
-                } & {
-                    popoverEl: HTMLDivElement;
-                };
-                $slots: Readonly<{
-                    [name: string]: import('vue').Slot<any> | undefined;
-                }>;
-                $root: import('vue').ComponentPublicInstance | null;
-                $parent: import('vue').ComponentPublicInstance | null;
-                $host: Element | null;
-                $emit: (event: "update:modelValue", value: boolean) => void;
-                $el: HTMLDivElement;
-                $options: import('vue').ComponentOptionsBase<Readonly<({
-                    modelValue?: boolean;
-                } & {
-                    role?: import('packages/components/dist/src').KdsPopoverRole;
-                    popoverType?: import('packages/components/dist/src').KdsPopoverType;
-                    fullWidth?: boolean;
-                    maxInlineSize?: string;
-                    content?: string;
-                } & {
-                    placement?: Exclude<import('packages/components/dist/src').KdsPopoverPlacement, "custom">;
-                    customPlacementPosition?: never;
-                }) | ({
-                    modelValue?: boolean;
-                } & {
-                    role?: import('packages/components/dist/src').KdsPopoverRole;
-                    popoverType?: import('packages/components/dist/src').KdsPopoverType;
-                    fullWidth?: boolean;
-                    maxInlineSize?: string;
-                    content?: string;
-                } & {
-                    placement: "custom";
-                    customPlacementPosition: {
-                        x: number;
-                        y: number;
-                    };
-                })> & Readonly<{
-                    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-                }>, {
-                    anchorStyle: Record<string, string>;
-                    popoverId: string;
-                }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                    "update:modelValue": (value: boolean) => any;
-                }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
-                    beforeCreate?: (() => void) | (() => void)[];
-                    created?: (() => void) | (() => void)[];
-                    beforeMount?: (() => void) | (() => void)[];
-                    mounted?: (() => void) | (() => void)[];
-                    beforeUpdate?: (() => void) | (() => void)[];
-                    updated?: (() => void) | (() => void)[];
-                    activated?: (() => void) | (() => void)[];
-                    deactivated?: (() => void) | (() => void)[];
-                    beforeDestroy?: (() => void) | (() => void)[];
-                    beforeUnmount?: (() => void) | (() => void)[];
-                    destroyed?: (() => void) | (() => void)[];
-                    unmounted?: (() => void) | (() => void)[];
-                    renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-                    renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-                    errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
-                };
-                $forceUpdate: () => void;
-                $nextTick: typeof nextTick;
-                $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
-            } & Readonly<{}> & Omit<{} & (Readonly<({
-                modelValue?: boolean;
-            } & {
-                role?: import('packages/components/dist/src').KdsPopoverRole;
-                popoverType?: import('packages/components/dist/src').KdsPopoverType;
-                fullWidth?: boolean;
-                maxInlineSize?: string;
-                content?: string;
-            } & {
-                placement?: Exclude<import('packages/components/dist/src').KdsPopoverPlacement, "custom">;
-                customPlacementPosition?: never;
-            }) | ({
-                modelValue?: boolean;
-            } & {
-                role?: import('packages/components/dist/src').KdsPopoverRole;
-                popoverType?: import('packages/components/dist/src').KdsPopoverType;
-                fullWidth?: boolean;
-                maxInlineSize?: string;
-                content?: string;
-            } & {
-                placement: "custom";
-                customPlacementPosition: {
-                    x: number;
-                    y: number;
-                };
-            })> & Readonly<{
-                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-            }>), "anchorStyle" | "popoverId"> & {
-                anchorStyle: Record<string, string>;
-                popoverId: string;
-            } & {} & import('vue').ComponentCustomProperties & {} & {
-                $slots: {
-                    default?(_: {}): any;
-                };
-            }) | null;
-            menuContainer: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/components/dist/src/containers/MenuContainer').KdsMenuContainerProps> & Readonly<{
-                onItemClick?: ((id: string) => any) | undefined;
-            }>, {
-                focus: () => void;
-            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                itemClick: (id: string) => any;
-            }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
-                containerEl: HTMLDivElement;
-            }, HTMLDivElement, import('vue').ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, Readonly<import('packages/components/dist/src/containers/MenuContainer').KdsMenuContainerProps> & Readonly<{
-                onItemClick?: ((id: string) => any) | undefined;
-            }>, {
-                focus: () => void;
-            }, {}, {}, {}, {}> | null;
-        }, any>;
-    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    Header: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    onCutSelection?: ((cutSelectionParams: {
+        rect: Rect;
+        id: RectId | null;
+    }) => any) | undefined;
+    onDeleteSelection?: ((deleteSelectionParams: {
+        rect: Rect;
+        id: RectId | null;
+    }) => any) | undefined;
+    onCellSelectionChange?: ((cellPosition: CellPosition | null) => any) | undefined;
+    onCloseDataValueView?: (() => any) | undefined;
+    onNewRowButtonClick?: ((lastPosition: {
+        columnInd: number;
+        rectId: number | null;
+    } | null) => any) | undefined;
+}>, {
+    colSizes: number[];
+    tableConfig: TableConfig;
+    subMenuConfig: SubMenuConfig;
+    pageConfig: PageConfig | undefined;
+    tableState: TableState;
+    pageState: PageState | undefined;
+    colFilterValues: ColFilterValues;
+    colSortValues: ColSortValue[];
+    actionConfig: ActionConfig | undefined;
+    rowConfig: RowConfig;
+    disableRowHeightTransition: boolean;
+    numRowsAbove: number;
+    numRowsBelow: number;
+    bottomData: unknown[];
+    currentSelection: boolean[][];
+    currentBottomSelection: boolean[];
+    actionState: ActionState | undefined;
+}, {}, {
+    PageControls: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         tableConfig: {
             type: PropType<TableConfig>;
-            default: () => {};
-        };
-        columnHeaders: {
-            type: PropType<Array<string>>;
-            default: () => never[];
-        };
-        columnSubHeaders: {
-            type: PropType<Array<string | undefined>>;
-            default: () => never[];
-        };
-        columnSizes: {
-            type: PropType<Array<number>>;
-            default: () => never[];
-        };
-        columnSubMenuItems: {
-            type: PropType<Array<import('packages/components/dist/src').KdsMenuItem[] | undefined>>;
-            default: () => never[];
-        };
-        columnHeaderColors: {
-            type: PropType<Array<string | null>>;
-            default: () => never[];
-        };
-        columnDeletables: {
-            type: PropType<Array<boolean | undefined>>;
-            default: () => never[];
-        };
-        columnEditables: {
-            type: PropType<Array<boolean | undefined>>;
-            default: () => never[];
-        };
-        isSelected: {
-            type: BooleanConstructor;
-            default: boolean;
+            required: true;
         };
-        getDragHandleHeight: {
-            type: FunctionConstructor;
-            default: () => number;
+        pageConfig: {
+            type: PropType<PageConfig>;
+            required: true;
         };
-        showNewColumnButton: {
-            type: BooleanConstructor;
-            default: boolean;
+        tableState: {
+            type: PropType<TableState>;
+            required: true;
         };
-        selectedHeaderIndex: {
-            type: PropType<number | null>;
-            default: null;
+        pageState: {
+            type: PropType<PageState>;
+            required: true;
         };
-    }>, {
-        indexedColumnHeaders: Ref<[string, number][], [string, number][]>;
-        headerStyles: import('vue').MaybeRef<import('vue').CSSProperties>;
-        onHeaderCellKeydown: (event: KeyboardEvent, columnIndex: number) => void;
-        scrollContainer: Ref<HTMLElement | null, HTMLElement | null>;
-        dragIndex: Ref<number | null, number | null>;
-        columnSizeOnDragStart: Ref<number, number>;
-        pageXOnDragStart: Ref<number, number>;
-        currentPageX: Ref<number, number>;
-        autoScrollOffset: Ref<number, number>;
-        emitColumnResize: () => void;
-        startAutoScroll: (clientX: number) => void;
-        updateAutoScroll: (clientX: number) => void;
-        stopAutoScroll: () => void;
-    }, {
-        hoverIndex: null | number;
-        minimumColumnWidth: number;
-        maximumSubMenuWidth: number;
-        currentDragHandlerHeight: number;
-        borderTop: number;
-        focusedHeaderIndex: null | number;
-    }, {
-        enableColumnResizing(): boolean;
-        hasSubHeaders(): boolean;
-        currentResizeDragHandleWidth(): 0 | 5;
-        headerSelectionOverlayStyle(): Record<string, string> | null;
+    }>, {}, {}, {
+        pageSizeItems(): {
+            id: string;
+            text: string;
+        }[];
     }, {
-        onHeaderCellFocus(columnIndex: number): void;
-        onHeaderCellBlur(columnIndex: number): void;
-        emitNewColumnButtonWidth(): void;
-        onSelect(): void;
-        onHeaderClick(ind: number): void;
-        onPointerOver(event: PointerEvent, columnIndex: number): void;
-        onPointerLeave(event: Event): void;
-        onPointerDown(event: PointerEvent & {
-            target: HTMLElement;
-        }, columnIndex: number): void;
-        onPointerUp(event: PointerEvent): void;
-        onPointerMove: import('raf-throttle').Throttled<(event: PointerEvent) => void>;
-        onNewColumnButtonClick(event: MouseEvent): void;
-        onNewColumnButtonKeydownLeft(event: KeyboardEvent): void;
-        unthrottledOnPointerMove(event: PointerEvent): void;
-        onLostPointerCapture: import('raf-throttle').Throttled<(event: any) => void>;
-        dragHandleHeight(isDragging: boolean): number;
-        onDeleteColumn(ind: number): void;
-        getHeaderCellWidths(): number[];
-        onKeydownTab(): void;
-        onKeydownLeft(columnIndex: number): void;
-        onKeydownRight(columnIndex: number): void;
-        onKeydownDown(columnIndex: number): void;
-        focusHeaderCell(cellInd: number): void;
-        focusNewColumnButton(): void;
-        focusSelectionCheckbox(): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        headerSelect: (selected: boolean) => true;
-        showColumnBorder: () => true;
-        columnResize: (index: number, newSize: number) => true;
-        hideColumnBorder: () => true;
-        columnResizeEnd: () => true;
-        columnResizeStart: () => true;
-        allColumnsResize: (newSize: number) => true;
-        moveDownFromHeaderCell: (index: number) => true;
-        headerCellSelect: (index: number) => true;
-        "update:newColumnButtonWidth": (width: number) => true;
-        newColumnButtonClick: (event: MouseEvent) => true;
-        newColumnButtonKeydownLeft: (event: KeyboardEvent) => true;
-        selectionKeydownDown: () => true;
-        headerCellDeselect: () => true;
-        headerCellStartEditing: (index: number, initialValue?: string) => true;
-        deleteColumn: (index: number) => true;
-    }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        createText(size: number): string;
+        onPageSizeSelect(newPageSize: string): void;
+    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("pageChange" | "pageSizeUpdate")[], "pageChange" | "pageSizeUpdate", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         tableConfig: {
             type: PropType<TableConfig>;
-            default: () => {};
-        };
-        columnHeaders: {
-            type: PropType<Array<string>>;
-            default: () => never[];
-        };
-        columnSubHeaders: {
-            type: PropType<Array<string | undefined>>;
-            default: () => never[];
-        };
-        columnSizes: {
-            type: PropType<Array<number>>;
-            default: () => never[];
-        };
-        columnSubMenuItems: {
-            type: PropType<Array<import('packages/components/dist/src').KdsMenuItem[] | undefined>>;
-            default: () => never[];
-        };
-        columnHeaderColors: {
-            type: PropType<Array<string | null>>;
-            default: () => never[];
-        };
-        columnDeletables: {
-            type: PropType<Array<boolean | undefined>>;
-            default: () => never[];
-        };
-        columnEditables: {
-            type: PropType<Array<boolean | undefined>>;
-            default: () => never[];
-        };
-        isSelected: {
-            type: BooleanConstructor;
-            default: boolean;
+            required: true;
         };
-        getDragHandleHeight: {
-            type: FunctionConstructor;
-            default: () => number;
+        pageConfig: {
+            type: PropType<PageConfig>;
+            required: true;
         };
-        showNewColumnButton: {
-            type: BooleanConstructor;
-            default: boolean;
+        tableState: {
+            type: PropType<TableState>;
+            required: true;
         };
-        selectedHeaderIndex: {
-            type: PropType<number | null>;
-            default: null;
+        pageState: {
+            type: PropType<PageState>;
+            required: true;
         };
     }>> & Readonly<{
-        onColumnResize?: ((index: number, newSize: number) => any) | undefined;
-        onHeaderSelect?: ((selected: boolean) => any) | undefined;
-        onShowColumnBorder?: (() => any) | undefined;
-        onHideColumnBorder?: (() => any) | undefined;
-        onColumnResizeEnd?: (() => any) | undefined;
-        onColumnResizeStart?: (() => any) | undefined;
-        onAllColumnsResize?: ((newSize: number) => any) | undefined;
-        onMoveDownFromHeaderCell?: ((index: number) => any) | undefined;
-        onHeaderCellSelect?: ((index: number) => any) | undefined;
-        "onUpdate:newColumnButtonWidth"?: ((width: number) => any) | undefined;
-        onNewColumnButtonClick?: ((event: MouseEvent) => any) | undefined;
-        onNewColumnButtonKeydownLeft?: ((event: KeyboardEvent) => any) | undefined;
-        onSelectionKeydownDown?: (() => any) | undefined;
-        onHeaderCellDeselect?: (() => any) | undefined;
-        onHeaderCellStartEditing?: ((index: number, initialValue?: string | undefined) => any) | undefined;
-        onDeleteColumn?: ((index: number) => any) | undefined;
-    }>, {
-        columnSizes: number[];
-        tableConfig: TableConfig;
-        getDragHandleHeight: Function;
-        columnHeaders: string[];
-        columnSubHeaders: (string | undefined)[];
-        columnSubMenuItems: (import('packages/components/dist/src').KdsMenuItem[] | undefined)[];
-        columnHeaderColors: (string | null)[];
-        columnDeletables: (boolean | undefined)[];
-        columnEditables: (boolean | undefined)[];
-        isSelected: boolean;
-        showNewColumnButton: boolean;
-        selectedHeaderIndex: number | null;
-    }, {}, {
-        KdsCheckbox: import('vue').DefineComponent<({
-            modelValue?: import('packages/components/dist/src').KdsCheckboxValue;
-        } & {
-            disabled?: boolean;
-            error?: boolean;
-            subText?: string;
-            preserveSubTextSpace?: boolean;
-        } & {
-            label: string;
-            title?: never;
-        }) | ({
-            modelValue?: import('packages/components/dist/src').KdsCheckboxValue;
-        } & {
-            disabled?: boolean;
-            error?: boolean;
-            subText?: string;
-            preserveSubTextSpace?: boolean;
-        } & {
-            label?: never;
-            title: string;
-        }), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            "update:modelValue": (value: import('packages/components/dist/src').KdsCheckboxValue) => any;
-        }, string, import('vue').PublicProps, Readonly<({
-            modelValue?: import('packages/components/dist/src').KdsCheckboxValue;
-        } & {
-            disabled?: boolean;
-            error?: boolean;
-            subText?: string;
-            preserveSubTextSpace?: boolean;
-        } & {
-            label: string;
-            title?: never;
-        }) | ({
-            modelValue?: import('packages/components/dist/src').KdsCheckboxValue;
-        } & {
-            disabled?: boolean;
-            error?: boolean;
-            subText?: string;
-            preserveSubTextSpace?: boolean;
-        } & {
-            label?: never;
-            title: string;
-        })> & Readonly<{
-            "onUpdate:modelValue"?: ((value: import('packages/components/dist/src').KdsCheckboxValue) => any) | undefined;
-        }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-        KdsButton: import('vue').DefineComponent<(import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
-        } & {
-            label: string;
-            leadingIcon?: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: import('packages/components/dist/src').KdsIconName;
-            ariaLabel?: never;
-        } & import('packages/components/dist/src/buttons/types').WithDestructive) | (import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
-        } & {
-            label?: never;
-            leadingIcon: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: never;
-            ariaLabel: string;
-        } & import('packages/components/dist/src/buttons/types').WithDestructive), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            click: (event: MouseEvent) => any;
-        }, string, import('vue').PublicProps, Readonly<(import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
-        } & {
-            label: string;
-            leadingIcon?: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: import('packages/components/dist/src').KdsIconName;
-            ariaLabel?: never;
-        } & import('packages/components/dist/src/buttons/types').WithDestructive) | (import('packages/components/dist/src/types/testId').WithTestId & {
-            size?: import('packages/components/dist/src').KdsButtonSize;
-            disabled?: boolean;
-            title?: string;
-            variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
-        } & {
-            label?: never;
-            leadingIcon: import('packages/components/dist/src').KdsIconName;
-            trailingIcon?: never;
-            ariaLabel: string;
-        } & import('packages/components/dist/src/buttons/types').WithDestructive)> & Readonly<{
-            onClick?: ((event: MouseEvent) => any) | undefined;
+        onPageChange?: ((...args: any[]) => any) | undefined;
+        onPageSizeUpdate?: ((...args: any[]) => any) | undefined;
+    }>, {}, {}, {
+        PageNavigation: import('vue').DefineComponent<{
+            currentItems?: number;
+            pageSize?: number;
+            currentPage?: number;
+        }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            pageChange: (newPageNumber: number) => any;
+        }, string, import('vue').PublicProps, Readonly<{
+            currentItems?: number;
+            pageSize?: number;
+            currentPage?: number;
+        }> & Readonly<{
+            onPageChange?: ((newPageNumber: number) => any) | undefined;
         }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+        PageRowRange: import('vue').DefineComponent<{
+            currentItems?: number;
+            pageSize?: number;
+            currentPage?: number;
+            showTableSize?: boolean;
+            rowLabel?: string;
+        }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+            currentItems?: number;
+            pageSize?: number;
+            currentPage?: number;
+            showTableSize?: boolean;
+            rowLabel?: string;
+        }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
         KdsMenuButton: import('vue').DefineComponent<({
             modelValue?: boolean;
         } & import('packages/components/dist/src/types/testId').WithTestId & {
@@ -3451,7 +2583,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                     errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
                 };
                 $forceUpdate: () => void;
-                $nextTick: typeof nextTick;
+                $nextTick: typeof import('vue').nextTick;
                 $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
             } & Readonly<{}> & Omit<{} & (Readonly<({
                 modelValue?: boolean;
@@ -3510,6 +2642,476 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             }, {}, {}, {}, {}> | null;
         }, any>;
     }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    Header: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        tableConfig: {
+            type: PropType<TableConfig>;
+            default: () => {};
+        };
+        actionConfig: {
+            type: PropType<ActionConfig>;
+            default: () => {};
+        };
+        columns: {
+            type: PropType<ColumnConfig[]>;
+            default: () => never[];
+        };
+        colFilterValues: {
+            type: PropType<ColFilterValues>;
+            default: () => {};
+        };
+        colSizes: {
+            type: PropType<number[]>;
+            default: () => never[];
+        };
+        colSortValues: {
+            type: PropType<ColSortValue[]>;
+            default: () => never[];
+        };
+        isSelected: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        getDragHandleHeight: {
+            type: PropType<() => number>;
+            default: () => number;
+        };
+        showNewColumnButton: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        selectedHeaderIndex: {
+            type: PropType<number | null>;
+            default: null;
+        };
+    }>, {
+        indexedColumns: Ref<[ColumnConfig, number][], [ColumnConfig, number][]>;
+        headerStyles: import('vue').MaybeRef<import('vue').CSSProperties>;
+        onHeaderCellKeydown: (event: KeyboardEvent, columnIndex: number) => void;
+    }, {
+        minimumColumnWidth: number;
+        resizingColumnIndex: null | number;
+        focusedHeaderIndex: null | number;
+    }, {
+        headerSelectionOverlayStyle(): Record<string, string> | null;
+    }, {
+        columnSize(columnIndex: number): number;
+        sortDirection(columnIndex: number): -1 | 0 | 1;
+        onHeaderCellFocus(columnIndex: number): void;
+        onHeaderCellBlur(columnIndex: number): void;
+        emitNewColumnButtonWidth(): void;
+        onSelect(): void;
+        onHeaderClick(ind: number): void;
+        onColumnResizeStart(columnIndex: number): void;
+        onColumnResizeEnd(): void;
+        onColumnResize(columnIndex: number, newSize: number): void;
+        onAllColumnsResize(newSize: number): void;
+        onColumnSort(columnIndex: number, direction: -1 | 0 | 1): void;
+        onOpenActionBarFilterControl(columnIndex: number): void;
+        onClearColumnFilter(columnIndex: number): void;
+        onNewColumnButtonClick(event: MouseEvent): void;
+        onNewColumnButtonKeydownLeft(event: KeyboardEvent): void;
+        onDeleteColumn(ind: number): void;
+        getHeaderCellWidths(): number[];
+        onKeydownTab(): void;
+        onKeydownLeft(columnIndex: number): void;
+        onKeydownRight(columnIndex: number): void;
+        onKeydownDown(columnIndex: number): void;
+        focusHeaderCell(cellInd: number): void;
+        isColumnHeaderFocusable(cellInd: number): boolean;
+        focusNewColumnButton(): void;
+        focusSelectionCheckbox(): void;
+    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        headerSelect: (selected: boolean) => true;
+        showColumnBorder: () => true;
+        columnResize: (index: number, newSize: number) => true;
+        hideColumnBorder: () => true;
+        columnResizeEnd: () => true;
+        columnResizeStart: () => true;
+        allColumnsResize: (newSize: number) => true;
+        columnSort: (index: number, direction: -1 | 0 | 1) => true;
+        openActionBarFilterControl: (index: number) => true;
+        clearColumnFilter: (index: number) => true;
+        moveDownFromHeaderCell: (index: number) => true;
+        headerCellSelect: (index: number) => true;
+        "update:newColumnButtonWidth": (width: number) => true;
+        newColumnButtonClick: (event: MouseEvent) => true;
+        newColumnButtonKeydownLeft: (event: KeyboardEvent) => true;
+        selectionKeydownDown: () => true;
+        headerCellDeselect: () => true;
+        headerCellStartEditing: (index: number, initialValue?: string) => true;
+        deleteColumn: (index: number) => true;
+    }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        tableConfig: {
+            type: PropType<TableConfig>;
+            default: () => {};
+        };
+        actionConfig: {
+            type: PropType<ActionConfig>;
+            default: () => {};
+        };
+        columns: {
+            type: PropType<ColumnConfig[]>;
+            default: () => never[];
+        };
+        colFilterValues: {
+            type: PropType<ColFilterValues>;
+            default: () => {};
+        };
+        colSizes: {
+            type: PropType<number[]>;
+            default: () => never[];
+        };
+        colSortValues: {
+            type: PropType<ColSortValue[]>;
+            default: () => never[];
+        };
+        isSelected: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        getDragHandleHeight: {
+            type: PropType<() => number>;
+            default: () => number;
+        };
+        showNewColumnButton: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        selectedHeaderIndex: {
+            type: PropType<number | null>;
+            default: null;
+        };
+    }>> & Readonly<{
+        onColumnResize?: ((index: number, newSize: number) => any) | undefined;
+        onColumnSort?: ((index: number, direction: 0 | 1 | -1) => any) | undefined;
+        onOpenActionBarFilterControl?: ((index: number) => any) | undefined;
+        onClearColumnFilter?: ((index: number) => any) | undefined;
+        onColumnResizeStart?: (() => any) | undefined;
+        onColumnResizeEnd?: (() => any) | undefined;
+        onAllColumnsResize?: ((newSize: number) => any) | undefined;
+        onHeaderSelect?: ((selected: boolean) => any) | undefined;
+        onShowColumnBorder?: (() => any) | undefined;
+        onHideColumnBorder?: (() => any) | undefined;
+        onMoveDownFromHeaderCell?: ((index: number) => any) | undefined;
+        onHeaderCellSelect?: ((index: number) => any) | undefined;
+        "onUpdate:newColumnButtonWidth"?: ((width: number) => any) | undefined;
+        onNewColumnButtonClick?: ((event: MouseEvent) => any) | undefined;
+        onNewColumnButtonKeydownLeft?: ((event: KeyboardEvent) => any) | undefined;
+        onSelectionKeydownDown?: (() => any) | undefined;
+        onHeaderCellDeselect?: (() => any) | undefined;
+        onHeaderCellStartEditing?: ((index: number, initialValue?: string | undefined) => any) | undefined;
+        onDeleteColumn?: ((index: number) => any) | undefined;
+    }>, {
+        columns: ColumnConfig[];
+        colSizes: number[];
+        tableConfig: TableConfig;
+        getDragHandleHeight: () => number;
+        colFilterValues: ColFilterValues;
+        colSortValues: ColSortValue[];
+        actionConfig: ActionConfig;
+        isSelected: boolean;
+        showNewColumnButton: boolean;
+        selectedHeaderIndex: number | null;
+    }, {}, {
+        KdsCheckbox: import('vue').DefineComponent<({
+            modelValue?: import('packages/components/dist/src').KdsCheckboxValue;
+        } & {
+            disabled?: boolean;
+            error?: boolean;
+            subText?: string;
+            preserveSubTextSpace?: boolean;
+        } & {
+            label: string;
+            title?: never;
+        }) | ({
+            modelValue?: import('packages/components/dist/src').KdsCheckboxValue;
+        } & {
+            disabled?: boolean;
+            error?: boolean;
+            subText?: string;
+            preserveSubTextSpace?: boolean;
+        } & {
+            label?: never;
+            title: string;
+        }), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            "update:modelValue": (value: import('packages/components/dist/src').KdsCheckboxValue) => any;
+        }, string, import('vue').PublicProps, Readonly<({
+            modelValue?: import('packages/components/dist/src').KdsCheckboxValue;
+        } & {
+            disabled?: boolean;
+            error?: boolean;
+            subText?: string;
+            preserveSubTextSpace?: boolean;
+        } & {
+            label: string;
+            title?: never;
+        }) | ({
+            modelValue?: import('packages/components/dist/src').KdsCheckboxValue;
+        } & {
+            disabled?: boolean;
+            error?: boolean;
+            subText?: string;
+            preserveSubTextSpace?: boolean;
+        } & {
+            label?: never;
+            title: string;
+        })> & Readonly<{
+            "onUpdate:modelValue"?: ((value: import('packages/components/dist/src').KdsCheckboxValue) => any) | undefined;
+        }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+        KdsButton: import('vue').DefineComponent<(import('packages/components/dist/src/types/testId').WithTestId & {
+            size?: import('packages/components/dist/src').KdsButtonSize;
+            disabled?: boolean;
+            title?: string;
+            variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+        } & {
+            label: string;
+            leadingIcon?: import('packages/components/dist/src').KdsIconName;
+            trailingIcon?: import('packages/components/dist/src').KdsIconName;
+            ariaLabel?: never;
+        } & import('packages/components/dist/src/buttons/types').WithDestructive) | (import('packages/components/dist/src/types/testId').WithTestId & {
+            size?: import('packages/components/dist/src').KdsButtonSize;
+            disabled?: boolean;
+            title?: string;
+            variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+        } & {
+            label?: never;
+            leadingIcon: import('packages/components/dist/src').KdsIconName;
+            trailingIcon?: never;
+            ariaLabel: string;
+        } & import('packages/components/dist/src/buttons/types').WithDestructive), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            click: (event: MouseEvent) => any;
+        }, string, import('vue').PublicProps, Readonly<(import('packages/components/dist/src/types/testId').WithTestId & {
+            size?: import('packages/components/dist/src').KdsButtonSize;
+            disabled?: boolean;
+            title?: string;
+            variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+        } & {
+            label: string;
+            leadingIcon?: import('packages/components/dist/src').KdsIconName;
+            trailingIcon?: import('packages/components/dist/src').KdsIconName;
+            ariaLabel?: never;
+        } & import('packages/components/dist/src/buttons/types').WithDestructive) | (import('packages/components/dist/src/types/testId').WithTestId & {
+            size?: import('packages/components/dist/src').KdsButtonSize;
+            disabled?: boolean;
+            title?: string;
+            variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+        } & {
+            label?: never;
+            leadingIcon: import('packages/components/dist/src').KdsIconName;
+            trailingIcon?: never;
+            ariaLabel: string;
+        } & import('packages/components/dist/src/buttons/types').WithDestructive)> & Readonly<{
+            onClick?: ((event: MouseEvent) => any) | undefined;
+        }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+        HeaderCell: {
+            new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+                column: ColumnConfig;
+                colFilterValue?: FilterValue;
+                tableConfig: TableConfig;
+                actionConfig: ActionConfig;
+                sortDirection: -1 | 0 | 1;
+                columnSize?: number;
+                focused: boolean;
+                selected: boolean;
+                otherColumnResizing: boolean;
+                getDragHandleHeight: () => number;
+            }> & Readonly<{
+                onColumnResize?: ((newSize: number) => any) | undefined;
+                onOnColumnSort?: ((direction: 0 | 1 | -1) => any) | undefined;
+                onOpenActionBarFilterControl?: (() => any) | undefined;
+                onClearColumnFilter?: (() => any) | undefined;
+                onOnHeaderCellFocus?: (() => any) | undefined;
+                onOnHeaderCellBlur?: (() => any) | undefined;
+                onOnHeaderClick?: (() => any) | undefined;
+                onOnKeydownTab?: (() => any) | undefined;
+                onOnKeydownLeft?: (() => any) | undefined;
+                onOnKeydownRight?: (() => any) | undefined;
+                onOnKeydownDown?: (() => any) | undefined;
+                onOnHeaderCellKeydown?: ((event: KeyboardEvent) => any) | undefined;
+                onOnDeleteColumn?: (() => any) | undefined;
+                onColumnResizeStart?: (() => any) | undefined;
+                onColumnResizeEnd?: (() => any) | undefined;
+                onAllColumnsResize?: ((newSize: number) => any) | undefined;
+            }>, {
+                getHeaderCellWidth: () => number;
+                focus: () => void;
+                isFocusable: () => boolean;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                columnResize: (newSize: number) => any;
+                onColumnSort: (direction: 0 | 1 | -1) => any;
+                openActionBarFilterControl: () => any;
+                clearColumnFilter: () => any;
+                onHeaderCellFocus: () => any;
+                onHeaderCellBlur: () => any;
+                onHeaderClick: () => any;
+                onKeydownTab: () => any;
+                onKeydownLeft: () => any;
+                onKeydownRight: () => any;
+                onKeydownDown: () => any;
+                onHeaderCellKeydown: (event: KeyboardEvent) => any;
+                onDeleteColumn: () => any;
+                columnResizeStart: () => any;
+                columnResizeEnd: () => any;
+                allColumnsResize: (newSize: number) => any;
+            }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+                columnHeader: HTMLTableCellElement;
+                content: HTMLDivElement;
+                mainHeader: HTMLDivElement;
+                headerText: HTMLSpanElement;
+                columnDeleteButton: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<(import('packages/components/dist/src/types/testId').WithTestId & {
+                    size?: import('packages/components/dist/src').KdsButtonSize;
+                    disabled?: boolean;
+                    title?: string;
+                    variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+                } & {
+                    label: string;
+                    leadingIcon?: import('packages/components/dist/src').KdsIconName;
+                    trailingIcon?: import('packages/components/dist/src').KdsIconName;
+                    ariaLabel?: never;
+                } & import('packages/components/dist/src/buttons/types').WithDestructive) | (import('packages/components/dist/src/types/testId').WithTestId & {
+                    size?: import('packages/components/dist/src').KdsButtonSize;
+                    disabled?: boolean;
+                    title?: string;
+                    variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+                } & {
+                    label?: never;
+                    leadingIcon: import('packages/components/dist/src').KdsIconName;
+                    trailingIcon?: never;
+                    ariaLabel: string;
+                } & import('packages/components/dist/src/buttons/types').WithDestructive)> & Readonly<{
+                    onClick?: ((event: MouseEvent) => any) | undefined;
+                }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                    click: (event: MouseEvent) => any;
+                }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+                    P: {};
+                    B: {};
+                    D: {};
+                    C: {};
+                    M: {};
+                    Defaults: {};
+                }, {} & (Readonly<(import('packages/components/dist/src/types/testId').WithTestId & {
+                    size?: import('packages/components/dist/src').KdsButtonSize;
+                    disabled?: boolean;
+                    title?: string;
+                    variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+                } & {
+                    label: string;
+                    leadingIcon?: import('packages/components/dist/src').KdsIconName;
+                    trailingIcon?: import('packages/components/dist/src').KdsIconName;
+                    ariaLabel?: never;
+                } & import('packages/components/dist/src/buttons/types').WithDestructive) | (import('packages/components/dist/src/types/testId').WithTestId & {
+                    size?: import('packages/components/dist/src').KdsButtonSize;
+                    disabled?: boolean;
+                    title?: string;
+                    variant?: import('packages/components/dist/src').KdsButtonVariant | undefined;
+                } & {
+                    label?: never;
+                    leadingIcon: import('packages/components/dist/src').KdsIconName;
+                    trailingIcon?: never;
+                    ariaLabel: string;
+                } & import('packages/components/dist/src/buttons/types').WithDestructive)> & Readonly<{
+                    onClick?: ((event: MouseEvent) => any) | undefined;
+                }>), {}, {}, {}, {}, {}> | null;
+            }, HTMLTableCellElement, import('vue').ComponentProvideOptions, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<{
+                column: ColumnConfig;
+                colFilterValue?: FilterValue;
+                tableConfig: TableConfig;
+                actionConfig: ActionConfig;
+                sortDirection: -1 | 0 | 1;
+                columnSize?: number;
+                focused: boolean;
+                selected: boolean;
+                otherColumnResizing: boolean;
+                getDragHandleHeight: () => number;
+            }> & Readonly<{
+                onColumnResize?: ((newSize: number) => any) | undefined;
+                onOnColumnSort?: ((direction: 0 | 1 | -1) => any) | undefined;
+                onOpenActionBarFilterControl?: (() => any) | undefined;
+                onClearColumnFilter?: (() => any) | undefined;
+                onOnHeaderCellFocus?: (() => any) | undefined;
+                onOnHeaderCellBlur?: (() => any) | undefined;
+                onOnHeaderClick?: (() => any) | undefined;
+                onOnKeydownTab?: (() => any) | undefined;
+                onOnKeydownLeft?: (() => any) | undefined;
+                onOnKeydownRight?: (() => any) | undefined;
+                onOnKeydownDown?: (() => any) | undefined;
+                onOnHeaderCellKeydown?: ((event: KeyboardEvent) => any) | undefined;
+                onOnDeleteColumn?: (() => any) | undefined;
+                onColumnResizeStart?: (() => any) | undefined;
+                onColumnResizeEnd?: (() => any) | undefined;
+                onAllColumnsResize?: ((newSize: number) => any) | undefined;
+            }>, {
+                getHeaderCellWidth: () => number;
+                focus: () => void;
+                isFocusable: () => boolean;
+            }, {}, {}, {}, {}>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & import('vue').ComponentOptionsBase<Readonly<{
+            column: ColumnConfig;
+            colFilterValue?: FilterValue;
+            tableConfig: TableConfig;
+            actionConfig: ActionConfig;
+            sortDirection: -1 | 0 | 1;
+            columnSize?: number;
+            focused: boolean;
+            selected: boolean;
+            otherColumnResizing: boolean;
+            getDragHandleHeight: () => number;
+        }> & Readonly<{
+            onColumnResize?: ((newSize: number) => any) | undefined;
+            onOnColumnSort?: ((direction: 0 | 1 | -1) => any) | undefined;
+            onOpenActionBarFilterControl?: (() => any) | undefined;
+            onClearColumnFilter?: (() => any) | undefined;
+            onOnHeaderCellFocus?: (() => any) | undefined;
+            onOnHeaderCellBlur?: (() => any) | undefined;
+            onOnHeaderClick?: (() => any) | undefined;
+            onOnKeydownTab?: (() => any) | undefined;
+            onOnKeydownLeft?: (() => any) | undefined;
+            onOnKeydownRight?: (() => any) | undefined;
+            onOnKeydownDown?: (() => any) | undefined;
+            onOnHeaderCellKeydown?: ((event: KeyboardEvent) => any) | undefined;
+            onOnDeleteColumn?: (() => any) | undefined;
+            onColumnResizeStart?: (() => any) | undefined;
+            onColumnResizeEnd?: (() => any) | undefined;
+            onAllColumnsResize?: ((newSize: number) => any) | undefined;
+        }>, {
+            getHeaderCellWidth: () => number;
+            focus: () => void;
+            isFocusable: () => boolean;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            columnResize: (newSize: number) => any;
+            onColumnSort: (direction: 0 | 1 | -1) => any;
+            openActionBarFilterControl: () => any;
+            clearColumnFilter: () => any;
+            onHeaderCellFocus: () => any;
+            onHeaderCellBlur: () => any;
+            onHeaderClick: () => any;
+            onKeydownTab: () => any;
+            onKeydownLeft: () => any;
+            onKeydownRight: () => any;
+            onKeydownDown: () => any;
+            onHeaderCellKeydown: (event: KeyboardEvent) => any;
+            onDeleteColumn: () => any;
+            columnResizeStart: () => any;
+            columnResizeEnd: () => any;
+            allColumnsResize: (newSize: number) => any;
+        }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+            $slots: {
+                subHeader?(_: {
+                    subHeader: string;
+                }): any;
+            };
+        });
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     Row: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./layout/Row.vue').RowProps> & Readonly<{
             onDataValueView?: ((index: number, anchor: VirtualElementAnchor) => any) | undefined;
@@ -3546,7 +3148,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             rowData: {
                 subMenuItemsForRow?: import('packages/components/dist/src').KdsMenuItem[];
             };
-            rowConfig: import('..').RowConfig;
+            rowConfig: RowConfig;
             minRowHeight: number;
             showDragHandle: boolean;
             selectCellsOnMove: boolean;
@@ -3699,7 +3301,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             rowData: {
                 subMenuItemsForRow?: import('packages/components/dist/src').KdsMenuItem[];
             };
-            rowConfig: import('..').RowConfig;
+            rowConfig: RowConfig;
             minRowHeight: number;
             showDragHandle: boolean;
             selectCellsOnMove: boolean;
@@ -3750,7 +3352,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         rowData: {
             subMenuItemsForRow?: import('packages/components/dist/src').KdsMenuItem[];
         };
-        rowConfig: import('..').RowConfig;
+        rowConfig: RowConfig;
         minRowHeight: number;
         showDragHandle: boolean;
         selectCellsOnMove: boolean;
@@ -3801,8 +3403,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 compact: boolean;
             };
             tableConfig: TableConfig;
+            subMenuConfig: SubMenuConfig;
             totalWidth: null | number;
-            columnSizes: number[];
+            colSizes: number[];
             currentRowHeight: number | "dynamic";
             columnResize: {
                 active: boolean;
@@ -3842,7 +3445,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                         itemSize: number;
                         compact: boolean;
                     };
-                    readonly columnSizes: number[];
+                    readonly colSizes: number[];
                     readonly specialColumnSizes: {
                         selectionSize: number;
                         deletionSize: number;
@@ -3962,8 +3565,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 compact: boolean;
             };
             tableConfig: TableConfig;
+            subMenuConfig: SubMenuConfig;
             totalWidth: null | number;
-            columnSizes: number[];
+            colSizes: number[];
             currentRowHeight: number | "dynamic";
             columnResize: {
                 active: boolean;
@@ -3997,8 +3601,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             compact: boolean;
         };
         tableConfig: TableConfig;
+        subMenuConfig: SubMenuConfig;
         totalWidth: null | number;
-        columnSizes: number[];
+        colSizes: number[];
         currentRowHeight: number | "dynamic";
         columnResize: {
             active: boolean;
@@ -4058,18 +3663,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         rowLabel?: string;
         title?: "Temporary view" | "Output";
         showTableSize?: boolean;
-        showFilterControl: boolean;
-        showSortControl: boolean;
-        sortConfig?: import('..').SortConfig;
+        actionConfig: ActionConfig;
+        colSortValues?: ColSortValue[];
+        colFilterValues: ColFilterValues;
         sortControlOptions: import('./control/actionbar/SortControl.vue').SortControlOptions;
-        filterConfigs?: Array<FilterConfig | undefined>;
-        columnHeaders: string[];
-        settingsItems?: import('packages/components/dist/src').KdsMenuItem[];
+        columns: ColumnConfig[];
     }, {
         openFilterControl: (columnIndex?: number) => void;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        onColumnSort: (colInd: number | undefined, direction: 0 | 1 | -1) => any;
-        columnFilter: (colInd: number, value: string | number | string[] | [null] | null | undefined) => any;
+        columnFilter: (colInd: number, value: FilterValue) => any;
+        onColumnSort: (columnId: string | undefined, direction: 0 | 1 | -1) => any;
         resetTemporaryView: () => any;
     }, string, import('vue').PublicProps, Readonly<{
         allRowsCount?: number;
@@ -4079,27 +3682,25 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         rowLabel?: string;
         title?: "Temporary view" | "Output";
         showTableSize?: boolean;
-        showFilterControl: boolean;
-        showSortControl: boolean;
-        sortConfig?: import('..').SortConfig;
+        actionConfig: ActionConfig;
+        colSortValues?: ColSortValue[];
+        colFilterValues: ColFilterValues;
         sortControlOptions: import('./control/actionbar/SortControl.vue').SortControlOptions;
-        filterConfigs?: Array<FilterConfig | undefined>;
-        columnHeaders: string[];
-        settingsItems?: import('packages/components/dist/src').KdsMenuItem[];
+        columns: ColumnConfig[];
     }> & Readonly<{
-        onOnColumnSort?: ((colInd: number | undefined, direction: 0 | 1 | -1) => any) | undefined;
-        onColumnFilter?: ((colInd: number, value: string | number | string[] | [null] | null | undefined) => any) | undefined;
+        onColumnFilter?: ((colInd: number, value: FilterValue) => any) | undefined;
+        onOnColumnSort?: ((columnId: string | undefined, direction: 0 | 1 | -1) => any) | undefined;
         onResetTemporaryView?: (() => any) | undefined;
     }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
         filterControlRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
-            filterConfigs?: Array<FilterConfig | undefined>;
-            columnHeaders: string[];
+            columns: ColumnConfig[];
+            colFilterValues: ColFilterValues;
         }> & Readonly<{
-            onColumnFilter?: ((colInd: number, value: string | number | string[] | [null] | null | undefined) => any) | undefined;
+            onColumnFilter?: ((colInd: number, value: FilterValue) => any) | undefined;
         }>, {
             openPopover: (columnIndex?: number) => Promise<void>;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            columnFilter: (colInd: number, value: string | number | string[] | [null] | null | undefined) => any;
+            columnFilter: (colInd: number, value: FilterValue) => any;
         }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
             filterPopoverRef: ({
                 $: import('vue').ComponentInternalInstance;
@@ -4230,14 +3831,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 };
             }) | null;
             filterBodyRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
-                filterConfigs?: Array<FilterConfig | undefined>;
-                columnHeaders: string[];
+                columns: ColumnConfig[];
+                colFilterValues: ColFilterValues;
             }> & Readonly<{
-                onColumnFilter?: ((colInd: number, value: string | number | string[] | [null] | null | undefined) => any) | undefined;
+                onColumnFilter?: ((colInd: number, value: FilterValue) => any) | undefined;
             }>, {
                 addAndFocusColumn: (columnIndex: number) => Promise<void>;
             }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-                columnFilter: (colInd: number, value: string | number | string[] | [null] | null | undefined) => any;
+                columnFilter: (colInd: number, value: FilterValue) => any;
             }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
                 P: {};
                 B: {};
@@ -4246,10 +3847,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 M: {};
                 Defaults: {};
             }, Readonly<{
-                filterConfigs?: Array<FilterConfig | undefined>;
-                columnHeaders: string[];
+                columns: ColumnConfig[];
+                colFilterValues: ColFilterValues;
             }> & Readonly<{
-                onColumnFilter?: ((colInd: number, value: string | number | string[] | [null] | null | undefined) => any) | undefined;
+                onColumnFilter?: ((colInd: number, value: FilterValue) => any) | undefined;
             }>, {
                 addAndFocusColumn: (columnIndex: number) => Promise<void>;
             }, {}, {}, {}, {}> | null;
@@ -4261,10 +3862,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             M: {};
             Defaults: {};
         }, Readonly<{
-            filterConfigs?: Array<FilterConfig | undefined>;
-            columnHeaders: string[];
+            columns: ColumnConfig[];
+            colFilterValues: ColFilterValues;
         }> & Readonly<{
-            onColumnFilter?: ((colInd: number, value: string | number | string[] | [null] | null | undefined) => any) | undefined;
+            onColumnFilter?: ((colInd: number, value: FilterValue) => any) | undefined;
         }>, {
             openPopover: (columnIndex?: number) => Promise<void>;
         }, {}, {}, {}, {}> | null;