@reeflow/react

@reeflow/react

Interfaces

ApiError

Defined in: apps/sdks/core/dist/types.d.ts:49

API error structure Matches the standard NestJS error response format

Properties

Property	Type	Description	Defined in
code?	string	Optional application-specific error code (e.g., ‘VALIDATION_ERROR’)	apps/sdks/core/dist/types.d.ts:57
error?	string	Error type (e.g., ‘Bad Request’, ‘Unauthorized’, ‘Not Found’)	apps/sdks/core/dist/types.d.ts:55
message	string	Human-readable error message	apps/sdks/core/dist/types.d.ts:53
statusCode	number	HTTP status code (e.g., 400, 401, 404, 500)	apps/sdks/core/dist/types.d.ts:51

---

QueryResult

Defined in: packages/types/dist/index.d.mts:47092

Query execution result Shared type for all query results across the Reeflow ecosystem

Properties

Property	Type	Description	Defined in
columns	ColumnInfo[]	Column metadata	packages/types/dist/index.d.mts:47096
compile_time_ms	number	Compilation time in milliseconds (parsing + analysis + validation + transformation)	packages/types/dist/index.d.mts:47102
compiled_sql	string	Compiled SQL query after placeholder replacement and validation	packages/types/dist/index.d.mts:47106
execution_time_ms	number	Execution time in milliseconds	packages/types/dist/index.d.mts:47100
row_count	number	Number of rows returned	packages/types/dist/index.d.mts:47098
rows	unknown[][]	Array of rows, where each row is an array of column values	packages/types/dist/index.d.mts:47094
sql	string	Original SQL query before compilation	packages/types/dist/index.d.mts:47104

---

ReeflowContainerProps

Defined in: apps/sdks/react/src/components/container/ReeflowContainer.tsx:9

Props for the ReeflowContainer component.

Properties

Property	Type	Description	Defined in
children?	ReactNode	Content to display in the container (any custom content, icons, messages, actions, etc.)	apps/sdks/react/src/components/container/ReeflowContainer.tsx:13
className?	string	Optional CSS class name	apps/sdks/react/src/components/container/ReeflowContainer.tsx:15
label?	string	Optional label displayed at the top of the component	apps/sdks/react/src/components/container/ReeflowContainer.tsx:11
style?	CSSProperties	Optional inline styles	apps/sdks/react/src/components/container/ReeflowContainer.tsx:17

---

ReeflowEvent

Defined in: apps/sdks/core/dist/types.d.ts:206

Typed Reeflow event

Extends

• CustomEvent

Type Parameters

Type Parameter
T extends ReeflowEventType

Properties

Property	Modifier	Type	Description	Overrides	Defined in
detail	readonly	ReeflowEventDetail[T]	Returns any custom data event was created with. Typically used for synthetic events. MDN Reference	CustomEvent.detail	apps/sdks/core/dist/types.d.ts:208
type	readonly	`reeflow-${T}`	Returns the type of event, e.g. “click”, “hashchange”, or “submit”. MDN Reference	CustomEvent.type	apps/sdks/core/dist/types.d.ts:207

---

ReeflowEventDetail

Defined in: apps/sdks/core/dist/types.d.ts:119

Event detail mapping for type safety

This interface maps each Reeflow event type to its corresponding payload type. All events are prefixed with reeflow- when dispatched (e.g., reeflow-data-loaded).

Example

// Listen to a typed event
element.addEventListener('reeflow-data-loaded', (e: ReeflowEvent<'data-loaded'>) => {
  console.log(e.detail); // Type: QueryResult | EmbeddedWorkbook
});

Properties

Property	Type	Description	Defined in
auth-change	{ authToken: string; }	Provider authentication token changed	apps/sdks/core/dist/types.d.ts:121
auth-change.authToken	string	-	apps/sdks/core/dist/types.d.ts:122
chart-click	ChartClickDetail	User clicked on a chart data point	apps/sdks/core/dist/types.d.ts:160
chart-hover	ChartHoverDetail	User hovered over a chart data point	apps/sdks/core/dist/types.d.ts:162
chart-legend-toggle	ChartLegendToggleDetail	User toggled a chart legend item visibility	apps/sdks/core/dist/types.d.ts:164
control-value-change	{ controlId: string; previousValue: unknown; value: unknown; }	Control value changed (generic event from provider)	apps/sdks/core/dist/types.d.ts:171
control-value-change.controlId	string	-	apps/sdks/core/dist/types.d.ts:172
control-value-change.previousValue	unknown	-	apps/sdks/core/dist/types.d.ts:174
control-value-change.value	unknown	-	apps/sdks/core/dist/types.d.ts:173
data-loaded	| QueryResult | { description?: Record<string, string> | null; name: z.ZodRecord<z.ZodString, z.ZodString>; pages: { columns: number; content: ( | { config: { [key: string]: unknown; columns?: string[]; filters?: (… | … | … | … | … | … | …)[]; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "table"; } | { config: { [key: string]: unknown; dimension?: | { column: string; label?: … | …; type: "categorical"; } | { column: string; date_range?: … | …; granularity: … | … | … | … | …; label?: … | …; type: "time"; }; filters?: (… | … | … | … | … | … | …)[]; measures?: { color?: …; column?: …; label?: …; type: …; }[]; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "bar"; } | { config: { [key: string]: unknown; dimension?: | { column: string; label?: … | …; type: "categorical"; } | { column: string; date_range?: … | …; granularity: … | … | … | … | …; label?: … | …; type: "time"; }; filters?: (… | … | … | … | … | … | …)[]; measures?: { color?: …; column?: …; label?: …; type: …; }[]; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "line"; } | { config: { [key: string]: unknown; filters?: (… | … | … | … | … | … | …)[]; label_field?: string; value_field?: string; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "pie"; } | { config: { [key: string]: unknown; controlId: string; defaultValue?: string; disabled: boolean; max?: number; maxLength?: number; min?: number; minLength?: number; pattern?: string; placeholder?: string; required: boolean; type: "number" | "date" | "url" | "email" | "text"; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "input"; } | { config: { [key: string]: unknown; controlId: string; defaultValue?: string; disabled: boolean; distinct: boolean; filters?: (… | … | … | … | … | … | …)[]; labelColumn?: string; multiple: boolean; options: { label: string; value: string; }[]; required: boolean; valueColumn?: string; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "select"; })[]; description?: Record<string, string> | null; max_rows: number; name: z.ZodRecord<z.ZodString, z.ZodString>; order: number; row_height: number; }[]; theme_css?: string; }	Data was successfully loaded (QueryResult for tables/charts, EmbeddedWorkbook for workbooks)	apps/sdks/core/dist/types.d.ts:134
error	ApiError	An error occurred during component operation	apps/sdks/core/dist/types.d.ts:132
input-validation-change	{ controlId: string; errors: string[]; isValid: boolean; }	Input control validation state changed	apps/sdks/core/dist/types.d.ts:197
input-validation-change.controlId	string	-	apps/sdks/core/dist/types.d.ts:198
input-validation-change.errors	string[]	-	apps/sdks/core/dist/types.d.ts:200
input-validation-change.isValid	boolean	-	apps/sdks/core/dist/types.d.ts:199
input-value-change	{ controlId: string; previousValue: unknown; value: unknown; }	Input control value changed	apps/sdks/core/dist/types.d.ts:191
input-value-change.controlId	string	-	apps/sdks/core/dist/types.d.ts:192
input-value-change.previousValue	unknown	-	apps/sdks/core/dist/types.d.ts:194
input-value-change.value	unknown	-	apps/sdks/core/dist/types.d.ts:193
query-executing	{ componentId: string; originalQuery: | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; }; parameterReferences: string[]; queryWithParams: | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; }; }	Query is about to be executed with resolved parameters (for debugging/visualization)	apps/sdks/core/dist/types.d.ts:136
query-executing.componentId	string	-	apps/sdks/core/dist/types.d.ts:137
query-executing.originalQuery	| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; }	-	apps/sdks/core/dist/types.d.ts:138
query-executing.parameterReferences	string[]	-	apps/sdks/core/dist/types.d.ts:140
query-executing.queryWithParams	| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; }	-	apps/sdks/core/dist/types.d.ts:139
select-options-loaded	{ controlId: string; options: { label: string; value: unknown; }[]; }	Select control options loaded from server	apps/sdks/core/dist/types.d.ts:183
select-options-loaded.controlId	string	-	apps/sdks/core/dist/types.d.ts:184
select-options-loaded.options	{ label: string; value: unknown; }[]	-	apps/sdks/core/dist/types.d.ts:185
select-value-change	{ controlId: string; previousValue: unknown; value: unknown; }	Select control value changed	apps/sdks/core/dist/types.d.ts:177
select-value-change.controlId	string	-	apps/sdks/core/dist/types.d.ts:178
select-value-change.previousValue	unknown	-	apps/sdks/core/dist/types.d.ts:180
select-value-change.value	unknown	-	apps/sdks/core/dist/types.d.ts:179
state-change	{ oldState: ReeflowComponentState; state: ReeflowComponentState; }	Component state changed (loading, ready, error, etc.)	apps/sdks/core/dist/types.d.ts:127
state-change.oldState	ReeflowComponentState	-	apps/sdks/core/dist/types.d.ts:129
state-change.state	ReeflowComponentState	-	apps/sdks/core/dist/types.d.ts:128
table-page-change	{ page: number; }	Table page changed (pagination)	apps/sdks/core/dist/types.d.ts:152
table-page-change.page	number	-	apps/sdks/core/dist/types.d.ts:153
table-row-click	{ row: Record<string, unknown> | unknown[]; }	User clicked on a table row	apps/sdks/core/dist/types.d.ts:143
table-row-click.row	Record<string, unknown> | unknown[]	-	apps/sdks/core/dist/types.d.ts:144
table-search-change	{ searchTerm: string; }	Table search term changed	apps/sdks/core/dist/types.d.ts:156
table-search-change.searchTerm	string	-	apps/sdks/core/dist/types.d.ts:157
table-sort-change	{ column: string; direction: "asc" | "desc"; }	Table sorting changed	apps/sdks/core/dist/types.d.ts:147
table-sort-change.column	string	-	apps/sdks/core/dist/types.d.ts:148
table-sort-change.direction	"asc" | "desc"	-	apps/sdks/core/dist/types.d.ts:149
theme-change	ThemeChanged	Theme or theme mode changed	apps/sdks/core/dist/types.d.ts:125
workbook-page-change	{ page: number; previousPage: number; }	Workbook page/tab changed	apps/sdks/core/dist/types.d.ts:166
workbook-page-change.page	number	-	apps/sdks/core/dist/types.d.ts:167
workbook-page-change.previousPage	number	-	apps/sdks/core/dist/types.d.ts:168

---

ReeflowInputElement

Defined in: apps/sdks/core/dist/components/controls/ReeflowInput.d.ts:23

Input control component for free-form text/number/date entry

Fires

reeflow-input-value-change - Fired when input value changes

Fires

reeflow-input-validation-change - Fired when validation state changes

Example

<reeflow-input
  control-id="search"
  type="text"
  label="Search"
  placeholder="Enter search term..."
  value="laptop">
</reeflow-input>

Extends

• ReeflowControl

Other

controlId

controlId: string;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:20

Unique identifier for this control Used in RF_PARAM() references and for registering with the provider

Inherited from

ReeflowControl.controlId

debounce?

optional debounce: number;

Defined in: apps/sdks/core/dist/components/controls/ReeflowInput.d.ts:48

Debounce delay in milliseconds for text inputs

disabled

disabled: boolean;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:32

Whether the control is disabled

Inherited from

ReeflowControl.disabled

label?

optional label: string;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:24

Optional label displayed above the control

Inherited from

ReeflowControl.label

max?

optional max: string;

Defined in: apps/sdks/core/dist/components/controls/ReeflowInput.d.ts:40

Maximum value (for number/date types)

min?

optional min: string;

Defined in: apps/sdks/core/dist/components/controls/ReeflowInput.d.ts:36

Minimum value (for number/date types)

pattern?

optional pattern: string;

Defined in: apps/sdks/core/dist/components/controls/ReeflowInput.d.ts:44

Pattern for validation (regex string)

placeholder?

optional placeholder: string;

Defined in: apps/sdks/core/dist/components/controls/ReeflowInput.d.ts:32

Placeholder text

readonly

readonly: boolean;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:36

Whether the control is read-only

Inherited from

ReeflowControl.readonly

required

required: boolean;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:40

Whether the control is required

Inherited from

ReeflowControl.required

theme

theme: "default" | "ocean";

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:14

Inherited from

ReeflowControl.theme

themeMode

themeMode: ThemeMode;

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:15

Inherited from

ReeflowControl.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:16

Inherited from

ReeflowControl.themeStyle

type

type: InputType;

Defined in: apps/sdks/core/dist/components/controls/ReeflowInput.d.ts:28

Input type

value?

optional value: unknown;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:28

Current/initial value of the control

Inherited from

ReeflowControl.value

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:12

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:13

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowControl.state

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:41

Returns

void

Inherited from

ReeflowControl.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:42

Returns

void

Inherited from

ReeflowControl.disconnectedCallback

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowEventEmitter.d.ts:38

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowControl.emitEvent

emitValueChange()

protected emitValueChange(newValue, oldValue): void;

Defined in: apps/sdks/core/dist/components/controls/ReeflowInput.d.ts:53

Emit input-specific value change event

Parameters

Parameter	Type
newValue	unknown
oldValue	unknown

Returns

void

Overrides

ReeflowControl.emitValueChange

findProvider()

protected findProvider():
  | ReeflowProviderElement
  | null;

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:43

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProviderElement | null

Inherited from

ReeflowControl.findProvider

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProviderElement;

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:48

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProviderElement

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowControl.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowEventEmitter.d.ts:23

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowControl.log

updateValue()

protected updateValue(newValue): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:57

Update the control value and notify the provider Should be called by concrete implementations when the value changes

Parameters

Parameter	Type	Description
newValue	unknown	The new value to set

Returns

void

Inherited from

ReeflowControl.updateValue

rendering

render()

render(): TemplateResult<1>;

Defined in: apps/sdks/core/dist/components/controls/ReeflowInput.d.ts:71

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html’s ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns

TemplateResult<1>

Overrides

ReeflowControl.render

---

ReeflowProviderElement

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:13

Provider component that manages authentication context for child Reeflow components Acts as a context provider in the component tree

Fires

reeflow-auth-change - Fired when authentication context changes. Detail: { authToken: string }

Fires

reeflow-theme-change - Fired when theme or theme mode changes. Detail: { theme: string, themeMode: 'light' | 'dark' }

Fires

reeflow-control-value-change - Fired when any control value changes. Detail: { controlId: string, value: unknown, previousValue: unknown }

Extends

• ReeflowEventEmitter

Other

authHeader

authHeader: string;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:44

The HTTP header name to use for authentication. Defaults to ‘X-Embed-Authorization’ for embedded user tokens. Use ‘Authorization’ for standard Bearer tokens (e.g., Clerk JWT).

authToken

authToken: string;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:38

baseUrl

baseUrl: any;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:45

debug

debug: boolean;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:46

mock

mock: boolean;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:47

theme

theme: "default" | "ocean";

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:48

themeMode

themeMode: ThemeMode;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:49

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:65

CSS variables for theme customization (passed as inline style string)

Note: This property is named themeStyle instead of style because React has special handling for the style prop (it expects an object and calls .setProperty() on it). Using style directly would conflict with React’s built-in style handling and cause errors.

When this property changes, we sync it to the actual HTML style attribute in the updated() lifecycle method so CSS variables are applied to the element.

Example

<ReeflowProvider themeStyle="--color-primary: #ff0000; --color-secondary: #00ff00" />

sdkId

Get Signature

get protected sdkId(): string | undefined;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:30

SDK identifier for API tracking (e.g., “core”, “react”).

This is intentionally accessed via data attributes (data-sdk-id) rather than Lit properties for the following reasons:

1. Internal use only: SDK info is not meant to be set by end users. Data attributes don’t appear in component API documentation or IDE autocomplete.

2. Per-provider isolation: When a page uses both React and Core SDKs simultaneously, each provider instance can have its own SDK identity. The React SDK wrapper sets data-sdk-id="react" on its provider, while direct Core usage defaults to “core”.

3. Build-time injection: SDK wrappers (like React) can inject these values at build time without exposing them as configurable props to consumers.

Returns

string | undefined

sdkVersion

Get Signature

get protected sdkVersion(): string | undefined;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:36

SDK version for API tracking (semver format: x.y.z).

See sdkId getter for documentation on why this uses data attributes.

Returns

string | undefined

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowEventEmitter.d.ts:38

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowEventEmitter.emitEvent

getApiClient()

getApiClient(): ApiClient;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:92

Get the ApiClient instance for this provider

Returns

ApiClient

getAuthContext()

getAuthContext(): {
  authToken: string;
};

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:100

Get authentication context

Returns

{
  authToken: string;
}

Name	Type	Defined in
authToken	string	apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:101

getControlValue()

getControlValue(controlId): unknown;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:129

Get a control’s current value

Parameters

Parameter	Type	Description
controlId	string	Unique identifier for the control

Returns

unknown

The current value or undefined if not found

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowEventEmitter.d.ts:23

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowEventEmitter.log

registerControl()

registerControl(controlId, control): void;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:112

Register a control with this provider

Parameters

Parameter	Type	Description
controlId	string	Unique identifier for the control
control	ReeflowControl	The control instance

Returns

void

resolveParameters()

resolveParameters(controlIds): Record<string, string | number | boolean | string[]>;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:136

Resolve multiple control values by their IDs Used for RF_PARAM() resolution in queries

Parameters

Parameter	Type	Description
controlIds	string[]	Array of control IDs to resolve

Returns

Record<string, string | number | boolean | string[]>

Record of control ID to value mappings (arrays preserved for multi-select)

setControlValue()

setControlValue(controlId, value): void;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:123

Set a control’s value and emit generic control-value-change event

Parameters

Parameter	Type	Description
controlId	string	Unique identifier for the control
value	unknown	The new value

Returns

void

unregisterControl()

unregisterControl(controlId): void;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:117

Unregister a control from this provider

Parameters

Parameter	Type	Description
controlId	string	Unique identifier for the control

Returns

void

updateAuth()

updateAuth(authToken, authHeader?): void;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:106

Update authentication context

Parameters

Parameter	Type
authToken	string
authHeader?	string

Returns

void

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:84

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Overrides

ReeflowEventEmitter.connectedCallback

rendering

render()

render(): TemplateResult<1>;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:145

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html’s ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns

TemplateResult<1>

Overrides

ReeflowEventEmitter.render

updates

firstUpdated()

firstUpdated(): void;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:73

Invoked when the element is first updated. Implement to perform one time work on the element after update.

firstUpdated() {
  this.renderRoot.getElementById('my-text-area').focus();
}

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Returns

void

Overrides

ReeflowEventEmitter.firstUpdated

updated()

updated(changedProperties): void;

Defined in: apps/sdks/core/dist/components/provider/ReeflowProvider.d.ts:74

Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Parameters

Parameter	Type
changedProperties	Map<string, unknown>

Returns

void

Overrides

ReeflowEventEmitter.updated

---

ReeflowSelectElement

Defined in: apps/sdks/core/dist/components/controls/ReeflowSelect.d.ts:41

Select control component for single or multi-selection from predefined options

Supports both static options (via children) and server-loaded options (via JSONQL query).

Fires

reeflow-select-value-change - Fired when selected value changes

Fires

reeflow-select-options-loaded - Fired when options are loaded from server

Example

<!-- Static options -->
<reeflow-select control-id="status" label="Status">
  <option value="active" selected>Active</option>
  <option value="inactive">Inactive</option>
</reeflow-select>

<!-- Server-loaded options -->
<reeflow-select control-id="region" label="Region" value="north-america">
  <script type="application/json" slot="query">
    {
      "type": "table",
      "columns": [
        { "column": "regions.id" },
        { "column": "regions.name" }
      ]
    }
  </script>
</reeflow-select>

Extends

• ReeflowQueryControl

Other

controlId

controlId: string;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:20

Unique identifier for this control Used in RF_PARAM() references and for registering with the provider

Inherited from

ReeflowQueryControl.controlId

disabled

disabled: boolean;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:32

Whether the control is disabled

Inherited from

ReeflowQueryControl.disabled

distinct

distinct: boolean;

Defined in: apps/sdks/core/dist/components/controls/ReeflowSelect.d.ts:62

Remove duplicate options based on value When true, only unique values will be shown in the select

label?

optional label: string;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:24

Optional label displayed above the control

Inherited from

ReeflowQueryControl.label

labelColumn?

optional labelColumn: string;

Defined in: apps/sdks/core/dist/components/controls/ReeflowSelect.d.ts:57

Column name to use as option label When specified, overrides default behavior (second column = label)

multiple

multiple: boolean;

Defined in: apps/sdks/core/dist/components/controls/ReeflowSelect.d.ts:47

Enable multi-select mode When true, value becomes an array

options

options: SelectOption[];

Defined in: apps/sdks/core/dist/components/controls/ReeflowSelect.d.ts:67

Available options for the select Can be set externally to update options without re-mounting the component.

readonly

readonly: boolean;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:36

Whether the control is read-only

Inherited from

ReeflowQueryControl.readonly

required

required: boolean;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:40

Whether the control is required

Inherited from

ReeflowQueryControl.required

theme

theme: "default" | "ocean";

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:14

Inherited from

ReeflowQueryControl.theme

themeMode

themeMode: ThemeMode;

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:15

Inherited from

ReeflowQueryControl.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:16

Inherited from

ReeflowQueryControl.themeStyle

value?

optional value: unknown;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:28

Current/initial value of the control

Inherited from

ReeflowQueryControl.value

valueColumn?

optional valueColumn: string;

Defined in: apps/sdks/core/dist/components/controls/ReeflowSelect.d.ts:52

Column name to use as option value When specified, overrides default behavior (first column = value)

query

Get Signature

get query():
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean | string[]>;
  sql: string;
  type: SQL;
}
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  dimensions?: (
     | {
     column: string;
     label?: string;
     type: "categorical";
   }
     | {
     column: string;
     date_range?: [string, string];
     granularity: "day" | "week" | "month" | "quarter" | "year";
     label?: string;
     type: "time";
  })[];
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  measures: {
     color?: string;
     column?: string;
     label?: string;
     type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum";
  }[];
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  distinct?: boolean;
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: TABLE;
}
  | null;

Defined in: apps/sdks/core/dist/components/base/ReeflowQueryControl.d.ts:36

JSONQL query to execute for loading data Can be set via attribute or inline script tag with slot=“query”

Returns

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Set Signature

set query(value): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowQueryControl.d.ts:37

Parameters

Parameter

Type

value

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Returns

void

Inherited from

ReeflowQueryControl.query

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:12

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:13

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowQueryControl.state

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/dist/components/controls/ReeflowSelect.d.ts:70

Returns

void

Overrides

ReeflowQueryControl.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/dist/components/controls/ReeflowSelect.d.ts:71

Returns

void

Overrides

ReeflowQueryControl.disconnectedCallback

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowEventEmitter.d.ts:38

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowQueryControl.emitEvent

emitValueChange()

protected emitValueChange(newValue, oldValue): void;

Defined in: apps/sdks/core/dist/components/controls/ReeflowSelect.d.ts:93

Emit select-specific value change event

Parameters

Parameter	Type
newValue	unknown
oldValue	unknown

Returns

void

Overrides

ReeflowQueryControl.emitValueChange

executeQuery()

protected executeQuery(): Promise<QueryResult | null>;

Defined in: apps/sdks/core/dist/components/controls/ReeflowSelect.d.ts:79

Override executeQuery to map results to options

Returns

Promise<QueryResult | null>

Overrides

ReeflowQueryControl.executeQuery

findProvider()

protected findProvider():
  | ReeflowProviderElement
  | null;

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:43

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProviderElement | null

Inherited from

ReeflowQueryControl.findProvider

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProviderElement;

Defined in: apps/sdks/core/dist/components/base/ReeflowBaseComponent.d.ts:48

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProviderElement

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowQueryControl.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowEventEmitter.d.ts:23

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowQueryControl.log

updateValue()

protected updateValue(newValue): void;

Defined in: apps/sdks/core/dist/components/base/ReeflowControl.d.ts:57

Update the control value and notify the provider Should be called by concrete implementations when the value changes

Parameters

Parameter	Type	Description
newValue	unknown	The new value to set

Returns

void

Inherited from

ReeflowQueryControl.updateValue

rendering

render()

render(): TemplateResult<1>;

Defined in: apps/sdks/core/dist/components/controls/ReeflowSelect.d.ts:98

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html’s ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns

TemplateResult<1>

Overrides

ReeflowQueryControl.render

---

UseReeflowComponentResult

Defined in: apps/sdks/react/src/hooks/useReeflowComponent.ts:15

Return type for useReeflowComponent hook

Properties

Property	Type	Description	Defined in
data	| QueryResult | undefined	Query result data when available	apps/sdks/react/src/hooks/useReeflowComponent.ts:19
error	ApiError | undefined	Error object if an error occurred	apps/sdks/react/src/hooks/useReeflowComponent.ts:21
isEmpty	boolean	Convenience boolean: true when state is ‘empty’	apps/sdks/react/src/hooks/useReeflowComponent.ts:29
isError	boolean	Convenience boolean: true when state is ‘error’	apps/sdks/react/src/hooks/useReeflowComponent.ts:27
isLoading	boolean	Convenience boolean: true when state is ‘loading’	apps/sdks/react/src/hooks/useReeflowComponent.ts:23
isReady	boolean	Convenience boolean: true when state is ‘ready’	apps/sdks/react/src/hooks/useReeflowComponent.ts:25
refresh	() => void	Refresh the component by re-executing the current query	apps/sdks/react/src/hooks/useReeflowComponent.ts:31
reset	(includeQuery?) => void	Reset the component to its initial state	apps/sdks/react/src/hooks/useReeflowComponent.ts:33
state	| ReeflowComponentState | undefined	Current component state	apps/sdks/react/src/hooks/useReeflowComponent.ts:17

Type Aliases

ConnectionConfig

type ConnectionConfig = z.infer<typeof ConnectionConfigSchema>;

Defined in: packages/types/dist/index.d.mts:1465

---

DataSourceType

type DataSourceType = typeof DataSourceTypes[number];

Defined in: packages/types/dist/index.d.mts:1253

---

ReeflowBarChartProps

type ReeflowBarChartProps = Omit<ReeflowBarChartPropsGenerated, "ref"> & {
  data?: QueryResult;
  query?: JSONQLQuery;
};

Defined in: apps/sdks/react/src/components/charts/bar/ReeflowBarChart.tsx:23

Props for the ReeflowBarChart component.

Extends the generated props with typed data and query properties.

Available event handlers:

• onChartClick — Fired when a bar is clicked, with series name and value.
• onChartHover — Fired when hovering over a bar.
• onChartLegendToggle — Fired when a legend item is toggled.
• onStateChange — Fired on lifecycle transitions (loading, ready, error, empty).
• onDataLoaded — Fired when query data is received.
• onError — Fired when an error occurs.

Type Declaration

Name	Type	Description	Defined in
data?	QueryResult	Data to display in the chart (alternative to query)	apps/sdks/react/src/components/charts/bar/ReeflowBarChart.tsx:25
query?	JSONQLQuery	Query to execute to fetch data for the chart	apps/sdks/react/src/components/charts/bar/ReeflowBarChart.tsx:27

---

ReeflowComponentState

type ReeflowComponentState = "initializing" | "loading" | "error" | "ready" | "empty";

Defined in: apps/sdks/core/dist/types.d.ts:8

State type for Reeflow components

---

ReeflowEventType

type ReeflowEventType =
  | "auth-change"
  | "theme-change"
  | "state-change"
  | "error"
  | "data-loaded"
  | "query-executing"
  | "table-row-click"
  | "table-sort-change"
  | "table-page-change"
  | "table-search-change"
  | "chart-click"
  | "chart-hover"
  | "chart-legend-toggle"
  | "workbook-page-change"
  | "control-value-change"
  | "select-value-change"
  | "select-options-loaded"
  | "input-value-change"
  | "input-validation-change";

Defined in: apps/sdks/core/dist/types.d.ts:62

Reeflow event types

---

ReeflowLineChartProps

type ReeflowLineChartProps = Omit<ReeflowLineChartPropsGenerated, "ref"> & {
  data?: QueryResult;
  query?: JSONQLQuery;
};

Defined in: apps/sdks/react/src/components/charts/line/ReeflowLineChart.tsx:23

Props for the ReeflowLineChart component.

Extends the generated props with typed data and query properties.

Available event handlers:

• onChartClick — Fired when a point is clicked, with series name and value.
• onChartHover — Fired when hovering over a point.
• onChartLegendToggle — Fired when a legend item is toggled.
• onStateChange — Fired on lifecycle transitions (loading, ready, error, empty).
• onDataLoaded — Fired when query data is received.
• onError — Fired when an error occurs.

Type Declaration

Name	Type	Description	Defined in
data?	QueryResult	Data to display in the chart (alternative to query)	apps/sdks/react/src/components/charts/line/ReeflowLineChart.tsx:25
query?	JSONQLQuery	Query to execute to fetch data for the chart	apps/sdks/react/src/components/charts/line/ReeflowLineChart.tsx:27

---

ReeflowPieChartProps

type ReeflowPieChartProps = Omit<ReeflowPieChartPropsGenerated, "ref"> & {
  data?: QueryResult;
  query?: JSONQLQuery;
};

Defined in: apps/sdks/react/src/components/charts/pie/ReeflowPieChart.tsx:23

Props for the ReeflowPieChart component.

Extends the generated props with typed data and query properties.

Available event handlers:

• onChartClick — Fired when a slice is clicked, with series name and value.
• onChartHover — Fired when hovering over a slice.
• onChartLegendToggle — Fired when a legend item is toggled.
• onStateChange — Fired on lifecycle transitions (loading, ready, error, empty).
• onDataLoaded — Fired when query data is received.
• onError — Fired when an error occurs.

Type Declaration

Name	Type	Description	Defined in
data?	QueryResult	Data to display in the chart (alternative to query)	apps/sdks/react/src/components/charts/pie/ReeflowPieChart.tsx:25
query?	JSONQLQuery	Query to execute to fetch data for the chart	apps/sdks/react/src/components/charts/pie/ReeflowPieChart.tsx:27

---

ReeflowProviderProps

type ReeflowProviderProps = Omit<ReeflowProviderPropsGenerated, "sdkId" | "sdkVersion">;

Defined in: apps/sdks/react/src/components/provider/ReeflowProvider.tsx:20

Props for the ReeflowProvider component.

Extends the generated props but omits internal SDK tracking fields (sdkId, sdkVersion) which are set automatically.

---

ReeflowTableProps

type ReeflowTableProps = Omit<ReeflowTablePropsGenerated, "ref"> & {
  data?: QueryResult;
  query?: JSONQLQuery;
};

Defined in: apps/sdks/react/src/components/table/ReeflowTable.tsx:24

Props for the ReeflowTable component.

Extends the generated props with typed data and query properties.

Available event handlers:

• onTableRowClick — Fired when a row is clicked.
• onTableSortChange — Fired when the sort column or direction changes.
• onTablePageChange — Fired when navigating between pages.
• onTableSearchChange — Fired when the search input value changes.
• onStateChange — Fired on lifecycle transitions (loading, ready, error, empty).
• onDataLoaded — Fired when query data is received.
• onError — Fired when an error occurs.

Type Declaration

Name	Type	Description	Defined in
data?	QueryResult	Data to display in the table (alternative to query)	apps/sdks/react/src/components/table/ReeflowTable.tsx:26
query?	JSONQLQuery	Query to execute to fetch data for the table	apps/sdks/react/src/components/table/ReeflowTable.tsx:28

---

ReeflowWorkbookProps

type ReeflowWorkbookProps = Omit<ReeflowWorkbookPropsGenerated, "ref">;

Defined in: apps/sdks/react/src/components/workbook/ReeflowWorkbook.tsx:15

Props for the ReeflowWorkbook component.

Available event handlers:

• onDataLoaded — Fired when the workbook definition is loaded.
• onWorkbookPageChange — Fired when navigating between workbook pages.
• onStateChange — Fired on lifecycle transitions (loading, ready, error, empty).
• onError — Fired when an error occurs.

Variables

DEFAULT_API_BASE_URL

const DEFAULT_API_BASE_URL: string;

Defined in: apps/sdks/react/src/config.ts:9

Default API base URL Uses VITE_API_HOST environment variable if available, otherwise falls back to production URL

---

DEFAULT_TEST_AUTH_TOKEN

const DEFAULT_TEST_AUTH_TOKEN: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0ZXN0IiwiaXNzIjoicmVlZmxvdyIsImF1ZCI6ImRhdGEtYXBpIiwiZXhwIjoxNzg5ODQ4MDIzLCJpYXQiOjE3NTgzMzA3NjksImp0aSI6InNlc3NfNmt0QWVnQ0ZTMUc3NjByZUx5WHJOZzVMZmdqIiwib3JnYW5pemF0aW9uX2lkIjoib3JnXzMyTmM1czh4OHBmcnJaWkl2VUtOR2xacFdBZSJ9.ydGlYK7qa0-gMkPGXI5tDwygMeMRmYkQWIDeXONQOFo" = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0ZXN0IiwiaXNzIjoicmVlZmxvdyIsImF1ZCI6ImRhdGEtYXBpIiwiZXhwIjoxNzg5ODQ4MDIzLCJpYXQiOjE3NTgzMzA3NjksImp0aSI6InNlc3NfNmt0QWVnQ0ZTMUc3NjByZUx5WHJOZzVMZmdqIiwib3JnYW5pemF0aW9uX2lkIjoib3JnXzMyTmM1czh4OHBmcnJaWkl2VUtOR2xacFdBZSJ9.ydGlYK7qa0-gMkPGXI5tDwygMeMRmYkQWIDeXONQOFo';

Defined in: apps/sdks/react/src/config.ts:19

Default test auth token for development and testing This is a valid JWT token for testing with the Reeflow API Uses organization_id ‘demo-org’ matching the SPA demo environment

---

DEFAULT_THEME

const DEFAULT_THEME: "default" = 'default';

Defined in: apps/sdks/react/src/config.ts:25

Default theme for Reeflow components

---

DEFAULT_THEME_MODE

const DEFAULT_THEME_MODE: "auto" = 'auto';

Defined in: apps/sdks/react/src/config.ts:30

Default theme mode for Reeflow components

---

DEFAULT_USE_MOCK

const DEFAULT_USE_MOCK: boolean;

Defined in: apps/sdks/react/src/config.ts:11

---

ReeflowProvider

const ReeflowProvider: ForwardRefExoticComponent<Omit<ReeflowProviderProps, "ref"> & RefAttributes<ReeflowProviderElement>>;

Defined in: apps/sdks/react/src/components/provider/ReeflowProvider.tsx:64

Root provider that configures authentication and theming for all Reeflow components

Every Reeflow component must be wrapped in a ReeflowProvider. The provider handles authentication with the Reeflow API and applies theming across all child components.

Supports forwardRef to access the underlying provider element and its methods (e.g. getApiClient(), updateAuth()).

Examples

Basic usage

import { ReeflowProvider, ReeflowBarChart } from '@reeflow/react';

function App() {
  return (
    <ReeflowProvider authToken="your-embed-token">
      <ReeflowBarChart label="Sales" query={salesQuery} />
    </ReeflowProvider>
  );
}

With theming

<ReeflowProvider authToken="your-token" theme="ocean" themeMode="dark">
  {children}
</ReeflowProvider>

Mock mode for development

<ReeflowProvider mock>
  <ReeflowBarChart label="Demo Chart" query={demoQuery} />
</ReeflowProvider>

---

ReeflowWorkbook

const ReeflowWorkbook: ForwardRefExoticComponent<ReeflowWorkbookProps> = ReeflowWorkbookGenerated;

Defined in: apps/sdks/react/src/components/workbook/ReeflowWorkbook.tsx:42

Embeddable workbook that renders a complete multi-page dashboard

A workbook is a pre-configured collection of components (charts, tables, controls) organized into pages. It is identified by its workbookId and fetches its definition from the Reeflow API at runtime.

Examples

Basic embedding

<ReeflowWorkbook workbookId="wb_abc123" />

With event handlers and theming

<ReeflowWorkbook
  workbookId="wb_abc123"
  theme="ocean"
  themeMode="dark"
  onWorkbookPageChange={({ page }) => console.log('Page:', page)}
  onError={(error) => console.error(error.message)}
/>

---

version

const version: "0.0.1" = '0.0.1';

Defined in: apps/sdks/react/src/index.ts:27

Functions

ReeflowBarChart()

function ReeflowBarChart(__namedParameters): Element;

Defined in: apps/sdks/react/src/components/charts/bar/ReeflowBarChart.tsx:59

Bar chart component for visualizing categorical data

Data can be provided either statically via the data prop or dynamically via a query that fetches from a connected data source.

Parameters

Parameter	Type
__namedParameters	ReeflowBarChartProps

Returns

Element

Examples

With a query

<ReeflowBarChart
  label="Revenue by Region"
  query={{ source: "analytics", dimensions: ["region"], measures: ["revenue"] }}
  onChartClick={(detail) => console.log('Clicked:', detail.name, detail.value)}
/>

With static data

<ReeflowBarChart
  label="Monthly Sales"
  data={{
    columns: [{ name: 'month' }, { name: 'sales' }],
    rows: [['Jan', 100], ['Feb', 150], ['Mar', 120]],
    row_count: 3,
  }}
/>

---

ReeflowContainer()

function ReeflowContainer(__namedParameters): Element;

Defined in: apps/sdks/react/src/components/container/ReeflowContainer.tsx:50

Parameters

Parameter	Type
__namedParameters	ReeflowContainerProps

Returns

Element

---

ReeflowLineChart()

function ReeflowLineChart(__namedParameters): Element;

Defined in: apps/sdks/react/src/components/charts/line/ReeflowLineChart.tsx:59

Line chart component for visualizing trends and time series data

Data can be provided either statically via the data prop or dynamically via a query that fetches from a connected data source.

Parameters

Parameter	Type
__namedParameters	ReeflowLineChartProps

Returns

Element

Examples

With a query

<ReeflowLineChart
  label="Revenue Over Time"
  query={{ source: "analytics", dimensions: ["date"], measures: ["revenue"] }}
  onChartClick={(detail) => console.log('Clicked:', detail.name, detail.value)}
/>

With static data

<ReeflowLineChart
  label="Weekly Signups"
  data={{
    columns: [{ name: 'week' }, { name: 'signups' }],
    rows: [['W1', 50], ['W2', 75], ['W3', 60]],
    row_count: 3,
  }}
/>

---

ReeflowPieChart()

function ReeflowPieChart(__namedParameters): Element;

Defined in: apps/sdks/react/src/components/charts/pie/ReeflowPieChart.tsx:59

Pie chart component for visualizing proportions and distributions

Data can be provided either statically via the data prop or dynamically via a query that fetches from a connected data source.

Parameters

Parameter	Type
__namedParameters	ReeflowPieChartProps

Returns

Element

Examples

With a query

<ReeflowPieChart
  label="Market Share"
  query={{ source: "analytics", dimensions: ["vendor"], measures: ["share"] }}
  onChartClick={(detail) => console.log('Clicked:', detail.name, detail.value)}
/>

With static data

<ReeflowPieChart
  label="Traffic Sources"
  data={{
    columns: [{ name: 'source' }, { name: 'visits' }],
    rows: [['Organic', 450], ['Paid', 300], ['Referral', 150]],
    row_count: 3,
  }}
/>

---

ReeflowTable()

function ReeflowTable(__namedParameters): Element;

Defined in: apps/sdks/react/src/components/table/ReeflowTable.tsx:66

Data table component with sorting, pagination, and search

Renders tabular data with optional interactive features. Data can be provided either statically via the data prop or dynamically via a query that fetches from a connected data source.

Parameters

Parameter	Type
__namedParameters	ReeflowTableProps

Returns

Element

Examples

With a query and interactive features

<ReeflowTable
  label="Users"
  query={{ source: "users", columns: ["name", "email", "role"] }}
  sort
  pagination
  pageSize={20}
  search
  searchPlaceholder="Search users..."
  onTableRowClick={(detail) => console.log('Row clicked:', detail)}
/>

With static data

<ReeflowTable
  label="Summary"
  data={{
    columns: [{ name: 'metric' }, { name: 'value' }],
    rows: [['Users', 1200], ['Revenue', 45000]],
    row_count: 2,
  }}
/>

---

useReeflowComponent()

function useReeflowComponent(componentId): UseReeflowComponentResult;

Defined in: apps/sdks/react/src/hooks/useReeflowComponent.ts:102

Hook to access a Reeflow component’s state, data, and control methods

This hook provides a React-friendly way to access and control Reeflow components without manually managing refs or event listeners.

Parameters

Parameter	Type	Description
componentId	string	The unique ID of the Reeflow component (must match the component’s id prop)

Returns

UseReeflowComponentResult

Object containing state, data, error, convenience booleans, and control methods

Examples

Basic usage with loading and error states

function SalesChart() {
  const { data, isLoading, isError, error } = useReeflowComponent('sales-chart');

  return (
    <div>
      {isLoading && <Spinner />}
      {isError && <ErrorMessage error={error} />}
      {data && <p>Loaded {data.row_count} rows</p>}

      <ReeflowBarChart id="sales-chart" query={query} />
    </div>
  );
}

Using refresh and reset methods

function InteractiveChart() {
  const { data, refresh, reset } = useReeflowComponent('chart');

  return (
    <div>
      <button onClick={refresh}>Refresh Data</button>
      <button onClick={() => reset(true)}>Reset Query</button>

      <ReeflowBarChart id="chart" query={query} />
    </div>
  );
}

Dashboard with multiple components

function Dashboard() {
  const revenue = useReeflowComponent('revenue-chart');
  const orders = useReeflowComponent('orders-chart');

  const isLoading = revenue.isLoading || orders.isLoading;
  const hasErrors = revenue.isError || orders.isError;

  return (
    <div>
      {isLoading && <p>Loading dashboard...</p>}
      {hasErrors && <p>Some charts failed to load</p>}

      <ReeflowBarChart id="revenue-chart" query={revenueQuery} />
      <ReeflowLineChart id="orders-chart" query={ordersQuery} />
    </div>
  );
}