Integrated Datatables

Integrated Datatables allow you to combine and compare data from multiple database connections in a single unified view. This powerful widget automatically identifies compatible tables across connections and merges their data. Type: datatables
Subtype: integrated_dataTable

Key Concepts

Integrated datatables work by finding tables with identical column names and types across multiple database connections, then combining their data into a single view with a source indicator.

Use Cases

Compare production vs staging databases
Merge data from regional databases
Analyze data across customer-specific instances
Consolidate multi-tenant data for reporting
Compare historical backups with current data

Configuration

Requirements

Multiple Connections - At least 2 database connections (required)
Compatible Tables - Tables with matching column names and data types
Title - Descriptive widget name (required)
Description - Optional description

Configuration Object

{
  connectionIds: string[],  // Array of 2+ connection IDs
  tables: string[]          // Array of compatible table names
}

You must select at least 2 connections to create an integrated datatable. The widget will only show tables that exist with compatible schemas across all selected connections.

How It Works

Select Connections

Choose 2 or more database connections from your project. All selected connections must have schema information available.

Find Compatible Tables

VizBoard automatically analyzes the schemas and identifies tables that exist in all selected connections with matching column structures.The /api/compatible-tables endpoint compares:

Table names (case-sensitive)
Column names
Column data types

Select Tables

Choose one or more compatible tables to display in the widget. Each table will be available via a dropdown selector.

View Merged Data

The widget fetches data from all selected connections and combines them, adding a special SOURCE column to identify which connection each row came from.

Examples

Production vs Staging Comparison

{
  "type": "datatables",
  "subtype": "integrated_dataTable",
  "title": "User Comparison: Prod vs Stage",
  "description": "Compare user records across environments",
  "configs": {
    "connectionIds": [
      "conn_production_abc123",
      "conn_staging_def456"
    ],
    "tables": ["users", "sessions"]
  }
}

Multi-Region Data Consolidation

{
  "type": "datatables",
  "subtype": "integrated_dataTable",
  "title": "Global Sales Data",
  "description": "Combined sales from US, EU, and APAC databases",
  "configs": {
    "connectionIds": [
      "conn_us_sales",
      "conn_eu_sales",
      "conn_apac_sales"
    ],
    "tables": ["orders", "customers", "products"]
  }
}

Customer Instance Comparison

{
  "type": "datatables",
  "subtype": "integrated_dataTable",
  "title": "Multi-Tenant Analytics",
  "configs": {
    "connectionIds": [
      "conn_tenant_acme",
      "conn_tenant_globex",
      "conn_tenant_initech"
    ],
    "tables": ["usage_metrics"]
  }
}

The SOURCE Column

Integrated datatables automatically add a SOURCE column as the first column, showing which connection each row originated from.

The SOURCE column:

Appears as the leftmost column
Shows the connection name (not ID)
Is filterable and sortable
Uses a distinct visual style (badge format)
Helps identify data origin at a glance

// Example merged data
[
  { "SOURCE": "Production DB", "id": 1, "name": "Alice" },
  { "SOURCE": "Production DB", "id": 2, "name": "Bob" },
  { "SOURCE": "Staging DB", "id": 1, "name": "Alice" },
  { "SOURCE": "Staging DB", "id": 3, "name": "Carol" }
]

Compatible Table Detection

Tables are considered compatible when they have:

Matching Schema
Incompatible Examples

Required Matches:

Same table name (case-sensitive)
Same column names
Compatible data types

Example:

-- Connection 1: Production
CREATE TABLE users (
  id INTEGER,
  name VARCHAR(100),
  email VARCHAR(255)
);

-- Connection 2: Staging
CREATE TABLE users (
  id INTEGER,
  name VARCHAR(100),
  email VARCHAR(255)
);

✅ These tables are compatible

Different Column Names:

-- Connection 1
CREATE TABLE users (id, name, email);

-- Connection 2
CREATE TABLE users (user_id, full_name, email_address);

❌ Not compatible - column names don’t matchDifferent Data Types:

-- Connection 1
CREATE TABLE orders (id INTEGER, amount DECIMAL);

-- Connection 2
CREATE TABLE orders (id VARCHAR, amount TEXT);

❌ Not compatible - data types don’t matchMissing Columns:

-- Connection 1
CREATE TABLE products (id, name, price);

-- Connection 2
CREATE TABLE products (id, name);

❌ Not compatible - different column count

Features

Source Identification

Automatic SOURCE column shows data origin for each row

Unified Filtering

Filter across all connections simultaneously

Smart Type Detection

Automatic data type inference from actual values

Column Sorting

Sort by any column including SOURCE

Global Search

Search across all merged data

Table Switching

Dropdown selector for multiple compatible tables

Data Type Inference

Since integrated datatables combine data from multiple sources, they use intelligent type inference:

function inferColumnType(values: unknown[]): "number" | "boolean" | "date" | "array" | "string" {
  // Analyzes first 100 values from merged data
  // Returns the most appropriate type
}

Type Detection Rules

Number: All values are numeric or numeric strings
Boolean: All values are true/false variants
Array: All values are arrays
Date: Values match date patterns (ISO format, common formats)
String: Default fallback for mixed or text data

Source: src/components/dashboard/widgets/integratedDatatable/integratedDatatableWidget.tsx:51-89

Usage Tips

Ensuring table compatibility

To maximize compatible tables:

Use consistent naming conventions across databases
Keep column names and types identical
Use database migration tools to maintain schema consistency
Document any schema differences between environments

Performance considerations

Each connection is queried separately
Data is merged on the client side
More connections = longer load time
Consider limiting to 3-5 connections for best performance
Large tables may take longer to merge

Understanding 'no compatible tables'

If you see “No compatible tables found”:

Verify tables exist in ALL selected connections
Check that column names match exactly (case-sensitive)
Ensure column data types are compatible
Confirm connections have schema information loaded

When to use integrated vs simple datatables

Use Integrated Datatables when:

Comparing data across environments
Consolidating multi-tenant data
Analyzing regional databases
Need to identify data source

Use Simple Datatables when:

Viewing data from a single connection
No need to compare across databases
Simpler use case with less overhead

Configuration Help

The configuration dialog includes a helpful accordion with guidance:

What is an Integrated Datatable?This widget type allows you to combine data from multiple database connections into a single table view. It’s perfect for comparing data across environments (production vs staging) or consolidating data from multiple sources.How it works:Select 2 or more connections, and the system will find tables that exist in all selected connections with matching schemas. The data will be merged with a SOURCE column to identify which database each row came from.

Limitations

Minimum 2 connections required
Tables must have identical schemas across all connections
Column names are case-sensitive
No support for joining different table structures
All connections must be active and accessible

Source Code Reference

Integrated datatable implementation:

Configuration: src/components/dashboard/widgets/integratedDatatable/integratedDatatableConfigDialog.tsx:38-452
Widget Rendering: src/components/dashboard/widgets/integratedDatatable/integratedDatatableWidget.tsx:193-418
Source Column Logic: src/components/dashboard/widgets/integratedDatatable/integratedDatatableColumns.tsx
Normalization: src/components/dashboard/widgets/integratedDatatable/normalizeIntegratedConfig.ts

API Endpoints

Compatible Tables Detection

POST /api/compatible-tables
Content-Type: application/json

{
  "connectionIds": ["conn_1", "conn_2", "conn_3"]
}

Response:

{
  "compatibleTables": ["users", "orders", "products"],
  "details": {
    "users": {
      "columns": [
        { "name": "id", "type": "integer" },
        { "name": "name", "type": "varchar" }
      ]
    }
  }
}

Simple Datatables

View data from a single database connection

Charts

Visualize your integrated data with charts

Get Started

Core Features

Widget Types

Guides

Integrated Datatables

Widget Type

Key Concepts

Use Cases

Configuration

Requirements

Configuration Object

How It Works

Examples

Production vs Staging Comparison

Multi-Region Data Consolidation

Customer Instance Comparison

The SOURCE Column

Compatible Table Detection

Features

Source Identification

Unified Filtering

Smart Type Detection

Column Sorting

Global Search

Table Switching

Data Type Inference

Type Detection Rules

Usage Tips

Configuration Help

Limitations

Source Code Reference

API Endpoints

Compatible Tables Detection

Simple Datatables

Charts

Build docs developers (and LLMs) love

Get Started

Core Features

Widget Types

Guides

​Widget Type

​Key Concepts

​Use Cases

​Configuration

​Requirements

​Configuration Object

​How It Works

​Examples

​Production vs Staging Comparison

​Multi-Region Data Consolidation

​Customer Instance Comparison

​The SOURCE Column

​Compatible Table Detection

​Features

Source Identification

Unified Filtering

Smart Type Detection

Column Sorting

Global Search

Table Switching

​Data Type Inference

​Type Detection Rules

​Usage Tips

​Configuration Help

​Limitations

​Source Code Reference

​API Endpoints

​Compatible Tables Detection

​Related Widgets

Simple Datatables

Charts

Build docs developers (and LLMs) love

Widget Type

Key Concepts

Use Cases

Configuration

Requirements

Configuration Object

How It Works

Examples

Production vs Staging Comparison

Multi-Region Data Consolidation

Customer Instance Comparison

The SOURCE Column

Compatible Table Detection

Features

Data Type Inference

Type Detection Rules

Usage Tips

Configuration Help

Limitations

Source Code Reference

API Endpoints

Compatible Tables Detection

Related Widgets