From 3af3835e7d3c3f6835c6141d62f8de7907d68f42 Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Thu, 6 Oct 2022 11:50:53 +0530
Subject: [PATCH] [improvements] Table - exposed active sort options and add an
 event (#4151)

* exposed sorted options

* adds onSort event

* clean up
---
 .../src/Editor/Components/Table/Table.jsx     | 23 +++++++++++++++++++
 .../src/Editor/WidgetManager/widgetConfig.js  |  1 +
 frontend/src/_helpers/appUtils.js             |  1 +
 3 files changed, 25 insertions(+)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index e1e36e8a92..0502583dc5 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/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) {
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index 9ea18ef867..3d329436e0 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/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' },
     },
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index 7111aa0da3..4ddd7a3746 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/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)