Database Schema Node - React Flow
CLI Manual
Make sure to follow the prerequisites before installing the component.
1. Copy the component into your app
2. Connect the component with your React Flow application.
DatabaseSchemaTableRow,
DatabaseSchemaTableCell,
} from "@/components/database-schema-node" ;
export type DatabaseSchemaNode Data = {
data : {
label : string ;
schema : { title : string ; type : string }[];
};
};
const DatabaseSchemaDemo = memo (({ data } : DatabaseSchemaNode Data ) => {
return (
< DatabaseSchemaNode className = "p-0" >
< DatabaseSchemaNode Header >{data.label}</ DatabaseSchemaNode Header >
< DatabaseSchemaNode Body >
{data.schema. map (( entry ) => (
< DatabaseSchemaTableRow key = {entry.title}>
< DatabaseSchemaTableCell className = "pl-0 pr-6 font-light" >
< LabeledHandle
id = {entry.title}
title = {entry.title}
type = "target"
position = {Position.Left}
/>
</ DatabaseSchemaTableCell >
< DatabaseSchemaTableCell className = "pr-0 font-thin" >
< LabeledHandle
id = {entry.title}
title = {entry.type}
type = "source"
position = {Position.Right}
className = "p-0"
handleClassName = "p-0"
labelClassName = "p-0 w-full pr-3 text-right"
/>
</ DatabaseSchemaTableCell >
</ DatabaseSchemaTableRow >
))}
</ DatabaseSchemaNode Body >
</ DatabaseSchemaNode >
);
});
DatabaseSchemaDemo.displayName = "DatabaseSchemaDemo" ;
export default DatabaseSchemaDemo;
,
data: {
label: "Products" ,
schema: [
{ title: "id" , type: "uuid" },
{ title: "name" , type: "varchar" },
{ title: "description" , type: "varchar" },
{ title: "warehouse_id" , type: "uuid" },
{ title: "supplier_id" , type: "uuid" },
{ title: "price" , type: "money" },
{ title: "quantity" , type: "int4" },
],
},
},
{
id: "2" ,
position: { x: 350 , y: - 100 },
type: "databaseSchema" ,
data: {
label: "Warehouses" ,
schema: [
{ title: "id" , type: "uuid" },
{ title: "name" , type: "varchar" },
{ title: "address" , type: "varchar" },
{ title: "capacity" , type: "int4" },
],
},
},
{
id: "3" ,
position: { x: 350 , y: 200 },
type: "databaseSchema" ,
data: {
label: "Suppliers" ,
schema: [
{ title: "id" , type: "uuid" },
{ title: "name" , type: "varchar" },
{ title: "description" , type: "varchar" },
{ title: "country" , type: "varchar" },
],
},
},
];
const defaultEdges : Edge [] = [
{
id: "products-warehouses" ,
source: "1" ,
target: "2" ,
sourceHandle: "warehouse_id" ,
targetHandle: "id" ,
},
{
id: "products-suppliers" ,
source: "1" ,
target: "3" ,
sourceHandle: "supplier_id" ,
targetHandle: "id" ,
},
];
export default function App () {
return (
< div className = "h-full w-full" >
< ReactFlow
defaultNodes = {defaultNodes}
defaultEdges = {defaultEdges}
nodeTypes = {nodeTypes}
fitView
>
< Background />
</ ReactFlow >
</ div >
);
}