[improvements] Table - exposed active sort options and add an event (#4151)

* exposed sorted options

* adds onSort event

* clean up

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

@@ -322,6 +322,29 @@ export function Table({
     }
   );
 
+  const sortOptions = useMemo(() => {
+    if (state?.sortBy?.length === 0) {
+      return;
+    }
+
+    const columnName = columns.find((column) => column.id === state?.sortBy?.[0]?.id).accessor;
+
+    return {
+      sortedBy: {
+        column: columnName,
+        direction: state?.sortBy?.[0]?.desc ? 'descending' : 'ascending',
+      },
+    };
+  }, [JSON.stringify(state)]);
+
+  useEffect(() => {
+    if (!sortOptions) {
+      setExposedVariable('sortedBy', null);
+      return;
+    }
+    setExposedVariable('sortedBy', sortOptions.sortedBy).then(() => fireEvent('onSort'));
+  }, [sortOptions]);
+
   registerAction(
     'setPage',
     async function (targetPageIndex) {

frontend/src/Editor/WidgetManager/widgetConfig.js

@@ -225,6 +225,7 @@ export const widgets = [
       onBulkUpdate: { displayName: 'Bulk update' },
       onPageChanged: { displayName: 'Page changed' },
       onSearch: { displayName: 'Search' },
+      onSort: { displayName: 'On sorting columns' },
       onCellValueChanged: { displayName: 'Cell value changed' },
       onFilterChanged: { displayName: 'Filter changed' },
     },

frontend/src/_helpers/appUtils.js

@@ -512,6 +512,7 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') {
       'onOpen',
       'onClose',
       'onRowClicked',
+      'onSort',
       'onCellValueChanged',
       'onFilterChanged',
     ].includes(eventName)