JS Table Layout Adjustment: Sizing

This is the continuation of my last Blog about adjusting columns of nested tables. After I managed to categorize all cells and thus assign them to a column, I should be able to size them now.

Years ago browsers had quite different techniques to format tables. There was the special table-layout: fixed; CSS property that allowed to size cells. Nowadays browsers accept a fixed cell width even without that property, and when you set the width to both CSS width and min-width, the table layout also survives window resizes. Should you have tables that change their cell values "on the fly", it is also recommendable to set the max-width, and with it overflow-x: hidden; to avoid big contents hanging into other cells.

With colspan cells there is special problem. I decided to not touch such cells at all, and until now this worked in all cases. But a prerequisite for that is that all nested tables are stretched to 100% width, so that the colspan-cells will spread between their sized neighbor cells.

Abstract Layout Adjuster

From the tableColumnCategorizer module's init() call I get back a map of arrays, and every array represents all categorized elements of a certain nesting-level. I find the category of an element in its data-layout-category attribute.

So now I can iterate the map, starting from deepest nesting level, going up to zero. On every level I can calculate the maximum cell width for every category (visible column). Subsequently I can size all cells of a category to their maximum. To cope also with colspan cells, all nested tables are finally stretched to 100% width.

    "use strict";

    /**
     * Usage: layoutAdjuster().init(arrayOfTables);
     * @param categorizer required, puts categories into cells.
     */
    var abstractLayoutAdjuster = function(categorizer)
    {
      var calculateMaximums = function(categorizedElements) {
        var sizeMap = {};

        for (var i = 0; i < categorizedElements.length; i++) {
          var element = categorizedElements[i];

          if (that.isElementToSize(element)) {
            var category = categorizer.getCategory(element);
            var size = that.getSize(element);
            if (size > (sizeMap[category] || 0))
              sizeMap[category] = size;
          }
        }
        return sizeMap;
      };

      var calculateAndSize = function(categorizedElements) {
        var sizeMap = calculateMaximums(categorizedElements);

        for (var i = 0; i < categorizedElements.length; i++) {
          var element = categorizedElements[i];

          if (that.isElementToSize(element)) {
            var category = categorizer.getCategory(element);
            that.setSize(element, sizeMap[category]);
          }
        }
      };

      var stretchNestedContainers = function(nestedContainers, elementToLayout) {
        for (var i = 0; i < nestedContainers.length; i++) {
          var nestedContainer = nestedContainers[i];
          that.stretchElement(nestedContainer);
          
          var parent = nestedContainer.parentElement; /* stretch all parents up until TD */
          while ( ! categorizer.getCategory(parent) && parent !== elementToLayout) {
            that.stretchElement(parent);
            parent = parent.parentElement;
          }
        }
      };

      var that = {};

      /* public functions */

      /**
       * Does the layout and returns a structure for post-processing.
       * @param elementsToLayout required, array of tables to adjust.
       * @returns array of objects, per input table, with properties
       *     "levelArraysMap" (map with key = level and value = cell array of that level,
       *     "maximumLevel" (= length of levelArraysMap - 1).
       */
      that.init = function(elementsToLayout) {
        var structuredElements = [];

        for (var i = 0; i < elementsToLayout.length; i++) {
          var elementToLayout = elementsToLayout[i];
          var levelArraysMap = categorizer.init(elementToLayout);

          /* find out maximum level in map */
          var maximumLevel = -1;
          for (var level in levelArraysMap)
            if (levelArraysMap.hasOwnProperty(level) && level > maximumLevel)
              maximumLevel = level;

          for (var level = maximumLevel; level >= 0; level--)
            calculateAndSize(levelArraysMap[level]);

          /* stretch all nested tables to 100% */
          stretchNestedContainers(that.getNestedContainers(elementToLayout), elementToLayout);

          structuredElements.push({ /* provide return */
            levelArraysMap: levelArraysMap,
            maximumLevel: maximumLevel
          });
        }

        return structuredElements;
      };

      return that;
    };

For optimal encapsulation the module is split into private (var xxx = ...") and public (that.xxx = ...") functions. Mind that functions that do not yet exist, like that.setSize, are called as if they would exist. JS makes this possible, but the function must be there at runtime.

This module contains nothing specific to HTML TABLE, not even the functions to get and set sizes. That way it could be also used for adjusting row heights (mind that I named the function setSize and not setWidth). A specific module deriving this one will decide how the work is to be done, in this case by reading the JS property clientWidth, and writing the CSS property width.

Concrete TABLE Columns Adjuster

    "use strict";

    /**
     * Concrete column-adjuster for HTML TABLEs.
     */
    var nestedTablesColumnAdjuster = function(categorizer)
    {
      var that = abstractLayoutAdjuster(categorizer);

      var getPaddingsLeftRight = function(element) {
        var style = window.getComputedStyle(element);
        return window.parseInt(style["padding-left"]) + window.parseInt(style["padding-right"]);
      };

      /* public functions */

      /** @return true when given element has no colspan. */
      that.isElementToSize = function(element) {
        return categorizer.getSpan(element) <= 1;
      };

      /** @return the clientWidth of given element, which includes paddings. */
      that.getSize = function(element) {
        return element.clientWidth;
      };

      /**
       * Sets given size as CSS width to given element after subtracting paddings.
       * @param size the clientWidth to achieve (includes local paddings).
       */
      that.setSize = function(element, size) {
        size -= getPaddingsLeftRight(element);
        var cssWidth = size+"px";

        element.style["width"] = cssWidth;
        element.style["max-width"] = cssWidth;
        element.style["min-width"] = cssWidth;
        element.style["overflow-x"] = "hidden";
      };

      /** @return all nested TABLE elements below given one. */
      that.getNestedContainers = function(elementToLayout) {
        return elementToLayout.querySelectorAll("TABLE");
      };

      /** Concrete implementation of stretching an element to full size. */
      that.stretchElement = function(element) {
        element.style["max-width"] = "";
        element.style["min-width"] = "";
        element.style["width"] = "100%";
      };

      return that;
    };

This synchronizes the column widths of nested TABLE elements, whereby the given top-element needs not to be a TABLE, it could also be a DIV.

Apply Modules

To try this out, mark your test-TABLE with CSS class="layoutNestedTables" and write following initialization-JS into your test page. Of course you also will need all code from predecessor Blog.

  <script type="text/javascript">
    "use strict";

    var initLayout = function() {
      var tables = document.getElementsByClassName("layoutNestedTables");

      for (var i = 0; i < tables.length; i++) /* set tables invisible while layouting them */
        tables[i].style.visibility = "hidden";

      var categorizer = tableColumnCategorizer();
      var columnAdjuster = nestedTablesColumnAdjuster(categorizer);
      columnAdjuster.init(tables);

      for (var i = 0; i < tables.length; i++) /* set tables visible again */
        tables[i].style.visibility = "visible";
    };

    window.addEventListener("load", initLayout);

  </script>

This sets all tables to adjust to invisible. Then it allocates a categorizer and an adjuster and makes them work. Finally all tables are set visible again. This is for avoiding probably slow layout work done before the user's eye.