// # Two Billion Rows // // An example of a [`regular-table`](https://github.com/finos/regular-table) data // model which generates data on-the-fly to simulate a 2,000,000,000 row ``. import "/dist/esm/regular-table.js"; // ## Virtual Data Model // // To simulate a _really big_ data set, this model will take advantage of the // `regular-table` Virtual Data Model to generate data only for the window // currently visible on screen. This is how _really big_: const NUM_ROWS = 2000000000; const NUM_COLUMNS = 1000; // The `dataListener` function for this virtual data set is simple, and returns the // static dimensions directly: export function dataListener(num_rows, num_columns) { return (x0, y0, x1, y1) => ({ num_rows, num_columns, row_headers: range(y0, y1, group_header.bind(null, "Row")), column_headers: range(x0, x1, group_header.bind(null, "Column")), data: range(x0, x1, (x) => range(y0, y1, (y) => formatter.format(x + y)), ), }); } // It makes copious use of the `range()` function, which generates a sequence from // [`x0` .. `x1`], mapped by the function argument `f()`. function range(x0, x1, f) { return Array.from(Array(x1 - x0).keys()).map((x) => f(x + x0)); } // Generated row and column headers, as well as header groups for every group of // 10, are also done on demand via `group_header()`, this time using the `clamp()` // function. function group_header(name, i) { const group = clamp(i, 10); return [`Group ${group}`, `${name} ${formatter.format(i)}`]; } // `clamp()` formats a number `x` to it's nearest `y` const clamp = (x, y) => formatter.format(Math.floor(x / y) * y); // ## `regular-table` Initialization // // With these, all that's left is to register the `dataListener` and draw the // `
`. export function load() { const table = document.getElementsByTagName("regular-table")[0]; const dl = dataListener(NUM_ROWS, NUM_COLUMNS); table.setDataListener(dl); table.draw(); } // ## Appendix (Utilities) // // A formatter for Numbers: const formatter = new Intl.NumberFormat("en-us");