fix(ui-tablemode): adjust the size of the column with the initial data

[skamril]

ANT-1217

[hdinia]

update measureTextWidth to use a factory function instead:

/**
 * Uses `canvas.measureText` to compute and return the width of the specified text,
 * using the specified canvas font if defined (use font from the "body" otherwise).
 *
 * @see https://stackoverflow.com/a/21015393
 *
 * @returns The width of the text in pixels.
 */
export function createTextMeasurer() {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  const font = getFont();

  if (!context) {
    return (text: string) => 0;
  }

  context.font = font;

  return (text: string) => context.measureText(text).width;
}

[skamril]

You forget font argument, otherwise I create the canvas element outside, it's enough

[hdinia]

here a canvas is re-created at each iteration in the Math.max(), it's expensive

  const columnsWithAdjustedSize = useMemo(() => {
    const measureText = createTextMeasurer();

    return columns.map((column) => {
      if ("width" in column) {
        return column;
      }

      const maxWidth = Math.max(
        measureText(column.title),
        ...rowNames.map((rowName) => measureText(defaultData[rowName][column.id].toString())),
      );

      return { ...column, width: maxWidth };
    });
  }, [columns, defaultData, rowNames]);

see comment about domUtils.ts file for the createTextMeasurer() util using the factory function pattern to avoid re-creation of canvas

[hdinia]

const rowMarkers = useMemo<RowMarkers>(() => {
    if (rowMarkersFromProps) {
      return rowMarkersFromProps;
    }

    const measureText = createTextMeasurer();
    const maxWidth = Math.max(...rowNames.map(measureText));

    return {
      kind: "clickable-string",
      getTitle: (index) => rowNames[index],
      width: maxWidth,
    };
  }, [rowMarkersFromProps, rowNames]);

[hdinia]

here about the useEffect, not sure about it but seems not necessary no ?

  const columns = useMemo(() => {
    if (isStringRowMarkers) {
      return [{ id: "", title: "", width: rowMarkersOptions.width }, ...columnsFromProps];
    }

    return columnsFromProps;
  }, [columnsFromProps, isStringRowMarkers, rowMarkersOptions.width]);

[skamril]

setColumns is used for columns resizing