server side sorting by

apache · Jun 8, 2021 · 8d64cd3 · 8d64cd3
1 parent b07034f
commit 8d64cd3
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 21 deletions.
diff --git a/superset-frontend/src/components/TableView/TableView.tsx b/superset-frontend/src/components/TableView/TableView.tsx
@@ -17,11 +17,12 @@
  * under the License.
  */
 import React, { useEffect } from 'react';
+import isEqual from 'lodash/isEqual';
 import { styled, t } from '@superset-ui/core';
 import { useFilters, usePagination, useSortBy, useTable } from 'react-table';
 import { Empty } from 'src/common/components';
 import { TableCollection, Pagination } from 'src/components/dataViewCommon';
-import { SortColumns } from './types';
+import { SortByType, ServerPagination } from './types';
 
 const DEFAULT_PAGE_SIZE = 10;
 
@@ -35,10 +36,10 @@ export interface TableViewProps {
   data: any[];
   pageSize?: number;
   totalCount?: number;
-  manualPagination?: boolean;
-  onGotoPage?: (page: number) => void;
+  serverPagination?: boolean;
+  onServerPagination?: (args: ServerPagination) => void;
   initialPageIndex?: number;
-  initialSortBy?: SortColumns;
+  initialSortBy?: SortByType;
   loading?: boolean;
   withPagination?: boolean;
   emptyWrapperType?: EmptyWrapperType;
@@ -103,8 +104,8 @@ const TableView = ({
   emptyWrapperType = EmptyWrapperType.Default,
   noDataText,
   showRowCount = true,
-  manualPagination = false,
-  onGotoPage = () => {},
+  serverPagination = false,
+  onServerPagination = () => {},
   ...props
 }: TableViewProps) => {
   const initialState = {
@@ -122,13 +123,14 @@ const TableView = ({
     prepareRow,
     pageCount,
     gotoPage,
-    state: { pageIndex, pageSize },
+    state: { pageIndex, pageSize, sortBy },
   } = useTable(
     {
       columns,
       data,
       initialState,
-      manualPagination,
+      manualPagination: serverPagination,
+      manualSortBy: serverPagination,
       pageCount: Math.ceil(totalCount / initialState.pageSize),
     },
     useFilters,
@@ -137,11 +139,22 @@ const TableView = ({
   );
 
   useEffect(() => {
-    if (manualPagination && pageIndex !== initialState.pageIndex) {
-      onGotoPage(pageIndex);
+    if (serverPagination && pageIndex !== initialState.pageIndex) {
+      onServerPagination({
+        pageIndex,
+      });
     }
   }, [pageIndex]);
 
+  useEffect(() => {
+    if (serverPagination && !isEqual(sortBy, initialState.sortBy)) {
+      onServerPagination({
+        pageIndex: 0,
+        sortBy,
+      });
+    }
+  }, [sortBy]);
+
   const content = withPagination ? page : rows;
 
   let EmptyWrapperComponent;

diff --git a/superset-frontend/src/components/TableView/types.ts b/superset-frontend/src/components/TableView/types.ts
@@ -16,9 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export interface SortColumn {
-  id: string;
-  desc?: boolean;
-}
+import { SortingRule } from 'react-table';
+
+export type SortByType = SortingRule<string>[];
 
-export type SortColumns = SortColumn[];
+export interface ServerPagination {
+  pageIndex: number;
+  sortBy?: SortByType;
+}
diff --git a/superset-frontend/src/datasource/ChangeDatasourceModal.tsx b/superset-frontend/src/datasource/ChangeDatasourceModal.tsx
@@ -26,6 +26,7 @@ import React, {
 import Alert from 'src/components/Alert';
 import { SupersetClient, t, styled } from '@superset-ui/core';
 import TableView, { EmptyWrapperType } from 'src/components/TableView';
+import { ServerPagination, SortByType } from 'src/components/TableView/types';
 import StyledModal from 'src/components/Modal';
 import Button from 'src/components/Button';
 import { useListViewResource } from 'src/views/CRUD/hooks';
@@ -104,6 +105,7 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
 }) => {
   const [filter, setFilter] = useState<any>(undefined);
   const [pageIndex, setPageIndex] = useState<number>(0);
+  const [sortBy, setSortBy] = useState<SortByType>(DATASET_SORT_BY);
   const [confirmChange, setConfirmChange] = useState(false);
   const [confirmedDataset, setConfirmedDataset] = useState<Datasource>();
   const searchRef = useRef<AntdInput>(null);
@@ -118,17 +120,17 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
     setConfirmedDataset(datasource);
   }, []);
 
-  const fetchDataPayload = {
+  const fetchDatasetPayload = {
     pageIndex,
     pageSize: DATASET_PAGE_SIZE,
     filters: [],
-    sortBy: DATASET_SORT_BY,
+    sortBy,
   };
 
   useDebouncedEffect(
     () => {
       fetchData({
-        ...fetchDataPayload,
+        ...fetchDatasetPayload,
         ...(filter && {
           filters: [
             {
@@ -141,7 +143,7 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
       });
     },
     SLOW_DEBOUNCE,
-    [filter, pageIndex],
+    [filter, pageIndex, sortBy],
   );
 
   useEffect(() => {
@@ -215,6 +217,14 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
     return data;
   };
 
+  const onServerPagination = (args: ServerPagination) => {
+    setPageIndex(args.pageIndex);
+    if (args.sortBy) {
+      // ensure default sort by
+      setSortBy(args.sortBy.length > 0 ? args.sortBy : DATASET_SORT_BY);
+    }
+  };
+
   return (
     <StyledModal
       show={show}
@@ -270,11 +280,12 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
                 data={renderTableView()}
                 pageSize={DATASET_PAGE_SIZE}
                 initialPageIndex={pageIndex}
+                initialSortBy={sortBy}
                 totalCount={resourceCount}
-                onGotoPage={page => setPageIndex(page)}
+                onServerPagination={onServerPagination}
                 className="table-condensed"
                 emptyWrapperType={EmptyWrapperType.Small}
-                manualPagination
+                serverPagination
                 isPaginationSticky
                 scrollTable
               />