Skip to content

Raw Data Table

This demo illustrates how to use ChartFactor to render its Raw Data Table component.

This is a high performance component with infinite scrolling capability. Infinite scrolling means that only viewable records are retrieved from the backend data system and loaded into the DOM (Document Object Model).

The size of its scrollbar gives users a hint on how many records exist in the underlying table even when these records have not yet been retrieved from the backend data system.

Drag a column to the left or to the right to change its position. Click or tap on the header to sort a column ascending or descending.

On the developer side, it is a common request to render all fields or all fields except for a few ones. The Raw Data Table syntax allows to accomplish this without having to name all table fields.

The table below shows raw data from the Global Stats table residing in our Elasticsearch server.

Review the complete source code and copy/paste it to create your own.
1
{"action": "import", "url": "../cf-demos/raw-data-table/index.html"}
1
{"action": "import", "url": "../cf-demos/raw-data-table/index.js"}
1
{"action": "import", "url": "../cf-demos/raw-data-table/style.css"}

If you want to see the demo in full screen click here

The Global Stats table was derived from data obtained from gapminder.org.