[SalesForce] Lightning Component – Sort table columns

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>