0

I am using lightning:datatable tag to display set of rows in the UI. A few columns are numeric data. I need the last row to be summarized values of all the data set.

I don't find any standard summary option in lighting:datatable. So I added one more row to the list in the controller.js which is sum of all the rows. I need this row to be BOLD.

Is there a way that only one row can added with bold style. I tried to do it in cell attributes of the last row, but it didn't work.

3
  • You might have to create your own datatable using aura:iteration Commented Dec 1, 2018 at 16:36
  • I am using standard inline edit and checkboxes that lighting:datatable providing by default. If I have to use aura:iteration i need to write extra code. That's the reason i am checking if bold property can be set on last row of lighting datatable.
    – Alex
    Commented Dec 1, 2018 at 16:47
  • 1
    Hi Alex, welcome to SF.SE! Please take the time to visit the Help center and read How do I ask a good question. Editing your post to how us your code and the CSS you tried to use that didn't work will be much more productive in trying to get help for your question. You can update your post at any time by clicking on the edit link at the bottom left of your question.
    – crmprogdev
    Commented Dec 1, 2018 at 17:00

3 Answers 3

9

For now, you can modify styles inside standard components by specifying your own custom CSS. I don't know if they'll continue to allow this in the future, however. The documentation is apparently unclear on the topic. Here's a copy-paste example for you.


app

<aura:application extends="force:slds">
    <aura:attribute name="col" type="Object[]" />
    <aura:attribute name="data" type="Object[]" />
    <div class="last-row-bold">
        <lightning:datatable columns="{!v.col}" data="{!v.data}" keyField="name"/>
    </div>
    <aura:handler name="init" action="{!c.init}" value="{!this}" />
</aura:application>

controller

({
    init: function(component, event, helper) {
        component.set(
            "v.col",
            [
                { label:'Name',     fieldName: 'name',  type: 'text' },
                { label:'Amount',   fieldName: 'amt',   type: 'currency' }
            ]
        );
        component.set(
            "v.data",
            [
                { amt: 1000, name: "Alice" },
                { amt: 1234, name: "Bob"   },
                { amt: 2234, name: "Total" }
            ]
        );

    }
});

css

.THIS.last-row-bold table tr:last-child * {
    font-weight: 800;
}

The exact specifics of what you're trying to do may make the CSS complicated, but it is theoretically possible on most components.

2
  • Can this be achieved with a LWC ? Commented Aug 7, 2021 at 15:23
  • Yes I was able to achieve this using LWC. I will post my answer @isuru Commented Aug 18, 2022 at 11:19
0

Actually I found a way to do this for LWC using cellAttribute and slds-text-title_bold

check the 2nd tab ie Documentation and search for cellAttributes property

https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/documentation

https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation

I created a wrapper in Apex which sets .slds-text-title_bold to an @auraenabled field that is treated as a cellAttribute. in the JS controller in column just define it as they have mentioned.

Then in my imperative apex call from LWC JS controller I iterate through the rows using a for.

Then I use an if condition to single out that row as in if this.resultdata[i]=='thelastrow'

Then I add that additional attribute in the assignment (e.g., this.rowdata=[... this.rowdata, { fieldname:result[i].fieldname, })

https://www.lightningdesignsystem.com/utilities/text/

Sorry I do not have time to write this answer in formatting and code blocks. let me know if you have any questions

Thanks!

0

1.Add className (class="wrapped-header-datatable") to (lightning-datatable) tag .

<lightning-datatable 
               key-field="id"
               data={listOfRecords}
               columns={columns}
               class="wrapped-header-datatable">
</lightning-datatable>

2.Add below css into static resource and load css into connectedcallback :

.wrapped-header-datatable tr:last-child lightning-base-formatted-text{
    font-weight: bold !important;
}

You must log in to answer this question.

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