The following screenshot shows the topmost portion of the c-raceResults component:

The c-raceResults component follows a similar implementation approach to the c-raceStandings component, but also includes some additional flexibility to support record pages in Lightning, which allows it to know which race record the user is viewing:

<template>
    <lightning-card title={raceTitle} icon-name="standard:poll">
        <lightning-datatable 
            key-field="Driver"
            data={results.data} 
            columns={columns}
            hide-checkbox-column="true">
        </lightning-datatable> 
    </lightning-card>
</template>

The following code fragments from the component are notable:

• The corresponding raceResults.js-meta.xml file references the lightning__RecordPage, lightning__AppPage, and lightning__HomePage targets, which permit the component to be dropped on to the home, record, and application page types, which can be edited by Lightning App Builder.
• The following component controller code uses the event pattern described in the Inter-component events section to receive events sent by the c-raceCalendar component described in the previous section:

import { LightningElement, api, wire, track } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import { registerListener, unregisterAllListeners} from 'c/pubsub';
import getRaceResults from '@salesforce/apex/RaceResultsComponentController.getRaceResults';

const columns = [
    { label: 'Driver', fieldName: 'Driver' },
    { label: 'Team', fieldName: 'Team' },
    { label: 'Grid', fieldName: 'Grid', 
        type: 'number', fixedWidth: 70 },
    { label: 'Race Time', fieldName: 'RaceTime' },
    { label: 'Points', fieldName: 'Points', 
        type: 'number', fixedWidth: 100 }
];

export default class RaceResults extends LightningElement {

    // Public properties
    @api
    recordId;

    // Internal properties
    @wire(CurrentPageReference) 
    pageRef;
    @wire(getRaceResults, { raceId: '$recordId' })
    results;
    @track
    columns = columns;
    @track
    raceName = '';

    get raceTitle() {
        return 'Results ' + this.raceName;
    }

    /**
     * Listen to raceSelected component event to 
     *   update the race results
     */
    connectedCallback() {
        registerListener('raceSelected', 
           this.handleRaceSelected, this);
    } 
    disconnectedCallback() {
        unregisterAllListeners(this);
    }

    /**
     * Update the bound raceId to the @wire to refresh 
     *   race details
     * @param {} race 
     */
    handleRaceSelected(race) {
        this.recordId = race.raceId;
        this.raceName = race.raceName;
    }
} 

• The connectedCallback and disconnectedCallback methods can be used to place logic that needs to be executed when a component is created or destroyed. In this case, they are used to start and stop listening to the raceSelected event.
• The @track annotation is used to instruct the framework to update the UI whenever the value in the property changes. In this case, the name of the race is updated. Note that @write properties inherit this behavior so you do not need to specify both attributes.

• The recordId property is used as a parameter to an @wire binding in the controller that corresponds to a parameter on an associated Apex controller method. If it is not null, it will load the applicable race results and display them. Since the component can be dropped on the home page, this can be null in that context. The container will automatically set an @api annotated property specifically named recordId when the component is placed on record pages (refer to the Integrating with Lightning Experience section for a screenshot illustrating this mode).
• handleRaceSelected is called when the raceSelected event is received. The method extracts raceId and raceName from the event parameters and refreshes the race results by setting the recordId property, which, in turn, causes the framework to call the Apex controller method.
• The preceding pattern allows the component to exist on both the record and home pages and still be contextual.