Function TableElement

examples/joint-react/src/App.tsx:206–274

({
    columnNames,
    rows,
    width,
    height,
    isSelected,
}: ElementWithSelected<TableElement>)

const ROW_START = 65;
// Define the table element
function TableElement({
    columnNames,
    rows,
    width,
    height,
    isSelected,
}: ElementWithSelected<TableElement>) {
    const cellId = useCellId();
    return (
        <>
            <Highlighter.Stroke
                padding={25}
                rx={5}
                ry={5}
                strokeWidth={3}
                stroke={LIGHT}
                isHidden={!isSelected}
            >
                <foreignObject width={width} height={height} overflow="visible">
                    <div
                        style={{ width, height }}
                        className="flex flex-col border-1 border-solid border-white/20 text-white rounded-lg p-4 w-full h-full bg-gray-900 shadow-sm"
                    >
                        <table className="w-full">
                            <thead>
                                <tr>
                                    {columnNames.map((name) => (
                                        <th key={name} className="text-left p-2">
                                            {name}
                                        </th>
                                    ))}
                                </tr>
                            </thead>
                            <tbody>
                                {rows.map((row, index) => (
                                    <tr key={index}>
                                        {row.map((cell, cellIndex) => (
                                            <td
                                                key={cellIndex}
                                                className="p-2 border-t border-white/20 border-dashed"
                                            >
                                                {cell}
                                            </td>
                                        ))}
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </foreignObject>
            </Highlighter.Stroke>
            <Port.Group position="right" id="out" dx={-10}>
                {rows.map((_, index) => (
                    <Port.Item
                        key={index}
                        id={`out-${cellId}-${index}`}
                        y={index * ROW_HEIGHT + ROW_START}
                    >