diff --git a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx index 410de38b0..7d8e3a380 100644 --- a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx +++ b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx @@ -17,7 +17,7 @@ import { usePlugin, useValue, } from 'flipper-plugin'; -import React, {useCallback, useEffect, useRef} from 'react'; +import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import {FrameworkEvent, Id, NodeMap} from '../ClientTypes'; import {plugin} from '../index'; import {Button, Result, Tooltip} from 'antd'; @@ -60,6 +60,21 @@ export function FrameworkEventsTable({ } }, [instance.uiActions, isTree, nodeId]); + const allColumns = useMemo(() => { + const customColumnKeys = instance.frameworkEventsCustomColumns.get(); + + const customColumns = [...customColumnKeys].map( + (customKey: string) => + ({ + key: customKey, + title: startCase(customKey), + onRender: (row: AugmentedFrameworkEvent) => row.payload?.[customKey], + } as DataTableColumn), + ); + + return staticColumns.concat(customColumns); + }, [instance.frameworkEventsCustomColumns]); + const onSelectRow = useCallback( (event: FrameworkEvent | undefined): void => { instance.uiActions.onFocusNode(event?.nodeId); @@ -72,7 +87,7 @@ export function FrameworkEventsTable({ dataSource={instance.frameworkEvents} tableManagerRef={managerRef} onSelect={onSelectRow} - columns={columns} + columns={allColumns} extraActions={