feat: Make it possible to limit table column widths

...to try to make them fit the container.

Author: bprusinowski

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 (
         <Flex
+          {...cell.getCellProps()}
           sx={{
             alignItems: "center",
             justifyContent:
@@ -78,19 +79,29 @@ export const CellDesktop = ({
             fontWeight: textStyle,
             px: 3,
           }}
-          {...cell.getCellProps()}
         >
           <LinkedCellWrapper cell={cell} columnMeta={columnMeta} links={links}>
-            {columnMeta.formatter(cell)}
+            <Box
+              component="span"
+              sx={{
+                ...(shouldApplyWidthLimits && {
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }),
+              }}
+            >
+              {columnMeta.formatter(cell)}
+            </Box>
           </LinkedCellWrapper>
         </Flex>
       );
     case "category":
       const { colorScale: cColorScale } = columnMeta;
       return (
         <Flex
-          sx={{ alignItems: "center", fontWeight: textStyle, pl: 1, pr: 3 }}
           {...cell.getCellProps()}
+          sx={{ alignItems: "center", fontWeight: textStyle, pl: 1, pr: 3 }}
         >
           <LinkedCellWrapper cell={cell} columnMeta={columnMeta} links={links}>
             <Tag tagColor={cColorScale(cell.value)}>

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;

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<string, ColumnMeta>;
   customSortCount: number;
   totalColumnsWidth: number;
+  shouldApplyWidthLimits: boolean;
 };
 
 const TableContentContext = createContext<TableContentProps | undefined>(
@@ -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 (
     <TableContentContext.Provider value={value}>
@@ -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
             <Box {...headerGroup.getHeaderGroupProps()}>
               {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}`}
                   >
                     <TableSortLabel
                       active={isCustomSorted}
@@ -110,12 +128,25 @@ export const TableContent = ({ children }: { children: ReactNode }) => {
                         "& svg": {
                           opacity: isCustomSorted ? 1 : 0.5,
                         },
+                        ...(hasWidthLimit && {
+                          minWidth: 0,
+                        }),
                       }}
                     >
                       <OpenMetadataPanelWrapper component={dim}>
-                        <span style={{ fontWeight: "bold" }}>
+                        <Box
+                          component="span"
+                          sx={{
+                            fontWeight: "bold",
+                            ...(hasWidthLimit && {
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap",
+                            }),
+                          }}
+                        >
                           {column.render("Header")}
-                        </span>
+                        </Box>
                       </OpenMetadataPanelWrapper>
                     </TableSortLabel>
                   </Flex>

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<Observation>,
-          rowB: Row<Observation>,
-          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<Observation>,
+            rowB: Row<Observation>,
+            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,

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}
             >
               <AutoSizer disableWidth>
                 {({ height }: { height: number }) => (

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";
+};

app/configurator/table/table-chart-configurator.tsx

@@ -110,6 +110,16 @@ export const ChartConfiguratorTable = ({
             mainLabel={<Trans id="controls.table.sorting">Sorting</Trans>}
           />
         </ControlSectionContent>
+        <ControlSectionContent>
+          <ChartOptionCheckboxField
+            label={t({
+              id: "controls.tableSettings.limitColumnWidths",
+              message: "Limit column widths",
+            })}
+            field={null}
+            path="settings.limitColumnWidths"
+          />
+        </ControlSectionContent>
       </ControlSection>
       <ControlSection collapse>
         <SectionTitle id="controls-data">

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"

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"

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"