fix: match latest ag grid template (#1115)

* fix: match latest ag grid template

* fix: avoid auto-format from AG Grid in column header

Author: scnwwu

client/src/webview/DataViewer.tsx

@@ -46,7 +46,7 @@ const DataViewer = () => {
         cacheBlockSize={100}
         columnDefs={columns}
         defaultColDef={{
-          resizable: true,
+          sortable: false,
         }}
         infiniteInitialRowCount={100}
         maxBlocksInCache={10}

client/src/webview/columnHeaderTemplate.ts

@@ -21,18 +21,18 @@ const getIconForColumnType = (type: string) => {
   }
 };
 
-// Taken from https://www.ag-grid.com/javascript-data-grid/column-headers/#header-templates
+// Taken from https://www.ag-grid.com/react-data-grid/column-headers/#provided-component
 const columnHeaderTemplate = (columnType: string) => `
 <div class="ag-cell-label-container" role="presentation">
-  <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
-  <div ref="eLabel" class="ag-header-cell-label" role="presentation">
+  <span data-ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
+  <div data-ref="eLabel" class="ag-header-cell-label" role="presentation">
     <span class="header-icon ${getIconForColumnType(columnType)}"></span>
-    <span ref="eText" class="ag-header-cell-text"></span>
-    <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
-    <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
-    <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true"></span>
-    <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true"></span>
-    <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true"></span>
+    <span data-ref="eText" class="ag-header-cell-text"></span>
+    <span data-ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
+    <span data-ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
+    <span data-ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true"></span>
+    <span data-ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true"></span>
+    <span data-ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true"></span>
   </div>
 </div>
 `;

client/src/webview/useDataViewer.ts

@@ -88,7 +88,7 @@ const fetchColumns = (): Promise<Column[]> => {
 };
 
 const useDataViewer = () => {
-  const [columns, setColumns] = useState([]);
+  const [columns, setColumns] = useState<ColDef[]>([]);
 
   const onGridReady = useCallback(
     (event: GridReadyEvent) => {
@@ -128,6 +128,7 @@ const useDataViewer = () => {
     fetchColumns().then((columnsData) => {
       const columns: ColDef[] = columnsData.map((column) => ({
         field: column.name,
+        headerName: column.name,
         headerComponentParams: {
           template: columnHeaderTemplate(column.type),
         },