diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx index 0c23c42354..393c92358c 100644 --- a/frontend/src/Editor/Components/Table/Table.jsx +++ b/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)]); diff --git a/frontend/src/Editor/Components/Table/load-properties-and-styles.js b/frontend/src/Editor/Components/Table/load-properties-and-styles.js index 4589f9d34d..95f09b8a84 100644 --- a/frontend/src/Editor/Components/Table/load-properties-and-styles.js +++ b/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, diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx index afdfc26112..055cd8d625 100644 --- a/frontend/src/Editor/Inspector/Components/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table.jsx @@ -830,6 +830,7 @@ class TableComponent extends React.Component { 'showBulkUpdateActions', 'showBulkSelector', 'highlightSelectedRow', + 'serverSideSort', ]; let renderOptions = []; diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js index 3d329436e0..1e297d2949 100644 --- a/frontend/src/Editor/WidgetManager/widgetConfig.js +++ b/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}}' },