add sorting for query results grid and add natural order sort

apache · Feb 9, 2022 · 1893c09 · 1893c09
1 parent f03b4db
commit 1893c09
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 14 deletions.
diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx
@@ -114,8 +114,9 @@ interface FilterableTableProps {
 
 interface FilterableTableState {
   sortBy?: string;
-  sortDirection: SortDirectionType;
+  sortDirection?: SortDirectionType;
   fitted: boolean;
+  displayedList: Datum[];
 }
 
 export default class FilterableTable extends PureComponent<
@@ -175,8 +176,8 @@ export default class FilterableTable extends PureComponent<
     this.totalTableHeight = props.height;
 
     this.state = {
-      sortDirection: SortDirection.ASC,
       fitted: false,
+      displayedList: [...this.list],
     };
 
     this.container = React.createRef();
@@ -191,7 +192,7 @@ export default class FilterableTable extends PureComponent<
   }
 
   getWidthsForColumns() {
-    const PADDING = 40; // accounts for cell padding and width of sorting icon
+    const PADDING = 50; // accounts for cell padding and width of sorting icon
     const widthsByColumnKey = {};
     const cellContent = ([] as string[]).concat(
       ...this.props.orderedColumnKeys.map(key => {
@@ -295,7 +296,30 @@ export default class FilterableTable extends PureComponent<
     sortBy: string;
     sortDirection: SortDirectionType;
   }) {
-    this.setState({ sortBy, sortDirection });
+    this.setState(
+      ({
+        sortBy: prevSortBy,
+        sortDirection: prevSortDirection,
+        displayedList: prevDisplayedList,
+      }) => {
+        const shouldClearSort =
+          prevSortDirection === SortDirection.DESC && prevSortBy === sortBy;
+        if (shouldClearSort)
+          return {
+            sortBy: undefined,
+            sortDirection: undefined,
+            displayedList: [...this.list],
+          };
+
+        return {
+          sortBy,
+          sortDirection,
+          displayedList: prevDisplayedList.sort(
+            this.sortResults(sortBy, sortDirection === SortDirection.DESC),
+          ),
+        };
+      },
+    );
   }
 
   fitTableToWidthIfNeeded() {
@@ -362,6 +386,17 @@ export default class FilterableTable extends PureComponent<
     };
   }
 
+  sortGrid = (label: string) => {
+    this.sort({
+      sortBy: label,
+      sortDirection:
+        this.state.sortDirection === SortDirection.DESC ||
+        this.state.sortBy !== label
+          ? SortDirection.ASC
+          : SortDirection.DESC,
+    });
+  };
+
   renderTableHeader({
     dataKey,
     label,
@@ -425,8 +460,14 @@ export default class FilterableTable extends PureComponent<
                 : style.top,
           }}
           className={`${className} grid-cell grid-header-cell`}
+          role="columnheader"
+          tabIndex={columnIndex}
+          onClick={() => this.sortGrid(label)}
         >
-          <div>{label}</div>
+          {label}
+          {this.state.sortBy === label && (
+            <SortIndicator sortDirection={this.state.sortDirection} />
+          )}
         </div>
       </Tooltip>
     );
@@ -444,7 +485,7 @@ export default class FilterableTable extends PureComponent<
     style: React.CSSProperties;
   }) {
     const columnKey = this.props.orderedColumnKeys[columnIndex];
-    const cellData = this.list[rowIndex][columnKey];
+    const cellData = this.state.displayedList[rowIndex][columnKey];
     const cellText = this.getCellContent({ cellData, columnKey });
     const content =
       cellData === null ? <i className="text-muted">{cellText}</i> : cellText;
@@ -563,19 +604,13 @@ export default class FilterableTable extends PureComponent<
       rowHeight,
     } = this.props;
 
-    let sortedAndFilteredList = this.list;
+    let sortedAndFilteredList = this.state.displayedList;
     // filter list
     if (filterText) {
-      sortedAndFilteredList = this.list.filter((row: Datum) =>
+      sortedAndFilteredList = sortedAndFilteredList.filter((row: Datum) =>
         this.hasMatch(filterText, row),
       );
     }
-    // sort list
-    if (sortBy) {
-      sortedAndFilteredList = sortedAndFilteredList.sort(
-        this.sortResults(sortBy, sortDirection === SortDirection.DESC),
-      );
-    }
 
     let { height } = this.props;
     let totalTableHeight = height;

diff --git a/superset-frontend/src/components/FilterableTable/FilterableTableStyles.less b/superset-frontend/src/components/FilterableTable/FilterableTableStyles.less
@@ -57,6 +57,7 @@
 
 .grid-header-cell {
   font-weight: @font-weight-bold;
+  cursor: pointer;
 }
 
 .ReactVirtualized__Table__headerColumn:last-of-type,