adds option for server sort (#4337)

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

@@ -55,6 +55,7 @@ export function Table({
     serverSidePagination,
     clientSidePagination,
     serverSideSearch,
+    serverSideSort,
     displaySearchBox,
     showDownloadButton,
     showFilterButton,
@@ -291,6 +292,7 @@ export function Table({
       pageCount: -1,
       manualPagination: false,
       getExportFileBlob,
+      manualSortBy: serverSideSort,
     },
     useFilters,
     useGlobalFilter,
@@ -333,7 +335,7 @@ export function Table({
     return {
       sortedBy: {
         column: columnName,
-        direction: state?.sortBy?.[0]?.desc ? 'descending' : 'ascending',
+        direction: state?.sortBy?.[0]?.desc ? 'desc' : 'asc',
       },
     };
   }, [JSON.stringify(state)]);

frontend/src/Editor/Components/Table/load-properties-and-styles.js

@@ -6,6 +6,8 @@ export default function loadPropertiesAndStyles(properties, styles, darkMode, co
 
   const serverSideSearch = properties.serverSideSearch ?? false;
 
+  const serverSideSort = properties.serverSideSort ?? false;
+
   const displaySearchBox = properties.displaySearchBox ?? true;
 
   const showDownloadButton = properties.showDownloadButton ?? true;
@@ -49,6 +51,7 @@ export default function loadPropertiesAndStyles(properties, styles, darkMode, co
     serverSidePagination,
     clientSidePagination,
     serverSideSearch,
+    serverSideSort,
     displaySearchBox,
     showDownloadButton,
     showFilterButton,

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

@@ -830,6 +830,7 @@ class TableComponent extends React.Component {
       'showBulkUpdateActions',
       'showBulkSelector',
       'highlightSelectedRow',
+      'serverSideSort',
     ];
 
     let renderOptions = [];

frontend/src/Editor/WidgetManager/widgetConfig.js

@@ -155,6 +155,13 @@ export const widgets = [
           schema: { type: 'boolean' },
         },
       },
+      serverSideSort: {
+        type: 'toggle',
+        displayName: 'Server-side sort',
+        validation: {
+          schema: { type: 'boolean' },
+        },
+      },
       actionButtonBackgroundColor: {
         type: 'color',
         displayName: 'Background color',
@@ -328,6 +335,7 @@ export const widgets = [
         },
         serverSidePagination: { value: '{{false}}' },
         clientSidePagination: { value: '{{true}}' },
+        serverSideSort: { value: '{{false}}' },
         displaySearchBox: { value: '{{true}}' },
         showDownloadButton: { value: '{{true}}' },
         showFilterButton: { value: '{{true}}' },