DataFrames Zoo
As data is transformed using DataFrames, their shape changes and each type of DataFrame needs a specialized UI to best reflect its characteristics. SQL Frames has built a unified UI layer capable of displaying all these various DataFrames.
UI Configurations
SQL Frames provides several UI configuration options that are listed below.
| API | Description |
|---|---|
df.ui.excelHeaders | boolean to show or not show the excel like headers |
df.ui.fillWidth | boolean to show or not show an extra empty column at the end to fill the entire available width |
df.ui.colorCoded | boolean to show various UI elements with color coding or not |
df.ui.showMenubarLeft | boolean to show or not show the left menubar |
df.ui.showMenubarRight | boolean to show or not show the right menubar |
df.ui.showSQL | boolean to show or not show the SQL inline |
Virtual Scrolling
SQL Frames data grid component is designed to display large volumes of data using row and column virtualization.
Due to browser limits (max height for a div element), only around 1 million rows are displayed even though the underlying DataFrame may hold more. However, this does not impact the data transformations such as Group By and other operations, they operate on all the rows giving correct results.
Row virtualization
SQL Frames provides row virtualization for all the various types of DataFrames including hierarchical and pivot tables. This makes it possible to display large amounts of data without causing performance issues as only a subset of rows are rendered as DOM elements.
The number of visible rows can be set from 5 to 500. Most computer screens can display 25 to 50 rows and at that range the scrolling feels smooth with virtualization.
The scroll performance deteriorates with higher number of visual rows. Any setting of more than 50 rows is meant mainly for viewing all the data at once and using the browser's own scrolling.
Column virtualization
SQL Frames provides column virtualization for pivot tables. This makes it possible to display large amounts of data without causing performance issues as only a subset of columns are rendered as DOM elements.
The number of visible columns depends on the available display width. When using column virtualization, the rendering of the table while scrolling horizontally is debounced for better performance. As a result, fast scrolling appears to show blank and as the scrolling comes to halt, the data becomes visible. While this is not as natural as rendering all the columns at once and scrolling, it is the best trade-off for very wide tables, especially pivot tables. However, because of this behavior, SQL Frames automatically decides whether to virtualize column display or not based on the number of columns or the total number of visible row cells.