diff --git a/src/App.vue b/src/App.vue
index a69606178be42cbbca458ed06851f9a1901f75f8..1bdcbdf34b6afde3e17aca88f1e2481d9ef1ca75 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="">
     <div class="shadow p-2 mb-2 bg-neutral-100 flex gap-4">
-      <router-link to="/">home</router-link>  
+      <router-link to="/">home</router-link>
     </div>
     <router-view />
   </div>
diff --git a/src/assets/base.css b/src/assets/base.css
index cf694023d924b239266719ad4c65834cb44f3abe..d028c417752c152ac94854282fea6c69e726d903 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -2,77 +2,33 @@
 @tailwind components;
 @tailwind utilities;
 
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
+/*
+  Josh's Custom CSS Reset
+  https://www.joshwcomeau.com/css/custom-css-reset/
+*/
+*, *::before, *::after {
   box-sizing: border-box;
+}
+* {
   margin: 0;
-  position: relative;
-  font-weight: normal;
 }
-
+html, body {
+  height: 100%;
+}
 body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
+  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+input, button, textarea, select {
+  font: inherit;
+}
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+#root {
+  isolation: isolate;
+}
\ No newline at end of file
diff --git a/src/components/AgHeader.vue b/src/components/AgHeader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56e596d82ac7d7616455a33e6772cb53993a177d
--- /dev/null
+++ b/src/components/AgHeader.vue
@@ -0,0 +1,30 @@
+<!-- based on https://ag-grid.com/vue-data-grid/component-header/ -->
+
+<!-- UNFINISHED -->
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { IHeaderParams } from "ag-grid-community";
+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 = defineProps();
+const params = props.params as IHeaderParams;
+const menuButton = ref(null);
+console.log(params);
+
+function onMenuClicked(evt: any) {
+  params.showColumnMenu(menuButton.value);
+}
+
+</script>
+
+<template>
+  <div>
+    <span> {{ params.displayName }} </span>
+    <div v-if="params.enableMenu" ref="menuButton" class="customHeaderMenuButton" @click="onMenuClicked($event)">
+           <i class="fa" :class="params.menuIcon"></i>
+         </div>
+  </div>
+</template>
diff --git a/src/components/AgTooltip.vue b/src/components/AgTooltip.vue
new file mode 100644
index 0000000000000000000000000000000000000000..40a55b0774b2b5011165725d07f1fc3dc602ac5b
--- /dev/null
+++ b/src/components/AgTooltip.vue
@@ -0,0 +1,14 @@
+<!-- 
+    - the headerTooltip field must be defined together with tooltipComponent
+    - only check if is header if tooltip applied everywhere 
+-->
+
+<script setup lang="ts">
+const props = defineProps();
+const params: any = props.params;
+console.log("xxx header", params);
+const isHeader = params.rowIndex === undefined;
+</script>
+<template>
+  <div class="bg-red-500" v-if="isHeader">hello!</div>
+</template>
diff --git a/src/components/Table.vue b/src/components/Table.vue
index c235946452c5e5e783543c91039ef7ed518c1946..43182bc6579d7ca0c9078fbcc5ff774af5128ae6 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -1,14 +1,20 @@
 <script setup lang="ts">
 import { AgGridVue } from "ag-grid-vue3";
-
-import { reactive, onMounted, ref } from "vue";
-import type { GridOptions, GridReadyEvent } from "ag-grid-community";
+import { reactive, onMounted, ref, h } from "vue";
+import type { GridOptions, GridReadyEvent, ColDef } from "ag-grid-community";
+import AgHeader from "./AgHeader.vue";
+import AgTooltip from "./AgTooltip.vue";
 
 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 rows = [
-  { make: "Porsche", model: "Boxter BoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxter", price: 72000 },
+  {
+    make: "Porsche",
+    model:
+      "Boxter BoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxterBoxter",
+    price: 72000,
+  },
   { make: "Ford", model: "Mondeo", price: 32000 },
   { make: "Ford", model: "Mondeo", price: 32000 },
   { make: "Toyota", model: "Celica", price: 35000 },
@@ -3280,34 +3286,38 @@ interface ICar {
   price: number;
 }
 const gridApi: any = ref(null);
-
 const onGridReady = (params: GridReadyEvent) => {
-  // gridApi.value = params.api;
+  gridApi.value = params.api;
 };
-const rowData: any = reactive({ value: rows });
+const rowData: any = ref(rows);
 
-const columnDefs = reactive({
-  value: [
-    { field: "make", filter: "agTextColumnFilter" },
-    { field: "model" },
-    { field: "price" },
-  ],
-});
+const columnDefs: ColDef[] = ref([
+  {
+    field: "make",
+    headerTooltip: "bla",
+    tooltipComponent: AgTooltip,
+    // tooltipValueGetter,
+    // headerComponent: AgHeader,
+    // headerComponentParams: {
+    //   menuIcon: "fa-bars",
+    // },
+  },
+  { field: "model" },
+  { field: "price", filter: "agNumberColumnFilter" },
+]);
 
-// flex makes the columns fill the available space. it's just css flex?
-const defaultColDef = {
-  // sortable: true,
-  // flex: 1,
-  // editable: false,
-  // resizable: true,  
+const defaultColDef: ColDef = {
+  sortable: true,
+  flex: 1, // makes it fill the entire width available
+  editable: false,
+  resizable: true,
+  filter: true,
 };
 
 const cellWasClicked = (evt: any) => {
   console.log("xxx cell was clicked", evt.value);
 };
 
-// const deselectRows = () => gridApi?.value?.deselectAll();
-
 // onMounted(async () => {
 //   const url = "https://www.ag-grid.com/example-assets/row-data.json";
 //   const response = await fetch(url);
@@ -3318,21 +3328,17 @@ const cellWasClicked = (evt: any) => {
 
 <template>
   <div class="p-4">
-    <p class="">ag-grid component. Currently there is an issue with the filtering</p>
+    <p class="">ag-grid component.</p>
 
     <button class="bg-blue-500 p-2 my-4">click</button>
 
-    <div style="height: 100%; box-sizing: border-box">
+    <div>
       <ag-grid-vue
         class="ag-theme-alpine"
-        style="height: 500px"
-        :columnDefs="columnDefs.value"
-        :rowData="rowData.value"
+        style="height: 70vh"
+        :columnDefs="columnDefs"
+        :rowData="rowData"
         :defaultColDef="defaultColDef"
-        
-        animateRows="false"
-        @cell-clicked="cellWasClicked"
-        @grid-ready="onGridReady"
       >
       </ag-grid-vue>
     </div>
diff --git a/src/router/index.ts b/src/router/index.ts
index 9f577a0033c536f3327859adfdd22d02c16f2623..2875bdd76db8193193753aca13ee5ccd00fd1f69 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,7 +6,10 @@ const router = createRouter({
   routes: [
     { path: "/", component: Home },
     { path: "/ag-grid", component: () => import("../components/Table.vue") },
-    { path: "/tanstack", component: () => import("../components/TanTable.vue") },
+    {
+      path: "/tanstack",
+      component: () => import("../components/TanTable.vue"),
+    },
   ],
 });