diff --git a/packages/ui-vue/components/data-grid/src/data-grid.component.tsx b/packages/ui-vue/components/data-grid/src/data-grid.component.tsx
index 73c3803aa30b84a14742b683a6b2624cde1995e8..cea5560e5e4e726128f13fffdce8a84af25d2d52 100644
--- a/packages/ui-vue/components/data-grid/src/data-grid.component.tsx
+++ b/packages/ui-vue/components/data-grid/src/data-grid.component.tsx
@@ -441,6 +441,16 @@ export default defineComponent({
             useVirtualScrollComposition.scrollToBottom();
         }
 
+        function selectRowById(dataItemId: string) {
+            const idField = useIdentifyComposition.idField.value;
+            const visibleItemToBeSelected = visibleDatas.value.find((visibleData: VisualData) => {
+                return visibleData.raw[idField] === dataItemId;
+            }) as VisualData;
+            if (visibleItemToBeSelected) {
+                useRowComposition.selectRow(visibleItemToBeSelected);
+            }
+        }
+
         function scrollToRowByIndex(index: number) {
             useVirtualScrollComposition.scrollToRowByIndex(index);
         }
@@ -450,7 +460,8 @@ export default defineComponent({
             addNewDataItem, addNewDataItemAtLast, removeDataItem, removeDataItemById, editDataItem,
             acceptDataItem, cancelDataItem, selectItemById, selectItemByIds, updateColumns, updateDataSource,
             updatePagination, getVisibleData, getVisibleDataByIds, getSelectedItems, getSelectionRow, getCurrentRowId,
-            endEditCell, clickRowItemById, clearSelection, unSelectItemByIds, scrollToBottom, scrollToRowByIndex
+            endEditCell, clickRowItemById, clearSelection, unSelectItemByIds, scrollToBottom, scrollToRowByIndex,
+            selectRowById
         };
 
         context.expose(dataGridComponentInstance);
diff --git a/packages/ui-vue/components/data-view/composition/types.ts b/packages/ui-vue/components/data-view/composition/types.ts
index cc856c10b696902fc640d5be44c70be462e89d0d..39f553fbbea169733151a5b9ab763e473094b5bc 100644
--- a/packages/ui-vue/components/data-view/composition/types.ts
+++ b/packages/ui-vue/components/data-view/composition/types.ts
@@ -947,6 +947,8 @@ export interface UseRow {
     onMouseoutRow: ($event: MouseEvent, dataItem: VisualData) => any;
 
     clickRowItem: (dataItem: VisualData) => void;
+
+    selectRow: (dataItem: VisualData, $event?: MouseEvent) => void;
 }
 
 export interface UseSelection {
diff --git a/packages/ui-vue/components/data-view/composition/use-row.ts b/packages/ui-vue/components/data-view/composition/use-row.ts
index 8020188138f3e6c64216fdc9b934815c99fc775d..b705d0b6923131f5a866bc13f22ae92623be99fd 100644
--- a/packages/ui-vue/components/data-view/composition/use-row.ts
+++ b/packages/ui-vue/components/data-view/composition/use-row.ts
@@ -86,9 +86,9 @@ export function useRow(
         return cellClassObject;
     }
 
-    function selectRow($event: MouseEvent, dataItem: VisualData) {
+    function selectRow(dataItem: VisualData, $event?: MouseEvent) {
         const singleSelectOnlyOnCheck = multiSelectOnClickRowWithShift.value &&
-            !$event.shiftKey || isSingleSelect.value;
+            !$event?.shiftKey || isSingleSelect.value;
         if (singleSelectOnlyOnCheck) {
             if (!props.selection?.keepSelectingOnClick) {
                 toggleSelectItem(dataItem, props.selection?.keepSelectingOnClick);
@@ -101,7 +101,7 @@ export function useRow(
         }
         const shouldToggleSelectRow = (
             multiSelectOnClickRowWithShift.value &&
-            $event.shiftKey) ||
+            $event?.shiftKey) ||
             multiSelectOnClickRow.value;
         if (shouldToggleSelectRow) {
             // onCheckAndClick or DependOnCheck and isMultiSelect
@@ -118,7 +118,7 @@ export function useRow(
         if (dataItem.disabled) {
             return;
         }
-        selectRow($event, dataItem);
+        selectRow(dataItem, $event);
         context.emit('clickRow', dataItem.index, dataItem.raw);
     }
 
@@ -141,7 +141,7 @@ export function useRow(
         if (dataItem.disabled) {
             return;
         }
-        selectRow($event, dataItem);
+        selectRow(dataItem, $event);
         raiseClickRowEvent(dataItem);
     }
 
@@ -186,6 +186,7 @@ export function useRow(
     return {
         activeRowById,
         clickRowItem,
+        selectRow,
         gridCellClass,
         gridHierarchyCellClass,
         gridRowClass,
diff --git a/packages/ui-vue/components/date-picker/src/components/date-picker-container/date-picker-container.component.tsx b/packages/ui-vue/components/date-picker/src/components/date-picker-container/date-picker-container.component.tsx
index 3da0dfc281a58f49776e8aad305ff94d931e8046..f482027b560a9d9b5f3b61ff44372ff327a67b22 100644
--- a/packages/ui-vue/components/date-picker/src/components/date-picker-container/date-picker-container.component.tsx
+++ b/packages/ui-vue/components/date-picker/src/components/date-picker-container/date-picker-container.component.tsx
@@ -16,7 +16,7 @@
 import { computed, defineComponent, onMounted, ref, SetupContext, watch, watchEffect } from "vue";
 import { cloneDeep } from "lodash-es";
 import { useDateFormat, formatTime, getTimeObject } from '@farris/ui-vue/components/common';
-import { FTimePickerTimeView, TimeValueText } from '@farris/ui-vue/components/time-picker';
+import { convertToDate, FTimePickerTimeView, TimeValueText } from '@farris/ui-vue/components/time-picker';
 import { FButton } from "@farris/ui-vue/components/button";
 import { datePickerContainerProps, DatePickerContainerProps, DisplayMode } from "./date-picker-container.props";
 import FCalenderNavBar from '../calendar-navbar/calendar-navbar.component';
diff --git a/packages/ui-vue/components/tabs/src/designer/tab-header-item.design.component.tsx b/packages/ui-vue/components/tabs/src/designer/tab-header-item.design.component.tsx
index 90bc26b92ea2c0bd678e297d534621a2a8c1bafd..71df22df07734bc881fb463e636c55ff37928d35 100644
--- a/packages/ui-vue/components/tabs/src/designer/tab-header-item.design.component.tsx
+++ b/packages/ui-vue/components/tabs/src/designer/tab-header-item.design.component.tsx
@@ -2,7 +2,7 @@
 import { computed, Ref, ref, watch, nextTick } from "vue";
 import { DesignerComponentInstance } from "@farris/ui-vue/components/designer-canvas";
 import { TabPageContext, UseOnePage, UseDesignTabs } from "../composition/types";
-import { TabPageDesignProps } from "../components/tab-page.props";
+import { TabPageDesignProps } from "../designer/tab-page.design.props";
 import { TabsProps } from "../tabs.props";
 
 
diff --git a/packages/ui-vue/components/tabs/src/designer/tab-page.design.component.tsx b/packages/ui-vue/components/tabs/src/designer/tab-page.design.component.tsx
index 1aababf8b4f380b40e2cf1c24bbd5f73354011da..2e002a2b35c62e8af86a264dbe272b0107e2bf5e 100644
--- a/packages/ui-vue/components/tabs/src/designer/tab-page.design.component.tsx
+++ b/packages/ui-vue/components/tabs/src/designer/tab-page.design.component.tsx
@@ -18,7 +18,7 @@ import { JSX } from 'vue/jsx-runtime';
 import { DesignerItemContext, useDesignerComponent, DesignerHostService } from '@farris/ui-vue/components/designer-canvas';
 import FSection from '@farris/ui-vue/components/section';
 import { TabPageContext, TabsContext } from '../composition/types';
-import { TabPageDesignProps, tabPageDesignProps} from '../components/tab-page.props';
+import { TabPageDesignProps, tabPageDesignProps} from './tab-page.design.props';
 import { useDesignerRules } from './tab-page-use-designer-rules';
 
 export default defineComponent({
diff --git a/packages/ui-vue/components/tabs/src/designer/tab-page.design.props.ts b/packages/ui-vue/components/tabs/src/designer/tab-page.design.props.ts
index 64672f1bac36ec992d086ddce39c1e4dd72c65db..3968a79047f0a145d2a244ced3dc3594c51a909e 100644
--- a/packages/ui-vue/components/tabs/src/designer/tab-page.design.props.ts
+++ b/packages/ui-vue/components/tabs/src/designer/tab-page.design.props.ts
@@ -3,4 +3,11 @@ import { tabPageProps, TabPageProps } from '@farris/ui-vue/components/tabs';
 import { createPropsResolver } from '@farris/ui-vue/components/dynamic-resolver';
 import { schemaMapper } from '../schema/tab-page-schema-mapper';
 import tabPageSchema from '../schema/tab-page.schema.json';
+import { ExtractPropTypes } from 'vue';
 export const tabPagePropsResolver = createPropsResolver<TabPageProps>(tabPageProps, tabPageSchema, schemaMapper);
+export const tabPageDesignProps = Object.assign({}, tabPageProps,
+    {
+        titleHtml: { type: String, default: '' },
+    });
+export type TabPageDesignProps = ExtractPropTypes<typeof tabPageDesignProps>;
+export const tabPageDesignPropsResolver = createPropsResolver<TabPageProps>(tabPageDesignProps, tabPageSchema, schemaMapper);
\ No newline at end of file