Skip to content

Raw Data Table Demo

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 Ticket Sales table residing in our Elasticsearch server.

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

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"}

The Ticket Sales data is derived from the Amazon’s Sample Database for Redshift. The data represents ticket sales activity for the fictional TICKIT web site, where users buy and sell tickets online for different types of events.