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.

  • You might have to create your own datatable using aura:iteration – Pranay Jaiswal Dec 1 '18 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 Dec 1 '18 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 Dec 1 '18 at 17:00

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.


<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"/>
    <aura:handler name="init" action="{!c.init}" value="{!this}" />


    init: function(component, event, helper) {
                { label:'Name',     fieldName: 'name',  type: 'text' },
                { label:'Amount',   fieldName: 'amt',   type: 'currency' }
                { amt: 1000, name: "Alice" },
                { amt: 1234, name: "Bob"   },
                { amt: 2234, name: "Total" }



.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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.