chore: add column pinning

Signed-off-by: Scott Dover <[email protected]>

Author: Scott Dover

client/src/panels/DataViewer.ts

@@ -101,13 +101,17 @@ class DataViewer extends WebView {
           command: "response:loadMessages",
           data: {
             "Ascending (add to sorting)": l10n.t("Ascending (add to sorting)"),
-            Ascending: l10n.t("Ascending"),
             "Descending (add to sorting)": l10n.t(
               "Descending (add to sorting)",
             ),
-            Descending: l10n.t("Descending"),
+            "Not pinned": l10n.t("Not pinned"),
+            Pin: l10n.t("Pin"),
+            "Pinned to the left": l10n.t("Pinned to the left"),
+            "Pinned to the right": l10n.t("Pinned to the right"),
             "Remove all sorting": l10n.t("Remove all sorting"),
             "Remove sorting": l10n.t("Remove sorting"),
+            Ascending: l10n.t("Ascending"),
+            Descending: l10n.t("Descending"),
             Sort: l10n.t("Sort"),
           },
         });

client/src/webview/ColumnHeader.tsx

@@ -1,6 +1,6 @@
 import { useRef } from "react";
 
-import { AgColumn, GridApi } from "ag-grid-community";
+import { AgColumn, ColDef, GridApi } from "ag-grid-community";
 
 import { ColumnHeaderProps } from "./ColumnHeaderMenu";
 
@@ -58,6 +58,13 @@ const ColumnHeader = ({
       column,
       theme,
       hasSort: api.getColumnState().some((c) => c.sort),
+      pinColumn: (pinned: "left" | "right" | null) => {
+        const columnDefs = api.getColumnDefs().map((colDef: ColDef) => ({
+          ...colDef,
+          pinned: column.colId === colDef.colId ? pinned : colDef.pinned,
+        }));
+        api.updateGridOptions({ columnDefs });
+      },
       sortColumn: (direction: "asc" | "desc" | null) => {
         const newColumnState = api.getColumnState().filter((c) => c.sort);
         const colIndex = newColumnState.findIndex(

client/src/webview/ColumnHeaderMenu.tsx

@@ -8,6 +8,7 @@ export interface ColumnHeaderProps {
   hasSort: boolean;
   left: number;
   messages?: Record<string, string>;
+  pinColumn: (pinned: "left" | "right" | null) => void;
   removeAllSorting: () => void;
   removeFromSort: () => void;
   sortColumn: (direction: "asc" | "desc") => void;
@@ -214,14 +215,45 @@ const ColumnHeaderMenu = ({
   dismissMenu,
   hasSort,
   left,
+  messages: t,
+  pinColumn,
   removeAllSorting,
   removeFromSort,
   sortColumn,
   theme,
   top,
-  messages: t,
 }: ColumnHeaderProps) => {
   const menuItems = [
+    {
+      name: t["Pin"],
+      children: [
+        {
+          name: t["Not pinned"],
+          checked: !column?.pinned,
+          onPress: () => {
+            pinColumn(null);
+            dismissMenu();
+          },
+        },
+        {
+          name: t["Pinned to the left"],
+          checked: column?.pinned === "left",
+          onPress: () => {
+            pinColumn("left");
+            dismissMenu();
+          },
+        },
+        {
+          name: t["Pinned to the right"],
+          checked: column?.pinned === "right",
+          onPress: () => {
+            pinColumn("right");
+            dismissMenu();
+          },
+        },
+      ],
+    },
+    "separator",
     {
       name: t["Sort"],
       children: [

client/src/webview/useDataViewer.tsx

@@ -179,6 +179,8 @@ const useDataViewer = (theme: string) => {
         field: "#",
         suppressMovable: true,
         sortable: false,
+        pinned: "left",
+        maxWidth: 80,
       });
 
       setColumns(columns);