Feature: Server-side search for table widget 🎉

frontend/src/Editor/Components/Table/Table.jsx

@@ -38,6 +38,9 @@ export function Table({
   const serverSidePaginationProperty = component.definition.properties.serverSidePagination;
   const serverSidePagination = serverSidePaginationProperty ? serverSidePaginationProperty.value : false;
 
+  const serverSideSearchProperty = component.definition.properties.serverSideSearch;
+  const serverSideSearch = serverSideSearchProperty ? serverSideSearchProperty.value : false;
+
   const [loadingState, setLoadingState] = useState(false);
 
   useEffect(() => {
@@ -453,19 +456,29 @@ export function Table({
       setGlobalFilter(filterValue || undefined);
     }, 200);
 
+    const handleSearchTextChange = (text) => {
+
+      setValue(text);
+      onChange(text);
+
+      onComponentOptionChanged(component, 'searchText', text).then(() => {
+        if(serverSideSearch === true ) {
+          onEvent('onSearch', { component, data: {} });
+        }
+      });
+    }
+
     return (
       <div className="ms-2 d-inline-block">
         Search:{' '}
         <input
           defaultValue={value || ''}
           onBlur={(e) => {
-            setValue(e.target.value);
+            handleSearchTextChange(e.target.value)
-            onChange(e.target.value);
           }}
           onKeyDown={(e) => {
             if(e.key === 'Enter') {
-              setValue(e.target.value);
+              handleSearchTextChange(e.target.value)
-              onChange(e.target.value);
             }
           }
 

frontend/src/Editor/Components/components.js

@@ -10,6 +10,7 @@ export const componentTypes = [
       loadingState: { type: 'code', displayName: 'Loading state' },
       columns: { type: 'array', displayName: 'Table Columns' },
       serverSidePagination: { type: 'toggle', displayName: 'Server-side pagination'},
+      serverSideSearch: { type: 'toggle', displayName: 'Server-side search'},
       actionButtonBackgroundColor: { type: 'color', displayName: 'Background color'},
       actionButtonTextColor: { type: 'color', displayName: 'Text color'}
     },
@@ -20,7 +21,8 @@ export const componentTypes = [
     events: {
       onRowClicked: { displayName: 'On row clicked'},
       onBulkUpdate: { displayName: 'Bulk update query'},
-      onPageChanged: { displayName: 'On page changed'}
+      onPageChanged: { displayName: 'On page changed'},
+      onSearch: { displayName: 'On search'}
     },
     styles: {
       textColor: { type: 'color', displayName: 'Text Color' }
@@ -29,7 +31,8 @@ export const componentTypes = [
       selectedRow: {},
       changeSet: {},
       dataUpdates: [],
-      pageIndex: 0
+      pageIndex: 0,
+      searchText: ''
     },
     definition: {
       properties: {
@@ -61,7 +64,12 @@ export const componentTypes = [
             options: {
   
             }
+        },
+        onSearch: {
+          options: {
+
           }
+        }
       },
       styles: {
         textColor: { value: '' }

frontend/src/Editor/Inspector/Components/Table.jsx

@@ -401,11 +401,13 @@ class Table extends React.Component {
           <hr></hr>
 
           {renderElement(component, componentMeta, paramUpdated, dataQueries, 'serverSidePagination', 'properties', currentState)}
+          {renderElement(component, componentMeta, paramUpdated, dataQueries, 'serverSideSearch', 'properties', currentState)}
 
           <div class="hr-text">Events</div>
 
           {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked, currentState, components)}
           {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged, currentState, components)}
+          {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onSearch', componentMeta.events.onSearch, currentState, components)}
 
           {renderQuerySelector(component, dataQueries, eventOptionUpdated, 'onBulkUpdate', componentMeta.events.onBulkUpdate)}
 

frontend/src/_helpers/appUtils.js

@@ -174,9 +174,9 @@ export function onEvent(_ref, eventName, options) {
     }
   }
 
-  if (eventName === 'onPageChanged') {
+  if (['onPageChanged', 'onSearch'].includes(eventName)) {
     const { component } = options;
-    const event = component.definition.events.onPageChanged;
+    const event = component.definition.events[eventName];
 
     if (event.actionId) {
       executeAction(_self, event);