Fix some types

src/components/AgCellRenderer.vue

@@ -3,8 +3,6 @@ import type { IHeaderParams } from "ag-grid-community";
 const props: any = defineProps<{ params: any; value?: any }>();
 const params = props.params as IHeaderParams & { value: boolean };
 const hasValue = params?.value !== undefined;
-
-// const f = (evt: any) => console.log("focus");
 </script>
 <template>
   <div class="focus:ring-green-500">

src/components/AgTable.vue

 <script setup lang="ts">
 import { AgGridVue } from "ag-grid-vue3";
 import { ref } from "vue";
-import type { ColDef } from "ag-grid-community";
-// import type { GridReadyEvent } from "ag-grid-community";
+import type {
+  ColDef,
+  GridOptions,
+  IRowNode,
+  CellPosition,
+  SortChangedEvent,
+  CellFocusedEvent,
+  FilterChangedEvent,
+  CellKeyPressEvent,
+} from "ag-grid-community";
 import { useTippy } from "vue-tippy";
-// import AgHeader from "./AgHeader.vue";
 import AgTooltip from "./AgTooltip.vue";
 import AgCellRenderer from "./AgCellRenderer.vue";
 import "ag-grid-community/styles/ag-grid.css"; // Core grid CSS, always needed
@@ -47,7 +54,7 @@ interface ICar {
 // const onGridReady = (params: GridReadyEvent) => {
 //   gridApi.value = params.api;
 // };
-const rowData: any = ref(rows);
+const rowData = ref(rows);
 
 // const cellWasClicked = (evt: any) => {
 //   console.log("xxx cell was clicked", evt.value);
@@ -57,32 +64,36 @@ const rowData: any = ref(rows);
 // - get focused cell
 // - check if space was pressed
 // - if so and if cell is isValid, toggle its value
-let focusedCell: any = null;
-const cellFocused = (evt: any) => {
+let focusedCell: CellPosition | null = null;
+const cellFocused = (evt: CellFocusedEvent<ICar>) => {
   focusedCell = evt.api.getFocusedCell();
 };
 
 // todo: don't pass full object
-const toggleSelectedIsValid = (evt: any) => {
-  const row = evt.api.getDisplayedRowAtIndex(focusedCell.rowIndex);
+const toggleSelectedIsValid = (evt: CellKeyPressEvent<ICar>) => {
+  if (focusedCell === null) return;
+  const row: IRowNode<ICar> | undefined = evt.api.getDisplayedRowAtIndex(
+    focusedCell.rowIndex
+  );
+  if (row === undefined) return;
+
   const cellValue = evt.api.getValue(focusedCell.column, row);
 
-  const col = focusedCell.column.colId;
-  const rowIdx = row.rowIndex;
+  const col = (focusedCell.column as any).colId;
 
   if (col === "isValid") {
     row.setDataValue(col, !cellValue);
   }
 };
 
-const onCellKeyPress = (evt: any) => {
-  if (evt.event.code === "Space") {
+const onCellKeyPress = (evt: CellKeyPressEvent<ICar>) => {
+  
+  if ((evt?.event as any).code === "Space") {
     toggleSelectedIsValid(evt);
   }
 };
 
-// should be ColDef[]
-const columnDefs = ref([
+const colDefs: ColDef[] = [
   {
     field: "make",
     headerTooltip: "make",
@@ -108,7 +119,9 @@ const columnDefs = ref([
     // checkboxSelection: true,
     // showDisabledCheckboxes: true,
   },
-]);
+];
+
+const columnDefs = ref(colDefs);
 
 const defaultColDef: ColDef = {
   sortable: true,
@@ -118,7 +131,7 @@ const defaultColDef: ColDef = {
   filter: true,
 };
 
-const onSortChanged = async (evt: any) => {
+const onSortChanged = async (evt: SortChangedEvent<ICar>) => {
   console.log(
     "xxx sort changed (send columns)",
     evt.columnApi.getColumnState()
@@ -126,7 +139,7 @@ const onSortChanged = async (evt: any) => {
   await get();
 };
 
-const onFilterChanged = (evt: any) => {
+const onFilterChanged = (evt: FilterChangedEvent<ICar>) => {
   console.log("xxx filter changed", evt.api.getFilterModel());
 };
 
@@ -135,7 +148,7 @@ const get = async () => {
   const url = "https://www.ag-grid.com/example-assets/row-data.json";
   const response = await fetch(url);
   let remoteRowData = (await response.json()) as ICar[];
-  remoteRowData = remoteRowData.map((r: any) => ({ ...r, isValid: false }));
+  remoteRowData = remoteRowData.map((r: ICar) => ({ ...r, isValid: false }));
   rowData.value = remoteRowData;
 };
 
@@ -145,6 +158,13 @@ const multiSortkey = "ctrl";
 // onMounted(async () => {
 // await get();
 // });
+
+const gridOptions: GridOptions<ICar> = {
+  onCellFocused: cellFocused,
+  onSortChanged,
+  onFilterChanged,
+  onCellKeyPress,
+};
 </script>
 
 <template>
@@ -163,16 +183,14 @@ const multiSortkey = "ctrl";
       - the first load is client side only, if you sort it will do a REST call
       - there is an auto page size if we want to fit the maximum rows on the current page based on a height
       - it has keyboard access by default
+      - up/down arrow and press space to toggle isValid
     </pre>
 
     <div>
       <ag-grid-vue
-        :onSortChanged="onSortChanged"
-        :onFilterChanged="onFilterChanged"
-        :onCellFocused="cellFocused"
-        :onCellKeyPress="onCellKeyPress"
+        :gridOptions="gridOptions"
         class="ag-theme-alpine"
-        style="height: 120vh"
+        style="height: 60vh"
         :columnDefs="columnDefs"
         :rowData="rowData"
         :defaultColDef="defaultColDef"