Connecting to dev server...

DataGrid Node

The DataGrid node provides an Excel-like spreadsheet interface for viewing, editing, and processing tabular data within your workflows. Think of it as having a spreadsheet built right into your automation.

Overview

The DataGrid node displays data in a familiar spreadsheet format with rows and columns. You can view data from other nodes, edit cells directly, pass data through to other nodes, and export data as CSV files.

Common Use Cases

📊 Data Review & Visualization

Display data from APIs or databases in an easy-to-read table format.

Example: Show customer orders from your database

Database Query → DataGrid → Export

✏️ Manual Data Entry

Create forms for entering structured data that gets processed by your workflow.

Example: Employee onboarding checklist

Empty DataGrid → User fills data → Save to Database

🔧 Data Correction

Fix errors or clean up messy data before processing.

Example: Clean imported CSV data

Import CSV → DataGrid (fix errors) → Process Data

📝 Task Management

Use as a simple task list or project tracker.

Example: Daily task tracker

DataGrid (task list) → Send email summary

📈 Report Generation

Display calculated results in a table format.

Example: Sales report

Calculate totals → DataGrid (display) → Download CSV

Configuration

Basic Settings

Data Source Variable

  • Default: value
  • Purpose: Specifies which field from the previous node to use as data
  • Example: If previous node outputs {results: [[...]], status: "ok"}, set to results

Allow Editing

  • Default: Enabled
  • Purpose: Controls whether users can edit cells
  • Options: Enable for data entry, disable for read-only display

Output Mode

  • Default: Pass-thru
  • Options:
    • Pass-thru: Original input data flows through unchanged
    • Sheet: Sends the current grid data (including edits)

Grid Dimensions

SettingDefaultRangeDescription
Rows101-1000Number of rows to display
Columns51-50Number of columns to display
Cell Width100pxAnyWidth of each cell
Cell Height30pxAnyHeight of each cell

Display Options

Show Headers

  • Default: Enabled
  • Purpose: Toggle row/column headers (A, B, C... 1, 2, 3...)

Custom Headers

  • Purpose: Add your own column names
  • Format: Comma-separated list
  • Example: Name, Email, Department, Status

Output Modes Explained

Pass-thru Mode (Default)

  • Original input data flows through unchanged
  • Perfect when you just want to display data
  • Your edits won't affect what the next node receives
  • Use this for data visualization and review

Sheet Mode

  • Sends the current grid data (including your edits)
  • Use this when you want your changes to flow through
  • Great for data entry and correction workflows
  • All edits are immediately saved

Working with the DataGrid

Viewing Mode (Compact)

  • Shows node name and data summary
  • Double-click to expand to detail view
  • Displays row/column count

Detail Mode (Expanded)

  • Full spreadsheet interface
  • Click cells to edit (if editing is enabled)
  • Use Tab/Enter to navigate between cells
  • Resize the node by dragging corners

Toolbar Features

  • ▶️ Run: Execute just this node
  • ⬇️ Download: Save data as CSV file
  • ⚙️ Settings: Open configuration panel
  • ➖ Minimize: Return to compact view

Practical Examples

Example 1: Customer Contact List

Settings:
- Output Mode: Sheet
- Allow Editing: Yes
- Headers: Name, Email, Phone, Company
- Rows: 50
- Columns: 4

Use: Maintain a customer contact database

Example 2: API Data Viewer

Settings:
- Output Mode: Pass-thru
- Allow Editing: No
- Show Headers: Yes
- Rows: 100
- Columns: 10

Use: Display API responses for review without modification

Example 3: Daily Tasks

Settings:
- Output Mode: Sheet
- Allow Editing: Yes
- Headers: Task, Priority, Status, Notes
- Rows: 20
- Columns: 4

Use: Simple task tracking that saves to database

Tips & Best Practices

📌 For Data Display

  • Use Pass-thru mode to keep original data intact
  • Disable editing to prevent accidental changes
  • Add custom headers for clarity

📌 For Data Entry

  • Use Sheet mode to capture user input
  • Start with an empty grid
  • Provide clear column headers
  • Set appropriate grid dimensions

📌 For Data Cleaning

  • Use Sheet mode to pass corrections forward
  • Enable editing
  • Review data before processing
  • Use reasonable row/column limits for performance

📌 Performance Tips

  • Limit rows to what's visible (avoid 1000 rows if you only need 20)
  • Use smaller column counts when possible
  • Download large datasets as CSV rather than displaying all

Keyboard Shortcuts

  • Click: Select and edit a cell
  • Tab: Move to next cell
  • Shift+Tab: Move to previous cell
  • Enter: Move down one cell
  • Arrow Keys: Navigate between cells
  • Delete: Clear cell content

Input Data Format

The DataGrid accepts data in these formats:

2D Array (Preferred)

[
  ["Header 1", "Header 2", "Header 3"],
  ["Row 1 Col 1", "Row 1 Col 2", "Row 1 Col 3"],
  ["Row 2 Col 1", "Row 2 Col 2", "Row 2 Col 3"]
]

1D Array (Auto-converted)

["Value 1", "Value 2", "Value 3"]
// Becomes: [["Value 1", "Value 2", "Value 3"]]

Troubleshooting

"Invalid Data Format" Error

  • Check that your input is a 2D array (array of arrays)
  • Ensure each row is an array
  • Verify the previous node outputs data correctly

Can't Edit Cells

  • Check "Allow Editing" is enabled in settings
  • Verify the node isn't in read-only mode
  • Make sure you're in detail view (expanded)

Data Not Passing Through

  • Check your Output Mode setting
  • Pass-thru: sends original input
  • Sheet: sends current grid data
  • Ensure nodes are properly connected

Grid Shows Empty

  • This is normal if no input is connected
  • Start typing to add data
  • Or connect a data source node

Limitations

  • No formula support (use Code node for calculations)
  • All data is stored as text
  • Maximum 1000 rows × 50 columns
  • No cell formatting (colors, fonts)
  • No merged cells
  • Changes are saved immediately (no undo)

Related Nodes

  • Code Node: For data calculations and transformations
  • Chart Node: To visualize your tabular data
  • Action Node: To save data to databases
  • Form Node: For structured data input with validation

Quick Start Templates

Template 1: Simple Database

  1. Add DataGrid node
  2. Set Headers: "ID, Name, Email, Status"
  3. Set Output Mode: Sheet
  4. Connect to database save action

Template 2: Data Reviewer

  1. Connect API/Database to DataGrid input
  2. Set Output Mode: Pass-thru
  3. Disable editing
  4. Add download button for exports

Template 3: Task Tracker

  1. Add DataGrid with no input
  2. Set Headers: "Task, Priority, Due Date, Assigned To"
  3. Enable editing
  4. Connect to email notification node

Next Steps