feat(pnpm): migrate from yarn

* chore(frontend): separate out columnWidths from ResizeTable

* chore: fix tests

.github/workflows/commitci.yaml

@@ -7,10 +7,14 @@ on:
   pull_request_target:
     types:
       - labeled
+  merge_group:
+    types:
+      - checks_requested
 
 jobs:
   refcheck:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest

.github/workflows/goci.yaml

@@ -7,10 +7,14 @@ on:
   pull_request_target:
     types:
       - labeled
+  merge_group:
+    types:
+      - checks_requested
 
 jobs:
   test:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/go-test.yaml@main
@@ -21,6 +25,7 @@ jobs:
       GO_VERSION: 1.24
   fmt:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/go-fmt.yaml@main
@@ -30,6 +35,7 @@ jobs:
       GO_VERSION: 1.24
   lint:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/go-lint.yaml@main
@@ -39,6 +45,7 @@ jobs:
       GO_VERSION: 1.24
   deps:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/go-deps.yaml@main
@@ -48,6 +55,7 @@ jobs:
       GO_VERSION: 1.24
   build:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest
@@ -79,6 +87,7 @@ jobs:
           make docker-build-enterprise
   openapi:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest

.github/workflows/jsci.yaml

@@ -7,10 +7,14 @@ on:
   pull_request_target:
     types:
       - labeled
+  merge_group:
+    types:
+      - checks_requested
 
 jobs:
   tsc:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest
@@ -27,6 +31,7 @@ jobs:
         run: cd frontend && yarn tsc
   tsc2:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/js-tsc.yaml@main
@@ -36,6 +41,7 @@ jobs:
       JS_SRC: frontend
   test:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/js-test.yaml@main
@@ -45,6 +51,7 @@ jobs:
       JS_SRC: frontend
   fmt:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/js-fmt.yaml@main
@@ -54,6 +61,7 @@ jobs:
       JS_SRC: frontend
   lint:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     uses: signoz/primus.workflows/.github/workflows/js-lint.yaml@main
@@ -61,8 +69,53 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
+  lint-pnpm:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - name: setup node
+        uses: actions/setup-node@v6
+        with:
+          node-version: "22"
+      - name: install
+        run: cd frontend && pnpm install
+      - name: lint
+        run: echo 'done'
+  lint-pnpm-cache:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - name: setup node
+        uses: actions/setup-node@v6
+        with:
+          node-version: "22"
+          cache: 'pnpm'
+          cache-dependency-path: frontend/pnpm-lock.yaml
+      - name: install
+        run: cd frontend && pnpm install
+      - name: lint
+        run: echo 'done'
   md-languages:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest
@@ -73,6 +126,7 @@ jobs:
         run: bash frontend/scripts/validate-md-languages.sh
   authz:
     if: |
+      github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
     runs-on: ubuntu-latest

frontend/package.json

@@ -37,10 +37,10 @@
     "@dnd-kit/modifiers": "7.0.0",
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@grafana/data": "^11.2.3",
+    "@grafana/data": "11.2.3",
     "@mdx-js/loader": "2.3.0",
     "@mdx-js/react": "2.3.0",
-    "@monaco-editor/react": "^4.3.1",
+    "@monaco-editor/react": "4.3.1",
     "@playwright/test": "1.55.1",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
@@ -54,7 +54,7 @@
     "@signozhq/combobox": "0.0.2",
     "@signozhq/command": "0.0.0",
     "@signozhq/design-tokens": "2.1.1",
-    "@signozhq/dialog": "^0.0.2",
+    "@signozhq/dialog": "0.0.2",
     "@signozhq/icons": "0.1.0",
     "@signozhq/input": "0.0.2",
     "@signozhq/popover": "0.0.0",
@@ -63,7 +63,7 @@
     "@signozhq/sonner": "0.1.0",
     "@signozhq/switch": "0.0.2",
     "@signozhq/table": "0.3.7",
-    "@signozhq/toggle-group": "^0.0.1",
+    "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
     "@tanstack/react-table": "8.20.6",
     "@tanstack/react-virtual": "3.11.2",
@@ -76,28 +76,28 @@
     "@visx/shape": "3.5.0",
     "@visx/tooltip": "3.3.0",
     "@vitejs/plugin-react": "5.1.4",
-    "@xstate/react": "^3.0.0",
+    "@xstate/react": "3.0.0",
     "ansi-to-html": "0.7.2",
     "antd": "5.11.0",
     "antd-table-saveas-excel": "2.2.1",
     "antlr4": "4.13.2",
     "axios": "1.12.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^29.6.4",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "29.6.4",
     "babel-loader": "9.1.3",
-    "babel-plugin-named-asset-import": "^0.3.7",
-    "babel-preset-minify": "^0.5.1",
-    "babel-preset-react-app": "^10.0.1",
+    "babel-plugin-named-asset-import": "0.3.7",
+    "babel-preset-minify": "0.5.1",
+    "babel-preset-react-app": "10.0.1",
     "chart.js": "3.9.1",
-    "chartjs-adapter-date-fns": "^2.0.0",
-    "chartjs-plugin-annotation": "^1.4.0",
+    "chartjs-adapter-date-fns": "2.0.0",
+    "chartjs-plugin-annotation": "1.4.0",
     "classnames": "2.3.2",
-    "color": "^4.2.1",
+    "color": "4.2.1",
     "color-alpha": "2.0.0",
-    "cross-env": "^7.0.3",
+    "cross-env": "7.0.3",
     "crypto-js": "4.2.0",
     "d3-hierarchy": "3.1.2",
-    "dayjs": "^1.10.7",
+    "dayjs": "1.10.7",
     "dompurify": "3.2.4",
     "dotenv": "8.2.0",
     "event-source-polyfill": "1.0.31",
@@ -106,19 +106,19 @@
     "history": "4.10.1",
     "http-proxy-middleware": "3.0.5",
     "http-status-codes": "2.3.0",
-    "i18next": "^21.6.12",
-    "i18next-browser-languagedetector": "^6.1.3",
-    "i18next-http-backend": "^1.3.2",
+    "i18next": "21.6.12",
+    "i18next-browser-languagedetector": "6.1.3",
+    "i18next-http-backend": "1.3.2",
     "immer": "11.1.3",
     "jest": "30.2.0",
-    "js-base64": "^3.7.2",
-    "lodash-es": "^4.17.21",
+    "js-base64": "3.7.2",
+    "lodash-es": "4.17.21",
     "lucide-react": "0.498.0",
     "mini-css-extract-plugin": "2.4.5",
     "motion": "12.4.13",
     "nuqs": "2.8.8",
-    "overlayscrollbars": "^2.8.1",
-    "overlayscrollbars-react": "^0.5.6",
+    "overlayscrollbars": "2.8.1",
+    "overlayscrollbars-react": "0.5.6",
     "papaparse": "5.4.1",
     "posthog-js": "1.298.0",
     "rc-tween-one": "3.0.6",
@@ -130,36 +130,36 @@
     "react-dom": "18.2.0",
     "react-drag-listview": "2.0.0",
     "react-error-boundary": "4.0.11",
-    "react-force-graph-2d": "^1.29.1",
+    "react-force-graph-2d": "1.29.1",
     "react-full-screen": "1.1.1",
-    "react-grid-layout": "^1.3.4",
+    "react-grid-layout": "1.3.4",
     "react-helmet-async": "1.3.0",
-    "react-i18next": "^11.16.1",
+    "react-i18next": "11.16.1",
     "react-lottie": "1.2.10",
     "react-markdown": "8.0.7",
     "react-query": "3.39.3",
-    "react-redux": "^7.2.2",
-    "react-router-dom": "^5.2.0",
+    "react-redux": "7.2.2",
+    "react-router-dom": "5.2.0",
     "react-router-dom-v5-compat": "6.27.0",
     "react-syntax-highlighter": "15.5.0",
-    "react-use": "^17.3.2",
+    "react-use": "17.3.2",
     "react-virtuoso": "4.0.3",
-    "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
+    "redux": "4.0.5",
+    "redux-thunk": "2.3.0",
     "rehype-raw": "7.0.0",
     "rollup-plugin-visualizer": "7.0.0",
     "rrule": "2.8.1",
-    "stream": "^0.0.2",
-    "styled-components": "^5.3.11",
-    "timestamp-nano": "^1.0.0",
-    "ts-node": "^10.2.1",
+    "stream": "0.0.2",
+    "styled-components": "5.3.11",
+    "timestamp-nano": "1.0.0",
+    "ts-node": "10.2.1",
     "typescript": "5.9.3",
     "uplot": "1.6.31",
-    "uuid": "^8.3.2",
+    "uuid": "8.3.2",
     "vite": "npm:rolldown-vite@7.3.1",
     "vite-plugin-html": "3.2.2",
-    "web-vitals": "^0.2.4",
-    "xstate": "^4.31.0",
+    "web-vitals": "0.2.4",
+    "xstate": "4.31.0",
     "zustand": "5.0.11"
   },
   "browserslist": {
@@ -175,69 +175,70 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-syntax-jsx": "^7.12.13",
-    "@babel/preset-env": "^7.22.14",
-    "@babel/preset-react": "^7.12.13",
-    "@babel/preset-typescript": "^7.21.4",
-    "@commitlint/cli": "^20.4.2",
-    "@commitlint/config-conventional": "^20.4.2",
+    "@babel/core": "7.22.11",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-syntax-jsx": "7.12.13",
+    "@babel/preset-env": "7.22.14",
+    "@babel/preset-react": "7.12.13",
+    "@babel/preset-typescript": "7.21.4",
+    "@commitlint/cli": "20.4.2",
+    "@commitlint/config-conventional": "20.4.2",
     "@faker-js/faker": "9.3.0",
     "@jest/globals": "30.2.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/color": "^3.0.3",
+    "@types/color": "3.0.3",
     "@types/crypto-js": "4.2.2",
-    "@types/dompurify": "^2.4.0",
-    "@types/event-source-polyfill": "^1.0.0",
+    "@types/dompurify": "2.4.0",
+    "@types/event-source-polyfill": "1.0.0",
     "@types/fontfaceobserver": "2.1.0",
     "@types/jest": "30.0.0",
-    "@types/lodash-es": "^4.17.4",
-    "@types/mini-css-extract-plugin": "^2.5.1",
-    "@types/node": "^16.10.3",
+    "@types/lodash-es": "4.17.4",
+    "@types/mini-css-extract-plugin": "2.5.1",
+    "@types/node": "16.10.3",
     "@types/papaparse": "5.3.7",
     "@types/react": "18.0.26",
     "@types/react-addons-update": "0.14.21",
     "@types/react-beautiful-dnd": "13.1.8",
     "@types/react-dom": "18.0.10",
-    "@types/react-grid-layout": "^1.1.2",
+    "@types/react-grid-layout": "1.1.2",
     "@types/react-helmet-async": "1.0.3",
     "@types/react-lottie": "1.2.10",
-    "@types/react-redux": "^7.1.11",
+    "@types/react-redux": "7.1.11",
     "@types/react-resizable": "3.0.3",
-    "@types/react-router-dom": "^5.1.6",
+    "@types/react-router-dom": "5.1.6",
     "@types/react-syntax-highlighter": "15.5.13",
     "@types/redux-mock-store": "1.0.4",
-    "@types/styled-components": "^5.1.4",
-    "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@types/styled-components": "5.1.4",
+    "@types/uuid": "8.3.1",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
     "autoprefixer": "10.4.19",
-    "babel-plugin-styled-components": "^1.12.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^29.15.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-sonarjs": "^0.12.0",
-    "husky": "^7.0.4",
-    "imagemin": "^8.0.1",
-    "imagemin-svgo": "^10.0.1",
-    "is-ci": "^3.0.1",
+    "babel-plugin-styled-components": "1.12.0",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-jest": "29.15.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.24.0",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "eslint-plugin-simple-import-sort": "7.0.0",
+    "eslint-plugin-sonarjs": "0.12.0",
+    "glob": "13.0.6",
+    "husky": "7.0.4",
+    "imagemin": "8.0.1",
+    "imagemin-svgo": "10.0.1",
+    "is-ci": "3.0.1",
     "jest-environment-jsdom": "29.7.0",
     "jest-environment-node": "29.7.0",
-    "jest-styled-components": "^7.2.0",
-    "lint-staged": "^12.5.0",
+    "jest-styled-components": "7.2.0",
+    "lint-staged": "12.5.0",
     "msw": "1.3.2",
     "npm-run-all": "latest",
     "orval": "7.18.0",
-    "portfinder-sync": "^0.0.2",
+    "portfinder-sync": "0.0.2",
     "postcss": "8.5.6",
     "prettier": "2.2.1",
     "prop-types": "15.8.1",
@@ -249,7 +250,7 @@
     "svgo": "4.0.0",
     "ts-api-utils": "2.4.0",
     "ts-jest": "29.4.6",
-    "ts-node": "^10.2.1",
+    "ts-node": "10.2.1",
     "typescript-plugin-css-modules": "5.2.0",
     "vite-plugin-checker": "0.12.0",
     "vite-plugin-compression": "0.5.1",
@@ -268,18 +269,40 @@
     "debug": "4.3.4",
     "semver": "7.5.4",
     "xml2js": "0.5.0",
-    "phin": "^3.7.1",
+    "phin": "3.7.1",
     "body-parser": "1.20.3",
     "http-proxy-middleware": "3.0.5",
     "cross-spawn": "7.0.5",
-    "cookie": "^0.7.1",
+    "cookie": "0.7.1",
     "serialize-javascript": "6.0.2",
     "prismjs": "1.30.0",
     "got": "11.8.5",
     "form-data": "4.0.4",
-    "brace-expansion": "^2.0.2",
-    "on-headers": "^1.1.0",
+    "brace-expansion": "2.0.2",
+    "on-headers": "1.1.0",
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "18.0.26",
+      "@types/react-dom": "18.0.10",
+      "debug": "4.3.4",
+      "semver": "7.5.4",
+      "xml2js": "0.5.0",
+      "phin": "3.7.1",
+      "body-parser": "1.20.3",
+      "http-proxy-middleware": "3.0.5",
+      "cross-spawn": "7.0.5",
+      "cookie": "0.7.1",
+      "serialize-javascript": "6.0.2",
+      "prismjs": "1.30.0",
+      "got": "11.8.5",
+      "form-data": "4.0.4",
+      "brace-expansion": "2.0.2",
+      "on-headers": "1.1.0",
+      "tmp": "0.2.4",
+      "vite": "npm:rolldown-vite@7.3.1"
+    }
   }
 }

frontend/src/components/ResizeTable/ResizeTable.tsx

@@ -14,8 +14,6 @@ import cx from 'classnames';
 import { dragColumnParams } from 'hooks/useDragColumns/configs';
 import { getColumnWidth, RowData } from 'lib/query/createTableColumnsFromQuery';
 import { debounce, set } from 'lodash-es';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { Widgets } from 'types/api/dashboard/getAll';
 
 import ResizableHeader from './ResizableHeader';
 import { DragSpanStyle } from './styles';
@@ -26,31 +24,26 @@ function ResizeTable({
 	columns,
 	onDragColumn,
 	pagination,
-	widgetId,
-	shouldPersistColumnWidths = false,
+	columnWidths,
+	onColumnWidthsChange,
 	...restProps
 }: ResizeTableProps): JSX.Element {
 	const [columnsData, setColumns] = useState<ColumnsType>([]);
-	const { setColumnWidths, selectedDashboard } = useDashboard();
-
-	const columnWidths = shouldPersistColumnWidths
-		? (selectedDashboard?.data?.widgets?.find(
-				(widget) => widget.id === widgetId,
-		  ) as Widgets)?.columnWidths
-		: undefined;
+	const onColumnWidthsChangeRef = useRef(onColumnWidthsChange);
 
 	const updateAllColumnWidths = useRef(
 		debounce((widthsConfig: Record<string, number>) => {
-			if (!widgetId || !shouldPersistColumnWidths) {
+			if (!onColumnWidthsChangeRef.current) {
 				return;
 			}
-			setColumnWidths?.((prev) => ({
-				...prev,
-				[widgetId]: widthsConfig,
-			}));
+			onColumnWidthsChangeRef.current(widthsConfig);
 		}, 1000),
 	).current;
 
+	useEffect(() => {
+		onColumnWidthsChangeRef.current = onColumnWidthsChange;
+	}, [onColumnWidthsChange]);
+
 	const handleResize = useCallback(
 		(index: number) => (
 			e: SyntheticEvent<Element>,
@@ -75,7 +68,7 @@ function ResizeTable({
 				...col,
 				...(onDragColumn && {
 					title: (
-						<DragSpanStyle className="dragHandler">
+						<DragSpanStyle className="dragHandler" data-testid="drag-column-title">
 							{col?.title?.toString() || ''}
 						</DragSpanStyle>
 					),
@@ -106,31 +99,31 @@ function ResizeTable({
 	}, [mergedColumns, pagination, restProps]);
 
 	useEffect(() => {
-		if (columns) {
-			// Apply stored column widths from widget configuration
-			const columnsWithStoredWidths = columns.map((col) => {
-				const dataIndex = (col as RowData).dataIndex as string;
-				if (dataIndex && columnWidths) {
-					const width = getColumnWidth(dataIndex, columnWidths);
-					if (width) {
-						return {
-							...col,
-							width, // Apply stored width
-						};
-					}
-				}
-				return col;
-			});
-
-			setColumns(columnsWithStoredWidths);
-		}
-	}, [columns, columnWidths]);
-
-	useEffect(() => {
-		if (!shouldPersistColumnWidths) {
+		if (!columns) {
 			return;
 		}
-		// Collect all column widths in a single object
+
+		const columnsWithStoredWidths = columns.map((col) => {
+			const dataIndex = (col as RowData).dataIndex as string;
+			if (dataIndex && columnWidths) {
+				const width = getColumnWidth(dataIndex, columnWidths);
+				if (width) {
+					return { ...col, width };
+				}
+			}
+			return col;
+		});
+
+		setColumns(columnsWithStoredWidths);
+	}, [columns, columnWidths]);
+
+	const lastReportedWidthsRef = useRef<Record<string, number>>({});
+
+	useEffect(() => {
+		if (!onColumnWidthsChange) {
+			return;
+		}
+
 		const newColumnWidths: Record<string, number> = {};
 
 		mergedColumns.forEach((col) => {
@@ -140,11 +133,20 @@ function ResizeTable({
 			}
 		});
 
-		// Only update if there are actual widths to set
-		if (Object.keys(newColumnWidths).length > 0) {
+		if (Object.keys(newColumnWidths).length === 0) {
+			return;
+		}
+
+		const last = lastReportedWidthsRef.current;
+		const hasChange =
+			Object.keys(newColumnWidths).length !== Object.keys(last).length ||
+			Object.keys(newColumnWidths).some((k) => newColumnWidths[k] !== last[k]);
+
+		if (hasChange) {
+			lastReportedWidthsRef.current = newColumnWidths;
 			updateAllColumnWidths(newColumnWidths);
 		}
-	}, [mergedColumns, updateAllColumnWidths, shouldPersistColumnWidths]);
+	}, [mergedColumns, updateAllColumnWidths, onColumnWidthsChange]);
 
 	return onDragColumn ? (
 		<ReactDragListView.DragColumn {...dragColumnParams} onDragEnd={onDragColumn}>

frontend/src/components/ResizeTable/__tests__/ResizeTable.test.tsx

@@ -0,0 +1,244 @@
+import { act } from '@testing-library/react';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import ResizeTable from '../ResizeTable';
+
+jest.mock('react-resizable', () => ({
+	Resizable: ({
+		children,
+		onResize,
+		width,
+	}: {
+		children: React.ReactNode;
+		onResize: (
+			e: React.SyntheticEvent,
+			data: { size: { width: number } },
+		) => void;
+		width: number;
+	}): JSX.Element => (
+		<div>
+			{children}
+			<button
+				data-testid="resize-trigger"
+				type="button"
+				onClick={(e): void => onResize(e, { size: { width: width + 50 } })}
+			/>
+		</div>
+	),
+}));
+
+// Make debounce synchronous so onColumnWidthsChange fires immediately
+jest.mock('lodash-es', () => ({
+	...jest.requireActual('lodash-es'),
+	debounce: (fn: (...args: any[]) => any): ((...args: any[]) => any) => fn,
+}));
+
+const baseColumns = [
+	{ dataIndex: 'name', title: 'Name', width: 100 },
+	{ dataIndex: 'value', title: 'Value', width: 100 },
+];
+
+const baseDataSource = [
+	{ key: '1', name: 'Alice', value: 42 },
+	{ key: '2', name: 'Bob', value: 99 },
+];
+
+describe('ResizeTable', () => {
+	it('renders column headers and data rows', () => {
+		render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+			/>,
+		);
+
+		expect(screen.getByText('Name')).toBeInTheDocument();
+		expect(screen.getByText('Value')).toBeInTheDocument();
+		expect(screen.getByText('Alice')).toBeInTheDocument();
+		expect(screen.getByText('Bob')).toBeInTheDocument();
+	});
+
+	it('overrides column widths from columnWidths prop and reports them via onColumnWidthsChange', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		act(() => {
+			render(
+				<ResizeTable
+					columns={baseColumns}
+					dataSource={baseDataSource}
+					rowKey="key"
+					columnWidths={{ name: 250, value: 180 }}
+					onColumnWidthsChange={onColumnWidthsChange}
+				/>,
+			);
+		});
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 250, value: 180 }),
+		);
+	});
+
+	it('reports original column widths via onColumnWidthsChange when columnWidths prop is not provided', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		act(() => {
+			render(
+				<ResizeTable
+					columns={baseColumns}
+					dataSource={baseDataSource}
+					rowKey="key"
+					onColumnWidthsChange={onColumnWidthsChange}
+				/>,
+			);
+		});
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 100, value: 100 }),
+		);
+	});
+
+	it('does not call onColumnWidthsChange when it is not provided', () => {
+		// Should render without errors and without attempting to call an undefined callback
+		expect(() => {
+			render(
+				<ResizeTable
+					columns={baseColumns}
+					dataSource={baseDataSource}
+					rowKey="key"
+				/>,
+			);
+		}).not.toThrow();
+	});
+
+	it('only overrides the column that has a stored width, leaving others at their original width', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		act(() => {
+			render(
+				<ResizeTable
+					columns={baseColumns}
+					dataSource={baseDataSource}
+					rowKey="key"
+					columnWidths={{ name: 250 }}
+					onColumnWidthsChange={onColumnWidthsChange}
+				/>,
+			);
+		});
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 250, value: 100 }),
+		);
+	});
+
+	it('does not call onColumnWidthsChange on re-render when widths have not changed', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		const { rerender } = render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		expect(onColumnWidthsChange).toHaveBeenCalledTimes(1);
+		onColumnWidthsChange.mockClear();
+
+		rerender(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		expect(onColumnWidthsChange).not.toHaveBeenCalled();
+	});
+
+	it('does not call onColumnWidthsChange when no column has a defined width', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		render(
+			<ResizeTable
+				columns={[
+					{ dataIndex: 'name', title: 'Name' },
+					{ dataIndex: 'value', title: 'Value' },
+				]}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		expect(onColumnWidthsChange).not.toHaveBeenCalled();
+	});
+
+	it('calls onColumnWidthsChange with the new width after a column is resized', async () => {
+		const user = userEvent.setup();
+		const onColumnWidthsChange = jest.fn();
+
+		render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		onColumnWidthsChange.mockClear();
+
+		// Click the first column's resize trigger — mock adds 50px to the current width (100 → 150)
+		const [firstResizeTrigger] = screen.getAllByTestId('resize-trigger');
+		await user.click(firstResizeTrigger);
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 150, value: 100 }),
+		);
+	});
+
+	it('does not affect other columns when only one column is resized', async () => {
+		const user = userEvent.setup();
+		const onColumnWidthsChange = jest.fn();
+
+		render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		onColumnWidthsChange.mockClear();
+
+		// Resize only the second column (value: 100 → 150), name should stay at 100
+		const resizeTriggers = screen.getAllByTestId('resize-trigger');
+		await user.click(resizeTriggers[1]);
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 100, value: 150 }),
+		);
+	});
+
+	it('wraps column titles in drag handler spans when onDragColumn is provided', () => {
+		const onDragColumn = jest.fn();
+
+		render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onDragColumn={onDragColumn}
+			/>,
+		);
+
+		const dragTitles = screen.getAllByTestId('drag-column-title');
+		expect(dragTitles).toHaveLength(baseColumns.length);
+		expect(dragTitles[0]).toHaveTextContent('Name');
+		expect(dragTitles[1]).toHaveTextContent('Value');
+	});
+});

frontend/src/components/ResizeTable/types.ts

@@ -6,10 +6,25 @@ import { LaunchChatSupportProps } from 'components/LaunchChatSupport/LaunchChatS
 
 import { TableDataSource } from './contants';
 
+type ColumnWidths = Record<string, number>;
+
 export interface ResizeTableProps extends TableProps<any> {
 	onDragColumn?: (fromIndex: number, toIndex: number) => void;
-	widgetId?: string;
-	shouldPersistColumnWidths?: boolean;
+	/**
+	 * Pre-resolved column widths for this table, keyed by column dataIndex.
+	 * Use this to apply persisted widths on mount (e.g. from widget.columnWidths).
+	 * Do NOT pass a value that updates reactively on every resize — that creates a
+	 * feedback loop. Pass only stable / persisted values.
+	 */
+	columnWidths?: ColumnWidths;
+	/**
+	 * Called (debounced) whenever the user finishes resizing a column.
+	 * The widths object contains all current column widths keyed by dataIndex.
+	 * Intended for persisting widths to an external store (e.g. dashboard context
+	 * staging buffer). The caller owns the storage; ResizeTable does not read back
+	 * whatever is written here.
+	 */
+	onColumnWidthsChange?: (widths: ColumnWidths) => void;
 }
 export interface DynamicColumnTableProps extends TableProps<any> {
 	tablesource: typeof TableDataSource[keyof typeof TableDataSource];

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -81,7 +81,18 @@ function FullView({
 		setCurrentGraphRef(fullViewRef);
 	}, [setCurrentGraphRef]);
 
-	const { selectedDashboard, isDashboardLocked } = useDashboard();
+	const {
+		selectedDashboard,
+		isDashboardLocked,
+		setColumnWidths,
+	} = useDashboard();
+
+	const onColumnWidthsChange = useCallback(
+		(widths: Record<string, number>) => {
+			setColumnWidths((prev) => ({ ...prev, [widget.id]: widths }));
+		},
+		[setColumnWidths, widget.id],
+	);
 	const { dashboardVariables } = useDashboardVariables();
 	const { user } = useAppContext();
 
@@ -381,6 +392,7 @@ function FullView({
 								onClickHandler={onClickHandler}
 								enableDrillDown={enableDrillDown}
 								selectedGraph={selectedPanelType}
+								onColumnWidthsChange={onColumnWidthsChange}
 							/>
 						</GraphContainer>
 					</div>

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -168,6 +168,9 @@ jest.mock('providers/Dashboard/Dashboard', () => ({
 				variables: [],
 			},
 		},
+		setLayouts: jest.fn(),
+		setSelectedDashboard: jest.fn(),
+		setColumnWidths: jest.fn(),
 	}),
 }));
 

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx

@@ -101,7 +101,19 @@ function WidgetGraphComponent({
 
 	const navigateToExplorerPages = useNavigateToExplorerPages();
 
-	const { setLayouts, selectedDashboard, setSelectedDashboard } = useDashboard();
+	const {
+		setLayouts,
+		selectedDashboard,
+		setSelectedDashboard,
+		setColumnWidths,
+	} = useDashboard();
+
+	const onColumnWidthsChange = useCallback(
+		(widths: Record<string, number>) => {
+			setColumnWidths((prev) => ({ ...prev, [widget.id]: widths }));
+		},
+		[setColumnWidths, widget.id],
+	);
 
 	const onToggleModal = useCallback(
 		(func: Dispatch<SetStateAction<boolean>>) => {
@@ -424,6 +436,7 @@ function WidgetGraphComponent({
 						customSeries={customSeries}
 						customOnRowClick={customOnRowClick}
 						enableDrillDown={enableDrillDown}
+						onColumnWidthsChange={onColumnWidthsChange}
 					/>
 				</div>
 			)}

frontend/src/container/GridTableComponent/index.tsx

@@ -45,6 +45,8 @@ function GridTableComponent({
 	onOpenTraceBtnClick,
 	customOnRowClick,
 	widgetId,
+	columnWidths,
+	onColumnWidthsChange,
 	panelType,
 	queryRangeRequest,
 	decimalPrecision,
@@ -284,6 +286,8 @@ function GridTableComponent({
 				dataSource={dataSource}
 				sticky={sticky}
 				widgetId={widgetId}
+				columnWidths={columnWidths}
+				onColumnWidthsChange={onColumnWidthsChange}
 				panelType={panelType}
 				queryRangeRequest={queryRangeRequest}
 				onRow={

frontend/src/container/GridTableComponent/types.ts

@@ -24,6 +24,8 @@ export type GridTableComponentProps = {
 	onOpenTraceBtnClick?: (record: RowData) => void;
 	customOnRowClick?: (record: RowData) => void;
 	widgetId?: string;
+	columnWidths?: Record<string, number>;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 	renderColumnCell?: QueryTableProps['renderColumnCell'];
 	customColTitles?: Record<string, string>;
 	enableDrillDown?: boolean;

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -33,6 +33,7 @@ function LogsPanelComponent({
 	widget,
 	setRequestData,
 	queryResponse,
+	onColumnWidthsChange,
 }: LogsPanelComponentProps): JSX.Element {
 	const [pageSize, setPageSize] = useState<number>(10);
 	const [offset, setOffset] = useState<number>(0);
@@ -145,8 +146,8 @@ function LogsPanelComponent({
 							columns={columns}
 							onRow={handleRow}
 							rowKey={(record): string => record.id}
-							widgetId={widget.id}
-							shouldPersistColumnWidths
+							columnWidths={widget.columnWidths}
+							onColumnWidthsChange={onColumnWidthsChange}
 						/>
 					</OverlayScrollbar>
 				</div>
@@ -189,6 +190,7 @@ export type LogsPanelComponentProps = {
 		Error
 	>;
 	widget: Widgets;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };
 
 export default LogsPanelComponent;

frontend/src/container/PanelWrapper/ListPanelWrapper.tsx

@@ -8,6 +8,7 @@ function ListPanelWrapper({
 	widget,
 	queryResponse,
 	setRequestData,
+	onColumnWidthsChange,
 }: PanelWrapperProps): JSX.Element {
 	const dataSource = widget.query.builder?.queryData[0]?.dataSource;
 
@@ -21,6 +22,7 @@ function ListPanelWrapper({
 				widget={widget}
 				queryResponse={queryResponse}
 				setRequestData={setRequestData}
+				onColumnWidthsChange={onColumnWidthsChange}
 			/>
 		);
 	}
@@ -29,6 +31,7 @@ function ListPanelWrapper({
 			widget={widget}
 			queryResponse={queryResponse}
 			setRequestData={setRequestData}
+			onColumnWidthsChange={onColumnWidthsChange}
 		/>
 	);
 }

frontend/src/container/PanelWrapper/PanelWrapper.tsx

@@ -24,6 +24,7 @@ function PanelWrapper({
 	customOnRowClick,
 	panelMode,
 	enableDrillDown = false,
+	onColumnWidthsChange,
 }: PanelWrapperProps): JSX.Element {
 	const Component = PanelTypeVsPanelWrapper[
 		selectedGraph || widget.panelTypes
@@ -58,6 +59,7 @@ function PanelWrapper({
 			customOnRowClick={customOnRowClick}
 			customSeries={customSeries}
 			enableDrillDown={enableDrillDown}
+			onColumnWidthsChange={onColumnWidthsChange}
 		/>
 	);
 }

frontend/src/container/PanelWrapper/TablePanelWrapper.tsx

@@ -14,6 +14,7 @@ function TablePanelWrapper({
 	onOpenTraceBtnClick,
 	customOnRowClick,
 	enableDrillDown = false,
+	onColumnWidthsChange,
 }: PanelWrapperProps): JSX.Element {
 	const panelData =
 		(queryResponse.data?.payload?.data?.result?.[0] as any)?.table || [];
@@ -34,6 +35,8 @@ function TablePanelWrapper({
 			onOpenTraceBtnClick={onOpenTraceBtnClick}
 			customOnRowClick={customOnRowClick}
 			widgetId={widget.id}
+			columnWidths={widget.columnWidths}
+			onColumnWidthsChange={onColumnWidthsChange}
 			renderColumnCell={widget.renderColumnCell}
 			customColTitles={widget.customColTitles}
 			contextLinks={widget.contextLinks}

frontend/src/container/PanelWrapper/panelWrapper.types.ts

@@ -29,6 +29,7 @@ export type PanelWrapperProps = {
 	customSeries?: (data: QueryData[]) => uPlot.Series[];
 	enableDrillDown?: boolean;
 	panelMode: PanelMode;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };
 
 export type TooltipData = {

frontend/src/container/QueryTable/QueryTable.intefaces.ts

@@ -24,6 +24,8 @@ export type QueryTableProps = Omit<
 	sticky?: TableProps<RowData>['sticky'];
 	searchTerm?: string;
 	widgetId?: string;
+	columnWidths?: Record<string, number>;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 	enableDrillDown?: boolean;
 	contextLinks?: ContextLinksData;
 	panelType?: PANEL_TYPES;

frontend/src/container/QueryTable/QueryTable.tsx

@@ -28,6 +28,8 @@ export function QueryTable({
 	sticky,
 	searchTerm,
 	widgetId,
+	columnWidths,
+	onColumnWidthsChange,
 	panelType,
 	...props
 }: QueryTableProps): JSX.Element {
@@ -175,8 +177,8 @@ export function QueryTable({
 					dataSource={filterTable === null ? newDataSource : filterTable}
 					scroll={{ x: 'max-content' }}
 					pagination={paginationConfig}
-					widgetId={widgetId}
-					shouldPersistColumnWidths
+					columnWidths={columnWidths}
+					onColumnWidthsChange={onColumnWidthsChange}
 					sticky={sticky}
 					{...props}
 				/>

frontend/src/container/TracesTableComponent/TracesTableComponent.tsx

@@ -35,6 +35,7 @@ function TracesTableComponent({
 	widget,
 	queryResponse,
 	setRequestData,
+	onColumnWidthsChange,
 }: TracesTableComponentProps): JSX.Element {
 	const [pagination, setPagination] = useState<Pagination>({
 		offset: 0,
@@ -131,8 +132,8 @@ function TracesTableComponent({
 						columns={columns}
 						onRow={handleRow}
 						sticky
-						widgetId={widget.id}
-						shouldPersistColumnWidths
+						columnWidths={widget.columnWidths}
+						onColumnWidthsChange={onColumnWidthsChange}
 					/>
 				</OverlayScrollbar>
 			</div>
@@ -175,6 +176,7 @@ export type TracesTableComponentProps = {
 	>;
 	widget: Widgets;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };
 
 export default TracesTableComponent;