diff --git a/go.mod b/go.mod
index ee0c6c45f91..22b9737d24d 100644
--- a/go.mod
+++ b/go.mod
@@ -3,8 +3,8 @@ module github.com/grafana/grafana
 go 1.24.4
 
 require (
-	buf.build/gen/go/parca-dev/parca/connectrpc/go v1.17.0-20240902100956-02fd72488966.1 // @grafana/observability-traces-and-profiling
-	buf.build/gen/go/parca-dev/parca/protocolbuffers/go v1.34.2-20240902100956-02fd72488966.2 // @grafana/observability-traces-and-profiling
+	buf.build/gen/go/parca-dev/parca/connectrpc/go v1.18.1-20250703125925-3f0fcf4bff96.1 // @grafana/observability-traces-and-profiling
+	buf.build/gen/go/parca-dev/parca/protocolbuffers/go v1.36.2-20250703125925-3f0fcf4bff96.1 // @grafana/observability-traces-and-profiling
 	cloud.google.com/go/kms v1.21.0 // @grafana/grafana-backend-group
 	cloud.google.com/go/storage v1.52.0 // @grafana/grafana-backend-group
 	connectrpc.com/connect v1.18.1 // @grafana/observability-traces-and-profiling
diff --git a/go.sum b/go.sum
index d65e81f3b04..d0fbecc682f 100644
--- a/go.sum
+++ b/go.sum
@@ -1,7 +1,7 @@
-buf.build/gen/go/parca-dev/parca/connectrpc/go v1.17.0-20240902100956-02fd72488966.1 h1:Ur1tEsOxct4cuBumorzL/Zl9rRedJKdkPqufih3WsqQ=
-buf.build/gen/go/parca-dev/parca/connectrpc/go v1.17.0-20240902100956-02fd72488966.1/go.mod h1:gC0oJPXUcGXzgiyUzMPBIgIfHbdoovWQD3/njIe5EVA=
-buf.build/gen/go/parca-dev/parca/protocolbuffers/go v1.34.2-20240902100956-02fd72488966.2 h1:oRhx9wmKP52zEp1/PWWjaNxWtxWFrKXYSF1UJygjbzQ=
-buf.build/gen/go/parca-dev/parca/protocolbuffers/go v1.34.2-20240902100956-02fd72488966.2/go.mod h1:w3CrNzdvwGJ4FwUlhshojc2FDXDN+3ou5nlcLTu7dHs=
+buf.build/gen/go/parca-dev/parca/connectrpc/go v1.18.1-20250703125925-3f0fcf4bff96.1 h1:MXQkdpJwbCwskYLQ3dUv/5gmk8fSsUwu78u+kXebbek=
+buf.build/gen/go/parca-dev/parca/connectrpc/go v1.18.1-20250703125925-3f0fcf4bff96.1/go.mod h1:pjl83IqpNF7Lm/lOPMLQ5IIfCg+yTu2A9OgYTcEncCs=
+buf.build/gen/go/parca-dev/parca/protocolbuffers/go v1.36.2-20250703125925-3f0fcf4bff96.1 h1:9nqE/pDc/HXAXiD5pZncPywjAzWgKuBkFFYgdK2lVU8=
+buf.build/gen/go/parca-dev/parca/protocolbuffers/go v1.36.2-20250703125925-3f0fcf4bff96.1/go.mod h1:1M7nlq2ljfzb95x9LaA2j1gYIvDkVZii58mGvTa9ExM=
 c2sp.org/CCTV/age v0.0.0-20240306222714-3ec4d716e805 h1:u2qwJeEvnypw+OCPUHmoZE3IqwfuN5kgDfo5MLzpNM0=
 c2sp.org/CCTV/age v0.0.0-20240306222714-3ec4d716e805/go.mod h1:FomMrUJ2Lxt5jCLmZkG3FHa72zUprnhd3v/Z18Snm4w=
 cel.dev/expr v0.23.1 h1:K4KOtPCJQjVggkARsjG9RWXP6O4R73aHeJMa/dmCQQg=
diff --git a/go.work.sum b/go.work.sum
index a106af447b4..b2fd956859a 100644
--- a/go.work.sum
+++ b/go.work.sum
@@ -6,6 +6,10 @@ atomicgo.dev/schedule v0.1.0 h1:nTthAbhZS5YZmgYbb2+DH8uQIZcTlIrd4eYr3UQxEjs=
 atomicgo.dev/schedule v0.1.0/go.mod h1:xeUa3oAkiuHYh8bKiQBRojqAMq3PXXbJujjb0hw8pEU=
 buf.build/gen/go/bufbuild/protovalidate/protocolbuffers/go v1.36.6-20250425153114-8976f5be98c1.1 h1:YhMSc48s25kr7kv31Z8vf7sPUIq5YJva9z1mn/hAt0M=
 buf.build/gen/go/bufbuild/protovalidate/protocolbuffers/go v1.36.6-20250425153114-8976f5be98c1.1/go.mod h1:avRlCjnFzl98VPaeCtJ24RrV/wwHFzB8sWXhj26+n/U=
+buf.build/gen/go/parca-dev/parca/connectrpc/go v1.18.1-20250703125925-3f0fcf4bff96.1 h1:MXQkdpJwbCwskYLQ3dUv/5gmk8fSsUwu78u+kXebbek=
+buf.build/gen/go/parca-dev/parca/connectrpc/go v1.18.1-20250703125925-3f0fcf4bff96.1/go.mod h1:pjl83IqpNF7Lm/lOPMLQ5IIfCg+yTu2A9OgYTcEncCs=
+buf.build/gen/go/parca-dev/parca/protocolbuffers/go v1.36.2-20250703125925-3f0fcf4bff96.1 h1:9nqE/pDc/HXAXiD5pZncPywjAzWgKuBkFFYgdK2lVU8=
+buf.build/gen/go/parca-dev/parca/protocolbuffers/go v1.36.2-20250703125925-3f0fcf4bff96.1/go.mod h1:1M7nlq2ljfzb95x9LaA2j1gYIvDkVZii58mGvTa9ExM=
 buf.build/go/protovalidate v0.12.0 h1:4GKJotbspQjRCcqZMGVSuC8SjwZ/FmgtSuKDpKUTZew=
 buf.build/go/protovalidate v0.12.0/go.mod h1:q3PFfbzI05LeqxSwq+begW2syjy2Z6hLxZSkP1OH/D0=
 cel.dev/expr v0.23.0/go.mod h1:hLPLo1W4QUmuYdA72RBX06QTs6MXw941piREPl3Yfiw=
@@ -310,6 +314,7 @@ github.com/PuerkitoBio/urlesc v0.0.0-20170810143723-de5bf2ad4578 h1:d+Bc7a5rLufV
 github.com/RaveNoX/go-jsoncommentstrip v1.0.0 h1:t527LHHE3HmiHrq74QMpNPZpGCIJzTx+apLkMKt4HC0=
 github.com/RoaringBitmap/gocroaring v0.4.0 h1:5nufXUgWpBEUNEJXw7926YAA58ZAQRpWPrQV1xCoSjc=
 github.com/RoaringBitmap/real-roaring-datasets v0.0.0-20190726190000-eb7c87156f76 h1:ZYlhPbqQFU+AHfgtCdHGDTtRW1a8geZyiE8c6Q+Sl1s=
+github.com/RoaringBitmap/real-roaring-datasets v0.0.0-20190726190000-eb7c87156f76/go.mod h1:oM0MHmQ3nDsq609SS36p+oYbRi16+oVvU2Bw4Ipv0SE=
 github.com/Sereal/Sereal/Go/sereal v0.0.0-20231009093132-b9187f1a92c6 h1:5kUcJJAKWWI82Xnp/CaU0eu5hLlHkmm9acjowSkwCd0=
 github.com/Sereal/Sereal/Go/sereal v0.0.0-20231009093132-b9187f1a92c6/go.mod h1:JwrycNnC8+sZPDyzM3MQ86LvaGzSpfxg885KOOwFRW4=
 github.com/Shopify/goreferrer v0.0.0-20220729165902-8cddb4f5de06 h1:KkH3I3sJuOLP3TjA/dfr4NAY8bghDwnXiU7cTKxQqo0=
@@ -355,6 +360,12 @@ github.com/armon/circbuf v0.0.0-20150827004946-bbbad097214e h1:QEF07wC0T1rKkctt1
 github.com/armon/consul-api v0.0.0-20180202201655-eb2c6b5be1b6 h1:G1bPvciwNyF7IUmKXNt9Ak3m6u9DE1rF+RmtIkBpVdA=
 github.com/aws/aws-msk-iam-sasl-signer-go v1.0.1 h1:nMp7diZObd4XEVUR0pEvn7/E13JIgManMX79Q6quV6E=
 github.com/aws/aws-msk-iam-sasl-signer-go v1.0.1/go.mod h1:MVYeeOhILFFemC/XlYTClvBjYZrg/EPd3ts885KrNTI=
+github.com/aws/aws-sdk-go-v2/config v1.29.17 h1:jSuiQ5jEe4SAMH6lLRMY9OVC+TqJLP5655pBGjmnjr0=
+github.com/aws/aws-sdk-go-v2/config v1.29.17/go.mod h1:9P4wwACpbeXs9Pm9w1QTh6BwWwJjwYvJ1iCt5QbCXh8=
+github.com/aws/aws-sdk-go-v2/credentials v1.17.70 h1:ONnH5CM16RTXRkS8Z1qg7/s2eDOhHhaXVd72mmyv4/0=
+github.com/aws/aws-sdk-go-v2/credentials v1.17.70/go.mod h1:M+lWhhmomVGgtuPOhO85u4pEa3SmssPTdcYpP/5J/xc=
+github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.32 h1:KAXP9JSHO1vKGCr5f4O6WmlVKLFFXgWYAGoJosorxzU=
+github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.16.32/go.mod h1:h4Sg6FQdexC1yYG9RDnOvLbW1a/P986++/Y/a+GyEM8=
 github.com/aws/aws-sdk-go-v2/service/kms v1.35.3 h1:UPTdlTOwWUX49fVi7cymEN6hDqCwe3LNv1vi7TXUutk=
 github.com/aws/aws-sdk-go-v2/service/kms v1.35.3/go.mod h1:gjDP16zn+WWalyaUqwCCioQ8gU8lzttCCc9jYsiQI/8=
 github.com/aws/aws-sdk-go-v2/service/secretsmanager v1.32.4 h1:NgRFYyFpiMD62y4VPXh4DosPFbZd4vdMVBWKk0VmWXc=
@@ -365,6 +376,12 @@ github.com/aws/aws-sdk-go-v2/service/sqs v1.34.3 h1:Vjqy5BZCOIsn4Pj8xzyqgGmsSqzz
 github.com/aws/aws-sdk-go-v2/service/sqs v1.34.3/go.mod h1:L0enV3GCRd5iG9B64W35C4/hwsCB00Ib+DKVGTadKHI=
 github.com/aws/aws-sdk-go-v2/service/ssm v1.52.4 h1:hgSBvRT7JEWx2+vEGI9/Ld5rZtl7M5lu8PqdvOmbRHw=
 github.com/aws/aws-sdk-go-v2/service/ssm v1.52.4/go.mod h1:v7NIzEFIHBiicOMaMTuEmbnzGnqW0d+6ulNALul6fYE=
+github.com/aws/aws-sdk-go-v2/service/sso v1.25.5 h1:AIRJ3lfb2w/1/8wOOSqYb9fUKGwQbtysJ2H1MofRUPg=
+github.com/aws/aws-sdk-go-v2/service/sso v1.25.5/go.mod h1:b7SiVprpU+iGazDUqvRSLf5XmCdn+JtT1on7uNL6Ipc=
+github.com/aws/aws-sdk-go-v2/service/ssooidc v1.30.3 h1:BpOxT3yhLwSJ77qIY3DoHAQjZsc4HEGfMCE4NGy3uFg=
+github.com/aws/aws-sdk-go-v2/service/ssooidc v1.30.3/go.mod h1:vq/GQR1gOFLquZMSrxUK/cpvKCNVYibNyJ1m7JrU88E=
+github.com/aws/aws-sdk-go-v2/service/sts v1.34.0 h1:NFOJ/NXEGV4Rq//71Hs1jC/NvPs1ezajK+yQmkwnPV0=
+github.com/aws/aws-sdk-go-v2/service/sts v1.34.0/go.mod h1:7ph2tGpfQvwzgistp2+zga9f+bCjlQJPkPUmMgDSD7w=
 github.com/aymerick/douceur v0.2.0 h1:Mv+mAeH1Q+n9Fr+oyamOlAkUNPWPlA8PPGR0QAaYuPk=
 github.com/aymerick/douceur v0.2.0/go.mod h1:wlT5vV2O3h55X9m7iVYN0TBM0NH/MmbLnd30/FjWUq4=
 github.com/baidubce/bce-sdk-go v0.9.188 h1:8MA7ewe4VpX01uYl7Kic6ZvfIReUFdSKbY46ZqlQM7U=
@@ -598,13 +615,73 @@ github.com/gorilla/css v1.0.0 h1:BQqNyPTi50JCFMTw/b67hByjMVXZRwGha6wxVGkeihY=
 github.com/gorilla/css v1.0.0/go.mod h1:Dn721qIggHpt4+EFCcTLTU/vk5ySda2ReITrtgBl60c=
 github.com/gorilla/handlers v1.5.2 h1:cLTUSsNkgcwhgRqvCNmdbRWG0A3N4F+M2nWKdScwyEE=
 github.com/gorilla/handlers v1.5.2/go.mod h1:dX+xVpaxdSw+q0Qek8SSsl3dfMk3jNddUkMzo0GtH0w=
+github.com/gorilla/mux v1.7.3/go.mod h1:1lud6UwP+6orDFRuTfBEV8e9/aOM/c4fVVCaMa2zaAs=
+github.com/gorilla/mux v1.8.0/go.mod h1:DVbg23sWSpFRCP0SfiEN6jmj59UnW/n46BH5rLB71So=
+github.com/gorilla/websocket v0.0.0-20170926233335-4201258b820c/go.mod h1:E7qHFY5m1UJ88s3WnNqhKjPHQ0heANvMoAMk2YaljkQ=
+github.com/gorilla/websocket v1.4.2/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/grafana/alerting v0.0.0-20250129195454-3e5b80036b7a/go.mod h1:QsnoKX/iYZxA4Cv+H+wC7uxutBD8qi8ZW5UJvD2TYmU=
+github.com/grafana/alerting v0.0.0-20250310104713-16b885f1c79e/go.mod h1:HfvjmU3UqCIpoy9Z2wgKGrZ4A5vz+yQlP9ZXvCfEkiA=
+github.com/grafana/alerting v0.0.0-20250403153742-418bc7118d05 h1:hMzOzI/S0nkZt0nUqpfAa4Rdb+YL8z8oG3pl4Jb31h8=
+github.com/grafana/alerting v0.0.0-20250403153742-418bc7118d05/go.mod h1:K3YAJumchx5EEZItGv4D3pCv/Ux796hmoOibP/p/eYk=
+github.com/grafana/alerting v0.0.0-20250429131604-de176b4a0309 h1:H2p3XKDHnTBGkMXLCgXiqb2dFnHbQ4zPDXOwKK4Ne3Y=
+github.com/grafana/alerting v0.0.0-20250429131604-de176b4a0309/go.mod h1:pMfhRxL2LZ3Pm8iy7VcVsb9CLYuBtjFYbf1oxgx7yFA=
+github.com/grafana/alerting v0.0.0-20250701210250-cea2d1683945 h1:3imTbxFpZSVI6IBIB9mn+Xc40lUweWjfMaBSgXR7rLs=
+github.com/grafana/alerting v0.0.0-20250701210250-cea2d1683945/go.mod h1:gtR7agmxVfJOmNKV/n2ZULgOYTYNL+PDKYB5N48tQ7Q=
+github.com/grafana/authlib v0.0.0-20250123104008-e99947858901/go.mod h1:/gYfphsNu9v1qYWXxpv1NSvMEMSwvdf8qb8YlgwIRl8=
+github.com/grafana/authlib/types v0.0.0-20250120144156-d6737a7dc8f5/go.mod h1:qYjSd1tmJiuVoSICp7Py9/zD54O9uQQA3wuM6Gg4DFM=
+github.com/grafana/authlib/types v0.0.0-20250120145936-5f0e28e7a87c/go.mod h1:qYjSd1tmJiuVoSICp7Py9/zD54O9uQQA3wuM6Gg4DFM=
 github.com/grafana/authlib/types v0.0.0-20250314102521-a77865c746c0/go.mod h1:qeWYbnWzaYGl88JlL9+DsP1GT2Cudm58rLtx13fKZdw=
 github.com/grafana/cloudflare-go v0.0.0-20230110200409-c627cf6792f2 h1:qhugDMdQ4Vp68H0tp/0iN17DM2ehRo1rLEdOFe/gB8I=
 github.com/grafana/cloudflare-go v0.0.0-20230110200409-c627cf6792f2/go.mod h1:w/aiO1POVIeXUQyl0VQSZjl5OAGDTL5aX+4v0RA1tcw=
 github.com/grafana/go-gelf/v2 v2.0.1 h1:BOChP0h/jLeD+7F9mL7tq10xVkDG15he3T1zHuQaWak=
 github.com/grafana/go-gelf/v2 v2.0.1/go.mod h1:lexHie0xzYGwCgiRGcvZ723bSNyNI8ZRD4s0CLobh90=
+github.com/grafana/gomemcache v0.0.0-20250228145437-da7b95fd2ac1/go.mod h1:j/s0jkda4UXTemDs7Pgw/vMT06alWc42CHisvYac0qw=
+github.com/grafana/grafana-app-sdk/logging v0.38.0/go.mod h1:Y/bvbDhBiV/tkIle9RW49pgfSPIPSON8Q4qjx3pyqDk=
+github.com/grafana/grafana-app-sdk/logging v0.39.0 h1:3GgN5+dUZYqq74Q+GT9/ET+yo+V54zWQk/Q2/JsJQB4=
+github.com/grafana/grafana-app-sdk/logging v0.39.0/go.mod h1:WhDENSnaGHtyVVwZGVnAR7YLvh2xlLDYR3D7E6h7XVk=
+github.com/grafana/grafana-aws-sdk v0.38.2 h1:TzQD0OpWsNjtldi5G5TLDlBRk8OyDf+B5ujcoAu4Dp0=
+github.com/grafana/grafana-aws-sdk v0.38.2/go.mod h1:j3vi+cXYHEFqjhBGrI6/lw1TNM+dl0Y3f0cSnDOPy+s=
+github.com/grafana/grafana-aws-sdk v1.0.2 h1:98eBuHYFmgvH0xO9kKf4RBsEsgQRp8EOA/9yhDIpkss=
+github.com/grafana/grafana-aws-sdk v1.0.2/go.mod h1:hO7q7yWV+t6dmiyJjMa3IbuYnYkBua+G/IAlOPVIYKE=
+github.com/grafana/grafana-plugin-sdk-go v0.263.0/go.mod h1:U43Cnrj/9DNYyvFcNdeUWNjMXTKNB0jcTcQGpWKd2gw=
+github.com/grafana/grafana-plugin-sdk-go v0.267.0/go.mod h1:OuwS4c/JYgn0rr/w5zhJBpLo4gKm/vw15RsfpYAvK9Q=
+github.com/grafana/grafana-plugin-sdk-go v0.269.1/go.mod h1:yv2KbO4mlr9WuDK2f+2gHAMTwwLmLuqaEnrPXTRU+OI=
+github.com/grafana/grafana-plugin-sdk-go v0.275.0/go.mod h1:mO9LJqdXDh5JpO/xIdPAeg5LdThgQ06Y/SLpXDWKw2c=
+github.com/grafana/grafana-plugin-sdk-go v0.277.0/go.mod h1:mAUWg68w5+1f5TLDqagIr8sWr1RT9h7ufJl5NMcWJAU=
+github.com/grafana/grafana/apps/advisor v0.0.0-20250123151950-b066a6313173/go.mod h1:goSDiy3jtC2cp8wjpPZdUHRENcoSUHae1/Px/MDfddA=
+github.com/grafana/grafana/apps/advisor v0.0.0-20250220154326-6e5de80ef295/go.mod h1:9I1dKV3Dqr0NPR9Af0WJGxOytp5/6W3JLiNChOz8r+c=
+github.com/grafana/grafana/apps/alerting/notifications v0.0.0-20250121113133-e747350fee2d/go.mod h1:AvleS6icyPmcBjihtx5jYEvdzLmHGBp66NuE0AMR57A=
+github.com/grafana/grafana/apps/alerting/notifications v0.0.0-20250416173722-ec17e0e4ce03/go.mod h1:oemrhKvFxxc5m32xKHPxInEHAObH0/hPPyHUiBUZ1Cc=
+github.com/grafana/grafana/apps/alerting/notifications v0.0.0-20250506052906-7a2fc797fb4a/go.mod h1:VkX53kBiqIMHBoGgeEDJnzm5Nwcmv/726tuZuT5SvJY=
+github.com/grafana/grafana/apps/dashboard v0.0.0-20250616135341-59c2f154336b/go.mod h1:OIlvNnUufYDhBXa4xK4CyzPI2C69ZJkHy5+aFDyPtXw=
+github.com/grafana/grafana/apps/dashboard v0.0.0-20250616145019-8d27f12428cb/go.mod h1:OIlvNnUufYDhBXa4xK4CyzPI2C69ZJkHy5+aFDyPtXw=
+github.com/grafana/grafana/apps/investigation v0.0.0-20250121113133-e747350fee2d/go.mod h1:HQprw3MmiYj5OUV9CZnkwA1FKDZBmYACuAB3oDvUOmI=
+github.com/grafana/grafana/apps/playlist v0.0.0-20250121113133-e747350fee2d/go.mod h1:DjJe5osrW/BKrzN9hAAOSElNWutj1bcriExa7iDP7kA=
+github.com/grafana/grafana/pkg/aggregator v0.0.0-20250121113133-e747350fee2d/go.mod h1:1sq0guad+G4SUTlBgx7SXfhnzy7D86K/LcVOtiQCiMA=
+github.com/grafana/grafana/pkg/build v0.0.0-20250220114259-be81314e2118/go.mod h1:STVpVboMYeBAfyn6Zw6XHhTHqUxzMy7pzRiVgk1l0W0=
+github.com/grafana/grafana/pkg/build v0.0.0-20250227105625-8f465f124924/go.mod h1:Vw0LdoMma64VgIMVpRY3i0D156jddgUGjTQBOcyeF3k=
+github.com/grafana/grafana/pkg/build v0.0.0-20250227163402-d78c646f93bb/go.mod h1:Vw0LdoMma64VgIMVpRY3i0D156jddgUGjTQBOcyeF3k=
+github.com/grafana/grafana/pkg/build v0.0.0-20250403075254-4918d8720c61/go.mod h1:LGVnSwdrS0ZnJ2WXEl5acgDoYPm74EUSFavca1NKHI8=
+github.com/grafana/grafana/pkg/build v0.0.0-20250625151647-35f89a456cc6/go.mod h1:dIu5dZy00k2TBdpVBXkvSbxHNj5H7lW/sOTpJTtKIXg=
+github.com/grafana/grafana/pkg/build v0.0.0-20250703134522-185ce90a4b20/go.mod h1:uU3TK/cKf6IdO7ou7CKgNNb8GEnW761Ecdb8tk8DQLg=
+github.com/grafana/grafana/pkg/build v0.0.0-20250703142147-cfd3b9f58211/go.mod h1:uU3TK/cKf6IdO7ou7CKgNNb8GEnW761Ecdb8tk8DQLg=
+github.com/grafana/grafana/pkg/build v0.0.0-20250703171819-20f30462ad64/go.mod h1:uU3TK/cKf6IdO7ou7CKgNNb8GEnW761Ecdb8tk8DQLg=
+github.com/grafana/grafana/pkg/semconv v0.0.0-20250121113133-e747350fee2d/go.mod h1:tfLnBpPYgwrBMRz4EXqPCZJyCjEG4Ev37FSlXnocJ2c=
+github.com/grafana/grafana/pkg/storage/unified/apistore v0.0.0-20250121113133-e747350fee2d/go.mod h1:CXpwZ3Mkw6xVlGKc0SqUxqXCP3Uv182q6qAQnLaLxRg=
+github.com/grafana/grafana/pkg/storage/unified/apistore v0.0.0-20250514132646-acbc7b54ed9e/go.mod h1:xrKQcxQxz+IUF90ybtfENFeEXtlj9nAsX/3Fw0KEIeQ=
+github.com/grafana/nanogit v0.0.0-20250616082354-5e94194d02ed h1:59JF1WhHLT+lNX89Tm1OzOEySMVMASAhaPbsRjtp8Kc=
+github.com/grafana/nanogit v0.0.0-20250616082354-5e94194d02ed/go.mod h1:OIAAKNgG5fpuJQRNO1lUSj9nc18Xl3O7M8fjIlBO1cI=
+github.com/grafana/nanogit v0.0.0-20250619160700-ebf70d342aa5 h1:MAQ2B0cu0V1S91ZjVa7NomNZFjaR2SmdtvdwhqBtyhU=
+github.com/grafana/nanogit v0.0.0-20250619160700-ebf70d342aa5/go.mod h1:tN93IZUaAmnSWgL0IgnKdLv6DNeIhTJGvl1wvQMrWco=
+github.com/grafana/prometheus-alertmanager v0.25.1-0.20240930132144-b5e64e81e8d3 h1:6D2gGAwyQBElSrp3E+9lSr7k8gLuP3Aiy20rweLWeBw=
+github.com/grafana/prometheus-alertmanager v0.25.1-0.20240930132144-b5e64e81e8d3/go.mod h1:YeND+6FDA7OuFgDzYODN8kfPhXLCehcpxe4T9mdnpCY=
+github.com/grafana/prometheus-alertmanager v0.25.1-0.20250331083058-4563aec7a975 h1:4/BZkGObFWZf4cLbE2Vqg/1VTz67Q0AJ7LHspWLKJoQ=
+github.com/grafana/prometheus-alertmanager v0.25.1-0.20250331083058-4563aec7a975/go.mod h1:FGdGvhI40Dq+CTQaSzK9evuve774cgOUdGfVO04OXkw=
 github.com/grafana/prometheus-alertmanager v0.25.1-0.20250604130045-92c8f6389b36 h1:AjZ58JRw1ZieFH/SdsddF5BXtsDKt5kSrKNPWrzYz3Y=
 github.com/grafana/prometheus-alertmanager v0.25.1-0.20250604130045-92c8f6389b36/go.mod h1:O/QP1BCm0HHIzbKvgMzqb5sSyH88rzkFk84F4TfJjBU=
+github.com/grafana/sqlds/v4 v4.2.3 h1:9ibD1c5O5u9fifEkBSig+jAc41TUEz+M+bWQqDsofP4=
+github.com/grafana/sqlds/v4 v4.2.3/go.mod h1:bv+XHabfUF4xkgg4y+nYFCK8rpMHZsMaQk56qNaJcAM=
 github.com/grafana/tail v0.0.0-20230510142333-77b18831edf0 h1:bjh0PVYSVVFxzINqPFYJmAmJNrWPgnVjuSdYJGHmtFU=
 github.com/grafana/tail v0.0.0-20230510142333-77b18831edf0/go.mod h1:7t5XR+2IA8P2qggOAHTj/GCZfoLBle3OvNSYh1VkRBU=
 github.com/gregjones/httpcache v0.0.0-20190611155906-901d90724c79 h1:+ngKgrYPPJrOjhax5N+uePQ0Fh1Z7PheYoUI/0nzkPA=
diff --git a/package.json b/package.json
index 88066d57d79..5f5bf7d2fe3 100644
--- a/package.json
+++ b/package.json
@@ -289,8 +289,8 @@
     "@grafana/plugin-ui": "0.10.7",
     "@grafana/prometheus": "workspace:*",
     "@grafana/runtime": "workspace:*",
-    "@grafana/scenes": "^6.26.1",
-    "@grafana/scenes-react": "^6.26.1",
+    "@grafana/scenes": "^6.27.0",
+    "@grafana/scenes-react": "^6.27.0",
     "@grafana/schema": "workspace:*",
     "@grafana/sql": "workspace:*",
     "@grafana/ui": "workspace:*",
diff --git a/packages/grafana-schema/src/common/common.gen.ts b/packages/grafana-schema/src/common/common.gen.ts
index 7986476fa56..9e1d0fd99a8 100644
--- a/packages/grafana-schema/src/common/common.gen.ts
+++ b/packages/grafana-schema/src/common/common.gen.ts
@@ -964,6 +964,10 @@ export interface TableFieldOptions {
   inspect: boolean;
   minWidth?: number;
   width?: number;
+  /**
+   * Enables text wrapping for the display name in the table header.
+   */
+  wrapHeaderText?: boolean;
 }
 
 export const defaultTableFieldOptions: Partial<TableFieldOptions> = {
diff --git a/packages/grafana-schema/src/common/table.cue b/packages/grafana-schema/src/common/table.cue
index 7548275ada7..bdb537c8504 100644
--- a/packages/grafana-schema/src/common/table.cue
+++ b/packages/grafana-schema/src/common/table.cue
@@ -105,5 +105,7 @@ TableFieldOptions: {
 	filterable?: bool
 	// Hides any header for a column, useful for columns that show some static content or buttons.
 	hideHeader?: bool
+  // Enables text wrapping for the display name in the table header.
+  wrapHeaderText?: bool
 } @cuetsy(kind="interface")
 
diff --git a/packages/grafana-schema/src/veneer/common.types.ts b/packages/grafana-schema/src/veneer/common.types.ts
index 8a73c1149f9..fb3bfe18c57 100644
--- a/packages/grafana-schema/src/veneer/common.types.ts
+++ b/packages/grafana-schema/src/veneer/common.types.ts
@@ -41,6 +41,7 @@ export * from '../common/common.gen';
 export const defaultTableFieldOptions: raw.TableFieldOptions = {
   align: 'auto',
   inspect: false,
+  wrapHeaderText: false,
   cellOptions: {
     type: raw.TableCellDisplayMode.Auto,
   },
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/HeaderCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/HeaderCell.tsx
index c5f7b79400f..a62cbeb6beb 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/Cells/HeaderCell.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/HeaderCell.tsx
@@ -1,5 +1,5 @@
-import { css } from '@emotion/css';
-import React, { useEffect, useMemo } from 'react';
+import { css, cx } from '@emotion/css';
+import React, { useEffect } from 'react';
 import { Column, SortDirection } from 'react-data-grid';
 
 import { Field, GrafanaTheme2 } from '@grafana/data';
@@ -34,9 +34,10 @@ const HeaderCell: React.FC<HeaderCellProps> = ({
   crossFilterRows,
   showTypeIcons,
 }) => {
-  const styles = useStyles2(getStyles);
-  const displayName = useMemo(() => getDisplayName(field), [field]);
-  const filterable = useMemo(() => field.config.custom?.filterable ?? false, [field]);
+  const headerCellWrap = field.config.custom?.wrapHeaderText ?? false;
+  const styles = useStyles2(getStyles, headerCellWrap);
+  const displayName = getDisplayName(field);
+  const filterable = field.config.custom?.filterable ?? false;
 
   // we have to remove/reset the filter if the column is not filterable
   useEffect(() => {
@@ -50,15 +51,18 @@ const HeaderCell: React.FC<HeaderCellProps> = ({
   }, [filterable, displayName, filter, setFilter]);
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <>
-      <span className={styles.headerCellLabel}>
-        {showTypeIcons && <Icon name={getFieldTypeIcon(field)} title={field?.type} size="sm" />}
-        {/* Used cached displayName if available, otherwise use the column name (nested tables) */}
-        <div>{getDisplayName(field)}</div>
-        {direction && (direction === 'ASC' ? <Icon name="arrow-up" size="lg" /> : <Icon name="arrow-down" size="lg" />)}
-      </span>
-
+      {showTypeIcons && (
+        <Icon className={styles.headerCellIcon} name={getFieldTypeIcon(field)} title={field?.type} size="sm" />
+      )}
+      <span className={styles.headerCellLabel}>{getDisplayName(field)}</span>
+      {direction && (
+        <Icon
+          className={cx(styles.headerCellIcon, styles.headerSortIcon)}
+          size="lg"
+          name={direction === 'ASC' ? 'arrow-up' : 'arrow-down'}
+        />
+      )}
       {filterable && (
         <Filter
           name={column.key}
@@ -68,32 +72,34 @@ const HeaderCell: React.FC<HeaderCellProps> = ({
           field={field}
           crossFilterOrder={crossFilterOrder}
           crossFilterRows={crossFilterRows}
+          iconClassName={styles.headerCellIcon}
         />
       )}
     </>
   );
 };
 
-const getStyles = (theme: GrafanaTheme2) => ({
+const getStyles = (theme: GrafanaTheme2, headerTextWrap?: boolean) => ({
   headerCellLabel: css({
-    border: 'none',
-    padding: 0,
-    background: 'inherit',
     cursor: 'pointer',
-    whiteSpace: 'nowrap',
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.colors.text.secondary,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    fontWeight: theme.typography.fontWeightMedium,
-    display: 'flex',
-    alignItems: 'center',
-    color: theme.colors.text.secondary,
-    gap: theme.spacing(1),
-
+    whiteSpace: headerTextWrap ? 'pre-line' : 'nowrap',
     '&:hover': {
       textDecoration: 'underline',
       color: theme.colors.text.link,
     },
   }),
+  headerCellIcon: css({
+    marginBottom: theme.spacing(0.5),
+    alignSelf: 'flex-end',
+    color: theme.colors.text.secondary,
+  }),
+  headerSortIcon: css({
+    marginBottom: theme.spacing(0.25),
+  }),
 });
 
 export { HeaderCell };
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Filter/Filter.tsx b/packages/grafana-ui/src/components/Table/TableNG/Filter/Filter.tsx
index acde579e401..6f2c55fc3d7 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/Filter/Filter.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/Filter/Filter.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { useMemo, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data';
 
@@ -19,9 +19,19 @@ interface Props {
   field?: Field;
   crossFilterOrder: string[];
   crossFilterRows: { [key: string]: TableRow[] };
+  iconClassName?: string;
 }
 
-export const Filter = ({ name, rows, filter, setFilter, field, crossFilterOrder, crossFilterRows }: Props) => {
+export const Filter = ({
+  name,
+  rows,
+  filter,
+  setFilter,
+  field,
+  crossFilterOrder,
+  crossFilterRows,
+  iconClassName,
+}: Props) => {
   const filterValue = filter[name]?.filtered;
 
   // get rows for cross filtering
@@ -42,13 +52,13 @@ export const Filter = ({ name, rows, filter, setFilter, field, crossFilterOrder,
   const ref = useRef<HTMLButtonElement>(null);
   const [isPopoverVisible, setPopoverVisible] = useState<boolean>(false);
   const styles = useStyles2(getStyles);
-  const filterEnabled = useMemo(() => Boolean(filterValue), [filterValue]);
+  const filterEnabled = Boolean(filterValue);
   const [searchFilter, setSearchFilter] = useState(filter[name]?.searchFilter || '');
   const [operator, setOperator] = useState<SelectableValue<string>>(filter[name]?.operator || REGEX_OPERATOR);
 
   return (
     <button
-      className={cx(styles.headerFilter, filterEnabled ? styles.filterIconEnabled : styles.filterIconDisabled)}
+      className={styles.headerFilter}
       ref={ref}
       type="button"
       onClick={(ev) => {
@@ -56,7 +66,7 @@ export const Filter = ({ name, rows, filter, setFilter, field, crossFilterOrder,
         ev.stopPropagation();
       }}
     >
-      <Icon name="filter" />
+      <Icon name="filter" className={cx(iconClassName, { [styles.filterIconEnabled]: filterEnabled })} />
       {isPopoverVisible && ref.current && (
         <Popover
           content={
@@ -93,13 +103,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
     border: 'none',
     label: 'headerFilter',
     padding: 0,
+    alignSelf: 'flex-end',
   }),
   filterIconEnabled: css({
     label: 'filterIconEnabled',
     color: theme.colors.primary.text,
   }),
-  filterIconDisabled: css({
-    label: 'filterIconDisabled',
-    color: theme.colors.text.disabled,
-  }),
 });
diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
index 625a4b4b106..3867e04a943 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
@@ -15,6 +15,7 @@ import {
 
 import { DataHoverClearEvent, DataHoverEvent, Field, FieldType, GrafanaTheme2, ReducerID } from '@grafana/data';
 import { t, Trans } from '@grafana/i18n';
+import { TableCellHeight } from '@grafana/schema';
 
 import { useStyles2, useTheme2 } from '../../../themes/ThemeContext';
 import { ContextMenu } from '../../ContextMenu/ContextMenu';
@@ -33,10 +34,11 @@ import {
   useColumnResize,
   useFilteredRows,
   useFooterCalcs,
+  useHeaderHeight,
   usePaginatedRows,
   useRowHeight,
   useSortedRows,
-  useTextWraps,
+  useTypographyCtx,
 } from './hooks';
 import { TableNGProps, TableRow, TableSummaryRow, TableColumn, ContextMenuProps } from './types';
 import {
@@ -48,11 +50,12 @@ import {
   getVisibleFields,
   shouldTextOverflow,
   getApplyToRowBgFn,
-  getColumnTypes,
   computeColWidths,
   applySort,
   getCellColors,
   getCellOptions,
+  shouldTextWrap,
+  isCellInspectEnabled,
 } from './utils';
 
 type CellRootRenderer = (key: React.Key, props: CellRendererProps<TableRow, TableSummaryRow>) => React.ReactNode;
@@ -116,7 +119,6 @@ export function TableNG(props: TableNGProps) {
   }, [isContextMenuOpen]);
 
   const rows = useMemo(() => frameToRecords(data), [data]);
-  const columnTypes = useMemo(() => getColumnTypes(data.fields), [data.fields]);
   const hasNestedFrames = useMemo(() => getIsNestedTable(data.fields), [data]);
 
   const {
@@ -131,9 +133,10 @@ export function TableNG(props: TableNGProps) {
     rows: sortedRows,
     sortColumns,
     setSortColumns,
-  } = useSortedRows(filteredRows, data.fields, { columnTypes, hasNestedFrames, initialSortBy });
+  } = useSortedRows(filteredRows, data.fields, { hasNestedFrames, initialSortBy });
 
-  const defaultRowHeight = useMemo(() => getDefaultRowHeight(theme, cellHeight), [theme, cellHeight]);
+  const defaultRowHeight = getDefaultRowHeight(theme, cellHeight);
+  const defaultHeaderHeight = getDefaultRowHeight(theme, TableCellHeight.Sm);
   const [isInspecting, setIsInspecting] = useState(false);
   const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({});
 
@@ -143,8 +146,26 @@ export function TableNG(props: TableNGProps) {
     () => (hasNestedFrames ? width - COLUMN.EXPANDER_WIDTH : width),
     [width, hasNestedFrames]
   );
+  const typographyCtx = useTypographyCtx();
   const widths = useMemo(() => computeColWidths(visibleFields, availableWidth), [visibleFields, availableWidth]);
-  const rowHeight = useRowHeight(widths, visibleFields, hasNestedFrames, defaultRowHeight, expandedRows);
+  const headerHeight = useHeaderHeight({
+    columnWidths: widths,
+    fields: visibleFields,
+    enabled: hasHeader,
+    defaultHeight: defaultHeaderHeight,
+    sortColumns,
+    showTypeIcons: showTypeIcons ?? false,
+    typographyCtx,
+  });
+  const rowHeight = useRowHeight({
+    columnWidths: widths,
+    fields: visibleFields,
+    hasNestedFrames,
+    defaultHeight: defaultRowHeight,
+    headerHeight,
+    expandedRows,
+    typographyCtx,
+  });
 
   const {
     rows: paginatedRows,
@@ -158,13 +179,12 @@ export function TableNG(props: TableNGProps) {
     enabled: enablePagination,
     width: availableWidth,
     height,
-    hasHeader,
-    hasFooter,
+    headerHeight,
+    footerHeight: hasFooter ? defaultRowHeight : 0,
     rowHeight,
   });
 
   // Create a map of column key to text wrap
-  const textWraps = useTextWraps(data.fields);
   const footerCalcs = useFooterCalcs(sortedRows, data.fields, { enabled: hasFooter, footerOptions, isCountRowsSet });
   const applyToRowBgFn = useMemo(() => getApplyToRowBgFn(data.fields, theme) ?? undefined, [data.fields, theme]);
 
@@ -217,16 +237,16 @@ export function TableNG(props: TableNGProps) {
         sortColumns,
         rowHeight,
         headerRowClass: styles.headerRow,
-        headerRowHeight: noHeader ? 0 : TABLE.HEADER_ROW_HEIGHT,
+        headerRowHeight: headerHeight,
         bottomSummaryRows: hasFooter ? [{}] : undefined,
       }) satisfies Partial<DataGridProps<TableRow, TableSummaryRow>>,
     [
       enableVirtualization,
       resizeHandler,
       sortColumns,
-      rowHeight,
+      headerHeight,
       styles.headerRow,
-      noHeader,
+      rowHeight,
       hasFooter,
       setSortColumns,
       onSortByChange,
@@ -253,7 +273,7 @@ export function TableNG(props: TableNGProps) {
         const cellOptions = getCellOptions(field);
         const renderFieldCell = getCellRenderer(field, cellOptions);
 
-        const cellInspect = Boolean(field.config.custom?.inspect);
+        const cellInspect = isCellInspectEnabled(field);
         const showFilters = Boolean(field.config.filterable && onCellFilterAdded != null);
         const showActions = cellInspect || showFilters;
         const width = widths[i];
@@ -269,9 +289,8 @@ export function TableNG(props: TableNGProps) {
           : undefined;
 
         const cellType = cellOptions.type;
-        const fieldType = columnTypes[displayName];
-        const shouldWrap = textWraps[displayName];
-        const shouldOverflow = shouldTextOverflow(fieldType, cellType, shouldWrap, cellInspect);
+        const shouldOverflow = shouldTextOverflow(field);
+        const shouldWrap = shouldTextWrap(field);
 
         let lastRowIdx = -1;
         let _rowHeight = 0;
@@ -327,7 +346,7 @@ export function TableNG(props: TableNGProps) {
                 cellOptions,
                 frame,
                 field,
-                height,
+                height: _rowHeight,
                 justifyContent,
                 rowIdx,
                 theme,
@@ -361,7 +380,7 @@ export function TableNG(props: TableNGProps) {
           width,
           headerCellClass,
           renderCell: renderCellContent,
-          renderHeaderCell: ({ column, sortDirection }): JSX.Element => (
+          renderHeaderCell: ({ column, sortDirection }) => (
             <HeaderCell
               column={column}
               rows={rows}
@@ -474,6 +493,7 @@ export function TableNG(props: TableNGProps) {
 
     return result;
   }, [
+    applyToRowBgFn,
     availableWidth,
     commonDataGridProps,
     crossFilterOrder,
@@ -490,8 +510,8 @@ export function TableNG(props: TableNGProps) {
     onCellFilterAdded,
     panelContext,
     replaceVariables,
-    rows,
     rowHeight,
+    rows,
     setFilter,
     showTypeIcons,
     sortColumns,
@@ -499,10 +519,6 @@ export function TableNG(props: TableNGProps) {
     theme,
     visibleFields,
     widths,
-    applyToRowBgFn,
-    columnTypes,
-    height,
-    textWraps,
   ]);
 
   // invalidate columns on every structureRev change. this supports width editing in the fieldConfig.
@@ -698,7 +714,11 @@ const getGridStyles = (
   headerRow: css({
     paddingBlockStart: 0,
     fontWeight: 'normal',
-    ...(noHeader && { display: 'none' }),
+    ...(noHeader ? { display: 'none' } : {}),
+    '& .rdg-cell': {
+      height: '100%',
+      alignItems: 'flex-end',
+    },
   }),
   paginationContainer: css({
     alignItems: 'center',
@@ -736,9 +756,11 @@ const getHeaderCellStyles = (theme: GrafanaTheme2, justifyContent: Property.Just
     gap: theme.spacing(0.5),
     zIndex: theme.zIndex.tooltip - 1,
     paddingInline: TABLE.CELL_PADDING,
-    paddingBlock: TABLE.CELL_PADDING,
-    borderInlineEnd: 'none',
+    paddingBlockEnd: TABLE.CELL_PADDING,
     justifyContent,
+    '&:last-child': {
+      borderInlineEnd: 'none',
+    },
   }),
 });
 
diff --git a/packages/grafana-ui/src/components/Table/TableNG/constants.ts b/packages/grafana-ui/src/components/Table/TableNG/constants.ts
index 34490833395..d7d69c160c0 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/constants.ts
+++ b/packages/grafana-ui/src/components/Table/TableNG/constants.ts
@@ -9,9 +9,10 @@ export const COLUMN = {
 /** Table layout and display constants */
 export const TABLE = {
   CELL_PADDING: 6,
-  HEADER_ROW_HEIGHT: 28,
   MAX_CELL_HEIGHT: 48,
   PAGINATION_LIMIT: 750,
   SCROLL_BAR_WIDTH: 8,
   SCROLL_BAR_MARGIN: 2,
+  LINE_HEIGHT: 22,
+  BORDER_RIGHT: 0.666667,
 };
diff --git a/packages/grafana-ui/src/components/Table/TableNG/hooks.test.ts b/packages/grafana-ui/src/components/Table/TableNG/hooks.test.ts
index 51c702e5d60..094804a3a28 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/hooks.test.ts
+++ b/packages/grafana-ui/src/components/Table/TableNG/hooks.test.ts
@@ -1,9 +1,23 @@
 import { act, renderHook } from '@testing-library/react';
+import { varPreLine } from 'uwrap';
 
 import { Field, FieldType } from '@grafana/data';
 
-import { useFilteredRows, usePaginatedRows, useSortedRows, useFooterCalcs } from './hooks';
-import { getColumnTypes } from './utils';
+import {
+  useFilteredRows,
+  usePaginatedRows,
+  useSortedRows,
+  useFooterCalcs,
+  useHeaderHeight,
+  useTypographyCtx,
+} from './hooks';
+
+jest.mock('uwrap', () => ({
+  // ...jest.requireActual('uwrap'),
+  varPreLine: jest.fn(() => ({
+    count: jest.fn(() => 1),
+  })),
+}));
 
 describe('TableNG hooks', () => {
   function setupData() {
@@ -87,10 +101,8 @@ describe('TableNG hooks', () => {
   describe('useSortedRows', () => {
     it('should correctly set up the table with an initial sort', () => {
       const { fields, rows } = setupData();
-      const columnTypes = getColumnTypes(fields);
       const { result } = renderHook(() =>
         useSortedRows(rows, fields, {
-          columnTypes,
           hasNestedFrames: false,
           initialSortBy: [{ displayName: 'age', desc: false }],
         })
@@ -103,10 +115,8 @@ describe('TableNG hooks', () => {
 
     it('should change the sort on setSortColumns', () => {
       const { fields, rows } = setupData();
-      const columnTypes = getColumnTypes(fields);
       const { result } = renderHook(() =>
         useSortedRows(rows, fields, {
-          columnTypes,
           hasNestedFrames: false,
           initialSortBy: [{ displayName: 'age', desc: false }],
         })
@@ -134,7 +144,14 @@ describe('TableNG hooks', () => {
     it('should return defaults for pagination values when pagination is disabled', () => {
       const { rows } = setupData();
       const { result } = renderHook(() =>
-        usePaginatedRows(rows, { rowHeight: 30, height: 300, width: 800, enabled: false })
+        usePaginatedRows(rows, {
+          rowHeight: 30,
+          height: 300,
+          width: 800,
+          enabled: false,
+          headerHeight: 28,
+          footerHeight: 0,
+        })
       );
 
       expect(result.current.page).toBe(-1);
@@ -153,6 +170,39 @@ describe('TableNG hooks', () => {
           height: 60,
           width: 800,
           rowHeight: 10,
+          headerHeight: 0,
+          footerHeight: 0,
+        })
+      );
+
+      expect(result.current.page).toBe(0);
+      expect(result.current.rowsPerPage).toBe(2);
+      expect(result.current.pageRangeStart).toBe(1);
+      expect(result.current.pageRangeEnd).toBe(2);
+      expect(result.current.rows.length).toBe(2);
+
+      act(() => {
+        result.current.setPage(1);
+      });
+
+      expect(result.current.page).toBe(1);
+      expect(result.current.rowsPerPage).toBe(2);
+      expect(result.current.pageRangeStart).toBe(3);
+      expect(result.current.pageRangeEnd).toBe(3);
+      expect(result.current.rows.length).toBe(1);
+    });
+
+    it('should handle header and footer correctly', () => {
+      // with the numbers provided here, we have 3 rows, with 2 rows per page, over 2 pages total.
+      const { rows } = setupData();
+      const { result } = renderHook(() =>
+        usePaginatedRows(rows, {
+          enabled: true,
+          height: 140,
+          width: 800,
+          rowHeight: 10,
+          headerHeight: 28,
+          footerHeight: 45,
         })
       );
 
@@ -332,4 +382,154 @@ describe('TableNG hooks', () => {
       expect(result.current).toEqual(['Total', '6', '13']);
     });
   });
+
+  describe('useHeaderHeight', () => {
+    it('should return 0 when no header is present', () => {
+      const { fields } = setupData();
+      const { result } = renderHook(() => {
+        const typographyCtx = useTypographyCtx();
+        return useHeaderHeight({
+          fields,
+          columnWidths: [],
+          enabled: false,
+          typographyCtx,
+          defaultHeight: 28,
+          sortColumns: [],
+        });
+      });
+      expect(result.current).toBe(0);
+    });
+
+    it('should return the default height when wrap is disabled', () => {
+      const { fields } = setupData();
+      const { result } = renderHook(() => {
+        const typographyCtx = useTypographyCtx();
+        return useHeaderHeight({
+          fields,
+          columnWidths: [],
+          enabled: true,
+          typographyCtx,
+          defaultHeight: 28,
+          sortColumns: [],
+        });
+      });
+      expect(result.current).toBe(22);
+    });
+
+    it('should return the appropriate height for wrapped text', () => {
+      // Simulate 2 lines of text
+      jest.mocked(varPreLine).mockReturnValue({
+        count: jest.fn(() => 2),
+        each: jest.fn(),
+        split: jest.fn(),
+        test: jest.fn(),
+      });
+
+      const { fields } = setupData();
+      const { result } = renderHook(() => {
+        const typographyCtx = useTypographyCtx();
+        return useHeaderHeight({
+          fields: fields.map((field) => {
+            if (field.name === 'name') {
+              return {
+                ...field,
+                name: 'Longer name that needs wrapping',
+                config: {
+                  ...field.config,
+                  custom: {
+                    ...field.config?.custom,
+                    wrapHeaderText: true,
+                  },
+                },
+              };
+            }
+            return field;
+          }),
+          columnWidths: [100, 100, 100],
+          enabled: true,
+          typographyCtx: { ...typographyCtx, avgCharWidth: 5 },
+          defaultHeight: 28,
+          sortColumns: [],
+        });
+      });
+
+      expect(result.current).toBe(50);
+    });
+
+    it('should calculate the available width for a header cell based on the icons rendered within it', () => {
+      const countFn = jest.fn(() => 1);
+
+      // Simulate 2 lines of text
+      jest.mocked(varPreLine).mockReturnValue({
+        count: countFn,
+        each: jest.fn(),
+        split: jest.fn(),
+        test: jest.fn(),
+      });
+
+      const { fields } = setupData();
+
+      renderHook(() => {
+        const typographyCtx = useTypographyCtx();
+
+        return useHeaderHeight({
+          fields: fields.map((field) => {
+            if (field.name === 'name') {
+              return {
+                ...field,
+                name: 'Longer name that needs wrapping',
+                config: {
+                  ...field.config,
+                  custom: {
+                    ...field.config?.custom,
+                    wrapHeaderText: true,
+                  },
+                },
+              };
+            }
+            return field;
+          }),
+          columnWidths: [100, 100, 100],
+          enabled: true,
+          typographyCtx: { ...typographyCtx, avgCharWidth: 10 },
+          defaultHeight: 28,
+          sortColumns: [],
+          showTypeIcons: false,
+        });
+      });
+
+      expect(countFn).toHaveBeenCalledWith('Longer name that needs wrapping', 87);
+
+      renderHook(() => {
+        const typographyCtx = useTypographyCtx();
+        return useHeaderHeight({
+          fields: fields.map((field) => {
+            if (field.name === 'name') {
+              return {
+                ...field,
+                name: 'Longer name that needs wrapping',
+                config: {
+                  ...field.config,
+                  custom: {
+                    ...field.config?.custom,
+                    filterable: true,
+                    wrapHeaderText: true,
+                  },
+                },
+              };
+            }
+            return field;
+          }),
+          columnWidths: [100, 100, 100],
+          enabled: true,
+          typographyCtx: { ...typographyCtx, avgCharWidth: 10 },
+          defaultHeight: 28,
+          sortColumns: [{ columnKey: 'Longer name that needs wrapping', direction: 'ASC' }],
+          showTypeIcons: true,
+        });
+      });
+
+      expect(countFn).toHaveBeenCalledWith('Longer name that needs wrapping', 27);
+    });
+  });
 });
diff --git a/packages/grafana-ui/src/components/Table/TableNG/hooks.ts b/packages/grafana-ui/src/components/Table/TableNG/hooks.ts
index 865a4d01c67..3e0672b0b0e 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/hooks.ts
+++ b/packages/grafana-ui/src/components/Table/TableNG/hooks.ts
@@ -1,5 +1,6 @@
 import { useState, useMemo, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
 import { Column, DataGridProps, SortColumn } from 'react-data-grid';
+import { varPreLine } from 'uwrap';
 
 import { Field, fieldReducers, FieldType, formattedValueToString, reduceField } from '@grafana/data';
 
@@ -7,8 +8,16 @@ import { useTheme2 } from '../../../themes/ThemeContext';
 import { TableCellDisplayMode, TableColumnResizeActionCallback } from '../types';
 
 import { TABLE } from './constants';
-import { ColumnTypes, FilterType, TableFooterCalc, TableRow, TableSortByFieldState, TableSummaryRow } from './types';
-import { getDisplayName, processNestedTableRows, getCellHeightCalculator, applySort, getCellOptions } from './utils';
+import { FilterType, TableFooterCalc, TableRow, TableSortByFieldState, TableSummaryRow } from './types';
+import {
+  getDisplayName,
+  processNestedTableRows,
+  applySort,
+  getCellOptions,
+  getColumnTypes,
+  GetMaxWrapCellOptions,
+  getMaxWrapCell,
+} from './utils';
 
 // Helper function to get displayed value
 const getDisplayedValue = (row: TableRow, key: string, fields: Field[]) => {
@@ -79,7 +88,6 @@ export function useFilteredRows(
 }
 
 export interface SortedRowsOptions {
-  columnTypes: ColumnTypes;
   hasNestedFrames: boolean;
   initialSortBy?: TableSortByFieldState[];
 }
@@ -93,7 +101,7 @@ export interface SortedRowsResult {
 export function useSortedRows(
   rows: TableRow[],
   fields: Field[],
-  { initialSortBy, columnTypes, hasNestedFrames }: SortedRowsOptions
+  { initialSortBy, hasNestedFrames }: SortedRowsOptions
 ): SortedRowsResult {
   const initialSortColumns = useMemo<SortColumn[]>(
     () =>
@@ -111,6 +119,7 @@ export function useSortedRows(
     [] // eslint-disable-line react-hooks/exhaustive-deps
   );
   const [sortColumns, setSortColumns] = useState<SortColumn[]>(initialSortColumns);
+  const columnTypes = useMemo(() => getColumnTypes(fields), [fields]);
 
   const sortedRows = useMemo(
     () => applySort(rows, fields, sortColumns, columnTypes, hasNestedFrames),
@@ -128,8 +137,8 @@ export interface PaginatedRowsOptions {
   height: number;
   width: number;
   rowHeight: number | ((row: TableRow) => number);
-  hasHeader?: boolean;
-  hasFooter?: boolean;
+  headerHeight: number;
+  footerHeight: number;
   paginationHeight?: number;
   enabled?: boolean;
 }
@@ -150,7 +159,7 @@ const PAGINATION_HEIGHT = 38;
 
 export function usePaginatedRows(
   rows: TableRow[],
-  { height, width, hasHeader, hasFooter, rowHeight, enabled }: PaginatedRowsOptions
+  { height, width, headerHeight, footerHeight, rowHeight, enabled }: PaginatedRowsOptions
 ): PaginatedRowsResult {
   // TODO: allow persisted page selection via url
   const [page, setPage] = useState(0);
@@ -177,8 +186,7 @@ export function usePaginatedRows(
     }
 
     // calculate number of rowsPerPage based on height stack
-    const rowAreaHeight =
-      height - (hasHeader ? TABLE.HEADER_ROW_HEIGHT : 0) - (hasFooter ? avgRowHeight : 0) - PAGINATION_HEIGHT;
+    const rowAreaHeight = height - headerHeight - footerHeight - PAGINATION_HEIGHT;
     const heightPerRow = Math.floor(rowAreaHeight / (avgRowHeight || 1));
     // ensure at least one row per page is displayed
     let rowsPerPage = heightPerRow > 1 ? heightPerRow : 1;
@@ -198,7 +206,7 @@ export function usePaginatedRows(
       pageRangeEnd,
       smallPagination,
     };
-  }, [width, height, hasHeader, hasFooter, avgRowHeight, enabled, numRows, page]);
+  }, [width, height, headerHeight, footerHeight, avgRowHeight, enabled, numRows, page]);
 
   // safeguard against page overflow on panel resize or other factors
   useEffect(() => {
@@ -294,22 +302,16 @@ export function useFooterCalcs(
   }, [fields, enabled, footerOptions, isCountRowsSet, rows]);
 }
 
-export function useTextWraps(fields: Field[]): Record<string, boolean> {
-  return useMemo(
-    () =>
-      fields.reduce<{ [key: string]: boolean }>((acc, field) => {
-        const cellOptions = getCellOptions(field);
-        const displayName = getDisplayName(field);
-        const wrapText = 'wrapText' in cellOptions && cellOptions.wrapText;
-        return { ...acc, [displayName]: !!wrapText };
-      }, {}),
-    [fields]
-  );
+interface TypographyCtx {
+  ctx: CanvasRenderingContext2D;
+  font: string;
+  avgCharWidth: number;
+  calcRowHeight: (text: string, cellWidth: number, defaultHeight: number) => number;
 }
 
-export function useTypographyCtx() {
+export function useTypographyCtx(): TypographyCtx {
   const theme = useTheme2();
-  const { ctx, font, avgCharWidth } = useMemo(() => {
+  const typographyCtx = useMemo((): TypographyCtx => {
     const font = `${theme.typography.fontSize}px ${theme.typography.fontFamily}`;
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d')!;
@@ -322,23 +324,128 @@ export function useTypographyCtx() {
       "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s";
     const txtWidth = ctx.measureText(txt).width;
     const avgCharWidth = txtWidth / txt.length + letterSpacing;
+    const { count } = varPreLine(ctx);
+    const calcRowHeight = (text: string, cellWidth: number, defaultHeight: number) => {
+      if (text === '') {
+        return defaultHeight;
+      }
+      const numLines = count(text, cellWidth);
+      const totalHeight = numLines * TABLE.LINE_HEIGHT + 2 * TABLE.CELL_PADDING;
+      return Math.max(totalHeight, defaultHeight);
+    };
 
     return {
+      calcRowHeight,
       ctx,
       font,
       avgCharWidth,
     };
   }, [theme.typography.fontSize, theme.typography.fontFamily]);
-  return { ctx, font, avgCharWidth };
+  return typographyCtx;
 }
 
-export function useRowHeight(
-  columnWidths: number[],
-  fields: Field[],
-  hasNestedFrames: boolean,
-  defaultRowHeight: number,
-  expandedRows: Record<string, boolean>
-): number | ((row: TableRow) => number) {
+const ICON_WIDTH = 16;
+const ICON_GAP = 4;
+
+interface UseHeaderHeightOptions {
+  enabled: boolean;
+  fields: Field[];
+  columnWidths: number[];
+  defaultHeight: number;
+  sortColumns: SortColumn[];
+  typographyCtx: TypographyCtx;
+  showTypeIcons?: boolean;
+}
+
+export function useHeaderHeight({
+  fields,
+  enabled,
+  columnWidths,
+  defaultHeight,
+  sortColumns,
+  typographyCtx: { calcRowHeight, avgCharWidth },
+  showTypeIcons = false,
+}: UseHeaderHeightOptions): number {
+  const perIconSpace = ICON_WIDTH + ICON_GAP;
+  const columnAvailableWidths = useMemo(
+    () =>
+      columnWidths.map((c, idx) => {
+        let width = c - 2 * TABLE.CELL_PADDING - TABLE.BORDER_RIGHT;
+        // filtering icon
+        if (fields[idx]?.config?.custom?.filterable) {
+          width -= perIconSpace;
+        }
+        // sorting icon
+        if (sortColumns.some((col) => col.columnKey === getDisplayName(fields[idx]))) {
+          width -= perIconSpace;
+        }
+        // type icon
+        if (showTypeIcons) {
+          width -= perIconSpace;
+        }
+        return Math.floor(width);
+      }),
+    [fields, columnWidths, sortColumns, showTypeIcons, perIconSpace]
+  );
+
+  const [wrappedColHeaderIdxs, hasWrappedColHeaders] = useMemo(() => {
+    let hasWrappedColHeaders = false;
+    return [
+      fields.map((field) => {
+        const wrapText = field.config?.custom?.wrapHeaderText ?? false;
+        if (wrapText) {
+          hasWrappedColHeaders = true;
+        }
+        return wrapText;
+      }),
+      hasWrappedColHeaders,
+    ];
+  }, [fields]);
+
+  const maxWrapCellOptions = useMemo<GetMaxWrapCellOptions>(
+    () => ({
+      colWidths: columnAvailableWidths,
+      avgCharWidth,
+      wrappedColIdxs: wrappedColHeaderIdxs,
+    }),
+    [columnAvailableWidths, avgCharWidth, wrappedColHeaderIdxs]
+  );
+
+  // TODO: is there a less clunky way to subtract the top padding value?
+  const headerHeight = useMemo(() => {
+    if (!enabled) {
+      return 0;
+    }
+    if (!hasWrappedColHeaders) {
+      return defaultHeight - TABLE.CELL_PADDING;
+    }
+
+    const { text: maxLinesText, idx: maxLinesIdx } = getMaxWrapCell(fields, -1, maxWrapCellOptions);
+    return calcRowHeight(maxLinesText, columnAvailableWidths[maxLinesIdx], defaultHeight) - TABLE.CELL_PADDING;
+  }, [fields, enabled, hasWrappedColHeaders, maxWrapCellOptions, calcRowHeight, columnAvailableWidths, defaultHeight]);
+
+  return headerHeight;
+}
+
+interface UseRowHeightOptions {
+  columnWidths: number[];
+  fields: Field[];
+  hasNestedFrames: boolean;
+  defaultHeight: number;
+  headerHeight: number;
+  expandedRows: Record<string, boolean>;
+  typographyCtx: TypographyCtx;
+}
+
+export function useRowHeight({
+  columnWidths,
+  fields,
+  hasNestedFrames,
+  defaultHeight,
+  headerHeight,
+  expandedRows,
+  typographyCtx: { calcRowHeight, avgCharWidth },
+}: UseRowHeightOptions): number | ((row: TableRow) => number) {
   const [wrappedColIdxs, hasWrappedCols] = useMemo(() => {
     let hasWrappedCols = false;
     return [
@@ -360,22 +467,26 @@ export function useRowHeight(
     ];
   }, [fields]);
 
-  const { ctx, avgCharWidth } = useTypographyCtx();
+  const colWidths = useMemo(
+    () => columnWidths.map((c) => c - 2 * TABLE.CELL_PADDING - TABLE.BORDER_RIGHT),
+    [columnWidths]
+  );
+
+  const maxWrapCellOptions = useMemo<GetMaxWrapCellOptions>(
+    () => ({
+      colWidths,
+      avgCharWidth,
+      wrappedColIdxs,
+    }),
+    [colWidths, avgCharWidth, wrappedColIdxs]
+  );
 
   const rowHeight = useMemo(() => {
     // row height is only complicated when there are nested frames or wrapped columns.
     if (!hasNestedFrames && !hasWrappedCols) {
-      return defaultRowHeight;
+      return defaultHeight;
     }
 
-    const HPADDING = TABLE.CELL_PADDING;
-    const VPADDING = TABLE.CELL_PADDING;
-    const BORDER_RIGHT = 0.666667;
-    const LINE_HEIGHT = 22;
-
-    const wrapWidths = columnWidths.map((c) => c - 2 * HPADDING - BORDER_RIGHT);
-    const calc = getCellHeightCalculator(ctx, LINE_HEIGHT, defaultRowHeight, VPADDING);
-
     return (row: TableRow) => {
       // nested rows
       if (Number(row.__depth) > 0) {
@@ -384,50 +495,25 @@ export function useRowHeight(
           return 0;
         }
 
-        // Ensure we have a minimum height (defaultRowHeight) for the nested table even if data is empty
-        const headerCount = row?.data?.meta?.custom?.noHeader ? 0 : 1;
+        // Ensure we have a minimum height (defaultHeight) for the nested table even if data is empty
         const rowCount = row.data?.length ?? 0;
-        return Math.max(defaultRowHeight, defaultRowHeight * (rowCount + headerCount));
+        return Math.max(defaultHeight, defaultHeight * rowCount + headerHeight);
       }
 
       // regular rows
-      let maxLines = 1;
-      let maxLinesIdx = -1;
-      let maxLinesText = '';
-
-      for (let i = 0; i < columnWidths.length; i++) {
-        if (wrappedColIdxs[i]) {
-          const cellTextRaw = fields[i].values[row.__index];
-          if (cellTextRaw != null) {
-            const cellText = String(cellTextRaw);
-            const charsPerLine = wrapWidths[i] / avgCharWidth;
-            const approxLines = cellText.length / charsPerLine;
-
-            if (approxLines > maxLines) {
-              maxLines = approxLines;
-              maxLinesIdx = i;
-              maxLinesText = cellText;
-            }
-          }
-        }
-      }
-
-      if (maxLinesIdx === -1) {
-        return defaultRowHeight;
-      }
-
-      return calc(maxLinesText, wrapWidths[maxLinesIdx]);
+      const { text: maxLinesText, idx: maxLinesIdx } = getMaxWrapCell(fields, row.__index, maxWrapCellOptions);
+      return calcRowHeight(maxLinesText, colWidths[maxLinesIdx], defaultHeight);
     };
   }, [
-    avgCharWidth,
-    columnWidths,
-    ctx,
-    defaultRowHeight,
+    calcRowHeight,
+    defaultHeight,
     expandedRows,
     fields,
     hasNestedFrames,
     hasWrappedCols,
-    wrappedColIdxs,
+    headerHeight,
+    maxWrapCellOptions,
+    colWidths,
   ]);
 
   return rowHeight;
diff --git a/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts b/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts
index 74a9f39d224..302ef067224 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts
+++ b/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts
@@ -28,6 +28,7 @@ import {
   getTextAlign,
   migrateTableDisplayModeToCellOptions,
   getColumnTypes,
+  getMaxWrapCell,
 } from './utils';
 
 describe('TableNG utils', () => {
@@ -974,11 +975,6 @@ describe('TableNG utils', () => {
     });
   });
 
-  describe('getCellHeightCalculator', () => {
-    it.todo('returns a cell height calculator');
-    it.todo('returns a minimum height of the default row height');
-  });
-
   describe('getDefaultRowHeight', () => {
     const theme = createTheme();
 
@@ -1006,4 +1002,117 @@ describe('TableNG utils', () => {
       expect(result).toBe(expected);
     });
   });
+
+  describe('getMaxWrapCell', () => {
+    it('should return the maximum wrap cell length from field state', () => {
+      const field1: Field = {
+        name: 'field1',
+        type: FieldType.string,
+        config: {},
+        values: ['beep boop', 'foo bar baz', 'lorem ipsum dolor sit amet'],
+      };
+
+      const field2: Field = {
+        name: 'field2',
+        type: FieldType.string,
+        config: {},
+        values: ['asdfasdf asdfasdf asdfasdf', 'asdf asdf asdf asdf asdf', ''],
+      };
+
+      const field3: Field = {
+        name: 'field3',
+        type: FieldType.string,
+        config: {},
+        values: ['foo', 'bar', 'baz'],
+        // No alignmentFactors in state
+      };
+
+      const fields = [field1, field2, field3];
+
+      const result = getMaxWrapCell(fields, 0, {
+        colWidths: [30, 50, 100],
+        avgCharWidth: 5,
+        wrappedColIdxs: [true, true, true],
+      });
+      expect(result).toEqual({
+        text: 'asdfasdf asdfasdf asdfasdf',
+        idx: 1,
+        numLines: 2.6,
+      });
+    });
+
+    it('should take colWidths into account when calculating max wrap cell', () => {
+      const fields: Field[] = [
+        {
+          name: 'field',
+          type: FieldType.string,
+          config: {},
+          values: ['short', 'a bit longer text'],
+        },
+        {
+          name: 'field',
+          type: FieldType.string,
+          config: {},
+          values: ['short', 'quite a bit longer text'],
+        },
+        {
+          name: 'field',
+          type: FieldType.string,
+          config: {},
+          values: ['short', 'less text'],
+        },
+      ];
+
+      // Simulate a narrow column width that would cause wrapping
+      const colWidths = [50, 1000, 30]; // 50px width
+      const avgCharWidth = 5; // Assume average character width is 5px
+
+      const result = getMaxWrapCell(fields, 1, { colWidths, avgCharWidth, wrappedColIdxs: [true, true, true] });
+
+      // With a 50px width and 5px per character, we can fit 10 characters per line
+      // "the longest text in this field" has 31 characters, so it should wrap to 4 lines
+      expect(result).toEqual({
+        idx: 0,
+        numLines: 1.7,
+        text: 'a bit longer text',
+      });
+    });
+
+    it('should use the display name if the rowIdx is -1 (which is used to calc header height in wrapped rows)', () => {
+      const fields: Field[] = [
+        {
+          name: 'Field with a very long name',
+          type: FieldType.string,
+          config: {},
+          values: ['short', 'a bit longer text'],
+        },
+        {
+          name: 'Name',
+          type: FieldType.string,
+          config: {},
+          values: ['short', 'quite a bit longer text'],
+        },
+        {
+          name: 'Another field',
+          type: FieldType.string,
+          config: {},
+          values: ['short', 'less text'],
+        },
+      ];
+
+      // Simulate a narrow column width that would cause wrapping
+      const colWidths = [50, 1000, 30]; // 50px width
+      const avgCharWidth = 5; // Assume average character width is 5px
+
+      const result = getMaxWrapCell(fields, -1, { colWidths, avgCharWidth, wrappedColIdxs: [true, true, true] });
+
+      // With a 50px width and 5px per character, we can fit 10 characters per line
+      // "the longest text in this field" has 31 characters, so it should wrap to 4 lines
+      expect(result).toEqual({ idx: 0, numLines: 2.7, text: 'Field with a very long name' });
+    });
+
+    it.todo('should ignore columns which are not wrapped');
+
+    it.todo('should only apply wrapping on idiomatic break characters (space, -, etc)');
+  });
 });
diff --git a/packages/grafana-ui/src/components/Table/TableNG/utils.ts b/packages/grafana-ui/src/components/Table/TableNG/utils.ts
index 79afab8b076..78f5442f234 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/utils.ts
+++ b/packages/grafana-ui/src/components/Table/TableNG/utils.ts
@@ -1,7 +1,6 @@
 import { Property } from 'csstype';
 import { SortColumn } from 'react-data-grid';
 import tinycolor from 'tinycolor2';
-import { varPreLine } from 'uwrap';
 
 import {
   FieldType,
@@ -29,26 +28,6 @@ import { CellColors, TableRow, TableFieldOptionsType, ColumnTypes, FrameToRowsCo
 /* ---------------------------- Cell calculations --------------------------- */
 export type CellHeightCalculator = (text: string, cellWidth: number) => number;
 
-/**
- * @internal
- * Returns a function that calculates the height of a cell based on its text content and width.
- */
-export function getCellHeightCalculator(
-  // should be pre-configured with font and letterSpacing
-  ctx: CanvasRenderingContext2D,
-  lineHeight: number,
-  defaultRowHeight: number,
-  padding = 0
-) {
-  const { count } = varPreLine(ctx);
-
-  return (text: string, cellWidth: number) => {
-    const numLines = count(text, cellWidth);
-    const totalHeight = numLines * lineHeight + 2 * padding;
-    return Math.max(totalHeight, defaultRowHeight);
-  };
-}
-
 /**
  * @internal
  * Returns the default row height based on the theme and cell height setting.
@@ -69,19 +48,94 @@ export function getDefaultRowHeight(theme: GrafanaTheme2, cellHeight?: TableCell
   return TABLE.CELL_PADDING * 2 + bodyFontSize * lineHeight;
 }
 
+/**
+ * @internal
+ * Returns true if cell inspection (hover to see full content) is enabled for the field.
+ */
+export function isCellInspectEnabled(field: Field): boolean {
+  return field.config?.custom?.inspect ?? false;
+}
+
+/**
+ * @internal
+ * Returns true if text wrapping should be applied to the cell.
+ */
+export function shouldTextWrap(field: Field): boolean {
+  const cellOptions = getCellOptions(field);
+  // @ts-ignore - a handful of cellTypes have boolean wrapText, but not all of them.
+  // we should be very careful to only use boolean type for cellOptions.wrapText.
+  // TBH we will probably move this up to a field option which is showIf rendered anyway,
+  // but that'll be a migration to do, so it needs to happen post-GA.
+  return Boolean(cellOptions?.wrapText);
+}
+
+// matches characters which CSS
+const spaceRegex = /[\s-]/;
+
+export interface GetMaxWrapCellOptions {
+  colWidths: number[];
+  avgCharWidth: number;
+  wrappedColIdxs: boolean[];
+}
+
+/**
+ * @internal
+ * loop through the fields and their values, determine which cell is going to determine the
+ * height of the row based on its content and width, and then return the text, index, and number of lines for that cell.
+ */
+export function getMaxWrapCell(
+  fields: Field[],
+  rowIdx: number,
+  { colWidths, avgCharWidth, wrappedColIdxs }: GetMaxWrapCellOptions
+): {
+  text: string;
+  idx: number;
+  numLines: number;
+} {
+  let maxLines = 1;
+  let maxLinesIdx = -1;
+  let maxLinesText = '';
+
+  // TODO: consider changing how we store this, using a record by column key instead of an array
+  for (let i = 0; i < colWidths.length; i++) {
+    if (wrappedColIdxs[i]) {
+      const field = fields[i];
+      // special case: for the header, provide `-1` as the row index.
+      const cellTextRaw = rowIdx === -1 ? getDisplayName(field) : field.values[rowIdx];
+
+      if (cellTextRaw != null) {
+        const cellText = String(cellTextRaw);
+
+        if (spaceRegex.test(cellText)) {
+          const charsPerLine = colWidths[i] / avgCharWidth;
+          const approxLines = cellText.length / charsPerLine;
+
+          if (approxLines > maxLines) {
+            maxLines = approxLines;
+            maxLinesIdx = i;
+            maxLinesText = cellText;
+          }
+        }
+      }
+    }
+  }
+
+  return { text: maxLinesText, idx: maxLinesIdx, numLines: maxLines };
+}
+
 /**
  * @internal
  * Returns true if text overflow handling should be applied to the cell.
  */
-export function shouldTextOverflow(
-  fieldType: FieldType,
-  cellType: TableCellDisplayMode,
-  textWrap: boolean,
-  cellInspect: boolean
-): boolean {
-  // Tech debt: Technically image cells are of type string, which is misleading (kinda?)
-  // so we need to ensure we don't apply overflow hover states fo type image
-  return fieldType === FieldType.string && cellType !== TableCellDisplayMode.Image && !textWrap && !cellInspect;
+export function shouldTextOverflow(field: Field): boolean {
+  return (
+    field.type === FieldType.string &&
+    // Tech debt: Technically image cells are of type string, which is misleading (kinda?)
+    // so we need to ensure we don't apply overflow hover states for type image
+    getCellOptions(field).type !== TableCellDisplayMode.Image &&
+    !shouldTextWrap(field) &&
+    !isCellInspectEnabled(field)
+  );
 }
 
 /**
diff --git a/public/app/features/logs/components/LogDetails.tsx b/public/app/features/logs/components/LogDetails.tsx
index 69a5552950f..99313cf1ae9 100644
--- a/public/app/features/logs/components/LogDetails.tsx
+++ b/public/app/features/logs/components/LogDetails.tsx
@@ -43,7 +43,6 @@ export interface Props extends Themeable2 {
 
   onPinLine?: (row: LogRowModel) => void;
   pinLineButtonTooltipTitle?: PopoverContent;
-  mode?: 'inline' | 'sidebar';
   links?: Record<string, LinkModel[]>;
 }
 
@@ -51,7 +50,7 @@ interface LinkModelWithIcon extends LinkModel {
   icon?: IconName;
 }
 
-const useAttributesExtensionLinks = (row: LogRowModel) => {
+export const useAttributesExtensionLinks = (row: LogRowModel) => {
   // Stable context for useMemo inside usePluginLinks
   const context: PluginExtensionResourceAttributesContext = useMemo(() => {
     return {
@@ -121,7 +120,6 @@ class UnThemedLogDetails extends PureComponent<Props> {
       onPinLine,
       styles,
       pinLineButtonTooltipTitle,
-      mode = 'inline',
       links,
     } = this.props;
     const levelStyles = getLogLevelStyles(theme, row.logLevel);
@@ -152,14 +150,9 @@ class UnThemedLogDetails extends PureComponent<Props> {
     return (
       <tr className={cx(className, styles.logDetails)}>
         {showDuplicates && <td />}
-        {mode === 'inline' && (
-          <td
-            className={levelClassName}
-            aria-label={t('logs.un-themed-log-details.aria-label-log-level', 'Log level')}
-          />
-        )}
+        <td className={levelClassName} aria-label={t('logs.un-themed-log-details.aria-label-log-level', 'Log level')} />
         <td colSpan={4}>
-          <div className={mode === 'inline' ? styles.logDetailsContainer : styles.logDetailsSidebarContainer}>
+          <div className={styles.logDetailsContainer}>
             <table className={styles.logDetailsTable}>
               <tbody>
                 {displayedFields && displayedFields.length > 0 && (
@@ -168,7 +161,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
                       <td
                         colSpan={100}
                         className={styles.logDetailsHeading}
-                        aria-label={t('logs.un-themed-log-details.aria-label-fields', 'Fields')}
+                        aria-label={t('logs.un-themed-log-details.aria-label-line', 'Log line')}
                       >
                         <Trans i18nKey="logs.log-details.log-line">Log line</Trans>
                       </td>
diff --git a/public/app/features/logs/components/LogLabelStats.tsx b/public/app/features/logs/components/LogLabelStats.tsx
index b8d9a5d62a1..bee555170f2 100644
--- a/public/app/features/logs/components/LogLabelStats.tsx
+++ b/public/app/features/logs/components/LogLabelStats.tsx
@@ -1,15 +1,15 @@
 import { css } from '@emotion/css';
-import { PureComponent } from 'react';
+import { useMemo } from 'react';
 
 import { LogLabelStatsModel, GrafanaTheme2 } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { stylesFactory, withTheme2, Themeable2 } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
 
 import { LogLabelStatsRow } from './LogLabelStatsRow';
 
 const STATS_ROW_LIMIT = 5;
 
-const getStyles = stylesFactory((theme: GrafanaTheme2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     logsStats: css({
       label: 'logs-stats',
@@ -42,9 +42,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
       padding: '5px 0px',
     }),
   };
-});
+};
 
-interface Props extends Themeable2 {
+interface Props {
+  className?: string;
   stats: LogLabelStatsModel[];
   label: string;
   value: string;
@@ -52,10 +53,9 @@ interface Props extends Themeable2 {
   isLabel?: boolean;
 }
 
-class UnThemedLogLabelStats extends PureComponent<Props> {
-  render() {
-    const { label, rowCount, stats, value, theme, isLabel } = this.props;
-    const style = getStyles(theme);
+export const LogLabelStats = ({ className, label, rowCount, stats, value, isLabel }: Props) => {
+  const style = useStyles2(getStyles);
+  const rows = useMemo(() => {
     const topRows = stats.slice(0, STATS_ROW_LIMIT);
     let activeRow = topRows.find((row) => row.value === value);
     let otherRows = stats.slice(STATS_ROW_LIMIT);
@@ -66,45 +66,45 @@ class UnThemedLogLabelStats extends PureComponent<Props> {
       activeRow = otherRows.find((row) => row.value === value);
       otherRows = otherRows.filter((row) => row.value !== value);
     }
+    return { topRows, otherRows, insertActiveRow, activeRow };
+  }, [stats, value]);
 
-    const otherCount = otherRows.reduce((sum, row) => sum + row.count, 0);
-    const topCount = topRows.reduce((sum, row) => sum + row.count, 0);
-    const total = topCount + otherCount;
-    const otherProportion = otherCount / total;
+  const otherCount = useMemo(() => rows.otherRows.reduce((sum, row) => sum + row.count, 0), [rows.otherRows]);
+  const topCount = useMemo(() => rows.topRows.reduce((sum, row) => sum + row.count, 0), [rows.topRows]);
+  const total = topCount + otherCount;
+  const otherProportion = otherCount / total;
 
-    return (
-      <div className={style.logsStats} data-testid="logLabelStats">
-        <div className={style.logsStatsHeader}>
-          <div className={style.logsStatsTitle}>
-            {isLabel
-              ? t(
-                  'logs.un-themed-log-label-stats.label-log-stats',
-                  '{{label}}: {{total}} of {{rowCount}} rows have that label',
-                  {
-                    label,
-                    total,
-                    rowCount,
-                  }
-                )
-              : t(
-                  'logs.un-themed-log-label-stats.field-log-stats',
-                  '{{label}}: {{total}} of {{rowCount}} rows have that field'
-                )}
-          </div>
-        </div>
-        <div className={style.logsStatsBody}>
-          {topRows.map((stat) => (
-            <LogLabelStatsRow key={stat.value} {...stat} active={stat.value === value} />
-          ))}
-          {insertActiveRow && activeRow && <LogLabelStatsRow key={activeRow.value} {...activeRow} active />}
-          {otherCount > 0 && (
-            <LogLabelStatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />
-          )}
+  return (
+    <div className={className ?? style.logsStats} data-testid="logLabelStats">
+      <div className={style.logsStatsHeader}>
+        <div className={style.logsStatsTitle}>
+          {isLabel
+            ? t(
+                'logs.un-themed-log-label-stats.label-log-stats',
+                '{{label}}: {{total}} of {{rowCount}} rows have that label',
+                {
+                  label,
+                  total,
+                  rowCount,
+                }
+              )
+            : t(
+                'logs.un-themed-log-label-stats.field-log-stats',
+                '{{label}}: {{total}} of {{rowCount}} rows have that field'
+              )}
         </div>
       </div>
-    );
-  }
-}
-
-export const LogLabelStats = withTheme2(UnThemedLogLabelStats);
-LogLabelStats.displayName = 'LogLabelStats';
+      <div className={style.logsStatsBody}>
+        {rows.topRows.map((stat) => (
+          <LogLabelStatsRow key={stat.value} {...stat} active={stat.value === value} />
+        ))}
+        {rows.insertActiveRow && rows.activeRow && (
+          <LogLabelStatsRow key={rows.activeRow.value} {...rows.activeRow} active />
+        )}
+        {otherCount > 0 && (
+          <LogLabelStatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/public/app/features/logs/components/getLogRowStyles.ts b/public/app/features/logs/components/getLogRowStyles.ts
index 79e88c1a485..1bd1c5c7a7a 100644
--- a/public/app/features/logs/components/getLogRowStyles.ts
+++ b/public/app/features/logs/components/getLogRowStyles.ts
@@ -187,14 +187,6 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
       margin: theme.spacing(2.5, 1, 2.5, 2),
       cursor: 'default',
     }),
-    logDetailsSidebarContainer: css({
-      label: 'logs-row-details-table',
-      border: `1px solid ${theme.colors.border.medium}`,
-      padding: theme.spacing(0, 1, 1),
-      borderRadius: theme.shape.radius.default,
-      margin: theme.spacing(0, 1, 0, 1),
-      cursor: 'default',
-    }),
     logDetailsTable: css({
       label: 'logs-row-details-table',
       lineHeight: '18px',
diff --git a/public/app/features/logs/components/panel/LogLine.tsx b/public/app/features/logs/components/panel/LogLine.tsx
index 3e7ac11bc96..ec3062ee3b5 100644
--- a/public/app/features/logs/components/panel/LogLine.tsx
+++ b/public/app/features/logs/components/panel/LogLine.tsx
@@ -528,9 +528,6 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
       gridColumnGap: theme.spacing(FIELD_GAP_MULTIPLIER),
       whiteSpace: 'pre',
       paddingBottom: theme.spacing(0.75),
-      '& .field': {
-        overflow: 'hidden',
-      },
     }),
     wrappedLogLine: css({
       alignSelf: 'flex-start',
diff --git a/public/app/features/logs/components/panel/LogLineDetails.test.tsx b/public/app/features/logs/components/panel/LogLineDetails.test.tsx
new file mode 100644
index 00000000000..626863e4aec
--- /dev/null
+++ b/public/app/features/logs/components/panel/LogLineDetails.test.tsx
@@ -0,0 +1,460 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {
+  Field,
+  LogLevel,
+  LogRowModel,
+  FieldType,
+  createDataFrame,
+  DataFrameType,
+  PluginExtensionPoints,
+  toDataFrame,
+  LogsSortOrder,
+  DataFrame,
+  ScopedVars,
+} from '@grafana/data';
+import { setPluginLinksHook } from '@grafana/runtime';
+
+import { LOG_LINE_BODY_FIELD_NAME } from '../LogDetailsBody';
+import { createLogLine } from '../mocks/logRow';
+
+import { LogLineDetails, Props } from './LogLineDetails';
+import { LogListContext, LogListContextData } from './LogListContext';
+import { defaultValue } from './__mocks__/LogListContext';
+
+jest.mock('@grafana/runtime', () => {
+  return {
+    ...jest.requireActual('@grafana/runtime'),
+    usePluginLinks: jest.fn().mockReturnValue({ links: [] }),
+  };
+});
+jest.mock('./LogListContext');
+
+const setup = (
+  propOverrides?: Partial<Props>,
+  rowOverrides?: Partial<LogRowModel>,
+  contextOverrides?: Partial<LogListContextData>
+) => {
+  const logs = [createLogLine({ logLevel: LogLevel.error, timeEpochMs: 1546297200000, ...rowOverrides })];
+
+  const props: Props = {
+    containerElement: document.createElement('div'),
+    logs,
+    onResize: jest.fn(),
+    ...(propOverrides || {}),
+  };
+
+  const contextData: LogListContextData = {
+    ...defaultValue,
+    showDetails: logs,
+    ...contextOverrides,
+  };
+
+  return render(
+    <LogListContext.Provider value={contextData}>
+      <LogLineDetails {...props} />
+    </LogListContext.Provider>
+  );
+};
+
+describe('LogLineDetails', () => {
+  describe('when fields are present', () => {
+    test('should render the fields and the log line', () => {
+      setup(undefined, { labels: { key1: 'label1', key2: 'label2' } });
+      expect(screen.getByText('Log line')).toBeInTheDocument();
+      expect(screen.getByText('Fields')).toBeInTheDocument();
+    });
+    test('fields should be visible by default', () => {
+      setup(undefined, { labels: { key1: 'label1', key2: 'label2' } });
+      expect(screen.getByText('key1')).toBeInTheDocument();
+      expect(screen.getByText('label1')).toBeInTheDocument();
+      expect(screen.getByText('key2')).toBeInTheDocument();
+      expect(screen.getByText('label2')).toBeInTheDocument();
+    });
+    test('should show an option to display the log line when displayed fields are used', async () => {
+      const onClickShowField = jest.fn();
+
+      setup(
+        undefined,
+        { labels: { key1: 'label1' } },
+        { displayedFields: ['key1'], onClickShowField, onClickHideField: jest.fn() }
+      );
+      expect(screen.getByText('key1')).toBeInTheDocument();
+      expect(screen.getByLabelText('Show log line')).toBeInTheDocument();
+
+      await userEvent.click(screen.getByLabelText('Show log line'));
+
+      expect(onClickShowField).toHaveBeenCalledTimes(1);
+    });
+    test('should show an active option to display the log line when displayed fields are used', async () => {
+      const onClickHideField = jest.fn();
+
+      setup(
+        undefined,
+        { labels: { key1: 'label1' } },
+        { displayedFields: ['key1', LOG_LINE_BODY_FIELD_NAME], onClickHideField, onClickShowField: jest.fn() }
+      );
+      expect(screen.getByText('key1')).toBeInTheDocument();
+      expect(screen.getByLabelText('Hide log line')).toBeInTheDocument();
+
+      await userEvent.click(screen.getByLabelText('Hide log line'));
+
+      expect(onClickHideField).toHaveBeenCalledTimes(1);
+    });
+    test('should not show an option to display the log line when displayed fields are not used', () => {
+      setup(undefined, { labels: { key1: 'label1' } }, { displayedFields: [] });
+      expect(screen.getByText('key1')).toBeInTheDocument();
+      expect(screen.queryByLabelText('Show log line')).not.toBeInTheDocument();
+    });
+    test('should render the filter controls when the callbacks are provided', () => {
+      setup(
+        undefined,
+        { labels: { key1: 'label1' } },
+        {
+          onClickFilterLabel: () => {},
+          onClickFilterOutLabel: () => {},
+        }
+      );
+      expect(screen.getByLabelText('Filter for value in query A')).toBeInTheDocument();
+      expect(screen.getByLabelText('Filter out value in query A')).toBeInTheDocument();
+    });
+    describe('Toggleable filters', () => {
+      test('should pass the log row to Explore filter functions', async () => {
+        const onClickFilterLabelMock = jest.fn();
+        const onClickFilterOutLabelMock = jest.fn();
+        const isLabelFilterActiveMock = jest.fn().mockResolvedValue(true);
+        const log = createLogLine({
+          logLevel: LogLevel.error,
+          timeEpochMs: 1546297200000,
+          labels: { key1: 'label1' },
+        });
+
+        setup(
+          {
+            logs: [log],
+          },
+          undefined,
+          {
+            onClickFilterLabel: onClickFilterLabelMock,
+            onClickFilterOutLabel: onClickFilterOutLabelMock,
+            isLabelFilterActive: isLabelFilterActiveMock,
+            showDetails: [log],
+          }
+        );
+
+        expect(isLabelFilterActiveMock).toHaveBeenCalledWith('key1', 'label1', log.dataFrame.refId);
+
+        await userEvent.click(screen.getByLabelText('Filter for value in query A'));
+        expect(onClickFilterLabelMock).toHaveBeenCalledTimes(1);
+        expect(onClickFilterLabelMock).toHaveBeenCalledWith(
+          'key1',
+          'label1',
+          expect.objectContaining({
+            fields: [
+              expect.objectContaining({ values: [0] }),
+              expect.objectContaining({ values: ['line1'] }),
+              expect.objectContaining({ values: [{ app: 'app01' }] }),
+            ],
+            length: 1,
+          })
+        );
+
+        await userEvent.click(screen.getByLabelText('Filter out value in query A'));
+        expect(onClickFilterOutLabelMock).toHaveBeenCalledTimes(1);
+        expect(onClickFilterOutLabelMock).toHaveBeenCalledWith(
+          'key1',
+          'label1',
+          expect.objectContaining({
+            fields: [
+              expect.objectContaining({ values: [0] }),
+              expect.objectContaining({ values: ['line1'] }),
+              expect.objectContaining({ values: [{ app: 'app01' }] }),
+            ],
+            length: 1,
+          })
+        );
+      });
+    });
+    test('should not render filter controls when the callbacks are not provided', () => {
+      setup(
+        undefined,
+        { labels: { key1: 'label1' } },
+        {
+          onClickFilterLabel: undefined,
+          onClickFilterOutLabel: undefined,
+        }
+      );
+      expect(screen.queryByLabelText('Filter for value')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('Filter out value')).not.toBeInTheDocument();
+    });
+  });
+  describe('when the log has no fields to display', () => {
+    test('should render no details available message', () => {
+      setup(undefined, { entry: '' });
+      expect(screen.getByText('No fields to display.')).toBeInTheDocument();
+    });
+    test('should not render headings', () => {
+      setup(undefined, { entry: '' });
+      expect(screen.queryByText('Fields')).not.toBeInTheDocument();
+      expect(screen.queryByText('Links')).not.toBeInTheDocument();
+      expect(screen.queryByText('Indexed labels')).not.toBeInTheDocument();
+      expect(screen.queryByText('Parsed fields')).not.toBeInTheDocument();
+      expect(screen.queryByText('Structured metadata')).not.toBeInTheDocument();
+    });
+  });
+  test('should render fields from the dataframe with links', () => {
+    const entry = 'traceId=1234 msg="some message"';
+    const dataFrame = toDataFrame({
+      fields: [
+        { name: 'timestamp', config: {}, type: FieldType.time, values: [1] },
+        { name: 'entry', values: [entry] },
+        // As we have traceId in message already this will shadow it.
+        {
+          name: 'traceId',
+          values: ['1234'],
+          config: { links: [{ title: 'link title', url: 'localhost:3210/${__value.text}' }] },
+        },
+        { name: 'userId', values: ['5678'] },
+      ],
+    });
+    const log = createLogLine(
+      { entry, dataFrame, entryFieldIndex: 0, rowIndex: 0 },
+      {
+        escape: false,
+        order: LogsSortOrder.Descending,
+        timeZone: 'browser',
+        virtualization: undefined,
+        wrapLogMessage: true,
+        getFieldLinks: (field: Field, rowIndex: number, dataFrame: DataFrame, vars: ScopedVars) => {
+          if (field.config && field.config.links) {
+            return field.config.links.map((link) => {
+              return {
+                href: link.url.replace('${__value.text}', field.values[rowIndex]),
+                title: link.title,
+                target: '_blank',
+                origin: field,
+              };
+            });
+          }
+          return [];
+        },
+      }
+    );
+
+    setup({ logs: [log] }, undefined, { showDetails: [log] });
+
+    expect(screen.getByText('Fields')).toBeInTheDocument();
+    expect(screen.getByText('Links')).toBeInTheDocument();
+    expect(screen.getByText('traceId')).toBeInTheDocument();
+    expect(screen.getByText('link title')).toBeInTheDocument();
+    expect(screen.getByText('1234')).toBeInTheDocument();
+  });
+
+  test('should show the correct log details fields, links and labels for DataFrameType.LogLines frames', () => {
+    const entry = 'test';
+    const dataFrame = createDataFrame({
+      fields: [
+        { name: 'timestamp', config: {}, type: FieldType.time, values: [1] },
+        { name: 'body', type: FieldType.string, values: [entry] },
+        {
+          name: 'labels',
+          type: FieldType.other,
+          values: [
+            {
+              label1: 'value1',
+            },
+          ],
+        },
+        {
+          name: 'shouldNotShowFieldName',
+          type: FieldType.string,
+          values: ['shouldNotShowFieldValue'],
+        },
+        {
+          name: 'shouldShowLinkName',
+          type: FieldType.string,
+          values: ['shouldShowLinkValue'],
+          config: { links: [{ title: 'link', url: 'localhost:3210/${__value.text}' }] },
+        },
+      ],
+      meta: {
+        type: DataFrameType.LogLines,
+      },
+    });
+
+    const log = createLogLine(
+      { entry, dataFrame, entryFieldIndex: 0, rowIndex: 0, labels: { label1: 'value1' } },
+      {
+        escape: false,
+        order: LogsSortOrder.Descending,
+        timeZone: 'browser',
+        virtualization: undefined,
+        wrapLogMessage: true,
+        getFieldLinks: (field: Field, rowIndex: number, dataFrame: DataFrame, vars: ScopedVars) => {
+          if (field.config && field.config.links) {
+            return field.config.links.map((link) => {
+              return {
+                href: link.url.replace('${__value.text}', field.values[rowIndex]),
+                title: link.title,
+                target: '_blank',
+                origin: field,
+              };
+            });
+          }
+          return [];
+        },
+      }
+    );
+
+    setup({ logs: [log] }, undefined, { showDetails: [log] });
+
+    expect(screen.getByText('Log line')).toBeInTheDocument();
+    expect(screen.getByText('Fields')).toBeInTheDocument();
+    expect(screen.getByText('Links')).toBeInTheDocument();
+
+    // Don't show additional fields for DataFrameType.LogLines
+    expect(screen.queryByText('shouldNotShowFieldName')).not.toBeInTheDocument();
+    expect(screen.queryByText('shouldNotShowFieldValue')).not.toBeInTheDocument();
+
+    // Show labels and links
+    expect(screen.getByText('label1')).toBeInTheDocument();
+    expect(screen.getByText('value1')).toBeInTheDocument();
+    expect(screen.getByText('shouldShowLinkName')).toBeInTheDocument();
+    expect(screen.getByText('shouldShowLinkValue')).toBeInTheDocument();
+  });
+
+  test('should load plugin links for logs view resource attributes extension point', () => {
+    const usePluginLinksMock = jest.fn().mockReturnValue({ links: [] });
+    setPluginLinksHook(usePluginLinksMock);
+    jest.requireMock('@grafana/runtime').usePluginLinks = usePluginLinksMock;
+
+    const rowOverrides = {
+      datasourceType: 'loki',
+      datasourceUid: 'grafanacloud-logs',
+      labels: { key1: 'label1', key2: 'label2' },
+    };
+    setup(undefined, rowOverrides);
+
+    expect(usePluginLinksMock).toHaveBeenCalledWith({
+      extensionPointId: PluginExtensionPoints.LogsViewResourceAttributes,
+      limitPerPlugin: 10,
+      context: {
+        datasource: {
+          type: 'loki',
+          uid: 'grafanacloud-logs',
+        },
+        attributes: { key1: ['label1'], key2: ['label2'] },
+      },
+    });
+  });
+
+  describe('Label types', () => {
+    const entry = 'test';
+    const labels = {
+      label1: 'value1',
+      label2: 'value2',
+      label3: 'value3',
+    };
+    const dataFrame = createDataFrame({
+      fields: [
+        { name: 'timestamp', config: {}, type: FieldType.time, values: [1] },
+        { name: 'body', type: FieldType.string, values: [entry] },
+        { name: 'id', type: FieldType.string, values: ['1'] },
+        {
+          name: 'labels',
+          type: FieldType.other,
+          values: [labels],
+        },
+        {
+          name: 'labelTypes',
+          type: FieldType.other,
+          values: [
+            {
+              label1: 'I',
+              label2: 'S',
+              label3: 'P',
+            },
+          ],
+        },
+      ],
+      meta: {
+        type: DataFrameType.LogLines,
+      },
+    });
+    test('should show label types if they are available and supported', () => {
+      setup(undefined, {
+        entry,
+        dataFrame,
+        entryFieldIndex: 0,
+        rowIndex: 0,
+        labels,
+        datasourceType: 'loki',
+        rowId: '1',
+      });
+
+      // Show labels and links
+      expect(screen.getByText('label1')).toBeInTheDocument();
+      expect(screen.getByText('value1')).toBeInTheDocument();
+      expect(screen.getByText('label2')).toBeInTheDocument();
+      expect(screen.getByText('value2')).toBeInTheDocument();
+      expect(screen.getByText('label3')).toBeInTheDocument();
+      expect(screen.getByText('value3')).toBeInTheDocument();
+      expect(screen.getByText('Indexed labels')).toBeInTheDocument();
+      expect(screen.getByText('Parsed fields')).toBeInTheDocument();
+      expect(screen.getByText('Structured metadata')).toBeInTheDocument();
+    });
+    test('should not show label types if they are unavailable or not supported', () => {
+      setup(
+        {},
+        {
+          entry,
+          dataFrame,
+          entryFieldIndex: 0,
+          rowIndex: 0,
+          labels,
+          datasourceType: 'other datasource',
+          rowId: '1',
+        }
+      );
+
+      // Show labels and links
+      expect(screen.getByText('label1')).toBeInTheDocument();
+      expect(screen.getByText('value1')).toBeInTheDocument();
+      expect(screen.getByText('label2')).toBeInTheDocument();
+      expect(screen.getByText('value2')).toBeInTheDocument();
+      expect(screen.getByText('label3')).toBeInTheDocument();
+      expect(screen.getByText('value3')).toBeInTheDocument();
+
+      expect(screen.getByText('Fields')).toBeInTheDocument();
+      expect(screen.queryByText('Indexed labels')).not.toBeInTheDocument();
+      expect(screen.queryByText('Parsed fields')).not.toBeInTheDocument();
+      expect(screen.queryByText('Structured metadata')).not.toBeInTheDocument();
+    });
+
+    test('Should allow to search within fields', async () => {
+      setup(undefined, {
+        entry,
+        dataFrame,
+        entryFieldIndex: 0,
+        rowIndex: 0,
+        labels,
+        datasourceType: 'loki',
+        rowId: '1',
+      });
+
+      expect(screen.getByText('label1')).toBeInTheDocument();
+      expect(screen.getByText('value1')).toBeInTheDocument();
+      expect(screen.getByText('label2')).toBeInTheDocument();
+      expect(screen.getByText('value2')).toBeInTheDocument();
+      expect(screen.getByText('label3')).toBeInTheDocument();
+      expect(screen.getByText('value3')).toBeInTheDocument();
+
+      const input = screen.getByPlaceholderText('Search field names and values');
+
+      await userEvent.type(input, 'something else');
+
+      expect(screen.getAllByText('No results to display.')).toHaveLength(3);
+    });
+  });
+});
diff --git a/public/app/features/logs/components/panel/LogLineDetails.tsx b/public/app/features/logs/components/panel/LogLineDetails.tsx
index 08725535ef2..3f04338bf92 100644
--- a/public/app/features/logs/components/panel/LogLineDetails.tsx
+++ b/public/app/features/logs/components/panel/LogLineDetails.tsx
@@ -3,43 +3,22 @@ import { Resizable } from 're-resizable';
 import { useCallback, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { t } from '@grafana/i18n';
-import { getDragStyles, IconButton, useStyles2, useTheme2 } from '@grafana/ui';
-import { GetFieldLinksFn } from 'app/plugins/panel/logs/types';
-
-import { LogDetails } from '../LogDetails';
-import { getLogRowStyles } from '../getLogRowStyles';
+import { getDragStyles, useStyles2 } from '@grafana/ui';
 
+import { LogLineDetailsComponent } from './LogLineDetailsComponent';
 import { useLogListContext } from './LogListContext';
 import { LogListModel } from './processing';
 import { LOG_LIST_MIN_WIDTH } from './virtualization';
 
-interface Props {
+export interface Props {
   containerElement: HTMLDivElement;
-  getFieldLinks?: GetFieldLinksFn;
+  logOptionsStorageKey?: string;
   logs: LogListModel[];
   onResize(): void;
 }
 
-export const LogLineDetails = ({ containerElement, getFieldLinks, logs, onResize }: Props) => {
-  const {
-    app,
-    closeDetails,
-    detailsWidth,
-    displayedFields,
-    isLabelFilterActive,
-    onClickFilterLabel,
-    onClickFilterOutLabel,
-    onClickShowField,
-    onClickHideField,
-    onPinLine,
-    pinLineButtonTooltipTitle,
-    setDetailsWidth,
-    showDetails,
-    wrapLogMessage,
-  } = useLogListContext();
-  const getRows = useCallback(() => logs, [logs]);
-  const logRowsStyles = getLogRowStyles(useTheme2());
+export const LogLineDetails = ({ containerElement, logOptionsStorageKey, logs, onResize }: Props) => {
+  const { detailsWidth, setDetailsWidth, showDetails } = useLogListContext();
   const styles = useStyles2(getStyles);
   const dragStyles = useStyles2(getDragStyles);
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -53,6 +32,10 @@ export const LogLineDetails = ({ containerElement, getFieldLinks, logs, onResize
 
   const maxWidth = containerElement.clientWidth - LOG_LIST_MIN_WIDTH;
 
+  if (!showDetails.length) {
+    return null;
+  }
+
   return (
     <Resizable
       onResize={handleResize}
@@ -65,35 +48,7 @@ export const LogLineDetails = ({ containerElement, getFieldLinks, logs, onResize
     >
       <div className={styles.container} ref={containerRef}>
         <div className={styles.scrollContainer}>
-          <IconButton
-            name="times"
-            className={styles.closeIcon}
-            aria-label={t('logs.log-details.close', 'Close log details')}
-            onClick={closeDetails}
-          />
-          <table width="100%">
-            <tbody>
-              <LogDetails
-                getRows={getRows}
-                mode="sidebar"
-                row={showDetails[0]}
-                showDuplicates={false}
-                styles={logRowsStyles}
-                wrapLogMessage={wrapLogMessage}
-                onPinLine={onPinLine}
-                getFieldLinks={getFieldLinks}
-                onClickFilterLabel={onClickFilterLabel}
-                onClickFilterOutLabel={onClickFilterOutLabel}
-                onClickShowField={onClickShowField}
-                onClickHideField={onClickHideField}
-                hasError={showDetails[0].hasError}
-                displayedFields={displayedFields}
-                app={app}
-                isFilterLabelActive={isLabelFilterActive}
-                pinLineButtonTooltipTitle={pinLineButtonTooltipTitle}
-              />
-            </tbody>
-          </table>
+          <LogLineDetailsComponent log={showDetails[0]} logOptionsStorageKey={logOptionsStorageKey} logs={logs} />
         </div>
       </div>
     </Resizable>
@@ -104,15 +59,15 @@ const getStyles = (theme: GrafanaTheme2) => ({
   container: css({
     overflow: 'auto',
     height: '100%',
+    boxShadow: theme.shadows.z1,
+    border: `1px solid ${theme.colors.border.medium}`,
+    borderRight: 'none',
   }),
   scrollContainer: css({
     overflow: 'auto',
-    position: 'relative',
     height: '100%',
   }),
-  closeIcon: css({
-    position: 'absolute',
-    top: theme.spacing(1),
-    right: theme.spacing(1.5),
+  componentWrapper: css({
+    padding: theme.spacing(0, 1, 1, 1),
   }),
 });
diff --git a/public/app/features/logs/components/panel/LogLineDetailsComponent.tsx b/public/app/features/logs/components/panel/LogLineDetailsComponent.tsx
new file mode 100644
index 00000000000..7ae570d6500
--- /dev/null
+++ b/public/app/features/logs/components/panel/LogLineDetailsComponent.tsx
@@ -0,0 +1,182 @@
+import { css } from '@emotion/css';
+import { camelCase, groupBy } from 'lodash';
+import { startTransition, useCallback, useMemo, useRef, useState } from 'react';
+
+import { DataFrameType, GrafanaTheme2, store } from '@grafana/data';
+import { t, Trans } from '@grafana/i18n';
+import { ControlledCollapse, useStyles2 } from '@grafana/ui';
+
+import { getLabelTypeFromRow } from '../../utils';
+import { useAttributesExtensionLinks } from '../LogDetails';
+import { createLogLineLinks } from '../logParser';
+
+import { LabelWithLinks, LogLineDetailsFields, LogLineDetailsLabelFields } from './LogLineDetailsFields';
+import { LogLineDetailsHeader } from './LogLineDetailsHeader';
+import { LogListModel } from './processing';
+
+interface LogLineDetailsComponentProps {
+  log: LogListModel;
+  logOptionsStorageKey?: string;
+  logs: LogListModel[];
+}
+
+export const LogLineDetailsComponent = ({ log, logOptionsStorageKey, logs }: LogLineDetailsComponentProps) => {
+  const [search, setSearch] = useState('');
+  const inputRef = useRef('');
+  const styles = useStyles2(getStyles);
+  const extensionLinks = useAttributesExtensionLinks(log);
+  const fieldsWithLinks = useMemo(() => {
+    const fieldsWithLinks = log.fields.filter((f) => f.links?.length);
+    const displayedFieldsWithLinks = fieldsWithLinks.filter((f) => f.fieldIndex !== log.entryFieldIndex).sort();
+    const hiddenFieldsWithLinks = fieldsWithLinks.filter((f) => f.fieldIndex === log.entryFieldIndex).sort();
+    const fieldsWithLinksFromVariableMap = createLogLineLinks(hiddenFieldsWithLinks);
+    return {
+      links: displayedFieldsWithLinks,
+      linksFromVariableMap: fieldsWithLinksFromVariableMap,
+    };
+  }, [log.entryFieldIndex, log.fields]);
+  const fieldsWithoutLinks =
+    log.dataFrame.meta?.type === DataFrameType.LogLines
+      ? // for LogLines frames (dataplane) we don't want to show any additional fields besides already extracted labels and links
+        []
+      : // for other frames, do not show the log message unless there is a link attached
+        log.fields.filter((f) => f.links?.length === 0 && f.fieldIndex !== log.entryFieldIndex).sort();
+  const labelsWithLinks: LabelWithLinks[] = useMemo(
+    () =>
+      Object.keys(log.labels)
+        .sort()
+        .map((label) => ({
+          key: label,
+          value: log.labels[label],
+          link: extensionLinks?.[label],
+        })),
+    [extensionLinks, log.labels]
+  );
+  const groupedLabels = useMemo(
+    () => groupBy(labelsWithLinks, (label) => getLabelTypeFromRow(label.key, log, true) ?? ''),
+    [labelsWithLinks, log]
+  );
+  const labelGroups = useMemo(() => Object.keys(groupedLabels), [groupedLabels]);
+
+  const logLineOpen = logOptionsStorageKey
+    ? store.getBool(`${logOptionsStorageKey}.log-details.logLineOpen`, false)
+    : false;
+  const linksOpen = logOptionsStorageKey ? store.getBool(`${logOptionsStorageKey}.log-details.linksOpen`, true) : true;
+  const fieldsOpen = logOptionsStorageKey
+    ? store.getBool(`${logOptionsStorageKey}.log-details.fieldsOpen`, true)
+    : true;
+
+  const handleToggle = useCallback(
+    (option: string, isOpen: boolean) => {
+      console.log(option, isOpen);
+      store.set(`${logOptionsStorageKey}.log-details.${option}`, isOpen);
+    },
+    [logOptionsStorageKey]
+  );
+
+  const handleSearch = useCallback((newSearch: string) => {
+    inputRef.current = newSearch;
+    startTransition(() => {
+      setSearch(inputRef.current);
+    });
+  }, []);
+
+  const noDetails =
+    !fieldsWithLinks.links.length &&
+    !fieldsWithLinks.linksFromVariableMap.length &&
+    !labelGroups.length &&
+    !fieldsWithoutLinks.length;
+
+  return (
+    <>
+      <LogLineDetailsHeader log={log} search={search} onSearch={handleSearch} />
+      <div className={styles.componentWrapper}>
+        <ControlledCollapse
+          className={styles.collapsable}
+          label={t('logs.log-line-details.log-line-section', 'Log line')}
+          collapsible
+          isOpen={logLineOpen}
+          onToggle={(isOpen: boolean) => handleToggle('logLineOpen', isOpen)}
+        >
+          <div className={styles.logLineWrapper}>{log.raw}</div>
+        </ControlledCollapse>
+        {fieldsWithLinks.links.length > 0 && (
+          <ControlledCollapse
+            className={styles.collapsable}
+            label={t('logs.log-line-details.links-section', 'Links')}
+            collapsible
+            isOpen={linksOpen}
+            onToggle={(isOpen: boolean) => handleToggle('linksOpen', isOpen)}
+          >
+            <LogLineDetailsFields log={log} logs={logs} fields={fieldsWithLinks.links} search={search} />
+            <LogLineDetailsFields
+              disableActions
+              log={log}
+              logs={logs}
+              fields={fieldsWithLinks.linksFromVariableMap}
+              search={search}
+            />
+          </ControlledCollapse>
+        )}
+        {labelGroups.map((group) =>
+          group === '' ? (
+            <ControlledCollapse
+              className={styles.collapsable}
+              key={'fields'}
+              label={t('logs.log-line-details.fields-section', 'Fields')}
+              collapsible
+              isOpen={fieldsOpen}
+              onToggle={(isOpen: boolean) => handleToggle('fieldsOpen', isOpen)}
+            >
+              <LogLineDetailsLabelFields log={log} logs={logs} fields={groupedLabels[group]} search={search} />
+              <LogLineDetailsFields log={log} logs={logs} fields={fieldsWithoutLinks} search={search} />
+            </ControlledCollapse>
+          ) : (
+            <ControlledCollapse
+              className={styles.collapsable}
+              key={group}
+              label={group}
+              collapsible
+              isOpen={store.getBool(`${logOptionsStorageKey}.log-details.${groupOptionName(group)}`, true)}
+              onToggle={(isOpen: boolean) => handleToggle(groupOptionName(group), isOpen)}
+            >
+              <LogLineDetailsLabelFields log={log} logs={logs} fields={groupedLabels[group]} search={search} />
+            </ControlledCollapse>
+          )
+        )}
+        {!labelGroups.length && fieldsWithoutLinks.length > 0 && (
+          <ControlledCollapse
+            className={styles.collapsable}
+            key={'fields'}
+            label={t('logs.log-line-details.fields-section', 'Fields')}
+            collapsible
+            isOpen={fieldsOpen}
+            onToggle={(isOpen: boolean) => handleToggle('fieldsOpen', isOpen)}
+          >
+            <LogLineDetailsFields log={log} logs={logs} fields={fieldsWithoutLinks} search={search} />
+          </ControlledCollapse>
+        )}
+        {noDetails && <Trans i18nKey="logs.log-line-details.no-details">No fields to display.</Trans>}
+      </div>
+    </>
+  );
+};
+
+function groupOptionName(group: string) {
+  return `${camelCase(group)}Open`;
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  collapsable: css({
+    '&:last-of-type': {
+      marginBottom: 0,
+    },
+  }),
+  componentWrapper: css({
+    padding: theme.spacing(0, 1, 1, 1),
+  }),
+  logLineWrapper: css({
+    maxHeight: '50vh',
+    overflow: 'auto',
+  }),
+});
diff --git a/public/app/features/logs/components/panel/LogLineDetailsFields.tsx b/public/app/features/logs/components/panel/LogLineDetailsFields.tsx
new file mode 100644
index 00000000000..895de79f1cc
--- /dev/null
+++ b/public/app/features/logs/components/panel/LogLineDetailsFields.tsx
@@ -0,0 +1,522 @@
+import { css } from '@emotion/css';
+import { isEqual } from 'lodash';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import * as React from 'react';
+
+import { CoreApp, Field, fuzzySearch, GrafanaTheme2, IconName, LinkModel, LogLabelStatsModel } from '@grafana/data';
+import { t } from '@grafana/i18n';
+import { reportInteraction } from '@grafana/runtime';
+import { ClipboardButton, DataLinkButton, IconButton, useStyles2 } from '@grafana/ui';
+
+import { logRowToSingleRowDataFrame } from '../../logsModel';
+import { calculateLogsLabelStats, calculateStats } from '../../utils';
+import { LogLabelStats } from '../LogLabelStats';
+import { FieldDef } from '../logParser';
+
+import { useLogListContext } from './LogListContext';
+import { LogListModel } from './processing';
+
+interface LogLineDetailsFieldsProps {
+  disableActions?: boolean;
+  fields: FieldDef[];
+  log: LogListModel;
+  logs: LogListModel[];
+  search?: string;
+}
+
+export const LogLineDetailsFields = ({ disableActions, fields, log, logs, search }: LogLineDetailsFieldsProps) => {
+  if (!fields.length) {
+    return null;
+  }
+  const styles = useStyles2(getFieldsStyles);
+  const getLogs = useCallback(() => logs, [logs]);
+  const filteredFields = useMemo(() => (search ? filterFields(fields, search) : fields), [fields, search]);
+
+  if (filteredFields.length === 0) {
+    return t('logs.log-line-details.search.no-results', 'No results to display.');
+  }
+
+  return (
+    <div className={disableActions ? styles.fieldsTableNoActions : styles.fieldsTable}>
+      {filteredFields.map((field, i) => (
+        <LogLineDetailsField
+          key={`${field.keys[0]}=${field.values[0]}-${i}`}
+          disableActions={disableActions}
+          getLogs={getLogs}
+          fieldIndex={field.fieldIndex}
+          keys={field.keys}
+          links={field.links}
+          log={log}
+          values={field.values}
+        />
+      ))}
+    </div>
+  );
+};
+
+interface LinkModelWithIcon extends LinkModel<Field> {
+  icon?: IconName;
+}
+
+export interface LabelWithLinks {
+  key: string;
+  value: string;
+  links?: LinkModelWithIcon[];
+}
+
+interface LogLineDetailsLabelFieldsProps {
+  fields: LabelWithLinks[];
+  log: LogListModel;
+  logs: LogListModel[];
+  search?: string;
+}
+
+export const LogLineDetailsLabelFields = ({ fields, log, logs, search }: LogLineDetailsLabelFieldsProps) => {
+  if (!fields.length) {
+    return null;
+  }
+  const styles = useStyles2(getFieldsStyles);
+  const getLogs = useCallback(() => logs, [logs]);
+  const filteredFields = useMemo(() => (search ? filterLabels(fields, search) : fields), [fields, search]);
+
+  if (filteredFields.length === 0) {
+    return t('logs.log-line-details.search.no-results', 'No results to display.');
+  }
+
+  return (
+    <div className={styles.fieldsTable}>
+      {filteredFields.map((field, i) => (
+        <LogLineDetailsField
+          key={`${field.key}=${field.value}-${i}`}
+          getLogs={getLogs}
+          isLabel
+          keys={[field.key]}
+          links={field.links}
+          log={log}
+          values={[field.value]}
+        />
+      ))}
+    </div>
+  );
+};
+
+const getFieldsStyles = (theme: GrafanaTheme2) => ({
+  fieldsTable: css({
+    display: 'grid',
+    gap: theme.spacing(1),
+    gridTemplateColumns: `${theme.spacing(11.5)} minmax(15%, 30%) 1fr`,
+  }),
+  fieldsTableNoActions: css({
+    display: 'grid',
+    gap: theme.spacing(1),
+    gridTemplateColumns: `minmax(15%, 30%) 1fr`,
+  }),
+});
+
+interface LogLineDetailsFieldProps {
+  keys: string[];
+  values: string[];
+  disableActions?: boolean;
+  fieldIndex?: number;
+  getLogs(): LogListModel[];
+  isLabel?: boolean;
+  links?: LinkModelWithIcon[];
+  log: LogListModel;
+}
+
+export const LogLineDetailsField = ({
+  disableActions = false,
+  fieldIndex,
+  getLogs,
+  isLabel,
+  links,
+  log,
+  keys,
+  values,
+}: LogLineDetailsFieldProps) => {
+  const [showFieldsStats, setShowFieldStats] = useState(false);
+  const [fieldCount, setFieldCount] = useState(0);
+  const [fieldStats, setFieldStats] = useState<LogLabelStatsModel[] | null>(null);
+  const {
+    app,
+    closeDetails,
+    displayedFields,
+    isLabelFilterActive,
+    onClickFilterLabel,
+    onClickFilterOutLabel,
+    onClickShowField,
+    onClickHideField,
+    onPinLine,
+    pinLineButtonTooltipTitle,
+  } = useLogListContext();
+
+  const styles = useStyles2(getFieldStyles);
+
+  const getStats = useCallback(() => {
+    if (isLabel) {
+      return calculateLogsLabelStats(getLogs(), keys[0]);
+    }
+    if (fieldIndex !== undefined) {
+      return calculateStats(log.dataFrame.fields[fieldIndex].values);
+    }
+    return [];
+  }, [fieldIndex, getLogs, isLabel, keys, log.dataFrame.fields]);
+
+  const updateStats = useCallback(() => {
+    const newStats = getStats();
+    const newCount = newStats.reduce((sum, stat) => sum + stat.count, 0);
+    if (!isEqual(fieldStats, newStats) || fieldCount !== newCount) {
+      setFieldStats(newStats);
+      setFieldCount(newCount);
+    }
+  }, [fieldCount, fieldStats, getStats]);
+
+  useEffect(() => {
+    if (showFieldsStats) {
+      updateStats();
+    }
+  }, [showFieldsStats, updateStats]);
+
+  const showField = useCallback(() => {
+    if (onClickShowField) {
+      onClickShowField(keys[0]);
+    }
+
+    reportInteraction('grafana_explore_logs_log_details_replace_line_clicked', {
+      datasourceType: log.datasourceType,
+      logRowUid: log.uid,
+      type: 'enable',
+    });
+  }, [onClickShowField, keys, log.datasourceType, log.uid]);
+
+  const hideField = useCallback(() => {
+    if (onClickHideField) {
+      onClickHideField(keys[0]);
+    }
+
+    reportInteraction('grafana_explore_logs_log_details_replace_line_clicked', {
+      datasourceType: log.datasourceType,
+      logRowUid: log.uid,
+      type: 'disable',
+    });
+  }, [onClickHideField, keys, log.datasourceType, log.uid]);
+
+  const filterLabel = useCallback(() => {
+    if (onClickFilterLabel) {
+      onClickFilterLabel(keys[0], values[0], logRowToSingleRowDataFrame(log) || undefined);
+    }
+
+    reportInteraction('grafana_explore_logs_log_details_filter_clicked', {
+      datasourceType: log.datasourceType,
+      filterType: 'include',
+      logRowUid: log.uid,
+    });
+  }, [onClickFilterLabel, keys, values, log]);
+
+  const filterOutLabel = useCallback(() => {
+    if (onClickFilterOutLabel) {
+      onClickFilterOutLabel(keys[0], values[0], logRowToSingleRowDataFrame(log) || undefined);
+    }
+
+    reportInteraction('grafana_explore_logs_log_details_filter_clicked', {
+      datasourceType: log.datasourceType,
+      filterType: 'exclude',
+      logRowUid: log.uid,
+    });
+  }, [onClickFilterOutLabel, keys, values, log]);
+
+  const labelFilterActive = useCallback(async () => {
+    if (isLabelFilterActive) {
+      return await isLabelFilterActive(keys[0], values[0], log.dataFrame?.refId);
+    }
+    return false;
+  }, [isLabelFilterActive, keys, values, log.dataFrame?.refId]);
+
+  const showStats = useCallback(() => {
+    setShowFieldStats((showFieldStats: boolean) => !showFieldStats);
+
+    reportInteraction('grafana_explore_logs_log_details_stats_clicked', {
+      dataSourceType: log.datasourceType,
+      fieldType: isLabel ? 'label' : 'detectedField',
+      type: showFieldsStats ? 'close' : 'open',
+      logRowUid: log.uid,
+      app,
+    });
+  }, [app, isLabel, log.datasourceType, log.uid, showFieldsStats]);
+
+  const refIdTooltip = useMemo(
+    () => (app === CoreApp.Explore && log.dataFrame?.refId ? ` in query ${log.dataFrame?.refId}` : ''),
+    [app, log.dataFrame?.refId]
+  );
+  const singleKey = keys.length === 1;
+  const singleValue = values.length === 1;
+
+  return (
+    <>
+      <div className={styles.row}>
+        {!disableActions && (
+          <div className={styles.actions}>
+            {onClickFilterLabel && (
+              <AsyncIconButton
+                name="search-plus"
+                onClick={filterLabel}
+                // We purposely want to pass a new function on every render to allow the active state to be updated when log details remains open between updates.
+                isActive={labelFilterActive}
+                tooltipSuffix={refIdTooltip}
+              />
+            )}
+            {onClickFilterOutLabel && (
+              <IconButton
+                name="search-minus"
+                tooltip={
+                  app === CoreApp.Explore && log.dataFrame?.refId
+                    ? t('logs.log-line-details.fields.filter-out-query', 'Filter out value in query {{query}}', {
+                        query: log.dataFrame?.refId,
+                      })
+                    : t('logs.log-line-details.fields.filter-out', 'Filter out value')
+                }
+                onClick={filterOutLabel}
+              />
+            )}
+            {singleKey && displayedFields.includes(keys[0]) && (
+              <IconButton
+                variant="primary"
+                tooltip={t('logs.log-line-details.fields.toggle-field-button.hide-this-field', 'Hide this field')}
+                name="eye"
+                onClick={hideField}
+              />
+            )}
+            {singleKey && !displayedFields.includes(keys[0]) && (
+              <IconButton
+                tooltip={t(
+                  'logs.log-line-details.fields.toggle-field-button.field-instead-message',
+                  'Show this field instead of the message'
+                )}
+                name="eye"
+                onClick={showField}
+              />
+            )}
+            <IconButton
+              variant={showFieldsStats ? 'primary' : 'secondary'}
+              name="signal"
+              tooltip={t('logs.log-line-details.fields.adhoc-statistics', 'Ad-hoc statistics')}
+              className="stats-button"
+              disabled={!singleKey}
+              onClick={showStats}
+            />
+          </div>
+        )}
+        <div className={styles.label}>{singleKey ? keys[0] : <MultipleValue values={keys} />}</div>
+        <div className={styles.value}>
+          <div className={styles.valueContainer}>
+            {singleValue ? values[0] : <MultipleValue showCopy={true} values={values} />}
+            {singleValue && <ClipboardButtonWrapper value={values[0]} />}
+          </div>
+        </div>
+      </div>
+      {links?.map((link, i) => {
+        if (link.onClick && onPinLine) {
+          const originalOnClick = link.onClick;
+          link.onClick = (e, origin) => {
+            // Pin the line
+            onPinLine(log);
+
+            // Execute the link onClick function
+            originalOnClick(e, origin);
+
+            closeDetails();
+          };
+        }
+        return (
+          <div className={styles.row} key={`${link.title}-${i}`}>
+            <div className={disableActions ? styles.linkNoActions : styles.link}>
+              <DataLinkButton
+                buttonProps={{
+                  // Show tooltip message if max number of pinned lines has been reached
+                  tooltip:
+                    typeof pinLineButtonTooltipTitle === 'object' && link.onClick
+                      ? pinLineButtonTooltipTitle
+                      : undefined,
+                  variant: 'secondary',
+                  fill: 'outline',
+                  ...(link.icon && { icon: link.icon }),
+                }}
+                link={link}
+              />
+            </div>
+          </div>
+        );
+      })}
+      {showFieldsStats && fieldStats && (
+        <div className={styles.row}>
+          <div />
+          <div className={disableActions ? undefined : styles.statsColumn}>
+            <LogLabelStats
+              className={styles.stats}
+              stats={fieldStats}
+              label={keys[0]}
+              value={values[0]}
+              rowCount={fieldCount}
+              isLabel={isLabel}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+const getFieldStyles = (theme: GrafanaTheme2) => ({
+  row: css({
+    display: 'contents',
+  }),
+  actions: css({
+    whiteSpace: 'nowrap',
+  }),
+  label: css({
+    overflowWrap: 'break-word',
+    wordBreak: 'break-word',
+  }),
+  value: css({
+    overflowWrap: 'break-word',
+    wordBreak: 'break-word',
+    button: {
+      visibility: 'hidden',
+    },
+    '&:hover': {
+      button: {
+        visibility: 'visible',
+      },
+    },
+  }),
+  link: css({
+    gridColumn: 'span 3',
+  }),
+  linkNoActions: css({
+    gridColumn: 'span 2',
+  }),
+  stats: css({
+    paddingRight: theme.spacing(1),
+    wordBreak: 'break-all',
+    width: '100%',
+    maxWidth: '50vh',
+  }),
+  statsColumn: css({
+    gridColumn: 'span 2',
+  }),
+  valueContainer: css({
+    display: 'flex',
+    alignItems: 'center',
+    lineHeight: theme.typography.body.lineHeight,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-all',
+  }),
+});
+
+const ClipboardButtonWrapper = ({ value }: { value: string }) => {
+  const styles = useStyles2(getClipboardButtonStyles);
+  return (
+    <div className={styles.button}>
+      <ClipboardButton
+        getText={() => value}
+        title={t('logs.log-line-details.fields.copy-value-to-clipboard', 'Copy value to clipboard')}
+        fill="text"
+        variant="secondary"
+        icon="copy"
+        size="md"
+      />
+    </div>
+  );
+};
+
+const getClipboardButtonStyles = (theme: GrafanaTheme2) => ({
+  button: css({
+    '& > button': {
+      color: theme.colors.text.secondary,
+      padding: 0,
+      justifyContent: 'center',
+      borderRadius: theme.shape.radius.circle,
+      height: theme.spacing(theme.components.height.sm),
+      width: theme.spacing(theme.components.height.sm),
+      svg: {
+        margin: 0,
+      },
+
+      'span > div': {
+        top: '-5px',
+        '& button': {
+          color: theme.colors.success.main,
+        },
+      },
+    },
+  }),
+});
+
+const MultipleValue = ({ showCopy, values = [] }: { showCopy?: boolean; values: string[] }) => {
+  if (values.every((val) => val === '')) {
+    return null;
+  }
+  return (
+    <table>
+      <tbody>
+        {values.map((val, i) => {
+          return (
+            <tr key={`${val}-${i}`}>
+              <td>{val}</td>
+              <td>{showCopy && val !== '' && <ClipboardButtonWrapper value={val} />}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+interface AsyncIconButtonProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+  name: IconName;
+  isActive(): Promise<boolean>;
+  tooltipSuffix: string;
+}
+
+const AsyncIconButton = ({ isActive, tooltipSuffix, ...rest }: AsyncIconButtonProps) => {
+  const [active, setActive] = useState(false);
+  const tooltip = active ? 'Remove filter' : 'Filter for value';
+
+  useEffect(() => {
+    isActive().then(setActive);
+  }, [isActive]);
+
+  return <IconButton {...rest} variant={active ? 'primary' : undefined} tooltip={tooltip + tooltipSuffix} />;
+};
+
+function filterFields(fields: FieldDef[], search: string) {
+  const keys = fields.map((field) => field.keys.join(' '));
+  const keysIdx = fuzzySearch(keys, search);
+  const values = fields.map((field) => field.values.join(' '));
+  const valuesIdx = fuzzySearch(values, search);
+
+  const results = keysIdx.map((index) => fields[index]);
+  valuesIdx.forEach((index) => {
+    if (!results.includes(fields[index])) {
+      results.push(fields[index]);
+    }
+  });
+
+  return results;
+}
+
+function filterLabels(labels: LabelWithLinks[], search: string) {
+  const keys = labels.map((field) => field.key);
+  const keysIdx = fuzzySearch(keys, search);
+  const values = labels.map((field) => field.value);
+  const valuesIdx = fuzzySearch(values, search);
+
+  const results = keysIdx.map((index) => labels[index]);
+  valuesIdx.forEach((index) => {
+    if (!results.includes(labels[index])) {
+      results.push(labels[index]);
+    }
+  });
+
+  return results;
+}
diff --git a/public/app/features/logs/components/panel/LogLineDetailsHeader.tsx b/public/app/features/logs/components/panel/LogLineDetailsHeader.tsx
new file mode 100644
index 00000000000..2c76d814cb6
--- /dev/null
+++ b/public/app/features/logs/components/panel/LogLineDetailsHeader.tsx
@@ -0,0 +1,216 @@
+import { css } from '@emotion/css';
+import { useCallback, useMemo, MouseEvent, useRef, ChangeEvent } from 'react';
+
+import { colorManipulator, GrafanaTheme2, LogRowModel } from '@grafana/data';
+import { t } from '@grafana/i18n';
+import { IconButton, Input, useStyles2 } from '@grafana/ui';
+
+import { copyText, handleOpenLogsContextClick } from '../../utils';
+import { LOG_LINE_BODY_FIELD_NAME } from '../LogDetailsBody';
+
+import { useLogIsPinned, useLogListContext } from './LogListContext';
+import { LogListModel } from './processing';
+
+interface Props {
+  log: LogListModel;
+  search: string;
+  onSearch(newSearch: string): void;
+}
+
+export const LogLineDetailsHeader = ({ log, search, onSearch }: Props) => {
+  const {
+    closeDetails,
+    displayedFields,
+    getRowContextQuery,
+    logSupportsContext,
+    onClickHideField,
+    onClickShowField,
+    onOpenContext,
+    onPermalinkClick,
+    onPinLine,
+    onUnpinLine,
+  } = useLogListContext();
+  const pinned = useLogIsPinned(log);
+  const styles = useStyles2(getStyles);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const copyLogLine = useCallback(() => {
+    copyText(log.entry, containerRef);
+  }, [log.entry]);
+
+  const copyLinkToLogLine = useCallback(() => {
+    onPermalinkClick?.(log);
+  }, [log, onPermalinkClick]);
+
+  const togglePinning = useCallback(() => {
+    if (pinned) {
+      onUnpinLine?.(log);
+    } else {
+      onPinLine?.(log);
+    }
+  }, [log, onPinLine, onUnpinLine, pinned]);
+
+  const shouldlogSupportsContext = useMemo(
+    () => (logSupportsContext ? logSupportsContext(log) : false),
+    [log, logSupportsContext]
+  );
+
+  const showContext = useCallback(
+    async (event: MouseEvent<HTMLElement>) => {
+      handleOpenLogsContextClick(event, log, getRowContextQuery, (log: LogRowModel) => onOpenContext?.(log, () => {}));
+    },
+    [onOpenContext, getRowContextQuery, log]
+  );
+
+  const showLogLineToggle = onClickHideField && onClickShowField && displayedFields.length > 0;
+  const logLineDisplayed = displayedFields.includes(LOG_LINE_BODY_FIELD_NAME);
+
+  const toggleLogLine = useCallback(() => {
+    if (logLineDisplayed) {
+      onClickHideField?.(LOG_LINE_BODY_FIELD_NAME);
+    } else {
+      onClickShowField?.(LOG_LINE_BODY_FIELD_NAME);
+    }
+  }, [logLineDisplayed, onClickHideField, onClickShowField]);
+
+  const clearSearch = useMemo(
+    () => (
+      <IconButton
+        name="times"
+        size="sm"
+        onClick={() => {
+          onSearch('');
+          if (inputRef.current) {
+            inputRef.current.value = '';
+          }
+        }}
+        tooltip={t('logs.log-line-details.clear-search', 'Clear')}
+      />
+    ),
+    [onSearch]
+  );
+
+  const handleSearch = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onSearch(e.target.value);
+    },
+    [onSearch]
+  );
+
+  return (
+    <div className={styles.header} ref={containerRef}>
+      <Input
+        onChange={handleSearch}
+        placeholder={t('logs.log-line-details.search-placeholder', 'Search field names and values')}
+        ref={inputRef}
+        suffix={search !== '' ? clearSearch : undefined}
+      />
+      {showLogLineToggle && (
+        <IconButton
+          tooltip={
+            logLineDisplayed
+              ? t('logs.log-line-details.hide-log-line', 'Hide log line')
+              : t('logs.log-line-details.show-log-line', 'Show log line')
+          }
+          tooltipPlacement="top"
+          size="md"
+          name="eye"
+          onClick={toggleLogLine}
+          tabIndex={0}
+          variant={logLineDisplayed ? 'primary' : undefined}
+        />
+      )}
+      <IconButton
+        tooltip={t('logs.log-line-details.copy-to-clipboard', 'Copy to clipboard')}
+        tooltipPlacement="top"
+        size="md"
+        name="copy"
+        onClick={copyLogLine}
+        tabIndex={0}
+      />
+      {onPermalinkClick && log.rowId !== undefined && log.uid && (
+        <IconButton
+          tooltip={t('logs.log-line-details.copy-shortlink', 'Copy shortlink')}
+          tooltipPlacement="top"
+          size="md"
+          name="share-alt"
+          onClick={copyLinkToLogLine}
+          tabIndex={0}
+        />
+      )}
+      {pinned && onUnpinLine && (
+        <IconButton
+          size="md"
+          name="gf-pin"
+          onClick={togglePinning}
+          tooltip={t('logs.log-line-details.unpin-line', 'Unpin log')}
+          tooltipPlacement="top"
+          tabIndex={0}
+          variant="primary"
+        />
+      )}
+      {!pinned && onPinLine && (
+        <IconButton
+          size="md"
+          name="gf-pin"
+          onClick={togglePinning}
+          tooltip={t('logs.log-line-details.pin-line', 'Pin log')}
+          tooltipPlacement="top"
+          tabIndex={0}
+        />
+      )}
+      {shouldlogSupportsContext && (
+        <IconButton
+          size="md"
+          name="gf-show-context"
+          onClick={showContext}
+          tooltip={t('logs.log-line-details.show-context', 'Show context')}
+          tooltipPlacement="top"
+          tabIndex={0}
+        />
+      )}
+      <IconButton
+        name="times"
+        aria-label={t('logs.log-line-details.close', 'Close log details')}
+        onClick={closeDetails}
+      />
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    overflow: 'auto',
+    height: '100%',
+  }),
+  scrollContainer: css({
+    overflow: 'auto',
+    height: '100%',
+  }),
+  header: css({
+    alignItems: 'center',
+    background: theme.colors.background.canvas,
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(0.75),
+    zIndex: theme.zIndex.navbarFixed,
+    height: theme.spacing(5.5),
+    marginBottom: theme.spacing(1),
+    padding: theme.spacing(0.5, 1),
+    position: 'sticky',
+    top: 0,
+  }),
+  copyLogButton: css({
+    padding: 0,
+    height: theme.spacing(4),
+    width: theme.spacing(2.5),
+    overflow: 'hidden',
+    '&:hover': {
+      backgroundColor: colorManipulator.alpha(theme.colors.text.primary, 0.12),
+    },
+  }),
+  componentWrapper: css({
+    padding: theme.spacing(0, 1, 1, 1),
+  }),
+});
diff --git a/public/app/features/logs/components/panel/LogList.tsx b/public/app/features/logs/components/panel/LogList.tsx
index acdbc0dc593..933ca2dde59 100644
--- a/public/app/features/logs/components/panel/LogList.tsx
+++ b/public/app/features/logs/components/panel/LogList.tsx
@@ -191,6 +191,7 @@ export const LogList = ({
           initialScrollPosition={initialScrollPosition}
           loading={loading}
           loadMore={loadMore}
+          logOptionsStorageKey={logOptionsStorageKey}
           logs={logs}
           showControls={showControls}
           timeRange={timeRange}
@@ -209,6 +210,7 @@ const LogListComponent = ({
   initialScrollPosition = 'top',
   loading,
   loadMore,
+  logOptionsStorageKey,
   logs,
   showControls,
   timeRange,
@@ -459,7 +461,7 @@ const LogListComponent = ({
       {showDetails.length > 0 && (
         <LogLineDetails
           containerElement={containerElement}
-          getFieldLinks={getFieldLinks}
+          logOptionsStorageKey={logOptionsStorageKey}
           logs={filteredLogs}
           onResize={handleLogDetailsResize}
         />
diff --git a/public/app/features/logs/components/panel/__mocks__/LogListContext.tsx b/public/app/features/logs/components/panel/__mocks__/LogListContext.tsx
index df35eb00704..f0cb9be3ce6 100644
--- a/public/app/features/logs/components/panel/__mocks__/LogListContext.tsx
+++ b/public/app/features/logs/components/panel/__mocks__/LogListContext.tsx
@@ -73,7 +73,7 @@ export const defaultValue: LogListContextData = {
   setWrapLogMessage: jest.fn(),
   closeDetails: jest.fn(),
   detailsDisplayed: jest.fn(),
-  detailsWidth: 0,
+  detailsWidth: 300,
   downloadLogs: jest.fn(),
   enableLogDetails: false,
   filterLevels: [],
@@ -130,11 +130,12 @@ export const LogListContextProvider = ({
   onUnpinLine = jest.fn(),
   permalinkedLogId,
   pinnedLogs = [],
+  showDetails = [],
   showTime = true,
   sortOrder = LogsSortOrder.Descending,
   syntaxHighlighting = true,
   wrapLogMessage = true,
-}: Partial<Props>) => {
+}: Partial<Props> & { showDetails?: LogListModel[] }) => {
   const hasLogsWithErrors = logs.some((log) => !!checkLogsError(log));
   const hasSampledLogs = logs.some((log) => !!checkLogsSampled(log));
 
@@ -172,6 +173,7 @@ export const LogListContextProvider = ({
         setSortOrder: jest.fn(),
         setSyntaxHighlighting: jest.fn(),
         setWrapLogMessage: jest.fn(),
+        showDetails,
         showTime,
         sortOrder,
         syntaxHighlighting,
diff --git a/public/app/features/logs/utils.ts b/public/app/features/logs/utils.ts
index 16460c350ec..8524f6f1956 100644
--- a/public/app/features/logs/utils.ts
+++ b/public/app/features/logs/utils.ts
@@ -30,6 +30,7 @@ import {
   Field,
   LogsMetaItem,
 } from '@grafana/data';
+import { t } from '@grafana/i18n';
 import { getConfig } from 'app/core/config';
 
 import { getLogsExtractFields } from '../explore/Logs/LogsTable';
@@ -391,35 +392,33 @@ function getLabelTypeFromFrame(labelKey: string, frame: DataFrame, index: number
   return typeField[labelKey] ?? null;
 }
 
-export function getLabelTypeFromRow(label: string, row: LogRowModel) {
+export function getLabelTypeFromRow(label: string, row: LogRowModel, plural = false) {
   if (!row.datasourceType) {
     return null;
   }
-  const idField = row.dataFrame.fields.find((field) => field.name === 'id');
-  if (!idField) {
-    return null;
-  }
-  const rowIndex = idField.values.findIndex((id) => id === row.rowId);
-  if (rowIndex < 0) {
-    return null;
-  }
-  const labelType = getLabelTypeFromFrame(label, row.dataFrame, rowIndex);
+  const labelType = getLabelTypeFromFrame(label, row.dataFrame, row.rowIndex);
   if (!labelType) {
     return null;
   }
-  return getDataSourceLabelType(labelType, row.datasourceType);
+  return getDataSourceLabelType(labelType, row.datasourceType, plural);
 }
 
-function getDataSourceLabelType(labelType: string, datasourceType: string) {
+function getDataSourceLabelType(labelType: string, datasourceType: string, plural: boolean) {
   switch (datasourceType) {
     case 'loki':
       switch (labelType) {
         case 'I':
-          return 'Indexed label';
+          return plural
+            ? t('logs.fields.type.loki.indexed-label-plural', 'Indexed labels')
+            : t('logs.fields.type.loki.indexed-label', 'Indexed label');
         case 'S':
-          return 'Structured metadata';
+          return plural
+            ? t('logs.fields.type.loki.structured-metadata-plural', 'Structured metadata')
+            : t('logs.fields.type.loki.structured-metadata', 'Structured metadata');
         case 'P':
-          return 'Parsed label';
+          return plural
+            ? t('logs.fields.type.loki.parsed-label-plural', 'Parsed fields')
+            : t('logs.fields.type.loki.parsedl-label', 'Parsed field');
         default:
           return null;
       }
diff --git a/public/app/plugins/panel/table/table-new/module.tsx b/public/app/plugins/panel/table/table-new/module.tsx
index 06d61bc11f9..ddd3c7480eb 100644
--- a/public/app/plugins/panel/table/table-new/module.tsx
+++ b/public/app/plugins/panel/table/table-new/module.tsx
@@ -102,6 +102,16 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(TablePanel)
           description: t('table-new.description-column-filter', 'Enables/disables field filters in table'),
           defaultValue: defaultTableFieldOptions.filterable,
         })
+        .addBooleanSwitch({
+          path: 'wrapHeaderText',
+          name: t('table.name-wrap-header-text', 'Wrap header text'),
+          description: t(
+            'table.description-wrap-header-text',
+            'Enables text wrapping for the field name in the table header'
+          ),
+          category,
+          defaultValue: defaultTableFieldOptions.wrapHeaderText,
+        })
         .addBooleanSwitch({
           path: 'hidden',
           name: t('table-new.name-hide-in-table', 'Hide in table'),
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index f9b3241693b..8c65d4ed09f 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -8356,6 +8356,18 @@
     "description-enable-infinite-scrolling": "Experimental. Request more results by scrolling to the bottom of the logs list.",
     "description-enable-syntax-highlighting": "Use a predefined syntax coloring grammar to highlight relevant parts of the log lines",
     "description-show-controls": "Display controls to jump to the last or first log line, and filters by log level",
+    "fields": {
+      "type": {
+        "loki": {
+          "indexed-label": "Indexed label",
+          "indexed-label-plural": "Indexed labels",
+          "parsed-label-plural": "Parsed fields",
+          "parsedl-label": "Parsed field",
+          "structured-metadata": "Structured metadata",
+          "structured-metadata-plural": "Structured metadata"
+        }
+      }
+    },
     "font-size-options": {
       "label-default": "Default",
       "label-small": "Small"
@@ -8379,7 +8391,6 @@
       "label-wrap-lines": "Wrap lines"
     },
     "log-details": {
-      "close": "Close log details",
       "fields": "Fields",
       "links": "Links",
       "log-line": "Log line",
@@ -8405,6 +8416,35 @@
       "show-more": "show more",
       "tooltip-error": "Error: {{errorMessage}}"
     },
+    "log-line-details": {
+      "clear-search": "Clear",
+      "close": "Close log details",
+      "copy-shortlink": "Copy shortlink",
+      "copy-to-clipboard": "Copy to clipboard",
+      "fields": {
+        "adhoc-statistics": "Ad-hoc statistics",
+        "copy-value-to-clipboard": "Copy value to clipboard",
+        "filter-out": "Filter out value",
+        "filter-out-query": "Filter out value in query {{query}}",
+        "toggle-field-button": {
+          "field-instead-message": "Show this field instead of the message",
+          "hide-this-field": "Hide this field"
+        }
+      },
+      "fields-section": "Fields",
+      "hide-log-line": "Hide log line",
+      "links-section": "Links",
+      "log-line-section": "Log line",
+      "no-details": "No fields to display.",
+      "pin-line": "Pin log",
+      "search": {
+        "no-results": "No results to display."
+      },
+      "search-placeholder": "Search field names and values",
+      "show-context": "Show context",
+      "show-log-line": "Show log line",
+      "unpin-line": "Unpin log"
+    },
     "log-line-menu": {
       "copy-link": "Copy link to log line",
       "copy-log": "Copy log line",
@@ -8531,6 +8571,7 @@
     "un-themed-log-details": {
       "aria-label-data-links": "Data links",
       "aria-label-fields": "Fields",
+      "aria-label-line": "Log line",
       "aria-label-log-level": "Log level",
       "aria-label-no-details": "No details"
     },
@@ -11388,6 +11429,7 @@
     "description-count-rows": "Display a single count for all data rows",
     "description-fields": "Select the fields that should be calculated",
     "description-min-column-width": "The minimum width for column auto resizing",
+    "description-wrap-header-text": "Enables text wrapping for the field name in the table header",
     "image-cell-options-editor": {
       "description-alt-text": "Alternative text that will be displayed if an image can't be displayed or for users who use a screen reader",
       "description-title-text": "Text that will be displayed when the image is hovered by a cursor",
@@ -11408,6 +11450,7 @@
     "name-min-column-width": "Minimum column width",
     "name-show-table-footer": "Show table footer",
     "name-show-table-header": "Show table header",
+    "name-wrap-header-text": "Wrap header text",
     "placeholder-column-width": "auto",
     "placeholder-fields": "All Numeric Fields"
   },
diff --git a/yarn.lock b/yarn.lock
index 9439036c398..8dea57626c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3542,11 +3542,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/scenes-react@npm:^6.26.1":
-  version: 6.26.1
-  resolution: "@grafana/scenes-react@npm:6.26.1"
+"@grafana/scenes-react@npm:^6.27.0":
+  version: 6.27.0
+  resolution: "@grafana/scenes-react@npm:6.27.0"
   dependencies:
-    "@grafana/scenes": "npm:6.26.1"
+    "@grafana/scenes": "npm:6.27.0"
     lru-cache: "npm:^10.2.2"
     react-use: "npm:^17.4.0"
   peerDependencies:
@@ -3558,13 +3558,13 @@ __metadata:
     react: ^18.0.0
     react-dom: ^18.0.0
     react-router-dom: ^6.28.0
-  checksum: 10/65ab66edcc19cdd9e05071317885688106c09c72ad6ada1429a3d3bdc0605814493e3a428af9178f90f13f620e10169280c33bbc63fa6c0dd6c40b81378cc547
+  checksum: 10/4e52ad816a5ca05715ed0d317ece8ba8ccf857367f37c637edef11069b8f0db28ed41266f3bc8439ccf6af390d66e2351e17f026eb5cdc5ae516ab9afad6d18b
   languageName: node
   linkType: hard
 
-"@grafana/scenes@npm:6.26.1, @grafana/scenes@npm:^6.26.1":
-  version: 6.26.1
-  resolution: "@grafana/scenes@npm:6.26.1"
+"@grafana/scenes@npm:6.27.0, @grafana/scenes@npm:^6.27.0":
+  version: 6.27.0
+  resolution: "@grafana/scenes@npm:6.27.0"
   dependencies:
     "@floating-ui/react": "npm:^0.26.16"
     "@leeoniya/ufuzzy": "npm:^1.0.16"
@@ -3584,7 +3584,7 @@ __metadata:
     react: ^18.0.0
     react-dom: ^18.0.0
     react-router-dom: ^6.28.0
-  checksum: 10/aed5a13a17fe8ed172637cd75edae9d20815321d2145ba0b4a179950969b6a1bcbe732ac42312b7ef34e7454d18725fd23ca58934fad43ce77b1edc2efd62ef7
+  checksum: 10/c8328cc323fe513d5bbb70eea44bcd08ff7b444e4266134151ccef1f038453f99d36dec0785f95bb0565c0c1623f463000721f9b22401d45ba79bdec14112332
   languageName: node
   linkType: hard
 
@@ -18202,8 +18202,8 @@ __metadata:
     "@grafana/plugin-ui": "npm:0.10.7"
     "@grafana/prometheus": "workspace:*"
     "@grafana/runtime": "workspace:*"
-    "@grafana/scenes": "npm:^6.26.1"
-    "@grafana/scenes-react": "npm:^6.26.1"
+    "@grafana/scenes": "npm:^6.27.0"
+    "@grafana/scenes-react": "npm:^6.27.0"
     "@grafana/schema": "workspace:*"
     "@grafana/sql": "workspace:*"
     "@grafana/test-utils": "workspace:*"