telamonian/_regular-table_flex_layout_bug_repro.md

## _regular-table_flex_layout_bug_repro.md

      
    Raw
  

              _regular-table_flex_layout_bug_repro.md
            
          
    null

  
## flex_layout_bug.js
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());

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)),
    };
}

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

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <style>
            #outer {
                display: flex;
                flex-direction: column;
                /* height: calc(100vh - 16px); */
            }
            #inner {
                flex: 1;
                position: relative;
            }
            #supHeader {
                position: relative;
            }
        </style>
    </head>
    <body>

        <div id="outer">
            <span id="supHeader">fix the bug in devtools by setting an explicit height for at least one of the parents of &ltregular-table&gt, then running `window.init()` in the console</span>
            <div id="inner">
                <regular-table id="regularTable"></regular-table>
            </div>
        </div>
        <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="flex_layout_bug.js"></script>
    </body>
</html>
	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());

	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)),
	};
	}

	function init() {
	window.regularTable.setDataListener(dataListener);
	window.regularTable.draw();
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<style>
	#outer {
	display: flex;
	flex-direction: column;
	/* height: calc(100vh - 16px); */
	}
	#inner {
	flex: 1;
	position: relative;
	}
	#supHeader {
	position: relative;
	}
	</style>
	</head>
	<body>

	<div id="outer">
	<span id="supHeader">fix the bug in devtools by setting an explicit height for at least one of the parents of &ltregular-table&gt, then running `window.init()` in the console</span>
	<div id="inner">
	<regular-table id="regularTable"></regular-table>
	</div>
	</div>
	<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="flex_layout_bug.js"></script>
	</body>
	</html>