Implementing table grid component

This sample showcases how to create a basic dataset component, view's column metadata binding, record binding, more records from paging and record navigation to form. The component header columns and internal record values are bound to the existing views.

Available for

Model-driven apps

Code

You can download the complete sample component from here.

Column Header bind to the View:

View column info lies at context.parameters.[dataset_property_name].columns. It's an array type.

Record binding:

• The sorted record IDs are at context.parameters.[dataset_property_name].sortedRecordIds
• All records info is at context.parameters.[dataset_property_name].records
• For each record object, context.parameters.[dataset_property_name].records[record_Id]
• Formatted value could be retrieved at getFormattedValue

Load more pages of data if needed:

context.parameters.[dataset_property_name].paging provides paging functionality like hasNextPage and loadNextPage data. The Load More button is shown if it has next page data.

This sample also showcases how the component listens to the container resize.

The trackContainerResize method should be called within init method so that the mode.allocatedWidth and mode.allocatedHeight is provided each time updateView being called. If this method isn't being called initially, then they don't have allocatedWidth and allocatedHeight provided.

If the allocatedHeight is –1, that means there's no limit on height. The component should adjust its height based on the provided width.

Related articles

Download sample components
How to use the sample components
Power Apps component framework API reference
Power Apps component framework manifest schema reference