Implementation:FlowiseAI Flowise FlowListTable

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

Overview

FlowListTable is a React table component that renders a sortable list of chatflows or agentflows with columns for name, category, nodes, last modified date, and an actions menu.

Description

This component displays flow data in a styled Material-UI table with sortable Name and Last Modified Date columns. Each row links to the appropriate canvas editor (chatflow canvas, agent canvas, or v2 agent canvas) based on the flow type. The table renders category chips, node icons with tooltips, and an optional actions column controlled by RBAC permissions. Sort preferences are persisted per flow type to localStorage. The table supports filtering via a filterFunction prop and shows skeleton loading states.

Usage

Use this component on the Chatflows or Agentflows listing pages to display flows in a table view. It is the tabular alternative to the card/grid view.

Code Reference

Source Location

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

Signature

export const FlowListTable = ({
    data,
    images = {},
    icons = {},
    isLoading,
    filterFunction,
    updateFlowsApi,
    setError,
    isAgentCanvas,
    isAgentflowV2,
    currentPage,
    pageLimit
}) => { ... }

FlowListTable.propTypes = {
    data: PropTypes.array,
    images: PropTypes.object,
    icons: PropTypes.object,
    isLoading: PropTypes.bool,
    filterFunction: PropTypes.func,
    updateFlowsApi: PropTypes.object,
    setError: PropTypes.func,
    isAgentCanvas: PropTypes.bool,
    isAgentflowV2: PropTypes.bool,
    currentPage: PropTypes.number,
    pageLimit: PropTypes.number
}

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
data	array	Yes	Array of flow objects containing id, name, category, flowData, updatedDate, and templateName
images	object	No	Map of node names to image URLs for node icon display (defaults to empty object)
icons	object	No	Map of node names to icon URLs for node icon display (defaults to empty object)
isLoading	bool	No	When true, displays skeleton loading rows
filterFunction	func	Yes	Filter predicate applied to each row before rendering
updateFlowsApi	object	No	API hook object passed to the FlowListMenu actions component
setError	func	No	Error setter callback passed to the FlowListMenu actions component
isAgentCanvas	bool	No	When true, treats the flows as agentflows and adjusts navigation paths and permissions
isAgentflowV2	bool	No	When true, uses the v2 agentcanvas route (/v2/agentcanvas/:id)
currentPage	number	No	Current pagination page number passed to FlowListMenu
pageLimit	number	No	Items per page limit passed to FlowListMenu

Outputs

Name	Type	Description
Rendered UI	JSX.Element	A sortable Material-UI table of flows with linked names, category chips, node icons, and optional action menus

Key Internal Logic

• onFlowClick(row) -- Returns the navigation URL based on flow type: /canvas/:id for chatflows, /agentcanvas/:id or /v2/agentcanvas/:id for agentflows.
• getLocalStorageKeyName(name, isAgentCanvas) -- Generates localStorage keys prefixed by canvas type to persist sort preferences independently for chatflows and agentflows.
• RBAC check -- Uses useAuth().hasPermission() to determine whether the Actions column is visible based on the user's permissions for update, delete, config, domains, and export operations.

Usage Examples

Basic Usage

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

<FlowListTable
    data={chatflows}
    images={nodeImages}
    icons={nodeIcons}
    isLoading={isLoading}
    filterFunction={(flow) => flow.name.includes(searchTerm)}
    updateFlowsApi={updateFlowsApi}
    setError={setError}
    isAgentCanvas={false}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Flow_Management