Node with Table Content and Element Connections

Demonstrates nodes containing table structures with connectable cells that can be linked using fake lines.

Node with Table Content and Element Connections

Functional Overview

This demo demonstrates how to create nodes containing table structures with specific connection points (cells) that can be linked using fake lines. It’s useful for visualizing data relationships between table cells.

Implementation of Key Features

1. Table Nodes with Connect Targets

Create tables with connectable cells:

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <div className="h-fit">
            {node.id === 'a' && (
                <div style={{ width: '300px', backgroundColor: '#bbbbbb' }}>
                    <div className="bg-gray-900 text-white p-2.5">{node.text}</div>
                    <table className="c-data-table">
                        <thead>
                            <tr>
                                <th>Column 1</th>
                                <th>Column 2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>xxxx</td>
                                <td>
                                    <RGConnectTarget targetId="a-r2-c2">
                                        <div>a-r2-c2</div>
                                    </RGConnectTarget>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            )}
        </div>
    )}
</RGSlotOnNode>

2. Fake Lines Between Table Cells

Connect specific cells using fake lines:

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [
        { id: 'a', text: 'A区内配矿', nodeShape: RGNodeShape.rect, x: -500, y: -200 },
        { id: 'b', text: 'B区内洗选贸易企业', nodeShape: RGNodeShape.rect, x: 0, y: -400 }
    ],
    lines: [],
    fakeLines: [
        {
            id: 'fl-1',
            from: 'a-r2-c2',  // Specific cell ID
            to: 'b-r1-c1',    // Specific cell ID
            text: '',
            lineShape: RGLineShape.StandardCurve,
            color: 'rgba(29,169,245,0.76)',
            lineWidth: 3
        }
    ]
};

3. Multiple Table Structures

Different nodes can have different table layouts:

{node.id === 'a' && (
    <table>
        {/* 3 columns, 3 rows */}
    </table>
)}
{node.id === 'b' && (
    <table>
        {/* Different structure */}
    </table>
)}

4. Fixed Position Layout

Use fixed positioning for precise table placement:

layout: {
    layoutName: 'fixed'
}

5. Color-Coded Connections

Use different colors for different connection types:

fakeLines: [
    { color: 'rgba(29,169,245,0.76)', lineWidth: 3 },  // Blue connections
    { color: '#e85f84', lineWidth: 3 }                  // Pink connections
]

Creative Use Cases

• Data Mapping: Visualize mappings between database tables
• Field Relationships: Show relationships between form fields
• API Documentation: Display API request/response mappings
• Data Transformation: Show data transformation flows
• Schema Comparisons: Compare database schemas
• Business Rules: Visualize business rule connections