@orchestrator-ui/orchestrator-ui-components 1.38.2 → 2.0.0

package/src/pages/metadata/WfoProductsPage.tsx

@@ -2,9 +2,11 @@ import React, { useEffect, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import type { Pagination } from '@elastic/eui/src/components';
-
-import type { WfoDataSorting, WfoTableColumns } from '@/components';
+import {
+    WfoDataSorting,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
+} from '@/components';
 import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
@@ -13,13 +15,14 @@ import {
     WfoDateTime,
     WfoProductBlockBadge,
     WfoProductStatusBadge,
-    WfoTableWithFilter,
     getDataSortHandler,
-    getPageChangeHandler,
     getQueryStringHandler,
 } from '@/components';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
 import { WfoFirstPartUUID } from '@/components/WfoTable/WfoFirstPartUUID';
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
+import { ColumnType, Pagination } from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import {
     useDataDisplayParams,
     useShowToastMessage,
@@ -43,15 +46,7 @@ import {
 
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 
-const PRODUCT_FIELD_PRODUCT_ID: keyof ProductDefinition = 'productId';
 const PRODUCT_FIELD_NAME: keyof ProductDefinition = 'name';
-const PRODUCT_FIELD_DESCRIPTION: keyof ProductDefinition = 'description';
-const PRODUCT_FIELD_TAG: keyof ProductDefinition = 'tag';
-const PRODUCT_FIELD_PRODUCT_TYPE: keyof ProductDefinition = 'productType';
-const PRODUCT_FIELD_STATUS: keyof ProductDefinition = 'status';
-const PRODUCT_FIELD_PRODUCT_BLOCKS: keyof ProductDefinition = 'productBlocks';
-const PRODUCT_FIELD_FIXED_INPUTS: keyof ProductDefinition = 'fixedInputs';
-const PRODUCT_FIELD_CREATED_AT: keyof ProductDefinition = 'createdAt';
 
 type ProductDefinitionExportItem = Omit<
     ProductDefinition,
@@ -93,53 +88,53 @@ export const WfoProductsPage = () => {
             },
         });
 
-    const tableColumns: WfoTableColumns<ProductDefinition> = {
+    const tableColumns: WfoAdvancedTableColumnConfig<ProductDefinition> = {
         productId: {
-            field: PRODUCT_FIELD_PRODUCT_ID,
-            name: t('id'),
+            columnType: ColumnType.DATA,
+            label: t('id'),
             width: '90',
-            render: (value) => <WfoFirstPartUUID UUID={value} />,
+            renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
         },
         name: {
-            field: PRODUCT_FIELD_NAME,
-            name: t('name'),
+            columnType: ColumnType.DATA,
+            label: t('name'),
             width: '200',
-            render: (name) => (
+            renderData: (name) => (
                 <WfoProductBlockBadge badgeType={BadgeType.PRODUCT}>
                     {name}
                 </WfoProductBlockBadge>
             ),
         },
         tag: {
-            field: PRODUCT_FIELD_TAG,
-            name: t('tag'),
+            columnType: ColumnType.DATA,
+            label: t('tag'),
             width: '120',
-            render: (value) => (
+            renderData: (value) => (
                 <WfoProductBlockBadge badgeType={BadgeType.PRODUCT_TAG}>
                     {value}
                 </WfoProductBlockBadge>
             ),
         },
         description: {
-            field: PRODUCT_FIELD_DESCRIPTION,
-            name: t('description'),
+            columnType: ColumnType.DATA,
+            label: t('description'),
             width: '400',
         },
         productType: {
-            field: PRODUCT_FIELD_PRODUCT_TYPE,
-            name: t('productType'),
+            columnType: ColumnType.DATA,
+            label: t('productType'),
         },
         status: {
-            field: PRODUCT_FIELD_STATUS,
-            name: t('status'),
+            columnType: ColumnType.DATA,
+            label: t('status'),
             width: '90',
-            render: (value) => <WfoProductStatusBadge status={value} />,
+            renderData: (value) => <WfoProductStatusBadge status={value} />,
         },
         fixedInputs: {
-            field: PRODUCT_FIELD_FIXED_INPUTS,
-            name: t('fixedInputs'),
-            render: (fixedInputs) => (
+            columnType: ColumnType.DATA,
+            label: t('fixedInputs'),
+            renderData: (fixedInputs) => (
                 <>
                     {fixedInputs.map((fixedInput, index) => (
                         <WfoProductBlockBadge
@@ -153,9 +148,9 @@ export const WfoProductsPage = () => {
             ),
         },
         productBlocks: {
-            field: PRODUCT_FIELD_PRODUCT_BLOCKS,
-            name: t('productBlocks'),
-            render: (productBlocks) => (
+            columnType: ColumnType.DATA,
+            label: t('productBlocks'),
+            renderData: (productBlocks) => (
                 <>
                     {productBlocks.map((block, index) => (
                         <WfoProductBlockBadge
@@ -169,9 +164,9 @@ export const WfoProductsPage = () => {
             ),
         },
         createdAt: {
-            field: PRODUCT_FIELD_CREATED_AT,
-            name: t('createdAt'),
-            render: (date) => <WfoDateTime dateOrIsoString={date} />,
+            columnType: ColumnType.DATA,
+            label: t('createdAt'),
+            renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
         },
@@ -201,6 +196,8 @@ export const WfoProductsPage = () => {
         pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
     };
 
     const dataSorting: WfoDataSorting<ProductDefinition> = {
@@ -240,19 +237,16 @@ export const WfoProductsPage = () => {
 
     return (
         <WfoMetadataPageLayout>
-            <WfoTableWithFilter<ProductDefinition>
+            <WfoAdvancedTable
                 data={data?.products ?? []}
-                tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
                     filterFields,
                 )}
-                dataSorting={dataSorting}
+                dataSorting={[dataSorting]}
                 defaultHiddenColumns={tableDefaults?.hiddenColumns}
-                onUpdateDataSort={getDataSortHandler<ProductDefinition>(
-                    setDataDisplayParam,
-                )}
-                onUpdatePage={getPageChangeHandler<ProductDefinition>(
+                onUpdateDataSorting={getDataSortHandler<ProductDefinition>(
                     setDataDisplayParam,
                 )}
                 onUpdateQueryString={getQueryStringHandler<ProductDefinition>(

package/src/pages/metadata/WfoResourceTypesPage.tsx

@@ -3,23 +3,23 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import { EuiBadgeGroup } from '@elastic/eui';
-import type { Pagination } from '@elastic/eui/src/components';
 
 import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
     METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY,
     WfoProductBlockBadge,
-    WfoTableWithFilter,
     getDataSortHandler,
-    getPageChangeHandler,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
     getQueryStringHandler,
 } from '@/components';
-import type {
-    StoredTableConfig,
-    WfoDataSorting,
-    WfoTableColumns,
-} from '@/components';
+import type { StoredTableConfig, WfoDataSorting } from '@/components';
+import { WfoFirstPartUUID } from '@/components';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+import { ColumnType, Pagination } from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import {
     useDataDisplayParams,
     useShowToastMessage,
@@ -43,18 +43,10 @@ import {
     getCsvFileNameWithDate,
 } from '@/utils/csvDownload';
 
-import { WfoFirstPartUUID } from '../../components/WfoTable/WfoFirstPartUUID';
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '../../components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 
-export const RESOURCE_TYPE_FIELD_ID: keyof ResourceTypeDefinition =
-    'resourceTypeId';
 export const RESOURCE_TYPE_FIELD_TYPE: keyof ResourceTypeDefinition =
     'resourceType';
-export const RESOURCE_TYPE_FIELD_DESCRIPTION: keyof ResourceTypeDefinition =
-    'description';
-export const RESOURCE_TYPE_FIELD_PRODUCT_BLOCKS: keyof ResourceTypeDefinition =
-    'productBlocks';
 
 type ResourceTypeExportItem = Omit<ResourceTypeDefinition, 'productBlocks'> & {
     productBlocks: string;
@@ -92,32 +84,32 @@ export const WfoResourceTypesPage = () => {
             },
         });
 
-    const tableColumns: WfoTableColumns<ResourceTypeDefinition> = {
+    const tableColumns: WfoAdvancedTableColumnConfig<ResourceTypeDefinition> = {
         resourceTypeId: {
-            field: RESOURCE_TYPE_FIELD_ID,
-            name: t('resourceId'),
+            columnType: ColumnType.DATA,
+            label: t('resourceId'),
             width: '90',
-            render: (value) => <WfoFirstPartUUID UUID={value} />,
+            renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
         },
         resourceType: {
-            field: RESOURCE_TYPE_FIELD_TYPE,
-            name: t('type'),
+            columnType: ColumnType.DATA,
+            label: t('type'),
             width: '200',
-            render: (value) => (
+            renderData: (value) => (
                 <WfoProductBlockBadge badgeType={BadgeType.RESOURCE_TYPE}>
                     {value}
                 </WfoProductBlockBadge>
             ),
         },
         description: {
-            field: RESOURCE_TYPE_FIELD_DESCRIPTION,
-            name: t('description'),
+            columnType: ColumnType.DATA,
+            label: t('description'),
         },
         productBlocks: {
-            field: RESOURCE_TYPE_FIELD_PRODUCT_BLOCKS,
-            name: t('usedInProductBlocks'),
-            render: (productBlocks) => (
+            columnType: ColumnType.DATA,
+            label: t('usedInProductBlocks'),
+            renderData: (productBlocks) => (
                 <>
                     {productBlocks.map((productBlock, index) => (
                         <WfoProductBlockBadge
@@ -176,6 +168,8 @@ export const WfoResourceTypesPage = () => {
         pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
     };
     const mapToExportItems = (
         resourceTypesResponse: ResourceTypesResponse,
@@ -191,19 +185,16 @@ export const WfoResourceTypesPage = () => {
     };
     return (
         <WfoMetadataPageLayout>
-            <WfoTableWithFilter<ResourceTypeDefinition>
+            <WfoAdvancedTable
                 data={data ? data.resourceTypes : []}
-                tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
                     filterFields,
                 )}
-                dataSorting={dataSorting}
+                dataSorting={[dataSorting]}
                 defaultHiddenColumns={tableDefaults?.hiddenColumns}
-                onUpdateDataSort={getDataSortHandler<ResourceTypeDefinition>(
-                    setDataDisplayParam,
-                )}
-                onUpdatePage={getPageChangeHandler<ResourceTypeDefinition>(
+                onUpdateDataSorting={getDataSortHandler<ResourceTypeDefinition>(
                     setDataDisplayParam,
                 )}
                 onUpdateQueryString={getQueryStringHandler<ResourceTypeDefinition>(

package/src/pages/metadata/WfoTasksPage.tsx

@@ -3,10 +3,13 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import { EuiBadgeGroup } from '@elastic/eui';
-import type { Pagination } from '@elastic/eui/src/components';
 
-import { WfoTableWithFilter, WfoWorkflowTargetBadge } from '@/components';
-import type { WfoDataSorting, WfoTableColumns } from '@/components';
+import {
+    WfoWorkflowTargetBadge,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
+} from '@/components';
+import type { WfoDataSorting } from '@/components';
 import { StoredTableConfig } from '@/components';
 import {
     DEFAULT_PAGE_SIZE,
@@ -14,13 +17,15 @@ import {
     METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY,
     WfoProductBlockBadge,
 } from '@/components';
-import {
-    getDataSortHandler,
-    getPageChangeHandler,
-    getQueryStringHandler,
-} from '@/components';
+import { getDataSortHandler, getQueryStringHandler } from '@/components';
 import { WfoDateTime } from '@/components/WfoDateTime/WfoDateTime';
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+import {
+    ColumnType,
+    Pagination,
+} from '@/components/WfoTable/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import {
     useDataDisplayParams,
     useShowToastMessage,
@@ -91,33 +96,31 @@ export const WfoTasksPage = () => {
             },
         });
 
-    const tableColumns: WfoTableColumns<TaskListItem> = {
+    const tableColumns: WfoAdvancedTableColumnConfig<TaskListItem> = {
         name: {
-            field: 'name',
-            name: t('name'),
-            width: '20%',
-            render: (name) => (
+            columnType: ColumnType.DATA,
+            label: t('name'),
+            renderData: (name) => (
                 <WfoProductBlockBadge badgeType={BadgeType.TASK}>
                     {name}
                 </WfoProductBlockBadge>
             ),
         },
         description: {
-            field: 'description',
-            name: t('description'),
+            columnType: ColumnType.DATA,
+            label: t('description'),
             width: '40%',
         },
         target: {
-            field: 'target',
-            name: t('target'),
-            width: '15%',
-            render: (target) => <WfoWorkflowTargetBadge target={target} />,
+            columnType: ColumnType.DATA,
+            label: t('target'),
+            renderData: (target) => <WfoWorkflowTargetBadge target={target} />,
         },
         productTags: {
-            field: 'productTags',
-            name: t('productTags'),
+            columnType: ColumnType.DATA,
+            label: t('productTags'),
             width: '20%',
-            render: (productTags) => (
+            renderData: (productTags) => (
                 <>
                     {productTags
                         ?.filter(onlyUnique)
@@ -147,10 +150,10 @@ export const WfoTasksPage = () => {
             ),
         },
         createdAt: {
-            field: 'createdAt',
-            name: t('createdAt'),
+            columnType: ColumnType.DATA,
+            label: t('createdAt'),
             width: '15%',
-            render: (date) => <WfoDateTime dateOrIsoString={date} />,
+            renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
         },
@@ -188,6 +191,8 @@ export const WfoTasksPage = () => {
         pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
     };
 
     const mapToExportItems = (
@@ -212,19 +217,16 @@ export const WfoTasksPage = () => {
 
     return (
         <WfoMetadataPageLayout>
-            <WfoTableWithFilter<TaskListItem>
+            <WfoAdvancedTable
                 data={data ? mapTaskDefinitionToTaskListItem(data.tasks) : []}
-                tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
                     filterFields,
                 )}
-                dataSorting={dataSorting}
+                dataSorting={[dataSorting]}
                 defaultHiddenColumns={tableDefaults?.hiddenColumns}
-                onUpdateDataSort={getDataSortHandler<TaskListItem>(
-                    setDataDisplayParam,
-                )}
-                onUpdatePage={getPageChangeHandler<TaskListItem>(
+                onUpdateDataSorting={getDataSortHandler<TaskListItem>(
                     setDataDisplayParam,
                 )}
                 onUpdateQueryString={getQueryStringHandler<TaskListItem>(

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -3,9 +3,12 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import { EuiBadgeGroup } from '@elastic/eui';
-import type { Pagination } from '@elastic/eui/src/components';
 
-import type { WfoDataSorting, WfoTableColumns } from '@/components';
+import {
+    WfoDataSorting,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
+} from '@/components';
 import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
@@ -13,12 +16,17 @@ import {
     StoredTableConfig,
     WfoDateTime,
     WfoProductBlockBadge,
-    WfoTableWithFilter,
     WfoWorkflowTargetBadge,
     getDataSortHandler,
-    getPageChangeHandler,
     getQueryStringHandler,
 } from '@/components';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+import {
+    ColumnType,
+    Pagination,
+} from '@/components/WfoTable/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import {
     useDataDisplayParams,
     useShowToastMessage,
@@ -44,7 +52,6 @@ import {
     getCsvFileNameWithDate,
 } from '@/utils/csvDownload';
 
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '../../components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 import {
     graphQlWorkflowListMapper,
@@ -95,33 +102,31 @@ export const WfoWorkflowsPage = () => {
             },
         });
 
-    const tableColumns: WfoTableColumns<WorkflowListItem> = {
+    const tableColumns: WfoAdvancedTableColumnConfig<WorkflowListItem> = {
         name: {
-            field: 'name',
-            name: t('name'),
-            width: '20%',
-            render: (name) => (
+            columnType: ColumnType.DATA,
+            label: t('name'),
+            renderData: (name) => (
                 <WfoProductBlockBadge badgeType={BadgeType.WORKFLOW}>
                     {name}
                 </WfoProductBlockBadge>
             ),
         },
         description: {
-            field: 'description',
-            name: t('description'),
+            columnType: ColumnType.DATA,
+            label: t('description'),
             width: '40%',
         },
         target: {
-            field: 'target',
-            name: t('target'),
-            width: '15%',
-            render: (target) => <WfoWorkflowTargetBadge target={target} />,
+            columnType: ColumnType.DATA,
+            label: t('target'),
+            renderData: (target) => <WfoWorkflowTargetBadge target={target} />,
         },
         productTags: {
-            field: 'productTags',
-            name: t('productTags'),
+            columnType: ColumnType.DATA,
+            label: t('productTags'),
             width: '20%',
-            render: (productTags) => (
+            renderData: (productTags) => (
                 <>
                     {productTags
                         ?.filter(onlyUnique)
@@ -151,10 +156,10 @@ export const WfoWorkflowsPage = () => {
             ),
         },
         createdAt: {
-            field: 'createdAt',
-            name: t('createdAt'),
+            columnType: ColumnType.DATA,
+            label: t('createdAt'),
             width: '15%',
-            render: (date) => <WfoDateTime dateOrIsoString={date} />,
+            renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
         },
@@ -193,6 +198,8 @@ export const WfoWorkflowsPage = () => {
         pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
     };
 
     const mapToExportItems = (
@@ -212,7 +219,7 @@ export const WfoWorkflowsPage = () => {
 
     return (
         <WfoMetadataPageLayout>
-            <WfoTableWithFilter<WorkflowListItem>
+            <WfoAdvancedTable
                 data={
                     data
                         ? mapWorkflowDefinitionToWorkflowListItem(
@@ -220,17 +227,14 @@ export const WfoWorkflowsPage = () => {
                           )
                         : []
                 }
-                tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
                     filterFields,
                 )}
-                dataSorting={dataSorting}
+                dataSorting={[dataSorting]}
                 defaultHiddenColumns={tableDefaults?.hiddenColumns}
-                onUpdateDataSort={getDataSortHandler<WorkflowListItem>(
-                    setDataDisplayParam,
-                )}
-                onUpdatePage={getPageChangeHandler<WorkflowListItem>(
+                onUpdateDataSorting={getDataSortHandler<WorkflowListItem>(
                     setDataDisplayParam,
                 )}
                 onUpdateQueryString={getQueryStringHandler<WorkflowListItem>(

package/src/pages/tasks/WfoTasksListPage.tsx

@@ -10,12 +10,12 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import {
     ACTIVE_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY,
     COMPLETED_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY,
+    ColumnType,
     DEFAULT_PAGE_SIZE,
     StoredTableConfig,
     WfoFilterTabs,
     WfoIsAllowedToRender,
     WfoStartTaskButtonComboBox,
-    WfoTableColumns,
 } from '@/components';
 import { PATH_TASKS } from '@/components';
 import {
@@ -23,6 +23,8 @@ import {
     WfoProcessesList,
     WfoTitleWithWebsocketBadge,
 } from '@/components';
+import { toSortedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { ConfirmationDialogContext } from '@/contexts';
 import {
@@ -111,28 +113,32 @@ export const WfoTasksListPage = () => {
 
     // Changing the order of the keys, resulting in an updated column order in the table
     const handleOverrideTableColumns: (
-        defaultTableColumns: WfoTableColumns<ProcessListItem>,
-    ) => WfoTableColumns<ProcessListItem> = (defaultTableColumns) => ({
+        defaultTableColumns: WfoAdvancedTableColumnConfig<ProcessListItem>,
+    ) => WfoAdvancedTableColumnConfig<ProcessListItem> = (
+        defaultTableColumns,
+    ) => ({
         workflowName: {
-            field: 'workflowName',
-            name: t('taskName'),
-            render: (value, { processId }) => (
+            columnType: ColumnType.DATA,
+            label: t('taskName'),
+            renderData: (value, { processId }) => (
                 <Link href={`${PATH_TASKS}/${processId}`}>{value}</Link>
             ),
         },
-        lastStep: defaultTableColumns.lastStep,
-        lastStatus: defaultTableColumns.lastStatus,
-        workflowTarget: defaultTableColumns.workflowTarget,
-        productTag: defaultTableColumns.tag,
-        productName: defaultTableColumns.productName,
-        customer: defaultTableColumns.customer,
-        customerAbbreviation: defaultTableColumns.customerAbbreviation,
-        subscriptions: defaultTableColumns.subscriptions,
-        createdBy: defaultTableColumns.createdBy,
-        assignee: defaultTableColumns.assignee,
-        processId: defaultTableColumns.processId,
-        startedAt: defaultTableColumns.startedAt,
-        lastModifiedAt: defaultTableColumns.lastModifiedAt,
+        ...toSortedTableColumnConfig(defaultTableColumns, [
+            'lastStep',
+            'lastStatus',
+            'workflowTarget',
+            'tag',
+            'productName',
+            'customer',
+            'customerAbbreviation',
+            'subscriptions',
+            'createdBy',
+            'assignee',
+            'processId',
+            'startedAt',
+            'lastModifiedAt',
+        ]),
     });
 
     return (

package/src/utils/getObjectKeys.ts

@@ -0,0 +1,3 @@
+export const getObjectKeys = <T extends object>(
+    inputObject: T,
+): Array<keyof T> => Object.keys(inputObject) as Array<keyof T>;