In this chapter, we will cover the basic and advanced features to visualize data with data iteration components provided by PrimeNG, which include DataTable, DataList, PickList, OrderList, DataGrid, DataScroller, Tree, and TreeTable. We will start with the DataTable component that offers extensive features, such as filtering, sorting, pagination, selection, reordering, column resizing, toggling, and many more. We will then focus on various other components, such as DataList, that render data in a listed format and provide data selection through the listed sets such as PickList and OrderList.
After that, we will also see two more data variation components such as DataGrid that arranges large datasets in the grid-oriented layout and DataScroller that lazily loads data according to the page scroll done by the user. The Tree and TreeTable components list data in a tree format, and they are mostly based on the same data model. At the end of this chapter, we will discuss a sophisticated component called Schedule to visualize calendar data, and we will demonstrate its usage with its lazy loading feature.
In this chapter, we will cover the following topics:
- Multi feature DataTable
- Selecting rows in DataTable
- Sorting, filtering, and paginating data in DataTable
- Customizing cell content with templating
- Resizing, reordering, and toggling columns in DataTable
- In-cell editing with DataTable
- Making DataTable responsive
- Using column and row grouping
- Handling tons of data with lazy DataTable
- Row expansion by providing row template
- Exporting data in the CSV format
- DataTable events and methods
- Listing data with DataList
- Listing data with PickList
- Listing data with OrderList
- Grid-organized data with DataGrid
- On demand data loading with DataScroller
- Visualizing data with Tree
- Visualizing data with TreeTable
- Managing events with Schedule