4

I am trying to show a list of cases related to an account in a table view. I am using Lightning Design System to show a table and iterate through a list of cases. Is there a way to sort this table dynamically without having to perform another query and re-render the component?

It seems the FilterList component is only available in AppBuilder and this will ultimately be displayed via VisualForce through Salesforce Communities so this doesn't work for me.

Here is my CasesList Component:

<aura:component controller="CasesController">
<aura:attribute name="cases" type="List" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<!-- Lightning Design Card -->
<div class="slds">
<div class="slds-card slds-m-right--small">
    <div class="slds-card__header slds-grid">
        <div class="slds-media slds-media--center slds-has-flexi-truncate">
            <div class="slds-media__figure">
                <c:svg ariaHidden="true" 
                       xlinkHref="/resource/SLDS103/assets/icons/standard-sprite/svg/symbols.svg#case" 
                       class="slds-icon slds-icon-standard-case slds-icon--small" 
                />
            </div>
            <div class="slds-media__body">
                <h2 class="slds-text-heading--small slds-truncate">Cases</h2>
            </div>
        </div>
        <div class="slds-no-flex">
                <c:button class="slds-button--icon-border-filled"
                      svgXlinkHref="/resource/SLDS103/assets/icons/utility-sprite/svg/symbols.svg#chart"
                      svgClass="slds-button__icon"
                      onclick="{!c.showCharts}"
                      />
        </div>
        <div class="slds-no-flex">
            <div class="slds-button-group">
                <button class="slds-button slds-button--neutral slds-button--medium slds-m-right--medium" 
                        onclick="{!c.showDetails}" 
                        data-data="">Export
                </button>               
            </div>
        </div>
        <div class="slds-no-flex">
            <div class="slds-button-group">
                <button class="slds-button slds-button--brand slds-button--medium" 
                        onclick="{!c.showNewCase}" 
                        data-data="">New
                </button>               
            </div>
        </div>
    </div>
    <div class="slds-card__body slds-scrollable--y custom-card">
        <table class="slds-table slds-table--bordered slds-table--striped slds-max-medium-table--stacked-horizontal">
            <thead>
                <tr>
                    <th class="slds-is-sortable" scope="col">
                        <div class="slds-truncate">Case
                            <button class="slds-button slds-button--icon-bare">
                                <c:svg ariaHidden="true" 
                                       xlinkHref="/resource/SLDS103/assets/icons/utility-sprite/svg/symbols.svg#arrowdown" 
                                       class="slds-button__icon slds-button__icon--small" 
                                       /> 
                                <span class="slds-assistive-text">Sort</span>
                            </button>
                        </div>
                    </th>
                    <th class="slds-is-sortable" scope="col"><span class="slds-truncate">Account Name</span></th>
                    <th class="slds-is-sortable" scope="col"><span class="slds-truncate">Priority</span></th>
                    <th class="slds-is-sortable" scope="col"><span class="slds-truncate">Status</span></th>
                    <th class="slds-is-sortable" scope="col"><span class="slds-truncate">Subject</span></th>  
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.cases}" var="case">
                    <tr>
                        <td><a href="#" onclick="{!c.showDetails}" data-data="{!case.Id}">{!case.CaseNumber}</a></td>
                        <td>{!case.Account.Name}</td>                 
                        <td>{!case.Priority}</td>
                        <td>{!case.Status}</td>
                        <td>{!case.Subject}</td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</div>
</aura:component>
Improve this question
2
  • 1
    The sorting functionality for the custom components has to custom built . You can use events to capture the sorted column click and rearrange the array in the Javascript controller if you want to provide sorting functionality client side .
    – Mohith Shrivastava
    Commented May 25, 2016 at 21:18
  • @MohithShrivastava do you have any example on how to sort it in the javascript controller?
    – cartman
    Commented Nov 17, 2016 at 18:31

1 Answer 1

Reset to default
1

Question: Are you using the new Community Templates? Spring16+ ?

If so, I'm curious what the need for a custom component is - You can connect the case object to the community - and using standard salesforce. On the Account related list for cases you can sort on any column and it will carry over to the community.

Let me know which version you are using.... Best, Kev

Improve this answer
1
  • No, unfortunately we cannot due to limitations with Community Builder theming. We have a complex scenario so we are using custom built communities based on visualforce pages. Thanks!
    – bobLablaw
    Commented May 26, 2016 at 13:35

You must log in to answer this question.

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