Allows you the ability to pass your own CSS configuration for some table display options. For example, passing a value of "my-table-settings" will replace the "default-table-settings" shown below. Please ensure you have defined your custom table settings in your styles.scss file and feel free to experiment with colors and sizes.

.default-table-settings {
    .mat-row {
        height: auto;
    }

    .mat-header-row {
        height: 2rem;
    }

    .mat-header-cell {
        padding: 3px 8px;
    }

    .mat-cell {
        padding: 3px 8px 3px 8px;
    }

    .mat-row:hover {
        background-color: rgb(236, 236, 236);
    }
}

Ths clickColumn emitter allows you the ability to associate an Angular method to the action of a user clicking on a single column on the table.

<mpage-table ...... (clickColumn)="tableCellClick($event)" ....>

The $event variable passed to your custom method will be of an "any" type and will contain the following content.

column: "string containing the name of the column clicked.",
columnData: 'string containing the value displayed in the clicked column.",
row: {data object representing the row that was clicked.}

Ths clickRow emitter allows you the ability to associate an Angular method to the action of a user clicking on a single row on the table.

<mpage-table ...... (clickRow)="tableRowClick($event)" ....>

The $event variable passed to your custom method will be of an "any" type and will contain the entire row being clicked.

If your table is using the contextMenu option and a user performs a right-click context menu action, a property called 'contextMenuAction' will be added to the $event variable containing the label of the context menu option chosen.

The columnConfig object contains values for custom column configuration, sorting and how many columns should be frozen on the left.

While you could write code to build out a custom columnConfig object to control which fields are displayed and which order, the intention is to provide you with an object that you can use to save end user preferences for retrieval later.

If you wish to learn more on the IColumnConfig interface documentation is provided below.

You can introduce a 'right-click' context menu into your table by passing an array of IContextMenu values into your table control. Your IContextMenu values require a label value and can optionally include an icon property representing the name of an Angular Material Icon.

You can determine which context menu was chosen by an end-user by accessing the "contextMenuAction" property passed to the (clickRow) method of the MPage table. The value for "contextMenuAction" will contain the label value associated to your IContextMenu array.

<mpage-table ...
[contextMenu]="[{icon: 'content_cut', label: 'Cut'},{icon: 'content_copy', label: 'Copy'}, {label: 'Paste']" ...
(clickRow)="tableRowClick($event)" .. >

The tableData input represents the data you wish to pass to the table. Any flat tabular data object will work including data retrieved from sources other than CCL. Each item in your data source must be of a value type that can be read by the table control such as a string, number or date value. The only exception to this rule is an optional data object called hiddenData which you can pass on additional information not shown on the table for other uses.

Field names are automatically converted from camelCase to proper case for presentation in your table. For example, "lastUpdatedBy" becomes "Last Updated By" in the heading of your table. Fields ending with the words DtTm (e.g. "serviceDtTm") indicate that the field should be displayed as a Date/Time field and the title is appropriately presented. Fields ending with the word Date will be displayed on the table as a date value without the time.

Cerner fields ending with "Id" or "Cd" are not displayed on the table unless specified in the options settings described later on this page.