I am using "lightning:datatable" tag to display set of rows in UI. Few columns are numeric data. I needed last row to be summarized values of all the data set. I don't find any standard summary option in lighting data table. So I added one more row to the list In 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.

Thanks in Advance!!

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

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.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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