Create Master-Detail app using Ignite UI for React components

Introduction

Have you ever wanted to create a master-detail application or learn how to visualize a large data source with subsets data items? If so, this blog post will show you how to create an application that will visualize the Global Sales Team in a list of people, locations of sales in for React IgrGeographicMap component, and sales details in React IgrLiveGrid component.

Note that the above animation does not represent actual app, where the map and grid components are updated very fast with new data for selected person in sales team.

Master-Detail view design is a great data visualization pattern for presenting large and complex data sets. As the name suggests, Master-Detail design consists of two views: master view and detail view. The master view is usually a selectable list of items such as customers, team members, products. The detail view displays data for the currently selected item in the master view.

Master-View

The master view is built using standard div, span, img, and label components.

However, first we need to generate data source for our application and create an array of items to display in the master view.

import DataUtil from "../data/DataUtil";

// declaring fields in a class:
public salesPeople: any[];
public salesData: any[];
public salesList: JSX.Element[] = [];

// generating data and items:
constructor(props: any) {
    super(props);
    this.salesPeople = DataUtil.getEmployees(100);
    this.salesList = [];
    for (let i = 0; i < this.salesPeople.length; i++) {
        const person =  this.salesPeople[i];
        this.salesList.push(this.renderItem(person, i));
    }
}

Next, we can create the master view and render each item of sales list as it is demonstrated below.

<div className="masterView">
    <div className="masterHeader">
        <img src={this.getHeaderIcon()}/>
        <label>World Sales Team</label>
    </div>
    <div className="masterList">
        <div>{this.salesList}</div>
    </div>
</div>

Detail-View

The detail view contains of a map and a grid components that are part of Ignite Ui for React and you can try them for free.

<div className="detailView">
    <div className="map" > </div>
    <div className="grid"> </div>
</div>

The IgrGeographicMap allows you to display data that contains geographic locations from your data on geographic imagery maps.

<div className="detailView">
    <div className="map" >
        <IgrGeographicMap
            ref={this.onMapRef}
            width="100%"
            height="100%"
            zoomable="true" >
            <IgrGeographicProportionalSymbolSeries
            name="sales"
            radiusScale={this.sizeScale}
            fillScale={this.fillScale}
            fillMemberPath="OrderValue"
            radiusMemberPath="OrderValue"
            latitudeMemberPath="Lat"
            longitudeMemberPath="Lon"
            markerOutline="rgba(0,0,0,0.2)"
            markerType="Circle"
            tooltipTemplate={this.onSeriesTooltipCreate}  />
        </IgrGeographicMap>
    </div>
</div>

The IgrLiveGrid is a tabular React component that allows you to quickly bind and display your data with little coding or configuration. Features of the React data grid include filtering, sorting, templates, row selection, row grouping, row pinning and movable column.

<div className="detailView">
    <div className="grid">
        <IgrLiveGrid
            ref={this.onGridRef}
            height="100%"
            width="100%"
            rowHeight="35"
            headerHeight="35"
            autoGenerateColumns="false" >
            <IgrTextColumn propertyPath="ID" width="*>70"/>
            <IgrDateTimeColumn propertyPath="OrderDate"
            headerText="Date"  width="*>100" horizontalAlignment="right" />
            <IgrNumericColumn propertyPath="OrderPrice"
            headerText="Price" width="*>90" positivePrefix="$" maxFractionDigits="0"/>
            <IgrNumericColumn propertyPath="OrderCount"
            headerText="Orders" width="*>80"/>
            <IgrNumericColumn propertyPath="OrderValue"
            headerText="Order Value" width="*>110" positivePrefix="$" />
            <IgrImageColumn propertyPath="CountryFlag"
            headerText="Country" horizontalAlignment="center"  width="90"/>
            <IgrTextColumn propertyPath="City" width="*>150"/>
        </IgrLiveGrid>
    </div>
</div>

Binding Views

After creating all views, we can bind them by setting data source in a click event of the master list.

public salesData: any[];

constructor(props: any) {
    super(props);

    this.salesPeople = DataUtil.getEmployees(100);
    // defaulting to first person in the array of sales people
    this.salesData = this.salesPeople[0].Sales;
}

public onGridRef(grid: IgrLiveGrid) {
    this.grid = grid;
    this.grid.dataSource = this.salesData;
    this.grid.flush();
    this.grid.scrollToRowByIndex(0);
}

public onMapRef(map: IgrGeographicMap) {
    this.map = map;
    this.map.dataSource = this.salesData;
    this.map.zoomToGeographic({ left: -120, top: -30, width: 180, height: 90});
}

public onMasterItemClick(event: React.MouseEvent) {
    event.preventDefault();
    const newId = event.currentTarget.id;
    this.salesData = this.salesPeople[newId].Sales;

    this.map.dataSource = this.salesData;
    this.grid.dataSource = this.salesData;
    this.grid.flush();
    this.grid.scrollToRowByIndex(0);
}

Final Thoughts

The above code snippets show the most important elements of implementing a master-detail view in React application that visualizes locations of sales in React IgrGeographicMap component, and sales details in React IgrLiveGrid component.

You can download the full source code for this application from this GitHub repository. I hope you found this blog post interesting and got inspired to create your own master-detail application using the Ignite UI for React components.

Happy coding,

Martin