Embedding web components

In this section, we will explain how to change such that each cell in a column is rendered as a web component.

The TableComponent interface

Each cell in the table view has a value. When you render a cell as a web component, the value that should be shown in that cell is sent in to the web component instead. This means that the web component that you want to render must have a value prop defined.

The TableComponent interface contains documentation about all properties that are available (not just value). We recommend that you study that for more information.

We recommend that every component that you create for using in the table view implements this interface.

Example component

We will use a custom component called lwc-number-emoji for this example. The web component will render a flower emoji if value > threshold

See implementation below:

import { Component, Prop } from '@stencil/core';
import { TableComponent } from '@limetech/lime-elements';

@Component({
    tag: 'lwc-number-emoji',
    shadow: true,
})
export class NumberEmoji implements TableComponent {

    @Prop()
    public value: number;

    @Prop()
    public threshold: number = 50;

    render() {
        return this.value > this.threshold ? '🌻': '⛈️';
    }
}

Lime Admin configuration

You configure web components for the table view in Lime Admin.

1. Open the view editor in Lime Admin.
2. Select the table view for a limetype that has a probability property, for instance business.
3. Click on the Probability property and edit the field Name under the component section. Write lwc-number-emoji. (See screenshot below)
4. Click save

Now you should see the table view for business being rendered as this:

Instead of this:

Additional properties

You can also set additional attributes on a web component by adding a json object to the Properties field in the component section. If you for instance want to change the value of the threshold in the lwc-number-emoji component, you can write the following:

{
    "threshold": 25
}