Data grid: long headers not aligned with cells

[fengtan]

Describe the bug

If a data grid has long headers, then those aren't always aligned with cells.

To reproduce

Create a data grid by following the official documentation and specify many long headers with no space.

For instance:

  const row1 = {};
  const row2 = {};
  for(i=1;i<20;i++) {
    row1["aVeryLongHeader"+i] = "value"+i;
    row2["aVeryLongHeader"+i] = "aVeryLongValue"+i;
  };
  document.getElementById("grid").rowsData = [row1, row2];

Expected behavior

Headers and cells should be aligned so you can clearly identify the columns:

Current behavior

Headers are not aligned with the cells. Note that all cells are aligned so the problem is specific to headers vs regular cells:

Desktop (please complete the following information):

• OS Version: Ubuntu 20.04.5 LTS
• Toolkit Version: v1.0.1

[hawkticehurst]

Thank you for this catch and subsequent PR! Tested it all on my end and was able to validate both the issue and the fix :)