diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index dc51c01e0a46a3a4b11eec2b4085b9da3220d66c..7c24883ac232e091330d3c0398e1749fc72f8fce 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -3,6 +3,10 @@ require("@rushstack/eslint-patch/modern-module-resolution");
 
 module.exports = {
   root: true,
+  // env.node = true, makes eslint accept module.exports
+  env: {
+    node: true,
+  },
   extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
diff --git a/README.md b/README.md
index 61a733b446c04a78ef0ddc0ae046140ace760245..933a0557f2b9c1b2b3a1cb6263f1df5f3e5e30c7 100644
--- a/README.md
+++ b/README.md
@@ -70,3 +70,5 @@ npm run test:e2e -- --debug
 npm run lint
 npm run format
 ```
+
+Linting rules: https://eslint.vuejs.org/rules
diff --git a/src/components/AgCellRenderer.vue b/src/components/AgCellRenderer.vue
index 165d333bb10f17ee4d4aed34227f77770d9cb2df..306cb5322447a7953e57ec805306ac110c3007d8 100644
--- a/src/components/AgCellRenderer.vue
+++ b/src/components/AgCellRenderer.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { IHeaderParams } from "ag-grid-community";
-const props: any = defineProps();
+const props: any = defineProps<{ params: any; value?: any }>();
 const params = props.params as IHeaderParams & { value: boolean };
 
 console.log(params?.value);
 const hasValue = params?.value !== undefined;
 
-const f = (evt: any) => console.log("focus");
+// const f = (evt: any) => console.log("focus");
 </script>
 <template>
   <div class="focus:ring-green-500">
diff --git a/src/components/AgHeader.vue b/src/components/AgHeader.vue
index 3b9fb7c82fa982a0f0a863b3d1791b5f1e674fcb..1c0b9c33d1fc127efd745195d643a6748824c769 100644
--- a/src/components/AgHeader.vue
+++ b/src/components/AgHeader.vue
@@ -9,12 +9,12 @@ import "ag-grid-community/styles/ag-grid.css"; // Core grid CSS, always needed
 import "ag-grid-community/styles/ag-theme-alpine.css"; // Optional theme CSS
 
 // const props = defineProps<IComponent<any>>();
-const props: any = defineProps();
+const props: any = defineProps<{ params: any; value: any }>();
 const params = props.params as IHeaderParams & { menuIcon: string };
 const menuButton = ref(null);
 console.log(params);
 
-function onMenuClicked(evt: any) {
+function onMenuClicked() {
   params.showColumnMenu(menuButton.value as any); // some problem here
 }
 </script>
@@ -26,7 +26,7 @@ function onMenuClicked(evt: any) {
       v-if="params.enableMenu"
       ref="menuButton"
       class="customHeaderMenuButton"
-      @click="onMenuClicked($event)"
+      @click="onMenuClicked()"
     >
       <i class="fa" :class="params.menuIcon"></i>
     </div>
diff --git a/src/components/Table.vue b/src/components/AgTable.vue
similarity index 92%
rename from src/components/Table.vue
rename to src/components/AgTable.vue
index 75c26d5256c3c2e9e6e20a66c81cef08f2c9d4d2..fa2839ed4baf3e6fc2c327d224d32ccfb2eccba1 100644
--- a/src/components/Table.vue
+++ b/src/components/AgTable.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { AgGridVue } from "ag-grid-vue3";
 import { ref } from "vue";
-import type { GridReadyEvent, ColDef } from "ag-grid-community";
+import type { ColDef } from "ag-grid-community";
+// import type { GridReadyEvent } from "ag-grid-community";
 import { useTippy } from "vue-tippy";
 // import AgHeader from "./AgHeader.vue";
 import AgTooltip from "./AgTooltip.vue";
@@ -42,15 +43,15 @@ interface ICar {
   isValid?: boolean;
 }
 
-const gridApi: any = ref(null);
-const onGridReady = (params: GridReadyEvent) => {
-  gridApi.value = params.api;
-};
+// const gridApi: any = ref(null);
+// const onGridReady = (params: GridReadyEvent) => {
+//   gridApi.value = params.api;
+// };
 const rowData: any = ref(rows);
 
-const cellWasClicked = (evt: any) => {
-  console.log("xxx cell was clicked", evt.value);
-};
+// const cellWasClicked = (evt: any) => {
+//   console.log("xxx cell was clicked", evt.value);
+// };
 const cellFocused = (evt: any) => {
   console.log("xxx cell was focused", evt);
 };
diff --git a/src/components/AgTooltip.vue b/src/components/AgTooltip.vue
index e66bafafad435e6f88ee59df635ac8ce7158617e..8048da04bd11fd64f2ca73968eb7f0d0f40beadf 100644
--- a/src/components/AgTooltip.vue
+++ b/src/components/AgTooltip.vue
@@ -5,20 +5,19 @@
 -->
 
 <script setup lang="ts">
-import { ref } from "vue";
-import Echart from "./Echart.vue";
+// import { ref } from "vue";
+import ChartComp from "./ChartComp.vue";
 
-const props: any = defineProps();
-const params: any = props.params;
+const props: any = defineProps<{ params: any; value: any }>();
 
-const isHeader = params.rowIndex === undefined;
+const isHeader = props.params.rowIndex === undefined;
 </script>
 <template>
   <div class="border">
     <div class="bg-slate-700 text-white center" v-if="isHeader">hello!</div>
 
     <div class="">
-      <echart />
+      <chart-comp />
     </div>
   </div>
 </template>
diff --git a/src/components/Echart.vue b/src/components/ChartComp.vue
similarity index 100%
rename from src/components/Echart.vue
rename to src/components/ChartComp.vue
diff --git a/src/components/Home.vue b/src/components/HomePage.vue
similarity index 91%
rename from src/components/Home.vue
rename to src/components/HomePage.vue
index 4faf5bfb26956c54dafa69afe9eb9ba2ae395abe..36324445b31f0947c908a46d5bfe2cb3ad8a53aa 100644
--- a/src/components/Home.vue
+++ b/src/components/HomePage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import List from "./List.vue";
+import List from "./ListComp.vue";
 </script>
 
 <template>
diff --git a/src/components/List.vue b/src/components/ListComp.vue
similarity index 100%
rename from src/components/List.vue
rename to src/components/ListComp.vue
diff --git a/src/components/TanTable.vue b/src/components/TanTable.vue
index c06895b3b1a4fb94ccd03550d0200d5eb42ac736..896f52ab9b1919db4f8924d4c3a1b3d681b49cbf 100644
--- a/src/components/TanTable.vue
+++ b/src/components/TanTable.vue
@@ -78,9 +78,9 @@ const columns = [
 
 const data = ref(defaultData);
 
-const rerender = () => {
-  data.value = defaultData;
-};
+// const rerender = () => {
+//   data.value = defaultData;
+// };
 
 const table = useVueTable({
   get data() {
diff --git a/src/router/index.ts b/src/router/index.ts
index 2875bdd76db8193193753aca13ee5ccd00fd1f69..4e2a2be92dea6e996864e5caf83b27870f757f06 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,11 +1,11 @@
 import { createRouter, createWebHistory } from "vue-router";
-import Home from "../components/Home.vue";
+import Home from "../components/HomePage.vue";
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
     { path: "/", component: Home },
-    { path: "/ag-grid", component: () => import("../components/Table.vue") },
+    { path: "/ag-grid", component: () => import("../components/AgTable.vue") },
     {
       path: "/tanstack",
       component: () => import("../components/TanTable.vue"),