From 9b2745a0a17354a0090eaba3ac57a46387b136d6 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 20 Jan 2026 10:25:13 +0100 Subject: [PATCH 01/11] feat: Add limitColumnWidths --- app/charts/index.ts | 1 + app/config-types.ts | 1 + app/configurator/configurator-state/mocks.ts | 6 +++- app/docs/fixtures.ts | 2 +- app/utils/chart-config/constants.ts | 4 +-- app/utils/chart-config/versioning.ts | 33 ++++++++++++++++++++ 6 files changed, 43 insertions(+), 4 deletions(-) diff --git a/app/charts/index.ts b/app/charts/index.ts index 2f18b8078..913afba99 100644 --- a/app/charts/index.ts +++ b/app/charts/index.ts @@ -616,6 +616,7 @@ export const getInitialConfig = ( settings: { showSearch: true, showAllRows: false, + limitColumnWidths: false, }, links: { enabled: false, diff --git a/app/config-types.ts b/app/config-types.ts index 9029bae39..3cda82f49 100644 --- a/app/config-types.ts +++ b/app/config-types.ts @@ -821,6 +821,7 @@ export type TableColumn = t.TypeOf; const TableSettings = t.type({ showSearch: t.boolean, showAllRows: t.boolean, + limitColumnWidths: t.boolean, }); export type TableSettings = t.TypeOf; diff --git a/app/configurator/configurator-state/mocks.ts b/app/configurator/configurator-state/mocks.ts index 75ea6d444..02372cbd7 100644 --- a/app/configurator/configurator-state/mocks.ts +++ b/app/configurator/configurator-state/mocks.ts @@ -1298,7 +1298,11 @@ export const configJoinedCubes: Partial< limits: {}, conversionUnitsByComponentId: {}, chartType: "table", - settings: { showSearch: true, showAllRows: false }, + settings: { + showSearch: true, + showAllRows: false, + limitColumnWidths: false, + }, links: { enabled: false, baseUrl: "", diff --git a/app/docs/fixtures.ts b/app/docs/fixtures.ts index 8925d874e..643258b31 100644 --- a/app/docs/fixtures.ts +++ b/app/docs/fixtures.ts @@ -1142,7 +1142,7 @@ export const tableConfig: TableConfig = { type: "identity", }, }, - settings: { showSearch: true, showAllRows: true }, + settings: { showSearch: true, showAllRows: true, limitColumnWidths: false }, links: { enabled: false, baseUrl: "", diff --git a/app/utils/chart-config/constants.ts b/app/utils/chart-config/constants.ts index 7837e2a31..7efd679ac 100644 --- a/app/utils/chart-config/constants.ts +++ b/app/utils/chart-config/constants.ts @@ -1,3 +1,3 @@ -export const CONFIGURATOR_STATE_VERSION = "5.1.0"; +export const CONFIGURATOR_STATE_VERSION = "5.2.0"; -export const CHART_CONFIG_VERSION = "5.1.0"; +export const CHART_CONFIG_VERSION = "5.2.0"; diff --git a/app/utils/chart-config/versioning.ts b/app/utils/chart-config/versioning.ts index 077555217..9cb1fc717 100644 --- a/app/utils/chart-config/versioning.ts +++ b/app/utils/chart-config/versioning.ts @@ -1672,6 +1672,33 @@ export const chartConfigMigrations: Migration[] = [ delete newConfig.links; } + return newConfig; + }, + }, + { + from: "5.1.0", + to: "5.2.0", + description: `table chart { + settings { + + limitColumnWidths + } + }`, + up: (config) => { + const newConfig = { ...config, version: "5.2.0" }; + + if (newConfig.chartType === "table") { + newConfig.settings.limitColumnWidths = false; + } + + return newConfig; + }, + down: (config) => { + const newConfig = { ...config, version: "5.1.0" }; + + if (newConfig.chartType === "table") { + delete newConfig.settings.limitColumnWidths; + } + return newConfig; }, }, @@ -2312,6 +2339,12 @@ export const configuratorStateMigrations: Migration[] = [ fromChartConfigVersion: "5.0.0", toChartConfigVersion: "5.1.0", }), + makeBumpChartConfigVersionMigration({ + fromVersion: "5.1.0", + toVersion: "5.2.0", + fromChartConfigVersion: "5.1.0", + toChartConfigVersion: "5.2.0", + }), ]; export const migrateConfiguratorState = makeMigrate( From d078b1462318113e80f2b3cc958343940e81edd9 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 20 Jan 2026 10:43:26 +0100 Subject: [PATCH 02/11] feat: Make it possible to limit table column widths ...to try to make them fit the container. --- app/charts/table/cell-desktop.tsx | 19 +++- app/charts/table/constants.ts | 1 + app/charts/table/table-content.tsx | 43 ++++++- app/charts/table/table-state.tsx | 107 +++++++++++++----- app/charts/table/table.tsx | 2 + app/charts/table/width-limit.ts | 5 + .../table/table-chart-configurator.tsx | 10 ++ app/locales/de/messages.po | 4 + app/locales/en/messages.po | 4 + app/locales/fr/messages.po | 4 + app/locales/it/messages.po | 4 + 11 files changed, 163 insertions(+), 40 deletions(-) create mode 100644 app/charts/table/width-limit.ts diff --git a/app/charts/table/cell-desktop.tsx b/app/charts/table/cell-desktop.tsx index da9eb11e4..2a2183108 100644 --- a/app/charts/table/cell-desktop.tsx +++ b/app/charts/table/cell-desktop.tsx @@ -61,12 +61,13 @@ export const CellDesktop = ({ barShowBackground, } = columnMeta; const classes = useStyles(); - const { links } = useChartState() as TableChartState; + const { links, shouldApplyWidthLimits } = useChartState() as TableChartState; switch (columnMeta.type) { case "text": return ( - {columnMeta.formatter(cell)} + + {columnMeta.formatter(cell)} + ); @@ -89,8 +100,8 @@ export const CellDesktop = ({ const { colorScale: cColorScale } = columnMeta; return ( diff --git a/app/charts/table/constants.ts b/app/charts/table/constants.ts index 53d534c22..07e9c5aa4 100644 --- a/app/charts/table/constants.ts +++ b/app/charts/table/constants.ts @@ -1,3 +1,4 @@ export const TABLE_HEIGHT = 600; export const BAR_CELL_PADDING = 12; export const SORTING_ARROW_WIDTH = 24; +export const LIMITED_COLUMN_WIDTH = 120; diff --git a/app/charts/table/table-content.tsx b/app/charts/table/table-content.tsx index 864a75d84..64e645f44 100644 --- a/app/charts/table/table-content.tsx +++ b/app/charts/table/table-content.tsx @@ -6,6 +6,7 @@ import { HeaderGroup } from "react-table"; import { SORTING_ARROW_WIDTH } from "@/charts/table/constants"; import { ColumnMeta } from "@/charts/table/table-state"; +import { columnCanBeWidthLimited } from "@/charts/table/width-limit"; import { Flex } from "@/components/flex"; import { OpenMetadataPanelWrapper } from "@/components/metadata-panel"; import { Observation } from "@/domain/data"; @@ -16,6 +17,7 @@ type TableContentProps = { tableColumnsMeta: Record; customSortCount: number; totalColumnsWidth: number; + shouldApplyWidthLimits: boolean; }; const TableContentContext = createContext( @@ -27,6 +29,7 @@ export const TableContentProvider = ({ tableColumnsMeta, customSortCount, totalColumnsWidth, + shouldApplyWidthLimits, children, }: TableContentProps & { children: ReactNode }) => { const value = useMemo(() => { @@ -35,8 +38,15 @@ export const TableContentProvider = ({ tableColumnsMeta, customSortCount, totalColumnsWidth, + shouldApplyWidthLimits, }; - }, [headerGroups, tableColumnsMeta, customSortCount, totalColumnsWidth]); + }, [ + headerGroups, + tableColumnsMeta, + customSortCount, + totalColumnsWidth, + shouldApplyWidthLimits, + ]); return ( @@ -75,8 +85,13 @@ export const TableContent = ({ children }: { children: ReactNode }) => { throw Error("Please wrap TableContent in TableContentProvider"); } - const { headerGroups, tableColumnsMeta, customSortCount, totalColumnsWidth } = - ctx; + const { + headerGroups, + tableColumnsMeta, + customSortCount, + totalColumnsWidth, + shouldApplyWidthLimits, + } = ctx; return ( <> @@ -87,10 +102,12 @@ export const TableContent = ({ children }: { children: ReactNode }) => { // eslint-disable-next-line react/jsx-key {headerGroup.headers.map((column) => { - const { dim, columnComponentType } = + const { type, dim, columnComponentType } = tableColumnsMeta[column.id]; // We assume that the customSortCount items are at the beginning of the sorted array, so any item with a lower index must be a custom sorted one const isCustomSorted = column.sortedIndex < customSortCount; + const hasWidthLimit = + shouldApplyWidthLimits && columnCanBeWidthLimited(type); return ( // eslint-disable-next-line react/jsx-key @@ -102,6 +119,7 @@ export const TableContent = ({ children }: { children: ReactNode }) => { : undefined )} {...column.getHeaderProps(column.getSortByToggleProps())} + title={`${column.Header}`} > { "& svg": { opacity: isCustomSorted ? 1 : 0.5, }, + ...(hasWidthLimit && { + minWidth: 0, + }), }} > - + {column.render("Header")} - + diff --git a/app/charts/table/table-state.tsx b/app/charts/table/table-state.tsx index ef797170a..9c88fb5ef 100644 --- a/app/charts/table/table-state.tsx +++ b/app/charts/table/table-state.tsx @@ -26,13 +26,18 @@ import { CommonChartState, } from "@/charts/shared/chart-state"; import { useSize } from "@/charts/shared/use-size"; -import { BAR_CELL_PADDING, TABLE_HEIGHT } from "@/charts/table/constants"; +import { + BAR_CELL_PADDING, + LIMITED_COLUMN_WIDTH, + TABLE_HEIGHT, +} from "@/charts/table/constants"; import { getTableUIElementsOffset } from "@/charts/table/table"; import { TableStateVariables, useTableStateData, useTableStateVariables, } from "@/charts/table/table-state-props"; +import { columnCanBeWidthLimited } from "@/charts/table/width-limit"; import { ColumnStyleCategory, ColumnStyleHeatmap, @@ -118,6 +123,7 @@ export type TableChartState = CommonChartState & groupingIds: string[]; hiddenIds: string[]; sortingIds: { id: string; desc: boolean }[]; + shouldApplyWidthLimits: boolean; links: TableLinks; }; @@ -210,11 +216,10 @@ const useTableState = ( [chartData, types] ); - // Columns used by react-table - const tableColumns = useMemo(() => { + const tableColumnsData = useMemo(() => { const allComponents = [...dimensions, ...measures]; - const columns = orderedTableColumns.map((c) => { + const columnData = orderedTableColumns.map((c) => { const headerComponent = allComponents.find((d) => d.id === c.componentId); if (!headerComponent) { @@ -228,7 +233,7 @@ const useTableState = ( const headerLabel = getLabelWithUnit(headerComponent); // The column width depends on the estimated width of the - // longest value in the column, with a minimum of 150px. + // longest value in the column, with a minimum of 50px. const columnItems = [...new Set(chartData.map((d) => d[c.componentId]))]; const columnItemSizes = [ ...columnItems.map((item) => { @@ -241,40 +246,81 @@ const useTableState = ( }), ]; - const width = Math.max( + const naturalWidth = Math.max( 50, getTextWidth(headerLabel, { fontSize: 16 }) + 44, ...columnItemSizes ); return { - Header: headerLabel, - // Slugify accessor to avoid id's "." to be parsed as JS object notation. - accessor: getSlugifiedId(c.componentId), - width, - sortType: ( - rowA: Row, - rowB: Row, - colId: string - ) => { - for (const d of sorters) { - const result = ascending( - d(rowA.values[colId]), - d(rowB.values[colId]) - ); - - if (result) { - return result; - } - } - - return 0; - }, + c, + headerComponent, + headerLabel, + sorters, + naturalWidth, + canBeWidthLimited: columnCanBeWidthLimited( + fields[c.componentId].columnStyle.type + ), }; }); - return columns; - }, [dimensions, measures, orderedTableColumns, chartData, formatNumber]); + const totalNaturalWidth = columnData.reduce( + (sum, col) => sum + col.naturalWidth, + 0 + ); + + const shouldApplyLimits = + settings.limitColumnWidths && totalNaturalWidth > chartWidth; + + const columns = columnData.map( + ({ c, headerLabel, sorters, naturalWidth, canBeWidthLimited }) => { + const width = + shouldApplyLimits && canBeWidthLimited + ? Math.min(naturalWidth, LIMITED_COLUMN_WIDTH) + : naturalWidth; + + return { + Header: headerLabel, + // Slugify accessor to avoid id's "." to be parsed as JS object notation. + accessor: getSlugifiedId(c.componentId), + width, + sortType: ( + rowA: Row, + rowB: Row, + colId: string + ) => { + for (const d of sorters) { + const result = ascending( + d(rowA.values[colId]), + d(rowB.values[colId]) + ); + + if (result) { + return result; + } + } + + return 0; + }, + }; + } + ); + + return { columns, shouldApplyLimits }; + }, [ + dimensions, + measures, + orderedTableColumns, + chartData, + formatNumber, + fields, + chartWidth, + settings.limitColumnWidths, + ]); + + // Columns used by react-table + const tableColumns = tableColumnsData.columns; + const shouldApplyWidthLimits = tableColumnsData.shouldApplyLimits; // Groupings used by react-table const groupingIds = useMemo( @@ -436,6 +482,7 @@ const useTableState = ( groupingIds, hiddenIds, sortingIds, + shouldApplyWidthLimits, xScaleTimeRange, links, ...variables, diff --git a/app/charts/table/table.tsx b/app/charts/table/table.tsx index 8241b6044..302563e4a 100644 --- a/app/charts/table/table.tsx +++ b/app/charts/table/table.tsx @@ -100,6 +100,7 @@ export const Table = () => { groupingIds, hiddenIds, sortingIds, + shouldApplyWidthLimits, } = useChartState() as TableChartState; const classes = useStyles(); @@ -370,6 +371,7 @@ export const Table = () => { tableColumnsMeta={tableColumnsMeta} customSortCount={customSortCount} totalColumnsWidth={totalColumnsWidth} + shouldApplyWidthLimits={shouldApplyWidthLimits} > {({ height }: { height: number }) => ( diff --git a/app/charts/table/width-limit.ts b/app/charts/table/width-limit.ts new file mode 100644 index 000000000..e88ed3da5 --- /dev/null +++ b/app/charts/table/width-limit.ts @@ -0,0 +1,5 @@ +import { ColumnMeta } from "@/charts/table/table-state"; + +export const columnCanBeWidthLimited = (columnType: ColumnMeta["type"]) => { + return columnType === "text" || columnType === "category"; +}; diff --git a/app/configurator/table/table-chart-configurator.tsx b/app/configurator/table/table-chart-configurator.tsx index 3770ab1b1..1ee60e187 100644 --- a/app/configurator/table/table-chart-configurator.tsx +++ b/app/configurator/table/table-chart-configurator.tsx @@ -110,6 +110,16 @@ export const ChartConfiguratorTable = ({ mainLabel={Sorting} /> + + + diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po index 0638914ae..26d8ecb0c 100644 --- a/app/locales/de/messages.po +++ b/app/locales/de/messages.po @@ -1124,6 +1124,10 @@ msgstr "Messung der linken Achse" msgid "wmts.legend-title" msgstr "Legende" +#: app/configurator/table/table-chart-configurator.tsx +msgid "controls.tableSettings.limitColumnWidths" +msgstr "Begrenzen die Spaltenbreite" + #: app/components/footer.tsx msgid "footer.button.lindas" msgstr "LINDAS Linked Data Dienste" diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po index 578ac7d92..5562ecb39 100644 --- a/app/locales/en/messages.po +++ b/app/locales/en/messages.po @@ -1124,6 +1124,10 @@ msgstr "Left axis measure" msgid "wmts.legend-title" msgstr "Legend" +#: app/configurator/table/table-chart-configurator.tsx +msgid "controls.tableSettings.limitColumnWidths" +msgstr "Limit column widths" + #: app/components/footer.tsx msgid "footer.button.lindas" msgstr "LINDAS Linked Data Services" diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po index 67a99212f..893098e53 100644 --- a/app/locales/fr/messages.po +++ b/app/locales/fr/messages.po @@ -1124,6 +1124,10 @@ msgstr "Mesure de l'axe gauche" msgid "wmts.legend-title" msgstr "Légende" +#: app/configurator/table/table-chart-configurator.tsx +msgid "controls.tableSettings.limitColumnWidths" +msgstr "Limiter la largeur des colonnes" + #: app/components/footer.tsx msgid "footer.button.lindas" msgstr "Services de données liées LINDAS" diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po index 672b1c5f1..3f956dc43 100644 --- a/app/locales/it/messages.po +++ b/app/locales/it/messages.po @@ -1124,6 +1124,10 @@ msgstr "Misura dell'asse sinistro" msgid "wmts.legend-title" msgstr "Legenda" +#: app/configurator/table/table-chart-configurator.tsx +msgid "controls.tableSettings.limitColumnWidths" +msgstr "Limita la larghezza delle colonne" + #: app/components/footer.tsx msgid "footer.button.lindas" msgstr "Servizi di dati collegati LINDAS" From 994163135a26be9449d481ad7e3f60a5dfa871e0 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 20 Jan 2026 10:43:45 +0100 Subject: [PATCH 03/11] style: Prevent letters from being vertically cut --- app/charts/table/cell-desktop.tsx | 1 + app/charts/table/table-content.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/app/charts/table/cell-desktop.tsx b/app/charts/table/cell-desktop.tsx index 2a2183108..bbe03d3e5 100644 --- a/app/charts/table/cell-desktop.tsx +++ b/app/charts/table/cell-desktop.tsx @@ -84,6 +84,7 @@ export const CellDesktop = ({ { component="span" sx={{ fontWeight: "bold", + lineHeight: 1.5, ...(hasWidthLimit && { overflow: "hidden", textOverflow: "ellipsis", From 5ec29decdba2aa0c04beebcd085cea548b62076b Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 20 Jan 2026 11:02:46 +0100 Subject: [PATCH 04/11] docs: Update CHANGELOG --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e25dcd7b3..c234e90b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,8 @@ You can also check the ## Unreleased -Nothing yet. +- Features + - Added a way to limit table column widths ### 6.2.5 - 2025-12-02 From 0e93f099f1bfffecaee70aa3b61bb1edf9b1da3a Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 20 Jan 2026 11:20:39 +0100 Subject: [PATCH 05/11] fix: Tests --- app/configurator/configurator-state/reducer.spec.tsx | 2 +- e2e/limits.spec.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/configurator/configurator-state/reducer.spec.tsx b/app/configurator/configurator-state/reducer.spec.tsx index c282d894e..22fdd6c06 100644 --- a/app/configurator/configurator-state/reducer.spec.tsx +++ b/app/configurator/configurator-state/reducer.spec.tsx @@ -606,7 +606,7 @@ describe("deriveFiltersFromFields", () => { "it": "", }, }, - "version": "5.1.0", + "version": "5.2.0", } `); }); diff --git a/e2e/limits.spec.ts b/e2e/limits.spec.ts index 086b56bfb..197b6003f 100644 --- a/e2e/limits.spec.ts +++ b/e2e/limits.spec.ts @@ -3,7 +3,8 @@ import { setup } from "./common"; const { test, expect } = setup(); -test("future, time-range limits should be displayed in the chart", async ({ +// Skipping the test, as cube is broken now. +test.skip("future, time-range limits should be displayed in the chart", async ({ page, selectors, }) => { From a84e327a58b197f34743f9cfd18587038e4c5bad Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 20 Jan 2026 13:28:22 +0100 Subject: [PATCH 06/11] fix: Constraining of link cells' width --- app/charts/table/linked-cell-wrapper.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/charts/table/linked-cell-wrapper.tsx b/app/charts/table/linked-cell-wrapper.tsx index dee466d23..98ee85e23 100644 --- a/app/charts/table/linked-cell-wrapper.tsx +++ b/app/charts/table/linked-cell-wrapper.tsx @@ -11,9 +11,11 @@ import { Icon } from "@/icons"; const useStyles = makeStyles((theme: Theme) => ({ link: { + overflow: "hidden", display: "inline-flex", alignItems: "center", gap: theme.spacing(1), + minWidth: 0, color: "inherit", fontWeight: "inherit", textDecoration: "none", From 18935a48382a0c749eb2741b52bffc472dd27822 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 21 Jan 2026 09:10:05 +0100 Subject: [PATCH 07/11] feat: Include cell value in title when column widths are constrained --- app/charts/table/cell-desktop.tsx | 7 ++++++- app/charts/table/linked-cell-wrapper.tsx | 4 +++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/app/charts/table/cell-desktop.tsx b/app/charts/table/cell-desktop.tsx index bbe03d3e5..a7997e5df 100644 --- a/app/charts/table/cell-desktop.tsx +++ b/app/charts/table/cell-desktop.tsx @@ -80,7 +80,12 @@ export const CellDesktop = ({ px: 3, }} > - + ; columnMeta: ColumnMeta; links: TableLinks; + includeValueInTitle?: boolean; }) => { const classes = useStyles(); const isLinkedColumn = @@ -71,7 +73,7 @@ export const LinkedCellWrapper = ({ className={classes.link} href={href} target="_parent" - title={href} + title={includeValueInTitle ? `${cell.value}: ${href}` : href} style={{ flex: 1, justifyContent: "space-between" }} > {children} From ca214e058db3cb1d5254314d03819643e88c32db Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 21 Jan 2026 14:21:40 +0100 Subject: [PATCH 08/11] feat: Use OverflowTooltip instead of explicit text ellipsis --- app/charts/table/cell-desktop.tsx | 41 ++++++++++++------------ app/charts/table/linked-cell-wrapper.tsx | 4 +-- app/charts/table/table-content.tsx | 39 +++++++++++++--------- 3 files changed, 45 insertions(+), 39 deletions(-) diff --git a/app/charts/table/cell-desktop.tsx b/app/charts/table/cell-desktop.tsx index a7997e5df..f00aa8651 100644 --- a/app/charts/table/cell-desktop.tsx +++ b/app/charts/table/cell-desktop.tsx @@ -1,4 +1,4 @@ -import { Box, Theme } from "@mui/material"; +import { Box, Theme, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import { hcl } from "d3-color"; import { ScaleLinear } from "d3-scale"; @@ -10,6 +10,7 @@ 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 { OverflowTooltip } from "@/components/overflow-tooltip"; import { Observation } from "@/domain/data"; const useStyles = makeStyles((theme: Theme) => ({ @@ -65,6 +66,8 @@ export const CellDesktop = ({ switch (columnMeta.type) { case "text": + const textContent = columnMeta.formatter(cell); + return ( - - - {columnMeta.formatter(cell)} - + + {shouldApplyWidthLimits ? ( + + + {textContent} + + + ) : ( + + {textContent} + + )} ); diff --git a/app/charts/table/linked-cell-wrapper.tsx b/app/charts/table/linked-cell-wrapper.tsx index dc62eae77..98ee85e23 100644 --- a/app/charts/table/linked-cell-wrapper.tsx +++ b/app/charts/table/linked-cell-wrapper.tsx @@ -47,13 +47,11 @@ export const LinkedCellWrapper = ({ cell, columnMeta, links, - includeValueInTitle, }: { children: ReactNode; cell: Cell; columnMeta: ColumnMeta; links: TableLinks; - includeValueInTitle?: boolean; }) => { const classes = useStyles(); const isLinkedColumn = @@ -73,7 +71,7 @@ export const LinkedCellWrapper = ({ className={classes.link} href={href} target="_parent" - title={includeValueInTitle ? `${cell.value}: ${href}` : href} + title={href} style={{ flex: 1, justifyContent: "space-between" }} > {children} diff --git a/app/charts/table/table-content.tsx b/app/charts/table/table-content.tsx index 0db98f456..f61359971 100644 --- a/app/charts/table/table-content.tsx +++ b/app/charts/table/table-content.tsx @@ -1,4 +1,4 @@ -import { Box, TableSortLabel, Theme } from "@mui/material"; +import { Box, TableSortLabel, Theme, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import clsx from "clsx"; import { createContext, ReactNode, useContext, useMemo } from "react"; @@ -9,6 +9,7 @@ import { ColumnMeta } from "@/charts/table/table-state"; import { columnCanBeWidthLimited } from "@/charts/table/width-limit"; import { Flex } from "@/components/flex"; import { OpenMetadataPanelWrapper } from "@/components/metadata-panel"; +import { OverflowTooltip } from "@/components/overflow-tooltip"; import { Observation } from "@/domain/data"; /** Workaround because react-window can't pass props to inner element */ @@ -108,6 +109,7 @@ export const TableContent = ({ children }: { children: ReactNode }) => { const isCustomSorted = column.sortedIndex < customSortCount; const hasWidthLimit = shouldApplyWidthLimits && columnCanBeWidthLimited(type); + const headerText = `${column.Header}`; return ( // eslint-disable-next-line react/jsx-key @@ -119,7 +121,7 @@ export const TableContent = ({ children }: { children: ReactNode }) => { : undefined )} {...column.getHeaderProps(column.getSortByToggleProps())} - title={`${column.Header}`} + title={headerText} > { }} > - - {column.render("Header")} - + {hasWidthLimit ? ( + + + {column.render("Header")} + + + ) : ( + + {column.render("Header")} + + )} From e0c1cae39de751d38a7225e765ed05230f5033fb Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 21 Jan 2026 14:22:00 +0100 Subject: [PATCH 09/11] chore: Limit column widths -> Responsive column widths --- app/configurator/table/table-chart-configurator.tsx | 2 +- app/locales/de/messages.po | 2 +- app/locales/en/messages.po | 2 +- app/locales/fr/messages.po | 2 +- app/locales/it/messages.po | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/configurator/table/table-chart-configurator.tsx b/app/configurator/table/table-chart-configurator.tsx index 1ee60e187..5b134750f 100644 --- a/app/configurator/table/table-chart-configurator.tsx +++ b/app/configurator/table/table-chart-configurator.tsx @@ -114,7 +114,7 @@ export const ChartConfiguratorTable = ({ Date: Wed, 21 Jan 2026 14:23:33 +0100 Subject: [PATCH 10/11] fix: Bar cell alignment --- app/charts/table/cell-desktop.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/charts/table/cell-desktop.tsx b/app/charts/table/cell-desktop.tsx index f00aa8651..ef0afadde 100644 --- a/app/charts/table/cell-desktop.tsx +++ b/app/charts/table/cell-desktop.tsx @@ -146,6 +146,7 @@ export const CellDesktop = ({ sx={{ flexDirection: "column", justifyContent: "center", + alignItems: "flex-end", // Padding is a constant accounted for in the // widthScale domain (see table state). px: `${BAR_CELL_PADDING}px`, From 6f5b62ddafd24ea5cf1b6ee16b93cb5c8d1349b3 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 21 Jan 2026 14:25:38 +0100 Subject: [PATCH 11/11] docs: Update CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c234e90b5..8fae87e87 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,7 @@ You can also check the ## Unreleased - Features - - Added a way to limit table column widths + - Added a way to make table columns responsive ### 6.2.5 - 2025-12-02