fix: pagination and sort in csv viewer in the file-explorer panel (#2258

)

frontend/src/components/data-table/data-table.tsx

@@ -49,13 +49,15 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   columns: Array<ColumnDef<TData>>;
   data: TData[];
   // Sorting
-  sorting?: SortingState;
-  setSorting?: OnChangeFn<SortingState>;
+  manualSorting?: boolean; // server-side sorting
+  sorting?: SortingState; // controlled sorting
+  setSorting?: OnChangeFn<SortingState>; // controlled sorting
   // Pagination
   totalRows: number | "too_many";
   pagination?: boolean;
-  paginationState?: PaginationState;
-  setPaginationState?: OnChangeFn<PaginationState>;
+  manualPagination?: boolean; // server-side pagination
+  paginationState?: PaginationState; // controlled pagination
+  setPaginationState?: OnChangeFn<PaginationState>; // controlled pagination
   // Selection
   selection?: "single" | "multi" | null;
   rowSelection?: RowSelectionState;
@@ -78,13 +80,15 @@ const DataTableInternal = <TData,>({
   className,
   columns,
   data,
-  sorting,
   totalRows,
+  manualSorting = false,
+  sorting,
   setSorting,
   rowSelection,
   paginationState,
   setPaginationState,
   downloadAs,
+  manualPagination = false,
   pagination = false,
   onRowSelectionChange,
   enableSearch = false,
@@ -114,24 +118,24 @@ const DataTableInternal = <TData,>({
     rowCount: totalRows === "too_many" ? undefined : totalRows,
     ...(setPaginationState
       ? {
-          manualPagination: true,
           onPaginationChange: setPaginationState,
           getRowId: (_row, idx) => {
             if (!paginationState) {
               return String(idx);
             }
-            // Add offset if pagination is enabled
-            const offset = pagination
+            // Add offset if manualPagination is enabled
+            const offset = manualPagination
               ? paginationState.pageIndex * paginationState.pageSize
               : 0;
             return String(idx + offset);
           },
         }
       : {}),
-    getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
+    manualPagination: manualPagination,
+    getPaginationRowModel: getPaginationRowModel(),
     // sorting
-    onSortingChange: setSorting,
-    manualSorting: true,
+    ...(setSorting ? { onSortingChange: setSorting } : {}),
+    manualSorting: manualSorting,
     getSortedRowModel: getSortedRowModel(),
     // filtering
     manualFiltering: true,
@@ -141,11 +145,16 @@ const DataTableInternal = <TData,>({
     // selection
     onRowSelectionChange: onRowSelectionChange,
     state: {
-      sorting,
+      ...(sorting ? { sorting } : {}),
       columnFilters: filters,
-      pagination: pagination
-        ? paginationState
-        : { pageIndex: 0, pageSize: data.length },
+      ...// Controlled state
+      (paginationState
+        ? { pagination: paginationState }
+        : // Uncontrolled state
+          pagination && !paginationState
+          ? {}
+          : // No pagination, show all rows
+            { pagination: { pageIndex: 0, pageSize: data.length } }),
       rowSelection,
       columnPinning: columnPinning,
     },

frontend/src/components/editor/file-tree/renderers.tsx

@@ -4,11 +4,18 @@ import { DataTable } from "@/components/data-table/data-table";
 import { parseCsvData } from "@/plugins/impl/vega/loader";
 import { Objects } from "@/utils/objects";
 import type React from "react";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
+import type { PaginationState } from "@tanstack/react-table";
+
+const PAGE_SIZE = 25;
 
 export const CsvViewer: React.FC<{ contents: string }> = ({ contents }) => {
   const data = useMemo(() => parseCsvData(contents), [contents]);
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+  });
   const columns = useMemo(
     () =>
       generateColumns({
@@ -25,6 +32,9 @@ export const CsvViewer: React.FC<{ contents: string }> = ({ contents }) => {
       data={data}
       totalRows={data.length}
       columns={columns}
+      manualPagination={false}
+      paginationState={pagination}
+      setPaginationState={setPagination}
       wrapperClassName="h-full justify-between pb-1 px-1"
       pagination={true}
       className="rounded-none border-b flex overflow-hidden"

frontend/src/plugins/impl/DataTablePlugin.tsx

@@ -231,13 +231,21 @@ export const LoadingDataTableComponent = memo(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.setValue, filters, searchQuery, sorting]);
 
-    // If pageSize changes, reset pageSize
+    // If pageSize changes, reset pagination state
     useEffect(() => {
       if (paginationState.pageSize !== props.pageSize) {
-        setPaginationState((state) => ({ ...state, pageSize: props.pageSize }));
+        setPaginationState({
+          pageIndex: 0,
+          pageSize: props.pageSize,
+        });
       }
     }, [props.pageSize, paginationState.pageSize]);
 
+    // If total rows change, reset pageIndex
+    useEffect(() => {
+      setPaginationState((state) => ({ ...state, pageIndex: 0 }));
+    }, [props.totalRows]);
+
     // Data loading
     const { data, loading, error } = useAsyncData<{
       rows: T[];
@@ -502,8 +510,10 @@ const DataTableComponent = ({
             className={className}
             sorting={sorting}
             totalRows={totalRows}
+            manualSorting={true}
             setSorting={setSorting}
             pagination={pagination}
+            manualPagination={true}
             paginationState={paginationState}
             setPaginationState={setPaginationState}
             rowSelection={rowSelection}