Implementation:FlowiseAI Flowise ExecutionsListTable

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Tables, Agent Executions
Last Updated	2026-02-12 07:00 GMT

Overview

ExecutionsListTable is a React table component that displays a sortable, selectable list of agent flow execution records with status icons, timestamps, session IDs, and agentflow names.

Description

This component renders a Material-UI Table with styled cells and rows, providing sortable columns for name, updated date, and created date. Each execution row displays a color-coded status icon (FINISHED, ERROR, TIMEOUT, TERMINATED, STOPPED, or INPROGRESS), the associated agentflow name, session ID, and formatted timestamps. The table supports row selection via checkboxes with select-all capability, and persists sort preferences to localStorage. It shows skeleton loading states during data fetch.

Usage

Use this component within the Agent Executions view to render the list of execution records. It is typically paired with pagination and filter controls.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/table/ExecutionsListTable.jsx
• Lines: 1-306

Signature

export const ExecutionsListTable = ({ data, isLoading, onExecutionRowClick, onSelectionChange }) => { ... }

ExecutionsListTable.propTypes = {
    data: PropTypes.array,
    isLoading: PropTypes.bool,
    onExecutionRowClick: PropTypes.func,
    onSelectionChange: PropTypes.func,
    className: PropTypes.string
}

ExecutionsListTable.displayName = 'ExecutionsListTable'

Import

import { ExecutionsListTable } from '@/ui-component/table/ExecutionsListTable'

I/O Contract

Inputs

Name	Type	Required	Description
data	array	Yes	Array of execution objects containing id, state, updatedDate, createdDate, sessionId, and agentflow details
isLoading	bool	No	When true, displays skeleton loading placeholders instead of data rows
onExecutionRowClick	func	No	Callback invoked with the execution row object when a row is clicked
onSelectionChange	func	No	Callback invoked with an array of selected execution IDs when selection changes

Outputs

Name	Type	Description
Rendered UI	JSX.Element	A sortable, selectable Material-UI table of execution records

Helper Functions

getIconFromStatus(state, theme)

Returns a React component for the status icon based on execution state:

• FINISHED -- CheckCircleIcon (success color)
• ERROR / TIMEOUT -- ErrorIcon (error color)
• TERMINATED -- IconCircleXFilled (error color)
• STOPPED -- StopCircleIcon (error color)
• INPROGRESS -- IconLoader with spin animation (warning color)

getIconColor(state)

Returns MUI color path string (e.g., 'success.dark', 'error.main') for a given execution state.

Usage Examples

Basic Usage

import { ExecutionsListTable } from '@/ui-component/table/ExecutionsListTable'

<ExecutionsListTable
    data={executions}
    isLoading={isLoading}
    onExecutionRowClick={(row) => openExecutionDetails(row)}
    onSelectionChange={(selectedIds) => setSelectedExecutionIds(selectedIds)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Execution_Monitoring