Skip to content

Instantly share code, notes, and snippets.

@telamonian

telamonian/_regular-table_row_height_bug_repro.md

Created March 30, 2021 06:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save telamonian/a1475279ed2586c02f172fecf11ea681 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save telamonian/a1475279ed2586c02f172fecf11ea681 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. telamonian renamed this gist Mar 30, 2021. 1 changed file with 0 additions and 0 deletions.
    0 _regular-tagble_row_height_bug_repro.md → _regular-table_row_height_bug_repro.md
    View file
    File renamed without changes.
  2. telamonian created this gist Mar 30, 2021.
    1 change: 1 addition & 0 deletions _regular-tagble_row_height_bug_repro.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    null
    22 changes: 22 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <style>
    .fat-header {
    display: inline-flex;
    flex-direction: column;
    height: 96px;
    }
    </style>
    </head>
    <body>
    <regular-table id="regularTable"></regular-table>
    <script>window.addEventListener("load", () => init())</script>

    <script src="https://cdn.jsdelivr.net/npm/regular-table"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/regular-table/dist/css/material.css">

    <script src="row_height_bug.js"></script>
    </body>
    </html>
    33 changes: 33 additions & 0 deletions row_height_bug.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    const _DATA = [
    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
    ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O"],
    Array.from(Array(15).keys()).map((value) => value % 2 === 0),
    ];
    const DATA = _DATA.map(x => Array.from({length: 1000}, () => x).flat());
    const FatHeader = () => {
    const header = document.createElement('div');
    header.innerHTML = ['one', 'two'].map(x => {
    return `<span>${x}</span>`;
    }).join('');
    header.className = "fat-header";

    // return header;
    return header.outerHTML;
    }

    function dataListener(x0, y0, x1, y1) {
    return {
    num_rows: DATA[0].length,
    num_columns: DATA.length,
    data: DATA.slice(x0, x1).map((col) => col.slice(y0, y1)),
    // column_headers: [[FatHeader(), 'foo'], [FatHeader(), 'bar'], [FatHeader(), 'baz']],
    // column_headers: [['foo'], ['bar'], ['baz']],
    // column_headers: [[FatHeader()], [FatHeader()], [FatHeader()]],
    column_headers: [['foo', FatHeader()], ['bar', FatHeader()], ['baz', FatHeader()]],
    };
    }

    function init() {
    window.regularTable.setDataListener(dataListener);
    window.regularTable.draw();
    }