Add multi-column sort to Insights > Operations table

.changeset/nine-students-melt.md

@@ -0,0 +1,5 @@
+---
+'hive': minor
+---
+
+Add multi-column sort to Insights > Operations table

packages/web/app/package.json

@@ -61,7 +61,7 @@
     "@stripe/stripe-js": "5.5.0",
     "@tanstack/react-query": "5.63.0",
     "@tanstack/react-router": "1.34.9",
-    "@tanstack/react-table": "8.17.3",
+    "@tanstack/react-table": "8.20.6",
     "@tanstack/router-devtools": "1.34.9",
     "@theguild/editor": "1.2.5",
     "@trpc/client": "10.45.2",

packages/web/app/src/components/target/insights/List.tsx

@@ -19,9 +19,7 @@ import {
   getCoreRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  OnChangeFn,
   PaginationState,
-  SortingState,
   useReactTable,
 } from '@tanstack/react-table';
 import { OperationsFallback } from './Fallback';
@@ -169,8 +167,6 @@ type SetPaginationFn = (updater: SetStateAction<PaginationState>) => void;
 
 function OperationsTable({
   operations,
-  sorting,
-  setSorting,
   pagination,
   setPagination,
   className,
@@ -182,8 +178,6 @@ function OperationsTable({
   operations: Operation[];
   pagination: PaginationState;
   setPagination: SetPaginationFn;
-  sorting: SortingState;
-  setSorting: OnChangeFn<SortingState>;
   className?: string;
   organizationSlug: string;
   projectSlug: string;
@@ -197,10 +191,8 @@ function OperationsTable({
     columns,
     data: operations,
     state: {
-      sorting,
       pagination,
     },
-    onSortingChange: setSorting,
     onPaginationChange: setPagination,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -221,6 +213,8 @@ function OperationsTable({
 
   const { headers } = tableInstance.getHeaderGroups()[0];
 
+  const sortedColumnsById = tableInstance.getState().sorting.map(s => s.id);
+
   return (
     <div className={clsx('rounded-md border border-gray-800 bg-gray-900/50 p-5', className)}>
       <Section.Title>Operations</Section.Title>
@@ -240,6 +234,7 @@ function OperationsTable({
                     <Sortable
                       sortOrder={header.column.getIsSorted()}
                       onClick={header.column.getToggleSortingHandler()}
+                      otherColumnSorted={sortedColumnsById.some(id => id !== header.id)}
                     >
                       {name}
                     </Sortable>
@@ -395,7 +390,6 @@ function OperationsTableContainer({
   }, [operationStats?.operations.nodes, operationsFilter]);
 
   const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 20 });
-  const [sorting, setSorting] = useState<SortingState>([]);
 
   const safeSetPagination = useCallback<SetPaginationFn>(
     state => {
@@ -422,8 +416,6 @@ function OperationsTableContainer({
       className={className}
       pagination={pagination}
       setPagination={safeSetPagination}
-      sorting={sorting}
-      setSorting={setSorting}
       organizationSlug={organizationSlug}
       projectSlug={projectSlug}
       targetSlug={targetSlug}

packages/web/app/src/components/v2/sortable.tsx

@@ -6,15 +6,23 @@ import { SortDirection } from '@tanstack/react-table';
 export function Sortable({
   children,
   sortOrder,
+  otherColumnSorted,
   onClick,
 }: {
   children: ReactNode;
   sortOrder: SortDirection | false;
+  /**
+   * Whether another column is sorted in addition to this one.
+   * It's used to show a different tooltip when sorting by multiple columns.
+   */
+  otherColumnSorted?: boolean;
   onClick: ComponentProps<'button'>['onClick'];
 }): ReactElement {
   const tooltipText =
     sortOrder === false
-      ? 'Click to sort descending'
+      ? 'Click to sort descending' + otherColumnSorted
+        ? ' (hold shift to sort by multiple columns)'
+        : ''
       : {
           asc: 'Click to cancel sorting',
           desc: 'Click to sort ascending',