visualize-admin · bprusinowski · Nov 14, 2025 · Nov 4, 2025 · Nov 4, 2025 · Nov 4, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,20 +11,21 @@ You can also check the
 
 ## Unreleased
 
-Nothing yet.
+- Features
+  - Added a way to create a link column in table charts
 
 ### 6.1.3 - 2025-11-12
 
 - Features
   - Added dynamic iframe resize support for LivingDocs
-- Fix
+- Fixes
   - Clicking on Y axis title in bar charts now open Data tab in the details
     panels, as in other chart types
   - Fixed parsing problems with API routes
 
 ### 6.1.2 - 2025-10-22
 
-- Fix
+- Fixes
   - Correctly typed DataSourceUrl variable when querying version history of a
     cube
 

diff --git a/app/charts/index.ts b/app/charts/index.ts
@@ -617,6 +617,12 @@ export const getInitialConfig = (
           showSearch: true,
           showAllRows: false,
         },
+        links: {
+          enabled: false,
+          baseUrl: "",
+          componentId: "",
+          targetComponentId: "",
+        },
         sorting: [],
         fields: Object.fromEntries<TableColumn>(
           allDimensionsSorted.map((d, i) => [

diff --git a/app/charts/table/cell-desktop.tsx b/app/charts/table/cell-desktop.tsx
@@ -4,8 +4,10 @@ import { hcl } from "d3-color";
 import { ScaleLinear } from "d3-scale";
 import { Cell } from "react-table";
 
+import { useChartState } from "@/charts/shared/chart-state";
 import { BAR_CELL_PADDING } from "@/charts/table/constants";
-import { ColumnMeta } from "@/charts/table/table-state";
+import { LinkedCellWrapper } from "@/charts/table/linked-cell-wrapper";
+import { ColumnMeta, TableChartState } from "@/charts/table/table-state";
 import { Tag } from "@/charts/table/tag";
 import { Flex } from "@/components/flex";
 import { Observation } from "@/domain/data";
@@ -59,6 +61,7 @@ export const CellDesktop = ({
     barShowBackground,
   } = columnMeta;
   const classes = useStyles();
+  const { links } = useChartState() as TableChartState;
 
   switch (columnMeta.type) {
     case "text":
@@ -77,7 +80,9 @@ export const CellDesktop = ({
           }}
           {...cell.getCellProps()}
         >
-          {columnMeta.formatter(cell)}
+          <LinkedCellWrapper cell={cell} columnMeta={columnMeta} links={links}>
+            {columnMeta.formatter(cell)}
+          </LinkedCellWrapper>
         </Flex>
       );
     case "category":
@@ -87,9 +92,11 @@ export const CellDesktop = ({
           sx={{ alignItems: "center", fontWeight: textStyle, pl: 1, pr: 3 }}
           {...cell.getCellProps()}
         >
-          <Tag tagColor={cColorScale(cell.value)}>
-            {columnMeta.formatter(cell)}
-          </Tag>
+          <LinkedCellWrapper cell={cell} columnMeta={columnMeta} links={links}>
+            <Tag tagColor={cColorScale(cell.value)}>
+              {columnMeta.formatter(cell)}
+            </Tag>
+          </LinkedCellWrapper>
         </Flex>
       );
     case "heatmap":
@@ -109,7 +116,9 @@ export const CellDesktop = ({
           }}
           {...cell.getCellProps()}
         >
-          {columnMeta.formatter(cell)}
+          <LinkedCellWrapper cell={cell} columnMeta={columnMeta} links={links}>
+            {columnMeta.formatter(cell)}
+          </LinkedCellWrapper>
         </Flex>
       );
     case "bar":
@@ -125,39 +134,41 @@ export const CellDesktop = ({
           }}
           {...cell.getCellProps()}
         >
-          <Box>{columnMeta.formatter(cell)}</Box>
-          {cell.value !== null && widthScale && (
-            <Box
-              sx={{
-                width: widthScale.range()[1],
-                height: 18,
-                position: "relative",
-                backgroundColor: barShowBackground
-                  ? barColorBackground
-                  : "grey.100",
-              }}
-            >
+          <LinkedCellWrapper cell={cell} columnMeta={columnMeta} links={links}>
+            <Box>{columnMeta.formatter(cell)}</Box>
+            {cell.value !== null && widthScale && (
               <Box
-                className={classes.barForeground}
                 sx={{
-                  left: `${getBarLeftOffset(cell.value, widthScale)}px`,
-                  width: `${getBarWidth(cell.value, widthScale)}px`,
-                  backgroundColor:
-                    cell.value > 0 ? barColorPositive : barColorNegative,
+                  width: widthScale.range()[1],
+                  height: 18,
+                  position: "relative",
+                  backgroundColor: barShowBackground
+                    ? barColorBackground
+                    : "grey.100",
                 }}
-              />
-              <Box
-                className={classes.barBackground}
-                sx={{
-                  left: `${
-                    cell.value < 0
-                      ? widthScale(0)
-                      : getBarLeftOffset(cell.value, widthScale)
-                  }px`,
-                }}
-              />
-            </Box>
-          )}
+              >
+                <Box
+                  className={classes.barForeground}
+                  sx={{
+                    left: `${getBarLeftOffset(cell.value, widthScale)}px`,
+                    width: `${getBarWidth(cell.value, widthScale)}px`,
+                    backgroundColor:
+                      cell.value > 0 ? barColorPositive : barColorNegative,
+                  }}
+                />
+                <Box
+                  className={classes.barBackground}
+                  sx={{
+                    left: `${
+                      cell.value < 0
+                        ? widthScale(0)
+                        : getBarLeftOffset(cell.value, widthScale)
+                    }px`,
+                  }}
+                />
+              </Box>
+            )}
+          </LinkedCellWrapper>
         </Flex>
       );
     default:
@@ -177,7 +188,9 @@ export const CellDesktop = ({
           }}
           {...cell.getCellProps()}
         >
-          {columnMeta.formatter(cell)}
+          <LinkedCellWrapper cell={cell} columnMeta={columnMeta} links={links}>
+            {columnMeta.formatter(cell)}
+          </LinkedCellWrapper>
         </Flex>
       );
   }

diff --git a/app/charts/table/cell-mobile.tsx b/app/charts/table/cell-mobile.tsx
@@ -4,7 +4,8 @@ import { Cell } from "react-table";
 
 import { useChartState } from "@/charts/shared/chart-state";
 import { getBarLeftOffset, getBarWidth } from "@/charts/table/cell-desktop";
-import { ColumnMeta } from "@/charts/table/table-state";
+import { LinkedCellWrapper } from "@/charts/table/linked-cell-wrapper";
+import { ColumnMeta, TableChartState } from "@/charts/table/table-state";
 import { Tag } from "@/charts/table/tag";
 import { Flex } from "@/components/flex";
 import { Observation } from "@/domain/data";
@@ -17,7 +18,8 @@ export const DDContent = ({
   cell: Cell<Observation>;
   columnMeta: ColumnMeta;
 }) => {
-  const { bounds } = useChartState();
+  const chartState = useChartState() as TableChartState;
+  const { bounds, links } = chartState;
   const { chartWidth } = bounds;
 
   const formatNumber = useFormatNumber();
@@ -43,103 +45,116 @@ export const DDContent = ({
             fontWeight: textStyle,
           }}
         >
-          {columnComponentType === "NumericalMeasure"
-            ? formatNumber(cell.value)
-            : cell.render("Cell")}
+          <LinkedCellWrapper cell={cell} columnMeta={columnMeta} links={links}>
+            {columnComponentType === "NumericalMeasure"
+              ? formatNumber(cell.value)
+              : cell.render("Cell")}
+          </LinkedCellWrapper>
         </Box>
       );
     }
     case "category": {
       const { colorScale } = columnMeta;
       return (
-        <Tag tagColor={colorScale(cell.value)} small>
-          {cell.render("Cell")}
-        </Tag>
+        <LinkedCellWrapper cell={cell} columnMeta={columnMeta} links={links}>
+          <Tag tagColor={colorScale(cell.value)} small>
+            {cell.render("Cell")}
+          </Tag>
+        </LinkedCellWrapper>
       );
     }
     case "heatmap": {
       const { colorScale } = columnMeta;
       const isNull = cell.value === null;
       return (
-        <Box
-          sx={{
-            width: "fit-content",
-            px: 1,
-            borderRadius: "2px",
-            backgroundColor: isNull ? "grey.100" : colorScale(cell.value),
-            color: isNull
-              ? textColor
-              : hcl(colorScale(cell.value)).l < 55
-                ? "#fff"
-                : "#000",
-            fontWeight: textStyle,
-          }}
-        >
-          {formatNumber(cell.value)}
-        </Box>
+        <LinkedCellWrapper cell={cell} columnMeta={columnMeta} links={links}>
+          <Box
+            sx={{
+              width: "fit-content",
+              px: 1,
+              borderRadius: "2px",
+              backgroundColor: isNull ? "grey.100" : colorScale(cell.value),
+              color: isNull
+                ? textColor
+                : hcl(colorScale(cell.value)).l < 55
+                  ? "#fff"
+                  : "#000",
+              fontWeight: textStyle,
+            }}
+          >
+            {formatNumber(cell.value)}
+          </Box>
+        </LinkedCellWrapper>
       );
     }
     case "bar": {
       const { widthScale } = columnMeta;
       // Reset width scale range based on current viewport
       widthScale.range([0, chartWidth / 2]);
       return (
-        <Flex
-          sx={{
-            flexDirection: "column",
-            justifyContent: "center",
-            width: chartWidth / 2,
-          }}
-        >
-          <Box sx={{ width: chartWidth / 2 }}>{formatNumber(cell.value)}</Box>
-          {cell.value !== null && (
-            <Box
-              sx={{
-                position: "relative",
-                width: chartWidth / 2,
-                height: 14,
-                backgroundColor: barShowBackground
-                  ? barColorBackground
-                  : "grey.100",
-              }}
-            >
+        <LinkedCellWrapper cell={cell} columnMeta={columnMeta} links={links}>
+          <Flex
+            sx={{
+              flexDirection: "column",
+              justifyContent: "center",
+              width: chartWidth / 2,
+            }}
+          >
+            <Box sx={{ width: chartWidth / 2 }}>{formatNumber(cell.value)}</Box>
+            {cell.value !== null && (
               <Box
                 sx={{
-                  position: "absolute",
-                  top: 0,
-                  left: `${getBarLeftOffset(cell.value, widthScale)}px`,
-                  width: `${getBarWidth(cell.value, widthScale)}px`,
+                  position: "relative",
+                  width: chartWidth / 2,
                   height: 14,
-                  backgroundColor:
-                    cell.value > 0 ? barColorPositive : barColorNegative,
-                }}
-              />
-              <Box
-                sx={{
-                  position: "absolute",
-                  top: "-2px",
-                  left: `${
-                    cell.value < 0
-                      ? widthScale(0)
-                      : getBarLeftOffset(cell.value, widthScale)
-                  }px`,
-                  width: "1px",
-                  height: 18,
-                  backgroundColor: "grey.700",
+                  backgroundColor: barShowBackground
+                    ? barColorBackground
+                    : "grey.100",
                 }}
-              />
-            </Box>
-          )}
-        </Flex>
+              >
+                <Box
+                  sx={{
+                    position: "absolute",
+                    top: 0,
+                    left: `${getBarLeftOffset(cell.value, widthScale)}px`,
+                    width: `${getBarWidth(cell.value, widthScale)}px`,
+                    height: 14,
+                    backgroundColor:
+                      cell.value > 0 ? barColorPositive : barColorNegative,
+                  }}
+                />
+                <Box
+                  sx={{
+                    position: "absolute",
+                    top: "-2px",
+                    left: `${
+                      cell.value < 0
+                        ? widthScale(0)
+                        : getBarLeftOffset(cell.value, widthScale)
+                    }px`,
+                    width: "1px",
+                    height: 18,
+                    backgroundColor: "grey.700",
+                  }}
+                />
+              </Box>
+            )}
+          </Flex>
+        </LinkedCellWrapper>
       );
     }
     default: {
       return (
-        <Box component="span" sx={{ color: textColor, fontWeight: textStyle }}>
-          {columnComponentType === "NumericalMeasure"
-            ? formatNumber(cell.value)
-            : cell.render("Cell")}
-        </Box>
+        <LinkedCellWrapper cell={cell} columnMeta={columnMeta} links={links}>
+          <Box
+            component="span"
+            sx={{ color: textColor, fontWeight: textStyle }}
+          >
+            {columnComponentType === "NumericalMeasure"
+              ? formatNumber(cell.value)
+              : cell.render("Cell")}
+          </Box>
+        </LinkedCellWrapper>
       );
     }
   }