Implementation:FlowiseAI Flowise MarketplaceTable

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

Overview

The MarketplaceTable component renders a filterable table of marketplace templates showing name, type, description, framework tags, use case chips, badge indicators, and share/delete action buttons.

Description

MarketplaceTable displays marketplace templates in a styled Material-UI table with seven columns. The data is filtered through five chained filter functions (filterFunction, filterByBadge, filterByType, filterByFramework, filterByUsecases) before rendering. Each row shows the template name as a clickable button (routing to either canvas or tool view based on whether flowData exists), type label, description, framework chips, use case chips, and color-coded badge chips (primary for POPULAR, warning for DEPRECATED, error for others). Rows that are not shared templates show PermissionIconButton actions for sharing (with templates:custom-share permission) and deletion (with templates:custom-delete permission). Loading state renders Skeleton placeholders.

Usage

Use this component on the Marketplace page to display available templates in a table layout with multi-criteria filtering and RBAC-protected management actions.

Code Reference

Source Location

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

Signature

export const MarketplaceTable = ({
    data,
    filterFunction,
    filterByBadge,
    filterByType,
    filterByFramework,
    filterByUsecases,
    goToCanvas,
    goToTool,
    isLoading,
    onDelete,
    onShare
}) => {
    // ...
}

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
data	array	No	Array of template objects with templateName/name, type, description, framework, usecases, badge, flowData, and shared fields
filterFunction	func	No	General filter predicate applied to each template
filterByBadge	func	No	Filter predicate for badge-based filtering
filterByType	func	No	Filter predicate for type-based filtering
filterByFramework	func	No	Filter predicate for framework-based filtering
filterByUsecases	func	No	Filter predicate for use-case-based filtering
goToCanvas	func	No	Callback to navigate to the canvas view for a template with flowData
goToTool	func	No	Callback to navigate to the tool view for a template without flowData
isLoading	bool	No	When true, renders skeleton loading placeholders
onDelete	func	No	Callback invoked with the template row when the delete button is clicked
onShare	func	No	Callback invoked with the template row when the share button is clicked

Outputs

Name	Type	Description
Rendered JSX	React element	A bordered table with filterable rows, badge chips, framework/use-case tags, and permission-gated action buttons

Usage Examples

Basic Usage

<MarketplaceTable
    data={templates}
    filterFunction={(item) => item.name.toLowerCase().includes(search)}
    filterByBadge={(item) => selectedBadge ? item.badge?.includes(selectedBadge) : true}
    filterByType={(item) => selectedType ? item.type === selectedType : true}
    filterByFramework={(item) => true}
    filterByUsecases={(item) => true}
    goToCanvas={(template) => navigate(`/canvas/${template.id}`)}
    goToTool={(template) => navigate(`/tools/${template.id}`)}
    isLoading={isLoading}
    onDelete={(template) => handleDelete(template.id)}
    onShare={(template) => handleShare(template.id)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Template_Marketplace