Implementation:FlowiseAI Flowise DatasetItems

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

Overview

EvalDatasetRows is a React view component that displays and manages individual rows (items) within an evaluation dataset, providing CRUD operations, CSV upload, drag-and-drop reordering, bulk selection, and paginated table display.

Description

This component renders a paginated table of dataset items consisting of input/expected-output pairs used for evaluation workflows. It supports adding new items manually or via CSV upload, editing existing items through dialogs, selecting multiple items for bulk deletion, and reordering items through HTML5 drag-and-drop. The component extracts the dataset ID from the URL path and uses Redux for snackbar notifications and customization state.

Usage

Use this component as the main view when navigating to a specific dataset's items page (e.g., /dataset_rows/{datasetId}). It is typically rendered as a route-level view for managing evaluation dataset content.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/datasets/DatasetItems.jsx
• Lines: 1-509

Signature

const EvalDatasetRows = () => {
    // ... component logic
}

export default EvalDatasetRows

Import

import EvalDatasetRows from '@/views/datasets/DatasetItems'

I/O Contract

Inputs

Name	Type	Required	Description
(none)	-	-	This is a route-level component with no props; it extracts the dataset ID from the URL path

Outputs

Name	Type	Description
Rendered JSX	React.Element	A paginated table of dataset items with header actions, dialogs for add/edit/upload, and a confirm dialog

Key Internal State

State Variable	Type	Description
dataset	Object	The current dataset object containing name, description, rows, and total count
selected	Array	Array of selected row IDs for bulk operations
isLoading	Boolean	Loading indicator for API requests
currentPage	Number	Current pagination page number
pageLimit	Number	Number of items per page
Draggable	Boolean	Toggles drag-and-drop mode for row reordering
showRowDialog	Boolean	Controls visibility of the add/edit row dialog
showUploadDialog	Boolean	Controls visibility of the CSV upload dialog
showDatasetDialog	Boolean	Controls visibility of the dataset edit dialog

Key Functions

Function	Description
refresh(page, limit)	Fetches dataset rows from the API with pagination parameters
addNew()	Opens the add-row dialog with ADD type configuration
uploadCSV()	Opens the CSV upload dialog for bulk data import
edit(item)	Opens the edit dialog pre-populated with the selected item's data
editDs()	Opens the dataset metadata edit dialog
deleteDatasetItems()	Prompts confirmation then bulk-deletes selected dataset items
handleDragStart/handleDragEnter/handleDragEnd	HTML5 drag-and-drop handlers for reordering rows
onSelectAllClick(event)	Toggles selection of all visible dataset rows
handleSelect(event, id)	Toggles selection of an individual row by ID

Usage Examples

Basic Usage

// In a route configuration
import EvalDatasetRows from '@/views/datasets/DatasetItems'

// Route definition
<Route path="/dataset_rows/:datasetId" element={<EvalDatasetRows />} />

Related Pages

• Principle:FlowiseAI_Flowise_Evaluation_Dataset_Creation