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

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -4,17 +4,22 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
-import { Pagination } from '@elastic/eui';
-
 import {
     FilterQuery,
     PATH_SUBSCRIPTIONS,
+    Pagination,
     WfoDateTime,
     WfoInlineJson,
     WfoInsyncIcon,
     WfoJsonCodeBlock,
     WfoSubscriptionStatusBadge,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
 } from '@/components';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+import { ColumnType } from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import { DataDisplayParams, useShowToastMessage } from '@/hooks';
 import {
     useGetSubscriptionListQuery,
@@ -37,14 +42,10 @@ import {
     SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
     TableColumnKeys,
     WfoDataSorting,
-    WfoTableColumns,
-    WfoTableWithFilter,
+    WfoFirstPartUUID,
     getDataSortHandler,
-    getPageChangeHandler,
     getQueryStringHandler,
 } from '../WfoTable';
-import { WfoFirstPartUUID } from '../WfoTable/WfoFirstPartUUID';
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '../WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
 import {
     SubscriptionListItem,
     mapGraphQlSubscriptionsResultToPageInfo,
@@ -69,91 +70,88 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
     setDataDisplayParam,
     hiddenColumns,
 }) => {
-    // TODO: There seems to be a problem showing the product/productName in this list
-    // https://github.com/workfloworchestrator/orchestrator-ui/issues/262
-
     const router = useRouter();
     const t = useTranslations('subscriptions.index');
     const tError = useTranslations('errors');
     const { showToastMessage } = useShowToastMessage();
 
-    const tableColumns: WfoTableColumns<SubscriptionListItem> = {
-        subscriptionId: {
-            field: 'subscriptionId',
-            name: t('id'),
-            width: '100',
-            render: (value) => <WfoFirstPartUUID UUID={value} />,
-            renderDetails: (value) => value,
-        },
-        description: {
-            field: 'description',
-            name: t('description'),
-            width: '400',
-            render: (value, record) => (
-                <Link href={`/subscriptions/${record.subscriptionId}`}>
-                    {value}
-                </Link>
-            ),
-        },
-        status: {
-            field: 'status',
-            name: t('status'),
-            width: '110',
-            render: (value) => <WfoSubscriptionStatusBadge status={value} />,
-        },
-        insync: {
-            field: 'insync',
-            name: t('insync'),
-            width: '110',
-            render: (value) => <WfoInsyncIcon inSync={value} />,
-        },
-        productName: {
-            field: 'productName',
-            name: t('product'),
-        },
-        tag: {
-            field: 'tag',
-            name: t('tag'),
-            width: '100',
-        },
-        customerFullname: {
-            field: 'customerFullname',
-            name: t('customerFullname'),
-            width: '150',
-        },
-        customerShortcode: {
-            field: 'customerShortcode',
-            name: t('customerShortcode'),
-            width: '150',
-        },
-        startDate: {
-            field: 'startDate',
-            name: t('startDate'),
-            width: '150',
-            render: (value) => <WfoDateTime dateOrIsoString={value} />,
-            renderDetails: parseDateToLocaleDateTimeString,
-            clipboardText: parseDateToLocaleDateTimeString,
-        },
-        endDate: {
-            field: 'endDate',
-            name: t('endDate'),
-            width: '150',
-            render: (value) => <WfoDateTime dateOrIsoString={value} />,
-            renderDetails: parseDateToLocaleDateTimeString,
-            clipboardText: parseDateToLocaleDateTimeString,
-        },
-        note: {
-            field: 'note',
-            name: t('note'),
-        },
-        metadata: {
-            field: 'metadata',
-            name: t('metadata'),
-            render: (value) => <WfoInlineJson data={value} />,
-            renderDetails: (value) =>
-                value && <WfoJsonCodeBlock data={value} isBasicStyle />,
-        },
-    };
+    const tableColumnConfig: WfoAdvancedTableColumnConfig<SubscriptionListItem> =
+        {
+            subscriptionId: {
+                columnType: ColumnType.DATA,
+                label: t('id'),
+                renderData: (value) => <WfoFirstPartUUID UUID={value} />,
+                renderDetails: (value) => value,
+            },
+            description: {
+                columnType: ColumnType.DATA,
+                label: t('description'),
+                width: '400px',
+                renderData: (value, record) => (
+                    <Link href={`/subscriptions/${record.subscriptionId}`}>
+                        {value}
+                    </Link>
+                ),
+            },
+            status: {
+                columnType: ColumnType.DATA,
+                label: t('status'),
+                renderData: (value) => (
+                    <WfoSubscriptionStatusBadge status={value} />
+                ),
+            },
+            insync: {
+                columnType: ColumnType.DATA,
+                label: t('insync'),
+                renderData: (value) => <WfoInsyncIcon inSync={value} />,
+            },
+            productName: {
+                columnType: ColumnType.DATA,
+                label: t('product'),
+            },
+            tag: {
+                columnType: ColumnType.DATA,
+                label: t('tag'),
+                width: '100px',
+            },
+            customerFullname: {
+                columnType: ColumnType.DATA,
+                label: t('customerFullname'),
+                width: '150px',
+            },
+            customerShortcode: {
+                columnType: ColumnType.DATA,
+                label: t('customerShortcode'),
+                width: '150px',
+            },
+            startDate: {
+                columnType: ColumnType.DATA,
+                label: t('startDate'),
+                renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
+                renderDetails: parseDateToLocaleDateTimeString,
+                clipboardText: parseDateToLocaleDateTimeString,
+            },
+            endDate: {
+                columnType: ColumnType.DATA,
+                label: t('endDate'),
+                renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
+                renderDetails: parseDateToLocaleDateTimeString,
+                clipboardText: parseDateToLocaleDateTimeString,
+            },
+            note: {
+                columnType: ColumnType.DATA,
+                label: t('note'),
+                width: '100px',
+            },
+            metadata: {
+                columnType: ColumnType.DATA,
+                label: t('metadata'),
+                width: '100px',
+                renderData: (value) => <WfoInlineJson data={value} />,
+                renderDetails: (value) =>
+                    value && <WfoJsonCodeBlock data={value} isBasicStyle />,
+            },
+        };
 
     const { sortBy, queryString, pageIndex, pageSize } = dataDisplayParams;
 
@@ -175,7 +173,10 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             getQueryVariablesForExport(graphqlQueryVariables),
         ).unwrap();
 
-    const sortedColumnId = getTypedFieldFromObject(sortBy?.field, tableColumns);
+    const sortedColumnId = getTypedFieldFromObject(
+        sortBy?.field,
+        tableColumnConfig,
+    );
     if (!sortedColumnId) {
         router.replace(PATH_SUBSCRIPTIONS);
         return null;
@@ -186,15 +187,22 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
         sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
     };
     const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
+
     const pagination: Pagination = {
-        pageSize: dataDisplayParams.pageSize,
         pageIndex: dataDisplayParams.pageIndex,
+        pageSize: dataDisplayParams.pageSize,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ?? 0,
+        onChangePage:
+            getPageIndexChangeHandler<SubscriptionListItem>(
+                setDataDisplayParam,
+            ),
+        onChangeItemsPerPage:
+            getPageSizeChangeHandler<SubscriptionListItem>(setDataDisplayParam),
     };
 
     return (
-        <WfoTableWithFilter<SubscriptionListItem>
+        <WfoAdvancedTable
             queryString={dataDisplayParams.queryString}
             onUpdateQueryString={getQueryStringHandler<SubscriptionListItem>(
                 setDataDisplayParam,
@@ -204,29 +212,26 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
                     ? mapGraphQlSubscriptionsResultToSubscriptionListItems(data)
                     : []
             }
-            tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
-                tableColumns,
+            tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumnConfig,
                 sortFields,
                 filterFields,
             )}
             defaultHiddenColumns={hiddenColumns}
-            dataSorting={dataSorting}
-            pagination={pagination}
+            dataSorting={[dataSorting]}
             isLoading={isFetching}
             localStorageKey={SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY}
             detailModalTitle={'Details - Subscription'}
-            onUpdatePage={getPageChangeHandler<SubscriptionListItem>(
-                setDataDisplayParam,
-            )}
-            onUpdateDataSort={getDataSortHandler<SubscriptionListItem>(
+            pagination={pagination}
+            error={mapRtkErrorToWfoError(error)}
+            onUpdateDataSorting={getDataSortHandler<SubscriptionListItem>(
                 setDataDisplayParam,
             )}
-            error={mapRtkErrorToWfoError(error)}
             onExportData={csvDownloadHandler(
                 getSubscriptionListForExport,
                 mapGraphQlSubscriptionsResultToSubscriptionListItems,
                 mapGraphQlSubscriptionsResultToPageInfo,
-                Object.keys(tableColumns),
+                Object.keys(tableColumnConfig),
                 getCsvFileNameWithDate('Subscriptions'),
                 showToastMessage,
                 tError,

package/src/components/WfoTable/{WfoTableWithFilter/WfoTableWithFilter.tsx → WfoAdvancedTable/WfoAdvancedTable.tsx}

@@ -3,94 +3,70 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import {
-    Criteria,
     EuiButton,
     EuiButtonIcon,
     EuiFlexGroup,
     EuiFlexItem,
     EuiSpacer,
     EuiText,
-    Pagination,
 } from '@elastic/eui';
 
-import { WfoErrorWithMessage } from '@/components';
-import { useOrchestratorTheme } from '@/hooks';
-import { WfoArrowsExpand } from '@/icons';
-import { WfoGraphqlError } from '@/rtk';
-import { getDefaultTableConfig } from '@/utils/getDefaultTableConfig';
-
-import { getTypedFieldFromObject } from '../../../utils';
 import {
+    DEFAULT_PAGE_SIZE,
+    DEFAULT_PAGE_SIZES,
+    TableColumnKeys,
+    TableSettingsColumnConfig,
+    TableSettingsConfig,
+    TableSettingsModal,
+    WfoErrorWithMessage,
+    WfoInformationModal,
     WfoKeyValueTable,
     WfoKeyValueTableDataType,
-} from '../../WfoKeyValueTable/WfoKeyValueTable';
-import { WfoSearchField } from '../../WfoSearchBar';
-import { WfoInformationModal } from '../../WfoSettingsModal';
-import {
-    WfoBasicTable,
-    WfoBasicTableColumnsWithControlColumns,
-} from '../WfoBasicTable';
-import {
-    ColumnConfig,
-    TableConfig,
-    TableSettingsModal,
-} from '../WfoTableSettingsModal';
-import {
-    TableColumnKeys,
-    WfoDataSorting,
-    WfoTableColumns,
-    WfoTableControlColumnConfig,
-    WfoTableDataColumnConfig,
-} from '../utils/columns';
-import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES } from '../utils/constants';
-import {
+    WfoSearchField,
     clearTableConfigFromLocalStorage,
     setTableConfigToLocalStorage,
-} from '../utils/tableConfigPersistence';
-import { updateQueryString } from './updateQueryString';
+} from '@/components';
+import { getRowDetailData } from '@/components/WfoTable/WfoAdvancedTable/getRowDetailData';
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoArrowsExpand } from '@/icons';
+import { WfoGraphqlError } from '@/rtk';
+import { getDefaultTableConfig } from '@/utils';
+
+import { ColumnType, WfoTable, WfoTableProps } from '../WfoTable';
+import { updateQueryString } from '../WfoTableWithFilter/updateQueryString';
+import { WfoAdvancedTableColumnConfig } from './types';
 
-export type WfoTableWithFilterProps<T extends object> = {
-    data: T[];
-    tableColumns: WfoTableColumns<T>;
-    leadingControlColumns?: WfoTableControlColumnConfig<T>;
-    trailingControlColumns?: WfoTableControlColumnConfig<T>;
+export type WfoAdvancedTableProps<T extends object> = Omit<
+    WfoTableProps<T>,
+    'columnConfig'
+> & {
+    tableColumnConfig: WfoAdvancedTableColumnConfig<T>;
     defaultHiddenColumns?: TableColumnKeys<T>;
-    dataSorting: WfoDataSorting<T>;
-    pagination: Pagination;
     queryString?: string;
-    isLoading: boolean;
     localStorageKey: string;
     detailModal?: boolean;
     detailModalTitle?: string;
-    onUpdateQueryString: (queryString: string) => void;
-    onUpdatePage: (criterion: Criteria<T>['page']) => void;
-    onUpdateDataSort: (dataSorting: WfoDataSorting<T>) => void;
+    exportDataIsLoading?: boolean;
     error?: WfoGraphqlError[];
+    onUpdateQueryString: (queryString: string) => void;
     onExportData?: () => void;
-    exportDataIsLoading?: boolean;
 };
 
-export const WfoTableWithFilter = <T extends object>({
-    data,
-    tableColumns,
-    leadingControlColumns,
-    trailingControlColumns,
+export const WfoAdvancedTable = <T extends object>({
+    tableColumnConfig,
     defaultHiddenColumns = [],
-    dataSorting,
-    pagination,
     queryString,
-    isLoading,
     localStorageKey,
     detailModal = true,
     detailModalTitle = 'Details',
-    onUpdateQueryString,
-    onUpdatePage,
-    onUpdateDataSort,
+    exportDataIsLoading,
     error,
+    onUpdateQueryString,
     onExportData,
-    exportDataIsLoading = false,
-}: WfoTableWithFilterProps<T>) => {
+    ...tableProps
+}: WfoAdvancedTableProps<T>) => {
     const { theme } = useOrchestratorTheme();
+
     const [hiddenColumns, setHiddenColumns] =
         useState<TableColumnKeys<T>>(defaultHiddenColumns);
     const [showSettingsModal, setShowSettingsModal] = useState(false);
@@ -105,11 +81,13 @@ export const WfoTableWithFilter = <T extends object>({
         }
     }, [defaultHiddenColumns]);
 
-    const detailsIconColumn: WfoTableControlColumnConfig<T> = {
+    const { pagination } = tableProps;
+
+    const detailsIconColumn: WfoAdvancedTableColumnConfig<T> = {
         viewDetails: {
-            field: 'viewDetails',
+            columnType: ColumnType.CONTROL,
             width: '36px',
-            render: (_, row) => (
+            renderControl: (row) => (
                 <EuiFlexItem
                     css={{ cursor: 'pointer' }}
                     onClick={() => setSelectedDataForDetailModal(row)}
@@ -120,54 +98,30 @@ export const WfoTableWithFilter = <T extends object>({
         },
     };
 
-    const tableColumnsWithControlColumns: WfoBasicTableColumnsWithControlColumns<T> =
-        {
-            ...leadingControlColumns,
-            ...tableColumns,
-            ...trailingControlColumns,
-            ...(detailModal ? detailsIconColumn : []),
-        };
+    const tableColumnsWithControlColumns: WfoAdvancedTableColumnConfig<T> = {
+        ...(detailModal && detailsIconColumn),
+        ...tableColumnConfig,
+    };
+
+    const tableSettingsColumns: TableSettingsColumnConfig<T>[] = Object.entries(
+        tableColumnConfig,
+    ).map(([key, { label }]): TableSettingsColumnConfig<T> => {
+        const field = key as keyof T;
 
-    const tableSettingsColumns: ColumnConfig<T>[] = Object.entries<
-        WfoTableDataColumnConfig<T, keyof T>
-    >(tableColumns).map((keyValuePair) => {
-        const { field, name } = keyValuePair[1];
         return {
             field,
-            name,
+            name: label,
             isVisible: hiddenColumns.indexOf(field) === -1,
         };
     });
 
     const rowDetailData: WfoKeyValueTableDataType[] | undefined =
         selectedDataForDetailModal &&
-        Object.entries(tableColumns).map(([key]): WfoKeyValueTableDataType => {
-            const dataField = getTypedFieldFromObject(key, tableColumns);
-            if (dataField === null) {
-                return {
-                    key,
-                    value: undefined,
-                };
-            }
+        getRowDetailData(selectedDataForDetailModal, tableColumnConfig);
 
-            const { renderDetails, render, clipboardText, name } =
-                tableColumns[dataField];
-            const dataValue = selectedDataForDetailModal[dataField];
-            return {
-                key: name ?? dataField.toString(),
-                value: (renderDetails &&
-                    renderDetails(dataValue, selectedDataForDetailModal)) ??
-                    (render &&
-                        render(dataValue, selectedDataForDetailModal)) ?? (
-                        <>{dataValue}</>
-                    ),
-                textToCopy:
-                    clipboardText?.(dataValue, selectedDataForDetailModal) ??
-                    (typeof dataValue === 'string' ? dataValue : undefined),
-            };
-        });
-
-    const handleUpdateTableConfig = (updatedTableConfig: TableConfig<T>) => {
+    const handleUpdateTableConfig = (
+        updatedTableConfig: TableSettingsConfig<T>,
+    ) => {
         const updatedHiddenColumns = updatedTableConfig.columns
             .filter((column) => !column.isVisible)
             .map((hiddenColumn) => hiddenColumn.field);
@@ -177,10 +131,8 @@ export const WfoTableWithFilter = <T extends object>({
             hiddenColumns: updatedHiddenColumns,
             selectedPageSize: updatedTableConfig.selectedPageSize,
         });
-        onUpdatePage({
-            index: 0,
-            size: updatedTableConfig.selectedPageSize,
-        });
+        pagination?.onChangeItemsPerPage?.(updatedTableConfig.selectedPageSize);
+        pagination?.onChangePage?.(0);
     };
 
     const handleResetToDefaults = () => {
@@ -188,16 +140,10 @@ export const WfoTableWithFilter = <T extends object>({
         setHiddenColumns(defaultTableConfig.hiddenColumns);
         setShowSettingsModal(false);
         clearTableConfigFromLocalStorage(localStorageKey);
-        onUpdatePage({
-            index: 0,
-            size: defaultTableConfig.selectedPageSize ?? DEFAULT_PAGE_SIZE,
-        });
-    };
-
-    const onCriteriaChange = (criterion: Criteria<T>) => {
-        if (criterion.page) {
-            onUpdatePage(criterion.page);
-        }
+        pagination?.onChangeItemsPerPage?.(
+            defaultTableConfig.selectedPageSize ?? DEFAULT_PAGE_SIZE,
+        );
+        pagination?.onChangePage?.(0);
     };
 
     const searchModalText = t.rich('searchModalText', {
@@ -240,16 +186,10 @@ export const WfoTableWithFilter = <T extends object>({
             </EuiFlexGroup>
             {error && <WfoErrorWithMessage error={error} />}
             <EuiSpacer size="m" />
-            <WfoBasicTable
-                data={data}
-                columns={tableColumnsWithControlColumns}
+            <WfoTable
+                columnConfig={tableColumnsWithControlColumns}
                 hiddenColumns={hiddenColumns}
-                dataSorting={dataSorting}
-                onUpdateDataSorting={onUpdateDataSort}
-                pagination={pagination}
-                isLoading={isLoading}
-                onCriteriaChange={onCriteriaChange}
-                onDataSearch={({ field, searchText }) =>
+                onUpdateDataSearch={({ field, searchText }) =>
                     onUpdateQueryString(
                         updateQueryString(
                             queryString ?? '',
@@ -258,16 +198,18 @@ export const WfoTableWithFilter = <T extends object>({
                         ),
                     )
                 }
+                {...tableProps}
             />
+
             {showSettingsModal && (
                 <TableSettingsModal
                     tableConfig={{
                         columns: tableSettingsColumns,
                         selectedPageSize:
-                            pagination.pageSize ?? DEFAULT_PAGE_SIZE,
+                            pagination?.pageSize ?? DEFAULT_PAGE_SIZE,
                     }}
                     pageSizeOptions={
-                        pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZES
+                        pagination?.pageSizeOptions ?? DEFAULT_PAGE_SIZES
                     }
                     onClose={() => setShowSettingsModal(false)}
                     onUpdateTableConfig={handleUpdateTableConfig}

package/src/components/WfoTable/WfoAdvancedTable/getRowDetailData.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {
+    WfoAdvancedTableColumnConfig,
+    WfoAdvancedTableDataColumnConfigItem,
+} from '@/components/WfoTable/WfoAdvancedTable/types';
+import {
+    ColumnType,
+    WfoTableControlColumnConfigItem,
+} from '@/components/WfoTable/WfoTable';
+import { getTypedFieldFromObject } from '@/utils';
+
+export const getRowDetailData = <T extends object>(
+    selectedDataForDetailModal: T,
+    tableColumnConfig: WfoAdvancedTableColumnConfig<T>,
+) => {
+    const tableColumnConfigEntries: [
+        string,
+        (
+            | WfoTableControlColumnConfigItem<T>
+            | WfoAdvancedTableDataColumnConfigItem<T, keyof T>
+        ),
+    ][] = Object.entries(tableColumnConfig);
+
+    const dataColumnEntries = tableColumnConfigEntries.filter(
+        ([, tableColumnConfig]) =>
+            tableColumnConfig.columnType === ColumnType.DATA,
+    ) as [string, WfoAdvancedTableDataColumnConfigItem<T, keyof T>][];
+
+    return dataColumnEntries.map(([key, value]) => {
+        const dataField = getTypedFieldFromObject(key, tableColumnConfig);
+        if (dataField === null) {
+            return {
+                key,
+                value: undefined,
+            };
+        }
+
+        const { renderDetails, renderData, clipboardText, label } = value;
+        const dataValue = selectedDataForDetailModal[dataField];
+
+        return {
+            key: label ?? dataField.toString(),
+            value: (renderDetails &&
+                renderDetails(dataValue, selectedDataForDetailModal)) ??
+                (renderData &&
+                    renderData(dataValue, selectedDataForDetailModal)) ?? (
+                    <>{dataValue}</>
+                ),
+            textToCopy:
+                clipboardText?.(dataValue, selectedDataForDetailModal) ??
+                (typeof dataValue === 'string' ? dataValue : undefined),
+        };
+    });
+};

package/src/components/WfoTable/WfoAdvancedTable/index.ts

@@ -0,0 +1,4 @@
+export * from './getRowDetailData';
+export * from './toSortedTableColumnConfig';
+export * from './types';
+export * from './WfoAdvancedTable';

package/src/components/WfoTable/WfoAdvancedTable/toSortedTableColumnConfig.ts

@@ -0,0 +1,12 @@
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+
+export const toSortedTableColumnConfig = <T extends object>(
+    columnConfig: WfoAdvancedTableColumnConfig<T>,
+    columnKeys: (keyof WfoAdvancedTableColumnConfig<T>)[],
+): WfoAdvancedTableColumnConfig<T> =>
+    columnKeys.reduce((sortedConfig, key) => {
+        if (key in columnConfig) {
+            sortedConfig[key] = columnConfig[key];
+        }
+        return sortedConfig;
+    }, {} as WfoAdvancedTableColumnConfig<T>);

package/src/components/WfoTable/WfoAdvancedTable/types.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+import {
+    WfoTableControlColumnConfig,
+    WfoTableControlColumnConfigItem,
+    WfoTableDataColumnConfigItem,
+} from '@/components/WfoTable/WfoTable';
+
+export type WfoAdvancedTableDataColumnConfigItem<
+    T extends object,
+    Property extends keyof T,
+> = WfoTableDataColumnConfigItem<T, Property> & {
+    renderDetails?: (cellValue: T[Property], row: T) => ReactNode;
+    clipboardText?: (cellValue: T[Property], row: T) => string;
+};
+export type WfoAdvancedTableDataColumnConfig<T extends object> = {
+    [Property in keyof T]:
+        | WfoAdvancedTableDataColumnConfigItem<T, Property>
+        | WfoTableControlColumnConfigItem<T>;
+};
+export type WfoAdvancedTableColumnConfig<T extends object> = Partial<
+    WfoTableControlColumnConfig<T> | WfoAdvancedTableDataColumnConfig<T>
+>;