Displays a value as a pill label. The style can be customized on a per value basis. So you can, for example, have "success" type values show a green label and "failure" type values show a red label.

Example

<LabelColumn name="status"
             title="Status"
             field="status"
             :textSource="source"
             :classSource="labelClasses" />

const source: Record<number, string> = {
    0: "Unknown",
    1: "Success",
    2: "Failed"
};

const labelClasses: Record<string, string> = {
    "Unknown": "warning",
    "Success": "success",
    "Failed": "danger"
};

Properties

This column provides default values for the following standard properties:

• formatComponent
• skeletonComponent
• quickFilterValue
• filterValue
• sortValue
• exportValue

textSource

Type: Record<string | number, string>
Optional

The lookup table to use to translate the raw value into a string. This can be used, for example, to translate an enum into its text format. This table is used before the classSource and colorSource tables are used.

classSource

Type: Record<string, string>
Optional

The lookup table to use when applying a custom label type tag to the badge. The key is the text value of the field. The value is a standard label suffix such as primary or danger.

colorSource

Type: Record<string, string>
Optional

The lookup table to use when applying a custom background color to the badge. The key is the text value of the field. The value is a standard CSS color designation.