Implementation:FlowiseAI Flowise ToolsListTable

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Data Display
Last Updated	2026-02-12 07:00 GMT

Overview

ToolsListTable is a React table component that renders a styled list of tools with their icons, names, and descriptions using Material UI.

Description

This component provides a reusable MUI-based table for displaying a collection of tool items. Each row shows a circular icon, a clickable tool name (falling back to templateName or name), and a description. The table supports a loading state with skeleton placeholders and adapts its header styling based on the current dark/light theme via the Redux customization store.

Usage

Use this component when you need to present a selectable list of tools in a tabular format, such as in tool selection dialogs or tool management views. Pass tool data, a loading flag, and an onSelect callback.

Code Reference

Source Location

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

Signature

export const ToolsTable = ({ data, isLoading, onSelect }) => { ... }

Import

import { ToolsTable } from '@/ui-component/table/ToolsListTable'

I/O Contract

Inputs

Name	Type	Required	Description
data	array	No	Array of tool objects, each containing name, templateName, description, and iconSrc properties
isLoading	bool	No	When true, displays skeleton placeholder rows instead of actual data
onSelect	func	No	Callback invoked with the selected tool row object when the user clicks a tool name button

Outputs

Name	Type	Description
JSX.Element	React element	A styled MUI TableContainer with rows for each tool, including icon, name button, and description

Usage Examples

Basic Usage

import { ToolsTable } from '@/ui-component/table/ToolsListTable'

const MyToolsList = () => {
    const tools = [
        { name: 'Calculator', description: 'Performs math calculations', iconSrc: '/icons/calc.png' },
        { name: 'Search', description: 'Web search tool', iconSrc: '/icons/search.png' }
    ]

    return (
        <ToolsTable
            data={tools}
            isLoading={false}
            onSelect={(tool) => console.log('Selected:', tool.name)}
        />
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Tool_Management