Implementation:FlowiseAI Flowise Table
| Knowledge Sources | |
|---|---|
| Domains | UI Components, Data Display |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
The TableViewOnly component renders a read-only Material-UI table with dynamic columns, automatic cell content formatting, and special handling for enabled/disabled chips, schema tooltips, and object serialization.
Description
TableViewOnly accepts columns and rows arrays to render a simple data table. The renderCellContent helper handles several content types: boolean enabled fields are rendered as color-coded Chip components ("Enabled" in primary color, "Disabled" in default), type fields with an accompanying schema property display the type text alongside a TooltipWithParser showing the schema structure (supporting both array and object schema formats), generic objects are serialized via JSON.stringify, and all other values are rendered as-is. Columns named "enabled" receive an "Override" header with a tooltip explaining the override behavior. The id and schema keys are excluded from row cell rendering.
Usage
Use this component to display read-only tabular data such as chatflow input variables, configuration overrides, or node parameter summaries where no editing or sorting is needed.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/ui-component/table/Table.jsx
- Lines: 1-99
Signature
export const TableViewOnly = ({ columns, rows, sx }) => {
// ...
}
Import
import { TableViewOnly } from '@/ui-component/table/Table'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| columns | array | Yes | Array of column key strings used as headers (auto-capitalized) and cell accessors |
| rows | array | Yes | Array of row objects where keys correspond to column names; "id" and "schema" keys are hidden from display |
| sx | object | No | Additional MUI sx styles applied to the Table element |
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered JSX | React element | A read-only table with formatted cells, enabled/disabled chips, and schema tooltips |
Usage Examples
Basic Usage
<TableViewOnly
columns={['name', 'type', 'enabled']}
rows={[
{ id: '1', name: 'temperature', type: 'number', enabled: true },
{ id: '2', name: 'systemMessage', type: 'string', enabled: false, schema: { field: 'string' } }
]}
sx={{ maxWidth: 600 }}
/>