feat(chart): add server-side column sorting for table and drill-detail views

superset-frontend/plugins/plugin-chart-ag-grid-table/src/buildQuery.ts

@@ -131,13 +131,18 @@ const buildQuery: BuildQuery<TableChartFormData> = (
 
     if (queryMode === QueryMode.Aggregate) {
       metrics = metrics || [];
-      // override orderby with timeseries metric when in aggregation mode
-      if (sortByMetric) {
-        orderby = [[sortByMetric, !orderDesc]];
-      } else if (metrics?.length > 0) {
-        // default to ordering by first metric in descending order
-        // when no "sort by" metric is set (regardless if "SORT DESC" is set to true)
-        orderby = [[metrics[0], false]];
+      // Fall back to a metric-based default sort only when no explicit orderby
+      // was supplied (e.g. a column sort from the "View as table" results pane).
+      // An explicit orderby from form data takes precedence.
+      if (orderby.length === 0) {
+        // override orderby with timeseries metric when in aggregation mode
+        if (sortByMetric) {
+          orderby = [[sortByMetric, !orderDesc]];
+        } else if (metrics?.length > 0) {
+          // default to ordering by first metric in descending order
+          // when no "sort by" metric is set (regardless if "SORT DESC" is set to true)
+          orderby = [[metrics[0], false]];
+        }
       }
       // add postprocessing for percent metrics only when in aggregation mode
       if (percentMetrics && percentMetrics.length > 0) {

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -1305,6 +1305,18 @@ export default function TableChart<D extends DataRecord = DataRecord>(
               }
             }}
             role="columnheader button"
+            // Expose sort state to assistive technology. Only
+            // sortable headers advertise aria-sort; the value tracks the
+            // ascending/descending/none cycle rendered by <SortIcon>.
+            aria-sort={
+              col.canSort
+                ? col.isSorted
+                  ? col.isSortedDesc
+                    ? 'descending'
+                    : 'ascending'
+                  : 'none'
+                : undefined
+            }
             onClick={onClick}
             data-column-name={col.id}
             {...(allowRearrangeColumns && {
@@ -1524,10 +1536,13 @@ export default function TableChart<D extends DataRecord = DataRecord>(
       const modifiedOwnState = {
         ...serverPaginationData,
         sortBy,
+        // Changing the sort re-queries the full dataset, so the
+        // previous page offset is meaningless — return to the first page.
+        currentPage: 0,
       };
       updateTableOwnState(setDataMask, modifiedOwnState);
     },
-    [serverPagination, serverPaginationData, setDataMask],
+    [serverPaginationData, setDataMask],
   );
 
   const handleSearch = (searchText: string) => {

superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts

@@ -128,13 +128,18 @@ const buildQuery: BuildQuery<TableChartFormData> = (
 
     if (queryMode === QueryMode.Aggregate) {
       metrics = metrics || [];
-      // override orderby with timeseries metric when in aggregation mode
-      if (sortByMetric) {
-        orderby = [[sortByMetric, !orderDesc]];
-      } else if (metrics?.length > 0) {
-        // default to ordering by first metric in descending order
-        // when no "sort by" metric is set (regardless if "SORT DESC" is set to true)
-        orderby = [[metrics[0], false]];
+      // Fall back to a metric-based default sort only when no explicit orderby
+      // was supplied (e.g. a column sort from the "View as table" results pane).
+      // An explicit orderby from form data takes precedence.
+      if (orderby.length === 0) {
+        // override orderby with timeseries metric when in aggregation mode
+        if (sortByMetric) {
+          orderby = [[sortByMetric, !orderDesc]];
+        } else if (metrics?.length > 0) {
+          // default to ordering by first metric in descending order
+          // when no "sort by" metric is set (regardless if "SORT DESC" is set to true)
+          orderby = [[metrics[0], false]];
+        }
       }
       // add postprocessing for percent metrics only when in aggregation mode
       type PercentMetricCalculationMode = 'row_limit' | 'all_records';

superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx

@@ -2457,3 +2457,26 @@ describe('Drill-to-Detail Temporal Range Logic', () => {
     expect(filter.val).toBeNull();
   });
 });
+
+// Server-side full sort: accessibility of sortable headers.
+// Every sortable column header must expose its sort state via
+// aria-sort, and the value must track the asc/desc/none cycle.
+const VALID_ARIA_SORT = ['none', 'ascending', 'descending'];
+
+test('sortable column headers expose and update aria-sort (F3-T1, NFR-ACC-01)', () => {
+  render(<TableChart {...transformProps(testData.advanced)} sticky={false} />);
+
+  const headerCell = screen.getByText('Sum of Num').closest('th') as HTMLElement;
+  expect(headerCell).toBeInTheDocument();
+
+  // A sortable header must advertise a valid aria-sort token (the exact
+  // initial value depends on any default sort in formData, so accept any).
+  const initial = headerCell.getAttribute('aria-sort');
+  expect(VALID_ARIA_SORT).toContain(initial);
+
+  // Clicking the header changes the sort, and aria-sort tracks that change.
+  fireEvent.click(headerCell);
+  const afterClick = headerCell.getAttribute('aria-sort');
+  expect(VALID_ARIA_SORT).toContain(afterClick);
+  expect(afterClick).not.toEqual(initial);
+});

superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx

@@ -45,6 +45,9 @@ import { EmptyState, Loading } from '@superset-ui/core/components';
 import { getDatasourceSamples } from 'src/components/Chart/chartAction';
 import Table, {
   ColumnsType,
+  ETableAction,
+  SorterResult,
+  SortOrder,
   TableSize,
 } from '@superset-ui/core/components/Table';
 import { RootState } from 'src/dashboard/types';
@@ -94,6 +97,8 @@ export default function DrillDetailPane({
   const theme = useTheme();
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+  const [sortColumn, setSortColumn] = useState<string | undefined>();
+  const [sortOrder, setSortOrder] = useState<SortOrder>(null);
   const lastPageIndex = useRef(pageIndex);
   const [filters, setFilters] = useState(initialFilters);
   const [isLoading, setIsLoading] = useState(false);
@@ -147,6 +152,10 @@ export default function DrillDetailPane({
       resultsPage?.colNames.map((column, index) => ({
         key: column,
         dataIndex: column,
+        // Server-side sort: antd only renders the indicator and fires onChange;
+        // the sorted page is fetched from the server (see `orderby`).
+        sorter: true,
+        sortOrder: sortColumn === column ? sortOrder : null,
         title:
           resultsPage?.colTypes[index] === GenericDataType.Temporal ? (
             <HeaderWithRadioGroup
@@ -197,6 +206,8 @@ export default function DrillDetailPane({
       resultsPage?.colTypes,
       timeFormatting,
       dataset?.verbose_map,
+      sortColumn,
+      sortOrder,
     ],
   );
 
@@ -213,6 +224,15 @@ export default function DrillDetailPane({
     [resultsPage?.colNames, resultsPage?.data],
   );
 
+  // Server-side sort clause. Drill detail is a raw, paginated query, so sorting
+  // must happen on the server to order the full dataset across pages rather than
+  // just the current page.
+  const orderby = useMemo<[string, boolean][]>(
+    () =>
+      sortColumn && sortOrder ? [[sortColumn, sortOrder === 'ascend']] : [],
+    [sortColumn, sortOrder],
+  );
+
   // Clear cache on reload button click
   const handleReload = useCallback(() => {
     setResponseError('');
@@ -306,7 +326,10 @@ export default function DrillDetailPane({
   useEffect(() => {
     if (!responseError && !isLoading && !resultsPages.has(pageIndex)) {
       setIsLoading(true);
-      const jsonPayload = getDrillPayload(formData, filters) ?? {};
+      const jsonPayload = {
+        ...getDrillPayload(formData, filters),
+        ...(orderby.length > 0 && { orderby }),
+      };
       const cachePageLimit = Math.ceil(SAMPLES_ROW_LIMIT / pageSize);
       getDatasourceSamples(
         datasourceType as DatasourceType,
@@ -348,6 +371,7 @@ export default function DrillDetailPane({
     filters,
     formData,
     isLoading,
+    orderby,
     pageIndex,
     pageSize,
     responseError,
@@ -389,7 +413,22 @@ export default function DrillDetailPane({
           recordCount={resultsPage?.total}
           usePagination
           loading={isLoading}
-          onChange={pagination => {
+          onChange={(pagination, _filters, sorter, extra) => {
+            if (extra?.action === ETableAction.Sort) {
+              const nextSorter = (
+                Array.isArray(sorter) ? sorter[0] : sorter
+              ) as SorterResult<DataType>;
+              const column = nextSorter?.columnKey as string | undefined;
+              const order = nextSorter?.order ?? null;
+              // antd cycles ascend -> descend -> unsorted; clear when unsorted.
+              setSortColumn(order ? column : undefined);
+              setSortOrder(order);
+              // Cached pages reflect the previous sort, so drop them and restart
+              // from the first page with the new ordering.
+              setResultsPages(new Map());
+              setPageIndex(0);
+              return;
+            }
             const newPageSize = pagination.pageSize ?? pageSize;
             if (newPageSize !== pageSize) {
               setPageSize(newPageSize);

superset-frontend/src/components/GridTable/index.tsx

@@ -32,9 +32,6 @@ const gridComponents = {
   agColumnHeader: Header,
 };
 
-const onSortChanged: AgGridReactProps['onSortChanged'] = ({ api }) =>
-  api.refreshCells();
-
 export function GridTable<RecordType extends object>({
   data,
   columns,
@@ -46,8 +43,28 @@ export function GridTable<RecordType extends object>({
   enableActions,
   size = GridSize.Middle,
   striped,
+  onServerSort,
 }: TableProps<RecordType>) {
   const theme = useTheme();
+  const onSortChanged = useCallback<
+    NonNullable<AgGridReactProps['onSortChanged']>
+  >(
+    ({ api }) => {
+      api.refreshCells();
+      if (!onServerSort) {
+        return;
+      }
+      const orderby = api
+        .getColumnState()
+        .filter(state => state.sort)
+        // Order the columns by the sequence in which the user applied each
+        // sort so multi-column sort reaches the server in the right priority.
+        .sort((a, b) => (a.sortIndex ?? 0) - (b.sortIndex ?? 0))
+        .map(state => [state.colId, state.sort === 'asc'] as [string, boolean]);
+      onServerSort(orderby);
+    },
+    [onServerSort],
+  );
   const isExternalFilterPresent = useCallback(
     () => Boolean(externalFilter),
     [externalFilter],

superset-frontend/src/components/GridTable/types.ts

@@ -59,4 +59,12 @@ export interface TableProps<RecordType> {
   usePagination?: boolean;
 
   striped?: boolean;
+
+  /**
+   * Called when the sort state changes, with it translated to a query
+   * `orderby` (`[[columnId, isAscending]]`) so the consumer can re-request
+   * server-sorted data. Only the primary sort column is included, matching the
+   * chart data API's single-column sort constraint.
+   */
+  onServerSort?: (orderby: [string, boolean][]) => void;
 }

superset-frontend/src/explore/components/DataTablesPane/components/SingleQueryResultPane.tsx

@@ -60,6 +60,8 @@ export const SingleQueryResultPane = ({
   onDownloadCSV,
   onDownloadXLSX,
   onReload,
+  onServerSort,
+  isLoading = false,
 }: SingleQueryResultPaneProp) => {
   const [filterText, setFilterText] = useState('');
   const { gridHeight, measuredRef } = useGridHeight();
@@ -81,7 +83,7 @@ export const SingleQueryResultPane = ({
         rowcount={rowcount}
         datasourceId={datasourceId}
         onInputChange={handleInputChange}
-        isLoading={false}
+        isLoading={isLoading}
         canDownload={canDownload}
         rowLimit={rowLimit}
         rowLimitOptions={rowLimitOptions}
@@ -99,6 +101,7 @@ export const SingleQueryResultPane = ({
             size={GridSize.Small}
             externalFilter={keywordFilter}
             showRowNumber
+            onServerSort={onServerSort}
           />
         </GridSizer>
       </GridContainer>