Implementation:FlowiseAI Flowise DataGrid

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

Overview

DataGrid is a React component that wraps Material UI's DataGrid with custom styling, inline cell editing, row addition, and row deletion capabilities, outputting changes as a JSON string.

Description

This component provides an editable data grid built on @mui/x-data-grid with a custom styled wrapper (StyledDataGrid) that applies themed borders and removes icon separators. It automatically appends a delete "actions" column to the provided column definitions. Users can edit cells inline (unless disabled), add new empty rows via an "Add Item" button, and delete rows via a trash icon action. The component maintains internal row state using formatDataGridRows from a utility helper, and propagates all changes (edits, additions, deletions) to the parent via an onChange callback with the rows serialized as a JSON string. Deep cloning via lodash.cloneDeep ensures immutable state updates.

Usage

Use this component for editable tabular data entry within node configuration forms, such as defining key-value pairs, variable mappings, or structured data inputs.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/grid/DataGrid.jsx
• Lines: 1-137

Signature

export const DataGrid = ({
    columns, rows, style,
    disabled = false, hideFooter = false, onChange
}) => { ... }

DataGrid.propTypes = {
    rows: PropTypes.array,
    columns: PropTypes.array,
    style: PropTypes.any,
    disabled: PropTypes.bool,
    hideFooter: PropTypes.bool,
    onChange: PropTypes.func
}

Import

import { DataGrid } from '@/ui-component/grid/DataGrid'

I/O Contract

Inputs

Name	Type	Required	Description
columns	array	Yes	Array of MUI DataGrid column definitions (with field, headerName, editable, etc.)
rows	array	Yes	Initial array of row objects to display (processed via formatDataGridRows)
style	any	No	Additional inline styles applied to the grid container div
disabled	bool	No	Disables cell editing and hides the "Add Item" button (default: false)
hideFooter	bool	No	Hides the DataGrid footer/pagination (default: false)
onChange	func	Yes	Callback invoked with a JSON-stringified array of row objects whenever rows are edited, added, or deleted

Outputs

Name	Type	Description
React Element	JSX.Element	Renders a styled DataGrid with an optional "Add Item" button below it

Usage Examples

Basic Usage

import { DataGrid } from '@/ui-component/grid/DataGrid'

const columns = [
    { field: 'key', headerName: 'Key', editable: true, flex: 1 },
    { field: 'value', headerName: 'Value', editable: true, flex: 1 }
]

const rows = [
    { key: 'API_KEY', value: 'sk-...' },
    { key: 'MODEL', value: 'gpt-4' }
]

const MyComponent = () => (
    <DataGrid
        columns={columns}
        rows={rows}
        onChange={(jsonString) => {
            const updatedRows = JSON.parse(jsonString)
            console.log('Updated rows:', updatedRows)
        }}
    />
)

Related Pages

• Principle:FlowiseAI_Flowise_Dynamic_Form_Input