SQLflow

This will let you create sql queries with a drag and drop editor.

Installation

Install sqlflow with npm

  npm install sqlflow

Usage/Examples

import React from "react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import {
	SQLQueryBuilderProvider,
	SqlNodeToolBar,
	SQLQueryBuilder,
	NodeTypes,
} from "sqlflow";

const initialTables = [
	{
		name: "users",
		label: "Users",
		fields: [
			{
				name: "id",
				label: "Id",
				dataType: "string",
				placeholder: "Enter id",
				value: "id",
				isDistinct: false,
			},
			{
				name: "name",
				label: "Name",
				placeholder: "Enter name",
				dataType: "string",
				value: "name",
				isDistinct: false,
			},
			{
				name: "email",
				label: "Email",
				dataType: "string",
				value: "email",
				isDistinct: false,
			},
			{
				name: "created_at",
				label: "Created At",
				dataType: "datetime",
				inputType: "datetime-local",
				value: "created_at",
				isDistinct: false,
			},
			{
				name: "is_active",
				label: "Is Active",
				dataType: "boolean",
				valueEditorType: "checkbox",
				value: "is_active",
				isDistinct: false,
			},
		],
	},
];

export const initialNodes = [
	{
		id: "1",
		position: { x: 0, y: 0 },
		type: NodeTypes.SELECT,
		data: {
			label: "1",
			name: "",
			id: "1",
			type: NodeTypes.SELECT,
		},
	},
	{
		id: "2",
		position: { x: 0, y: 100 },
		type: NodeTypes.WHERE,
		data: {
			label: "2",
			name: "",
			id: "2",
			type: NodeTypes.WHERE,
		},
	},
];

export const initialEdges = [{ id: "e1-2", source: "1", target: "2" }];

function App() {
	return;
	<>
		<DndProvider backend={HTML5Backend}>
			<SQLQueryBuilderProvider
				tables={initialTables}
				edges={initialEdges}
				nodes={initialNodes}
			>
				<SqlNodeToolBar variant="vertical" />
				<SQLQueryBuilder />
			</SQLQueryBuilderProvider>
		</DndProvider>
	</>;
}

Importing styles

import "sqlflow/dist/style.css";