MPage Table Component

Overview

The MPage table component offers a simple one line option for transforming your Angular data objects into fully interactive tables. The table offers many advanced features which are all controlled through various settings you assign in your MPage code. The MPage table component dynamically adjusts its height and width to the available space of its parent container and works well with the remaining screen space directive. Column names are automatically converted to human-readable text (e.g. lastName becomes Last Name) and users can resize columns to any width they desire.

Required Imports

To use the MPage table in your component, you must import the MpageTableComponent from @clinicaloffice/mpage-developer and include it in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {MpageTableComponent} from '@clinicaloffice/mpage-developer';

@Component({
  selector: 'your-component',
    imports: [MpageTableComponent],
  templateUrl: './your-component.component.html',
  styleUrl: './your-component.component.scss',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

At a minimum, the MPage table component requires a data object to render a table. For all examples in this document, we will be using an object array called tableData, however, you can also use signals and data arrays stored in any of the Clinical Office data services.

<mpage-table [data]="tableData" />

The table in the previous example has filled the entire content of the page and has scrolled off the bottom of the screen. Horizontally, an empty zone is displayed once the table data has been rendered.

The table will automatically allow sorting by clicking the column headers and can be filtered by entering values in the filter prompts below the titles. The filter prompts automatically determine the type of prompt to show based on the content and data field name.

Other text values can have search values typed in and clicking the prefix icon switches the filter search from "starts with" to "contains". This enables your users to have the ability to control how they search for text.

Columns which have object names ending with DtTm or Date will be treated as date values and offer extensive date range filtering.

If a text column on your table has a short list of unique values, a select drop-down will be used for the filter allowing multiple filter selections.

The MPage table is equipped with virtual scrolling when embedded in a parent container with a fixed size. In the next example, we nest the table component inside a div using the coRemainingScreenSpace directive. The table sizing is now completely responsive to any changes in the window size. Scrollbars appear only when needed to allow navigation in the table. The header row and filter row are locked in place and will always be visible.

<div coRemainingScreenSpace>
    <mpage-table [data]="tableData" />
</div>

Options

The MPage table component offers several options for customization which are listed in the table below. Options can be applied directly in your HTML element.

<mpage-table [data]="tableData" (clickRow)="rowClicked($event) [params]="{showToolbar: true}" />

{
    "column": "Name of column clicked",
    "columnData": "Data inside of clicked column",
    "row": {Object containing entire row data was clicked on}
}

{
    "contextMenuAction": "ID or Name of menu item clicked",
    ... all fields in row clicked ...
}

protected myStyleLogic(column: string, data: any): any {
    if (data && column === 'vip' && data.vip) {
      return {
        fontWeight: '600',
        textDecoration: 'underline'
      }
    }
}

Customizing the table parameters

The params input ITableParams object has been designed to allow maximum flexibility in how your table is displayed to end users. Every property in the params object is optional, meaning you only have to assign the values you want to change.

The properties are as follows:

Automatic Field Name Handling

Field names in your data object determine how content is displayed on the table. Some field names will hide values, where others may display date formatting, an icon, or a checkbox.

The table below demonstrates the variations. In every case, the field name described ends with the value shown in the table (e.g. eventCd = Cd, event_cd = _cd). Any value not in the table below is treated as plain text.

Field titles will be derived from the field name. For example, name_full_formatted (nameFullFormatted) will display as "Name Full Formatted". Date/Time fields will display the dtTmLabel property in the params input in place of dtTm in the field name. (e.g. (CCL) inpatient_admit_dt_tm -> (JS) inpatientAdmitDtTm -> "Inpatient Admit Date/Time").

Customizing Columns with columnConfig

Every MPage table object contains a columnConfig regardless of whether you assigned an object with the columnConfig option. If you have assigned an IColumnConfig object to your table with the columnConfig option, you have opened up the possibility to allow programmable customization.

<mpage-table [columnConfig]="myColumnConfig" />

IColumnConfig objects contain two arrays. The first is called columns and is an IColumn array where the second array is called columnSort which is an IColumnSort array. Columns displayed in your table are displayed in order from left to right based on the position in the columns array. In the example below, columns will be displayed in the order of patientName, mrn, and birthDate.

const myColumnConfig: IColumnConfig = {
    columns: [
        { column: 'patientName', label: 'Patient Name', type: 'Text', visible: true, sticky: true, width: 300, justification: 'left' },
        { column: 'mrn', label: 'Medical Record Number', type: 'Text', visible: true, sticky: false, width: 150, justification: 'center' },
        { column: 'birthDate', label: 'Birth Date', type: 'Date', visible: true, sticky: false, width: 200, justification: 'center' }
    ],
    columnSort: [
        { column: 'patientName', sortDirection: 'asc' },
        { column: 'mrn', sortDirection: 'asc' }
    ]
}

If you do not include every field in your data object when assigning a custom column config, those fields will automatically be added to the IColumnConfig, however, the visible property will be set to false.

Context Menus and Extra Toolbar Buttons

Adding a right-click context menu and/or extra buttons to the toolbar is simple in the MPage table component.

To add a right-click context menu, you need to populate the contextMenu entry in your params object with an array of IMenuItem items. At a minimum, you need to populate a label value.

• idName: Identifier name to pass back to the contextMenuAction property in the clickContextMenu emitter.
• icon: Material Icon to display next to the label.
• label: Label text to display in the menu. If idName is omitted, label will be passed to the contextMenuAction property. If a blank string is passed to the label, a separator bar will be displayed.
• hoverText: Text to display when user hovers mouse over context menu row.

The example context menu below demonstrates the different display options available.

contextMenu: [
    {
      idName: 'med-info',
      icon: 'medical_information',
      label: 'Open Patient Chart',
      hoverText: 'Open the patient chart in PowerChart'
    },
    {
      label: ''
    },
    {
      icon: 'person',
      label: 'Patient Information'
    },
    {
      icon: 'biotech',
      label: 'Latest labs'
    },
    {
      icon: 'calendar_month',
      label: 'Upcoming Appointments'
    }
]

Extra buttons on the toolbar are also possible by assigning an IMenuItem[] array to your params.extraToolbarButtons object. The same properties are available as your context menu, however, the label property is not displayed. It will be passed to the contextMenuAction property in the clickContextMenu emitter if idName has not been assigned.

The extra buttons added to your toolbar only pass a value of contextMenuAction to the clickContextMenu emitter where a context menu additional sends the fields available on the row that was clicked when triggering the context menu.

extraToolbarButtons: [
    {
      idName: 'excel',
      icon: 'save_as',
      hoverText: 'Export to Excel'
    },
    {
      icon: 'help',
      label: 'Help',
      hoverText: 'Open help'
    }
]

Styling

The table below describes the styles specific to the MPage Table component that you can customize. These changes are global to your MPage. If you are building a component to be used in the Cerner MPage Component Framework, these styles are specific to your component and changes will have no impact on other Clinical Office components displayed on the same page.

Interfaces

ITableParams {
    allowWheelScroll?: boolean;
    showToolbar?: boolean;
    allowColumnSort?: boolean;
    hideIdValues?: boolean;
    hideCdValues?: boolean;
    dtTmLabel?: string;
    emptyDateLabel?: string;
    contextMenu?: IMenuItem[];
    extraToolbarButtons?: IMenuItem[];
    textJustification?: string;
    columnFilter?: boolean;
    filterThreshold?: number;
    listFilterSize?: number;
    autoResize?: boolean;
    maxInitialColumnWidth?: number;
    hoverValue?: boolean;
}

IFilter {
    type: string;
    column: string;
    values: any[];
    search: any[];
}

IColumn {
    column: string;
    label: string;
    type: string;
    visible: boolean;
    sticky: boolean;
    width: number;
    justification: string;
    calculation?: string;
}

IColumnSort {
    column: string;
    sortDirection: string;
}

IColumnConfig {
    columns: IColumn[];
    columnSort: IColumnSort[];
}

IMenuItem {
    idName?: string;
    icon?: string;
    label?: string;
    hoverText?: string;
}