3

due to some business requirements, I need to develop a custom related-list for Contacts on the Account object. I wanted to do so with a LWC utilizing the lightning-card component. Unfortunately, I am not able to format this component to look similar to a standard related list. If you take a look at the screenshot, the grey background (like in Campaigns) and the border is missing. enter image description here

Here is the code of the component:

<template>
    <lightning-card title="Related Contacts" icon-name="standard:relationship" class="slds-card_boundary">
        <lightning-button label="New Contact" slot="actions"></lightning-button>
        <lightning-button label="Add Relationship" slot="actions"></lightning-button>

        <p class="slds-p-horizontal_small">
            <lightning-datatable
                    key-field="id"
                    data={data}
                    columns={columns}
                    onrowaction={handleRowAction}>
            </lightning-datatable>
        </p>
        <p slot="footer">Card Footer</p>
    </lightning-card>
</template>

Could you please help me with styling the component?

2 Answers 2

3

The reason you don't have the background is that in SLDS Card header does not have the background: https://www.lightningdesignsystem.com/components/cards/

The way Salesforce implements it is via Page Headers: https://www.lightningdesignsystem.com/components/page-headers/

You will have remove the title & icon-name from lightning-card and implement your own <div slot="title" class="slds-page-header">. (do not include the slds-card-header as it has extra padding).

Btw: your example renders for me with border.

2
  • How did you figure this out? Aug 15, 2022 at 19:42
  • 3
    Just checked what classes are used in chrome dev console & checked what styles are defined for these classes :) Hope it helped. Aug 16, 2022 at 21:07
1

Based on the accepted answer, you can find a Custom Datatable which uses the described SLDS Page Headers solution here. It uses a boolean property called "isUsedAsRelatedList" so that if present / set to true, the table is wrapped with the correct page header to fit into the related list layout using the correct styles like:

enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .