null
Last active
March 30, 2021 06:47
-
-
Save telamonian/00c777c2194e11f43bd7ade294095aa1 to your computer and use it in GitHub Desktop.
flex_layout_bug repro for `regular-table`
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 <regular-table>, 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment