diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index 9501633a76..015281084b 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { renderElement, renderEvent } from '../Utils';
+import { renderElement, renderEvent, renderQuerySelector } from '../Utils';
import { computeActionName } from '@/_helpers/utils';
import SortableList, { SortableItem } from 'react-easy-sort';
import arrayMove from 'array-move';
@@ -384,6 +384,8 @@ class Table extends React.Component {
{renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked)}
{renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged)}
+ {renderQuerySelector(component, dataQueries, eventOptionUpdated, 'onBulkUpdate', componentMeta.events.onBulkUpdate)}
+
diff --git a/frontend/src/Editor/Inspector/QuerySelector.jsx b/frontend/src/Editor/Inspector/QuerySelector.jsx
new file mode 100644
index 0000000000..ea6c0f0a40
--- /dev/null
+++ b/frontend/src/Editor/Inspector/QuerySelector.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import SelectSearch, { fuzzySearch } from 'react-select-search';
+
+export const QuerySelector = ({
+ param,
+ definition,
+ eventOptionUpdated,
+ dataQueries,
+ extraData,
+ eventMeta
+}) => {
+
+ function onChange(value) {
+ const query = dataQueries.find((dataquery) => dataquery.id === value);
+ eventOptionUpdated(param, 'queryId', query.id, extraData);
+ eventOptionUpdated(param, 'queryName', query.name, extraData);
+ }
+
+ if (definition === undefined) {
+ definition = {};
+ }
+
+ if (definition.options === undefined) {
+ definition.options = {};
+ }
+
+ return (
+
+
+ {
+ return { name: query.name, value: query.id };
+ })}
+ value={definition.options.queryId}
+ search={true}
+ onChange={(value) => {
+ onChange(value);
+ }}
+ filterOptions={fuzzySearch}
+ placeholder="Select.."
+ />
+
+ );
+};
diff --git a/frontend/src/Editor/Inspector/Utils.js b/frontend/src/Editor/Inspector/Utils.js
index d5787cb7ee..e517bd90d6 100644
--- a/frontend/src/Editor/Inspector/Utils.js
+++ b/frontend/src/Editor/Inspector/Utils.js
@@ -6,6 +6,7 @@ import { Code } from './Elements/Code';
import { Toggle } from './Elements/Toggle';
import { TypeMapping } from './TypeMapping';
import { EventSelector } from './EventSelector';
+import { QuerySelector } from './QuerySelector';
const AllElements = {
Color,
@@ -15,6 +16,19 @@ const AllElements = {
Toggle
};
+export function renderQuerySelector(component, dataQueries, eventOptionUpdated, eventName, eventMeta) {
+ let definition = component.component.definition.events[eventName];
+ definition = definition || { };
+
+ return (
)
+}
+
export function renderElement(component, componentMeta, paramUpdated, dataQueries, param, paramType, currentState, components = {}) {
const definition = component.component.definition[paramType][param];
const meta = componentMeta[paramType][param];