├── .gitignore
├── LICENSE
├── README.md
└── src
    ├── aura
        ├── DataTableCellCmp
        │   ├── DataTableCellCmp.cmp
        │   ├── DataTableCellCmp.cmp-meta.xml
        │   ├── DataTableCellCmpController.js
        │   └── DataTableCellCmpHelper.js
        ├── DataTableCmp
        │   ├── DataTableCmp.cmp
        │   ├── DataTableCmp.cmp-meta.xml
        │   ├── DataTableCmpController.js
        │   ├── DataTableCmpHelper.js
        │   └── DataTableCmpRenderer.js
        ├── DataTableColumnCmp
        │   ├── DataTableColumnCmp.cmp
        │   ├── DataTableColumnCmp.cmp-meta.xml
        │   └── DataTableColumnCmpController.js
        ├── DataTableDemoApp
        │   ├── DataTableDemoApp.app
        │   ├── DataTableDemoApp.app-meta.xml
        │   ├── DataTableDemoApp.css
        │   ├── DataTableDemoAppController.js
        │   └── DataTableDemoAppHelper.js
        ├── DataTablePageChangeEvent
        │   ├── DataTablePageChangeEvent.evt
        │   └── DataTablePageChangeEvent.evt-meta.xml
        └── DataTableSortChangeEvent
        │   ├── DataTableSortChangeEvent.evt
        │   └── DataTableSortChangeEvent.evt-meta.xml
    ├── classes
        ├── DataTableDemoAppController.cls
        └── DataTableDemoAppController.cls-meta.xml
    └── package.xml


/.gitignore:
--------------------------------------------------------------------------------
1 | config/
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 3-Clause License
 2 | 
 3 | Copyright (c) 2017, Doug Ayers
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | * Redistributions of source code must retain the above copyright notice, this
10 |   list of conditions and the following disclaimer.
11 | 
12 | * Redistributions in binary form must reproduce the above copyright notice,
13 |   this list of conditions and the following disclaimer in the documentation
14 |   and/or other materials provided with the distribution.
15 | 
16 | * Neither the name of the copyright holder nor the names of its
17 |   contributors may be used to endorse or promote products derived from
18 |   this software without specific prior written permission.
19 | 
20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Lightning Data Tables Component
2 | 
3 | Lightning Component that renders SLDS data table that supports sorting and infinite scrolling with no third-party JS libraries.
4 | 
5 | <a href="https://githubsfdeploy.herokuapp.com">
6 |   <img alt="Deploy to Salesforce"
7 |        src="https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/deploy.png">
8 | </a>
9 | 


--------------------------------------------------------------------------------
/src/aura/DataTableCellCmp/DataTableCellCmp.cmp:
--------------------------------------------------------------------------------
 1 | <aura:component access="public">
 2 | 
 3 |     <!-- public attributes -->
 4 | 
 5 |     <aura:attribute name="row"
 6 |                     type="Object"
 7 |                     description="JSON object that represents the row of data being rendered."/>
 8 | 
 9 |     <aura:attribute name="rowIdx"
10 |                     type="Integer"
11 |                     description="The row number being rendered. Set via the aura:iteration tag in DataTableCmp."/>
12 | 
13 |     <aura:attribute name="column"
14 |                     type="Aura.Component"
15 |                     description="Column component definition of the data being rendered."/>
16 | 
17 |     <aura:attribute name="colIdx"
18 |                     type="Integer"
19 |                     description="The column number being rendered, zero based. Set via the aura:iteration tag in DataTableCmp."/>
20 | 
21 |     <aura:attribute name="class"
22 |                     type="String"
23 |                     default=""
24 |                     description="CSS class to apply to the wrapping DIV container of the table row cell content."/>
25 | 
26 |     <!-- private attributes -->
27 | 
28 |     <aura:attribute name="value"
29 |                     type="Object"
30 |                     description="The formatted value to display in this table row cell. See controller js for details."
31 |                     access="private"/>
32 | 
33 |     <aura:attribute name="linkToRecord"
34 |                     type="String"
35 |                     description="Computed URL for linking to sobject record. See controller js for details."
36 |                     access="private"/>
37 | 
38 |     <aura:attribute name="linkToURL"
39 |                     type="String"
40 |                     description="Computed URL for linking to arbitrary URL. See controller js for details."
41 |                     access="private"/>
42 | 
43 |     <aura:attribute name="classicLink"
44 |                     type="String"
45 |                     description="For Classic UI Theme only, the computed link URL. See controller js for details."
46 |                     access="private"/>
47 | 
48 |     <aura:attribute name="uiTheme"
49 |                     type="String"
50 |                     description="Are we in Classic, Salesforce1, or Lightning? How we define the links and open URLs differs Classic vs. the others."
51 |                     access="private"/>
52 | 
53 |     <!-- events -->
54 | 
55 |     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
56 | 
57 |     <!-- markup -->
58 | 
59 |     <aura:if isTrue="{!and( empty( v.linkToRecord ), empty( v.linkToURL ), empty( v.classicLink ) )}">
60 | 
61 |         <div class="{!v.class}" title="{!v.value}">
62 |             {!v.value}
63 |         </div>
64 | 
65 |         <aura:set attribute="else">
66 | 
67 |             <aura:if isTrue="{!v.uiTheme == 'Classic'}">
68 | 
69 |                 <div class="{!v.class}">
70 |                     <ui:outputURL label="{!v.value}" title="{!v.value}" value="{!v.classicLink}" target="_blank"/>
71 |                 </div>
72 | 
73 |                 <aura:set attribute="else">
74 | 
75 |                     <div class="{!v.class}">
76 |                         <a href="javascript:void(0)" onclick="{!c.handleOnClick}" title="{!v.value}">
77 |                             {!v.value}
78 |                         </a>
79 |                     </div>
80 | 
81 |                 </aura:set>
82 | 
83 |             </aura:if>
84 | 
85 |         </aura:set>
86 | 
87 |     </aura:if>
88 | 
89 | </aura:component>


--------------------------------------------------------------------------------
/src/aura/DataTableCellCmp/DataTableCellCmp.cmp-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>38.0</apiVersion>
4 |     <description>A Lightning Component Bundle</description>
5 | </AuraDefinitionBundle>
6 | 


--------------------------------------------------------------------------------
/src/aura/DataTableCellCmp/DataTableCellCmpController.js:
--------------------------------------------------------------------------------
 1 | ({
 2 |     doInit : function( component, event, helper ) {
 3 | 
 4 |         var row = component.get( 'v.row' );
 5 |         var column = component.get( 'v.column' );
 6 | 
 7 |         // the column's name might be a single property on the object
 8 |         // like 'Subject' or it might be a compound reference
 9 |         // like 'Who.Name' so we split the string into its parts
10 |         // and try to traverse the object graph through the properties.
11 |         //
12 |         // if the row does not have the full property graph
13 |         // then null is returned, otherwise the value at the end of the rainbow.
14 |         component.set( 'v.value', helper.parseFieldValue( component, row, column.get( 'v.name' ) ) );
15 | 
16 |         // set css class from column definition
17 |         component.set( 'v.class', column.get( 'v.valueClass' ) );
18 | 
19 |         // determine ui theme
20 |         var uiTheme = helper.getUITheme();
21 |         component.set( 'v.uiTheme', uiTheme );
22 | 
23 |         // determine type of links to use
24 |         var linkToRecord = column.get( 'v.linkToRecord' );
25 |         var linkToURL = column.get( 'v.linkToURL' );
26 | 
27 |         // if linking to a record we first check if the expression evaluates to a field on the row object
28 |         // that holds the value to link to, otherwise will use the value as-is for linking.
29 |         // since this is intended to be an sobject record id, for classic theme only then we ensure
30 |         // there's a leading '/'.
31 |         if ( !$A.util.isUndefinedOrNull( linkToRecord ) ) {
32 | 
33 |             var parsedLinkToRecord = helper.parseFieldValue( component, row, linkToRecord );
34 | 
35 |             if ( !$A.util.isUndefinedOrNull( parsedLinkToRecord ) ) {
36 |                 component.set( 'v.linkToRecord', ( uiTheme === 'Classic' ? '/' : '' ) + parsedLinkToRecord );
37 |             } else {
38 |                 component.set( 'v.linkToRecord', ( uiTheme === 'Classic' ? '/' : '' ) + linkToRecord );
39 |             }
40 | 
41 |             if ( uiTheme === 'Classic' ) {
42 |                 component.set( 'v.classicLink', component.get( 'v.linkToRecord' ) );
43 |             }
44 | 
45 |         }
46 | 
47 |         // if linking to a record we first check if the expression evaluates to a field on the row object
48 |         // that holds the value to link to, otherwise will use the value as-is for linking
49 |         if ( !$A.util.isUndefinedOrNull( linkToURL ) ) {
50 | 
51 |             var parsedLinkToURL = helper.parseFieldValue( component, row, linkToURL );
52 | 
53 |             if ( !$A.util.isUndefinedOrNull( parsedLinkToURL ) ) {
54 |                 component.set( 'v.linkToURL', parsedLinkToURL );
55 |             } else {
56 |                 component.set( 'v.linkToURL', linkToURL );
57 |             }
58 | 
59 |             if ( uiTheme === 'Classic' ) {
60 |                 component.set( 'v.classicLink', component.get( 'v.linkToURL' ) );
61 |             }
62 | 
63 |         }
64 | 
65 |     },
66 | 
67 |     /**
68 |      * For Salesforce1 and Lightning themes, action handler
69 |      * for navigating to record or arbitrary URL.
70 |      */
71 |     handleOnClick : function( component, event, helper ) {
72 | 
73 |         var linkToRecord = component.get( 'v.linkToRecord' );
74 |         var linkToURL = component.get( 'v.linkToURL' );
75 | 
76 |         if ( !$A.util.isUndefinedOrNull( linkToRecord ) ) {
77 |             helper.navigateToRecord( linkToRecord );
78 |         } else if ( !$A.util.isUndefinedOrNull( linkToURL ) ) {
79 |             helper.navigateToURL( linkToURL );
80 |         } else {
81 |             console.warn( 'Unexpected click event. No value for v.linkToRecord or v.linkToURL' );
82 |             console.log( event );
83 |         }
84 | 
85 |     }
86 | })


--------------------------------------------------------------------------------
/src/aura/DataTableCellCmp/DataTableCellCmpHelper.js:
--------------------------------------------------------------------------------
  1 | ({
  2 |     /**
  3 |      * Retrieves the field value from the JSON object
  4 |      * using dot notation to traverse the object graph.
  5 |      * If any part of the field path is not accessible then returns null.
  6 |      *
  7 |      * @param obj
  8 |      *      The JSON object (e.g. { 'Account' : { 'Name' : 'Burlington' } } )
  9 |      * @param fieldPath
 10 |      *      Uses dot notation to represent the JSON field value to retrieve (e.g. 'Account.Name' )
 11 |      */
 12 | 	parseFieldValue : function( component, obj, fieldPath ) {
 13 | 
 14 |         var fields = fieldPath.split( '.' );
 15 | 
 16 |         var value = null;
 17 | 
 18 |         if ( obj.hasOwnProperty( fields[0] ) ) {
 19 | 
 20 |             value = obj[fields[0]];
 21 | 
 22 |             if ( fields.length > 1 ) {
 23 | 
 24 |                 for ( var i = 1; i < fields.length; i++ ) {
 25 |                     if ( value != null && value.hasOwnProperty( fields[i] ) ) {
 26 |                         value = value[fields[i]];
 27 |                     } else {
 28 |                         value = null;
 29 |                         break;
 30 |                     }
 31 |                 }
 32 | 
 33 |             }
 34 | 
 35 |         }
 36 | 
 37 |         return value;
 38 | 	},
 39 | 
 40 |     // ----------------------------------------------------------------------------
 41 | 
 42 |     /**
 43 |      * Quick and dirty check to determine if code is running in
 44 |      *      - Classic
 45 |      *      - Salesforce1
 46 |      *      - Lightning
 47 |      * based on the existence of certain features.
 48 |      */
 49 |     getUITheme : function() {
 50 | 
 51 |         var theme = null;
 52 | 
 53 |         var event = $A.get( 'e.force:navigateToSObject' );
 54 | 
 55 |         if ( event ) {
 56 | 
 57 |             theme = 'Lightning';
 58 | 
 59 |         } else if ( ( typeof sforce !== 'undefined' ) && ( typeof sforce.one !== 'undefined' ) ) {
 60 | 
 61 |             theme = 'Salesforce1';
 62 | 
 63 |         } else {
 64 | 
 65 |             theme = 'Classic'
 66 | 
 67 |         }
 68 | 
 69 |         return theme;
 70 |     },
 71 | 
 72 |     navigateToRecord : function( recordId ) {
 73 | 
 74 |         console.log( 'navigating to record: ' + recordId );
 75 | 
 76 |         var event = $A.get( 'e.force:navigateToSObject' );
 77 | 
 78 |         if ( event ) {
 79 | 
 80 |             event.setParams({
 81 |                 'recordId' : recordId
 82 |             }).fire();
 83 | 
 84 |         } else if ( ( typeof sforce !== 'undefined' ) && ( typeof sforce.one !== 'undefined' ) ) {
 85 | 
 86 |             sforce.one.navigateToSObject( recordId );
 87 | 
 88 |         } else {
 89 | 
 90 |             window.location.href = '/' + recordId;
 91 | 
 92 |         }
 93 | 
 94 |     },
 95 | 
 96 |     navigateToURL : function( url ) {
 97 | 
 98 |         console.log( 'navigating to url: ' + url );
 99 | 
100 |         var event = $A.get( 'e.force:navigateToURL' );
101 | 
102 |         if ( event ) {
103 | 
104 |             event.setParams({
105 |                 'url' : url
106 |             }).fire();
107 | 
108 |         } else if ( ( typeof sforce !== 'undefined' ) && ( typeof sforce.one !== 'undefined' ) ) {
109 | 
110 |             sforce.one.navigateToURL( url );
111 | 
112 |         } else {
113 | 
114 |             window.location.href = url;
115 | 
116 |         }
117 | 
118 |     }
119 | })


--------------------------------------------------------------------------------
/src/aura/DataTableCmp/DataTableCmp.cmp:
--------------------------------------------------------------------------------
 1 | <aura:component implements="flexipage:availableForAllPageTypes" access="public">
 2 | 
 3 |     <!-- public attributes -->
 4 | 
 5 |     <aura:attribute name="columns"
 6 |                     type="Aura.Component[]"
 7 |                     required="true"
 8 |                     description="Array of one or more DataTableColumnCmp components."/>
 9 | 
10 |     <aura:attribute name="rows"
11 |                     type="Object[]"
12 |                     description="The data of the rows to display. Should have JSON property for each column name value."/>
13 | 
14 |     <!-- pagination attributes -->
15 | 
16 |     <aura:attribute name="pageNumber"
17 |                     type="Integer"
18 |                     default="1"
19 |                     description="For pagination, which page of records to display."/>
20 | 
21 |     <aura:attribute name="pageSize"
22 |                     type="Integer"
23 |                     default="25"
24 |                     description="For pagination, how many records per page to display."/>
25 | 
26 |     <aura:attribute name="sortColumnName"
27 |                     type="String"
28 |                     description="For sorting, last known requested sort preference. A value that matches the name attribute of a DataTableColumnCmp."/>
29 | 
30 |     <aura:attribute name="sortDirection"
31 |                     type="String"
32 |                     description="For sorting, last known requested sort preference. Value must be 'asc' or 'desc'."/>
33 | 
34 |     <!-- style attributes -->
35 | 
36 |     <aura:attribute name="tableClass"
37 |                     type="String"
38 |                     default="slds-table slds-table--bordered slds-table--fixed-layout"
39 |                     description="CSS classes to apply to table tag."/>
40 | 
41 |     <aura:attribute name="tableHeaderRowClass"
42 |                     type="String"
43 |                     default="slds-text-title--caps"
44 |                     description="CSS classes to apply to table TR tags in THEAD section."/>
45 | 
46 |     <aura:attribute name="tableBodyRowClass"
47 |                     type="String"
48 |                     default="slds-hint-parent"
49 |                     description="CSS classes to apply to table TR tags in TBODY section."/>
50 | 
51 |     <!-- private attributes -->
52 | 
53 |     <aura:attribute name="scrollCheckIntervalId"
54 |                     type="String"
55 |                     description="In the renderer.js, the interval id for periodically checking scroll position. Used when unrendering component to cancel interval check."
56 |                     access="private"/>
57 | 
58 |     <!-- events -->
59 | 
60 |     <aura:registerEvent name="pageChangeEvent" type="c:DataTablePageChangeEvent"/>
61 | 
62 |     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
63 | 
64 |     <!-- markup -->
65 | 
66 |     <table class="{!v.tableClass}" role="grid">
67 |         <thead>
68 |             <tr class="{!v.tableHeaderRowClass}">
69 |                 <aura:iteration items="{!v.columns}" var="column">
70 |                     {!column}
71 |                 </aura:iteration>
72 |             </tr>
73 |         </thead>
74 |         <tbody>
75 |             <aura:iteration items="{!v.rows}" var="row" indexVar="rowIdx">
76 |                 <tr class="{!v.tableBodyRowClass}">
77 |                     <aura:iteration items="{!v.columns}" var="column" indexVar="colIdx">
78 |                         <td role="gridcell" data-label="{!column.label}">
79 |                             <c:DataTableCellCmp row="{!row}"
80 |                                                 rowIdx="{!rowIdx}"
81 |                                                 column="{!column}"
82 |                                                 colIdx="{!colIdx}"/>
83 |                         </td>
84 |                     </aura:iteration>
85 |                 </tr>
86 |             </aura:iteration>
87 |         </tbody>
88 |     </table>
89 | 
90 | </aura:component>


--------------------------------------------------------------------------------
/src/aura/DataTableCmp/DataTableCmp.cmp-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>38.0</apiVersion>
4 |     <description>A Lightning Component Bundle</description>
5 | </AuraDefinitionBundle>
6 | 


--------------------------------------------------------------------------------
/src/aura/DataTableCmp/DataTableCmpController.js:
--------------------------------------------------------------------------------
 1 | ({
 2 |     doInit : function( component, event, helper ) {
 3 | 
 4 |         // since these components are set via attribute and
 5 |         // not known at compile time then <aura:handler> is not
 6 |         // correctly registering our event listener as anticipated.
 7 |         //
 8 |         // therefore, we dynamically add our event listener to all
 9 |         // added columns upon initialization.
10 |         // https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_dynamic_handler.htm
11 | 
12 |         var columns = component.get( 'v.columns' );
13 |         for ( var i = 0; i < columns.length; i++ ) {
14 |             columns[i].addHandler( 'sortChangeEvent', component, 'c.handleSortChangeEvent' );
15 |         }
16 | 
17 |         // default sort column if not specified yet
18 |         if ( columns.length > 0 ) {
19 | 
20 |             var sortColumnName = component.get( 'v.sortColumnName' );
21 |             var sortDirection = component.get( 'v.sortDirection' );
22 | 
23 |             if ( $A.util.isUndefinedOrNull( sortColumnName ) ) {
24 |                 sortColumnName = columns[0].get( 'v.name' );
25 |             }
26 | 
27 |             if ( $A.util.isUndefinedOrNull( sortDirection ) ) {
28 |                 sortDirection = 'asc';
29 |             }
30 | 
31 |             helper.syncColumnStates( component, sortColumnName, sortDirection );
32 | 
33 |         }
34 | 
35 |         // notify listeners to react and display initial page of data
36 |         // this will send v.page and v.pageSize initial attribute values
37 |         helper.firePageChangeEvent( component, component.get( 'v.pageNumber' ), component.get( 'v.pageSize' ) );
38 | 
39 |     },
40 | 
41 |     /**
42 |      * Toggles the sort state of all the columns to reflect the
43 |      * currently sorted column captured by the sort change event.
44 |      */
45 |     handleSortChangeEvent : function( component, event, helper ) {
46 | 
47 |         // column requested to sort data by
48 |         var sortColumnName = event.getParam( 'columnName' );
49 |         var sortDirection = event.getParam( 'sortDirection' );
50 | 
51 |         helper.syncColumnStates( component, sortColumnName, sortDirection );
52 | 
53 |     }
54 | })


--------------------------------------------------------------------------------
/src/aura/DataTableCmp/DataTableCmpHelper.js:
--------------------------------------------------------------------------------
 1 | ({
 2 |     /**
 3 |      * Notify that there's a request for specific page of data.
 4 |      *
 5 |      * It is the responsibility of the developer to listen for the
 6 |      * page change event and update the table's rows accordingly.
 7 |      */
 8 |     firePageChangeEvent : function( component, pageNumber, pageSize ) {
 9 | 
10 |         component.getEvent( 'pageChangeEvent' ).setParams({
11 |             'pageNumber' : pageNumber,
12 |             'pageSize' : pageSize
13 |         }).fire();
14 | 
15 |     },
16 | 
17 |     /**
18 |      * Designed to be called by the renderer during infinite scrolling events.
19 |      * Increments the page number then fires page change event.
20 |      */
21 |     getNextPage : function( component ) {
22 | 
23 |         var pageNumber = component.get( 'v.pageNumber' );
24 |         var pageSize = component.get( 'v.pageSize' );
25 | 
26 |         pageNumber++;
27 | 
28 |         component.set( 'v.pageNumber', pageNumber );
29 |         component.set( 'v.pageSize', pageSize );
30 | 
31 |         this.firePageChangeEvent( component, pageNumber, pageSize );
32 | 
33 |     },
34 | 
35 |     /**
36 |      * Designed to be called whenever a sort change event is fired.
37 |      * The component iterates through all the columns attribute and
38 |      * updates their isSorted status so that the table column headers
39 |      * reflect the UI of the user's sorting intent.
40 |      *
41 |      * It is the responsibility of the developer to also listen for the
42 |      * sort change event and update the table's rows accordingly.
43 |      */
44 |     syncColumnStates : function( component, sortColumnName, sortDirection ) {
45 | 
46 |         // for all columns update their attributes
47 |         // to indicate if it is the sorted column or not
48 |         var columns = component.get( 'v.columns' );
49 |         for ( var i = 0; i < columns.length; i++ ) {
50 | 
51 |             var column = columns[i];
52 |             var columnName = column.get( 'v.name' );
53 | 
54 |             if ( sortColumnName === columnName ) {
55 | 
56 |                 column.set( 'v.isSorted', true );
57 |                 column.set( 'v.sortDirection', sortDirection );
58 | 
59 |                 component.set( 'v.sortColumnName', sortColumnName );
60 |                 component.set( 'v.sortDirection', sortDirection );
61 | 
62 |             } else {
63 | 
64 |                 column.set( 'v.isSorted', false );
65 | 
66 |             }
67 | 
68 |         }
69 | 
70 |     }
71 | })


--------------------------------------------------------------------------------
/src/aura/DataTableCmp/DataTableCmpRenderer.js:
--------------------------------------------------------------------------------
 1 | ({
 2 |     afterRender : function( component, helper ) {
 3 | 
 4 |         this.superAfterRender();
 5 | 
 6 |         // this is done in renderer because we don't get
 7 |         // access to the window element in the helper js.
 8 | 
 9 |         // per John Resig, we should not take action on every scroll event
10 |         // as that has poor performance but rather we should take action periodically.
11 |         // http://ejohn.org/blog/learning-from-twitter/
12 | 
13 |         var didScroll = false;
14 | 
15 |         window.onscroll = function() {
16 |             didScroll = true;
17 |         };
18 | 
19 |         // periodically attach the scroll event listener
20 |         // so that we aren't taking action for all events
21 |         var scrollCheckIntervalId = setInterval( $A.getCallback( function() {
22 | 
23 |             // since this function is called asynchronously outside the component's lifecycle
24 |             // we need to check if the component still exists before trying to do anything else
25 |             if ( didScroll && component.isValid() ) {
26 | 
27 |                 didScroll = false;
28 | 
29 |                 // adapted from stackoverflow to detect when user has scrolled sufficiently to end of document
30 |                 // http://stackoverflow.com/questions/4841585/alternatives-to-jquery-endless-scrolling
31 |                 if ( window['scrollY'] >= document.body['scrollHeight'] - window['outerHeight'] - 100 ) {
32 |                     helper.getNextPage( component );
33 |                 }
34 | 
35 |             }
36 | 
37 |         }), 1000 );
38 | 
39 |         component.set( 'v.scrollCheckIntervalId', scrollCheckIntervalId );
40 | 
41 |     },
42 | 
43 |     unrender : function( component, helper ) {
44 | 
45 |         this.superUnrender();
46 | 
47 |         var scrollCheckIntervalId = component.get( 'v.scrollCheckIntervalId' );
48 | 
49 |         if ( !$A.util.isUndefinedOrNull( scrollCheckIntervalId ) ) {
50 |             window.clearInterval( scrollCheckIntervalId );
51 |         }
52 | 
53 |     }
54 | })


--------------------------------------------------------------------------------
/src/aura/DataTableColumnCmp/DataTableColumnCmp.cmp:
--------------------------------------------------------------------------------
 1 | <aura:component access="public">
 2 | 
 3 |     <!-- public attributes -->
 4 | 
 5 |     <aura:attribute name="label"
 6 |                     type="String"
 7 |                     required="true"
 8 |                     description="Column header text label. Example, 'Related To' for Tasks."/>
 9 | 
10 |     <aura:attribute name="name"
11 |                     type="String"
12 |                     required="true"
13 |                     description="Unique field path to retrieve data from rows. Example, 'What.Name' for Tasks."/>
14 | 
15 |     <aura:attribute name="headerClass"
16 |                     type="String"
17 |                     default=""
18 |                     description="Any CSS classes to add to the table column header cell."/>
19 | 
20 |     <aura:attribute name="valueClass"
21 |                     type="String"
22 |                     default=""
23 |                     description="CSS classes to apply to table column value cells."/>
24 | 
25 |     <aura:attribute name="sortable"
26 |                     type="Boolean"
27 |                     default="false"
28 |                     description="True to support user clicking column name to request data sorted by this column. Event is fired indicating clicked column and new direction."/>
29 | 
30 |     <aura:attribute name="isSorted"
31 |                     type="Boolean"
32 |                     default="false"
33 |                     description="Indicates if this column is the currently sorted column and to render up/down arrow accordingly."/>
34 | 
35 |     <aura:attribute name="sortDirection"
36 |                     type="String"
37 |                     default=""
38 |                     description="Current sort direction. ASC or DESC."/>
39 | 
40 |     <aura:attribute name="linkToRecord"
41 |                     type="String"
42 |                     description="Field path on row data for this column that represents an sobject record id. Only one of linkToRecord or linkToURL should be used."/>
43 | 
44 |     <aura:attribute name="linkToURL"
45 |                     type="String"
46 |                     description="Field path on row data for this column that represents an arbitrary URL. Only one of linkToRecord or linkToURL should be used."/>
47 | 
48 |     <!-- private attributes -->
49 | 
50 |     <!-- events -->
51 | 
52 |     <aura:registerEvent name="sortChangeEvent" type="c:DataTableSortChangeEvent"/>
53 | 
54 |     <!-- markup -->
55 | 
56 |     <th class="{! if( v.sortable, 'slds-is-sortable', '' ) + ' ' +
57 |                   if( and( v.isSorted, v.sortDirection == 'asc' ), 'slds-is-sorted slds-is-sorted--ascending', '' ) + ' ' +
58 |                   if( and( v.isSorted, v.sortDirection == 'desc' ), 'slds-is-sorted slds-is-sorted--descending', '' ) + ' ' +
59 |                   v.headerClass }"
60 |         scope="col"
61 |         aria-sort="{! if( v.sortDirection == 'asc', 'ascending', 'descending' ) }"
62 |         aria-label="{!v.label}">
63 | 
64 |         <aura:if isTrue="{!v.sortable}">
65 | 
66 |             <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" onclick="{!c.fireSortChangeEvent}">
67 | 
68 |                 <span class="slds-assistive-text">Sort </span>
69 |                 <span class="slds-truncate" title="{!v.label}">{!v.label}</span>
70 | 
71 |                 <lightning:icon iconName="utility:arrowup"
72 |                                 size="x-small"
73 |                                 class="{! if( or( !v.isSorted, and( v.isSorted, v.sortDirection == 'desc' ) ), 'slds-hide', '') }"
74 |                                 alternativeText="Sorted descending"/>
75 | 
76 |                 <lightning:icon iconName="utility:arrowdown"
77 |                                 size="x-small"
78 |                                 class="{! if( or( !v.isSorted, and( v.isSorted, v.sortDirection == 'asc' ) ), 'slds-hide', '') }"
79 |                                 alternativeText="Sorted ascending"/>
80 | 
81 |             </a>
82 | 
83 |             <aura:set attribute="else">
84 | 
85 |                 <span class="slds-truncate" title="{!v.label}">{!v.label}</span>
86 | 
87 |             </aura:set>
88 | 
89 |         </aura:if>
90 | 
91 |     </th>
92 | 
93 | </aura:component>


--------------------------------------------------------------------------------
/src/aura/DataTableColumnCmp/DataTableColumnCmp.cmp-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>38.0</apiVersion>
4 |     <description>A Lightning Component Bundle</description>
5 | </AuraDefinitionBundle>
6 | 


--------------------------------------------------------------------------------
/src/aura/DataTableColumnCmp/DataTableColumnCmpController.js:
--------------------------------------------------------------------------------
 1 | ({
 2 |     fireSortChangeEvent : function( component, event, helper ) {
 3 | 
 4 |         var sortable = component.get( 'v.sortable' );
 5 | 
 6 |         if ( sortable == true ) {
 7 | 
 8 |             var sortDirection = component.get( 'v.sortDirection' );
 9 | 
10 |             if ( sortDirection === 'asc' ) {
11 |                 sortDirection = 'desc';
12 |             } else {
13 |                 sortDirection = 'asc';
14 |             }
15 | 
16 |             component.getEvent( 'sortChangeEvent' ).setParams({
17 |                 'columnLabel' : component.get( 'v.label' ),
18 |                 'columnName' : component.get( 'v.name' ),
19 |                 'sortDirection' : sortDirection
20 |             }).fire();
21 | 
22 |         }
23 | 
24 |     }
25 | })


--------------------------------------------------------------------------------
/src/aura/DataTableDemoApp/DataTableDemoApp.app:
--------------------------------------------------------------------------------
 1 | <aura:application extends="force:slds" controller="DataTableDemoAppController">
 2 | 
 3 |     <!-- public attributes -->
 4 | 
 5 |     <!-- private attributes -->
 6 | 
 7 |     <!-- events -->
 8 | 
 9 |     <aura:handler name="pageChangeEvent" event="c:DataTablePageChangeEvent" action="{!c.handlePageChangeEvent}" phase="capture"/>
10 |     <aura:handler name="sortChangeEvent" event="c:DataTableSortChangeEvent" action="{!c.handleSortChangeEvent}" phase="capture"/>
11 | 
12 |     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
13 | 
14 |     <!-- markup -->
15 | 
16 |     <lightning:spinner aura:id="spinner" variant="brand"/>
17 | 
18 |     <c:DataTableCmp aura:id="dataTable">
19 |         <aura:set attribute="columns">
20 | 
21 |             <c:DataTableColumnCmp label="Contact ID"
22 |                                   name="Id"
23 |                                   linkToRecord="Id"
24 |                                   sortable="true"/>
25 | 
26 |             <c:DataTableColumnCmp label="First Name"
27 |                                   name="FirstName"
28 |                                   linkToRecord="Id"
29 |                                   sortable="true"/>
30 | 
31 |             <c:DataTableColumnCmp label="Last Name"
32 |                                   name="LastName"
33 |                                   linkToRecord="Id"
34 |                                   sortable="true"/>
35 | 
36 |             <c:DataTableColumnCmp label="Account Name"
37 |                                   name="Account.Name"
38 |                                   linkToRecord="Account.Id"
39 |                                   sortable="true"/>
40 | 
41 |         </aura:set>
42 | 
43 |         <!-- optional -->
44 | 
45 |         <aura:set attribute="pageNumber" value="1"/>
46 |         <aura:set attribute="pageSize" value="25"/>
47 |         <aura:set attribute="sortColumnName" value="LastName"/>
48 |         <aura:set attribute="sortDirection" value="desc"/>
49 | 
50 |     </c:DataTableCmp>
51 | 
52 | </aura:application>


--------------------------------------------------------------------------------
/src/aura/DataTableDemoApp/DataTableDemoApp.app-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>38.0</apiVersion>
4 |     <description>A Lightning Component Bundle</description>
5 | </AuraDefinitionBundle>
6 | 


--------------------------------------------------------------------------------
/src/aura/DataTableDemoApp/DataTableDemoApp.css:
--------------------------------------------------------------------------------
1 | /* https://github.com/salesforce-ux/design-system/issues/357 */
2 | .THIS.slds-spinner_container {
3 |     position: fixed;
4 | }


--------------------------------------------------------------------------------
/src/aura/DataTableDemoApp/DataTableDemoAppController.js:
--------------------------------------------------------------------------------
 1 | ({
 2 |     doInit: function( component, event, helper ) {
 3 | 
 4 |     },
 5 | 
 6 |     handlePageChangeEvent : function( component, event, helper ) {
 7 | 
 8 |         var tableCmp = component.find( 'dataTable' );
 9 | 
10 |         console.log( 'handling page change event in app container' );
11 |         console.log( 'columnName=' + tableCmp.get( 'v.sortColumnName' ) );
12 |         console.log( 'sortDirection=' + tableCmp.get( 'v.sortDirection' ) );
13 |         console.log( 'page=' + event.getParam( 'pageNumber' ) );
14 |         console.log( 'pageSize=' + event.getParam( 'pageSize' ) );
15 | 
16 |         helper.callAction(
17 |             component,
18 |             'c.getContacts',
19 |             {
20 |                 'page' : event.getParam( 'pageNumber' ),
21 |                 'pageSize' : event.getParam( 'pageSize' ),
22 |                 'sortCol' : tableCmp.get( 'v.sortColumnName' ),
23 |                 'sortDir' : tableCmp.get( 'v.sortDirection' )
24 |             },
25 |             function( data ) {
26 | 
27 |                 var tableCmp = component.find( 'dataTable' );
28 | 
29 |                 var rows = tableCmp.get( 'v.rows' );
30 | 
31 |                 tableCmp.set( 'v.rows', rows.concat( data ) );
32 | 
33 |             }
34 |         );
35 | 
36 |     },
37 | 
38 |     handleSortChangeEvent : function( component, event, helper ) {
39 | 
40 |         var tableCmp = component.find( 'dataTable' );
41 | 
42 |         tableCmp.set( 'v.pageNumber', 1 );
43 | 
44 |         console.log( 'handling sort event in app container' );
45 |         console.log( 'columnName=' + event.getParam( 'columnName' ) );
46 |         console.log( 'sortDirection=' + event.getParam( 'sortDirection' ) );
47 |         console.log( 'pageNumber=' + tableCmp.get( 'v.pageNumber' ) );
48 |         console.log( 'pageSize=' + tableCmp.get( 'v.pageSize' ) );
49 | 
50 |         helper.callAction(
51 |             component,
52 |             'c.getContacts',
53 |             {
54 |                 'page' : tableCmp.get( 'v.pageNumber' ),
55 |                 'pageSize' : tableCmp.get( 'v.pageSize' ),
56 |                 'sortCol' : event.getParam( 'columnName' ),
57 |                 'sortDir' : event.getParam( 'sortDirection' )
58 |             },
59 |             function( data ) {
60 | 
61 |                 var tableCmp = component.find( 'dataTable' );
62 | 
63 |                 tableCmp.set( 'v.rows', data );
64 | 
65 |             }
66 |         );
67 | 
68 |     }
69 | })


--------------------------------------------------------------------------------
/src/aura/DataTableDemoApp/DataTableDemoAppHelper.js:
--------------------------------------------------------------------------------
 1 | ({
 2 |     showSpinner : function( component ) {
 3 | 
 4 |         $A.util.removeClass( component.find( 'spinner' ), 'slds-hide' );
 5 | 
 6 |     },
 7 | 
 8 |     hideSpinner : function( component ) {
 9 | 
10 |         $A.util.addClass( component.find( 'spinner' ), 'slds-hide' );
11 | 
12 |     },
13 | 
14 |     navigateToRecord : function( recordId ) {
15 | 
16 |         console.log( 'navigating to record: ' + recordId );
17 | 
18 |         var event = $A.get( 'e.force:navigateToSObject' );
19 | 
20 |         if ( event ) {
21 | 
22 |             event.setParams({
23 |                 'recordId' : recordId
24 |             }).fire();
25 | 
26 |         } else if ( ( typeof sforce !== 'undefined' ) && ( typeof sforce.one !== 'undefined' ) ) {
27 | 
28 |             sforce.one.navigateToSObject( recordId );
29 | 
30 |         } else {
31 | 
32 |             window.location.href = '/' + recordId;
33 | 
34 |         }
35 | 
36 |     },
37 | 
38 |     /**
39 |      * actionName = the apex controller method to call (e.g. 'c.myMethod' )
40 |      * params = JSON object specifying action parameters (e.g. { 'x' : 42 } )
41 |      * successCallback = function to call when action completes (e.g. function( response ) { ... } )
42 |      * failureCallback = function to call when action fails (e.g. function( response ) { ... } )
43 |      */
44 |     callAction : function( component, actionName, params, successCallback, failureCallback ) {
45 | 
46 |         this.showSpinner( component );
47 | 
48 |         var action = component.get( actionName );
49 | 
50 |         if ( params ) {
51 |             action.setParams( params );
52 |         }
53 | 
54 |         action.setCallback( this, function( response ) {
55 | 
56 |             this.hideSpinner( component );
57 | 
58 |             if ( component.isValid() && response.getState() === 'SUCCESS' ) {
59 | 
60 |                 if ( successCallback ) {
61 |                     successCallback( response.getReturnValue() );
62 |                 }
63 | 
64 |             } else {
65 | 
66 |                 console.error( 'Error calling action "' + actionName + '" with state: ' + response.getState() );
67 | 
68 |                 if ( failureCallback ) {
69 |                     failureCallback( response.getError(), response.getState() );
70 |                 } else {
71 |                     this.logActionErrors( component, response.getError() );
72 |                 }
73 | 
74 |             }
75 |         });
76 | 
77 |         $A.enqueueAction( action );
78 | 
79 |     },
80 | 
81 |     logActionErrors : function( component, errors ) {
82 |         if ( errors ) {
83 |             for ( var index in errors ) {
84 |                 console.error( 'Error: ' + errors[index].message );
85 |             }
86 |         } else {
87 |             console.error( 'Unknown error' );
88 |         }
89 |     }
90 | })


--------------------------------------------------------------------------------
/src/aura/DataTablePageChangeEvent/DataTablePageChangeEvent.evt:
--------------------------------------------------------------------------------
1 | <aura:event type="COMPONENT" description="Indicates request to change the page of the data table." access="public">
2 | 
3 |     <aura:attribute name="pageNumber" type="Integer"/>
4 |     <aura:attribute name="pageSize" type="Integer"/>
5 | 
6 | </aura:event>


--------------------------------------------------------------------------------
/src/aura/DataTablePageChangeEvent/DataTablePageChangeEvent.evt-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>38.0</apiVersion>
4 |     <description>A Lightning Component Bundle</description>
5 | </AuraDefinitionBundle>
6 | 


--------------------------------------------------------------------------------
/src/aura/DataTableSortChangeEvent/DataTableSortChangeEvent.evt:
--------------------------------------------------------------------------------
 1 | <aura:event type="COMPONENT" description="Indicates request to change the sorting of the data table." access="public">
 2 | 
 3 |     <aura:attribute name="columnLabel"
 4 |                     type="String"
 5 |                     description="Column header text label. Example, 'Related To' for Tasks."/>
 6 | 
 7 |     <aura:attribute name="columnName"
 8 |                     type="String"
 9 |                     description="Unique field path to retrieve data from rows. Example, 'What.Name' for Tasks."/>
10 | 
11 |     <aura:attribute name="sortDirection"
12 |                     type="String"
13 |                     description="Either 'asc' or 'desc' to indicate sort direction."/>
14 | 
15 | </aura:event>


--------------------------------------------------------------------------------
/src/aura/DataTableSortChangeEvent/DataTableSortChangeEvent.evt-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>38.0</apiVersion>
4 |     <description>A Lightning Component Bundle</description>
5 | </AuraDefinitionBundle>
6 | 


--------------------------------------------------------------------------------
/src/classes/DataTableDemoAppController.cls:
--------------------------------------------------------------------------------
 1 | public with sharing class DataTableDemoAppController {
 2 | 
 3 |     @AuraEnabled
 4 |     public static List<Contact> getContacts( Decimal page, Decimal pageSize, String sortCol, String sortDir ) {
 5 | 
 6 |         System.debug('querying contacts');
 7 |         System.debug('page=' + page);
 8 |         System.debug('pageSize=' + pageSize);
 9 |         System.debug('sortCol=' + sortCol);
10 |         System.debug('sortDir=' + sortDir);
11 | 
12 |         Integer skipRecords = Integer.valueOf( ( page - 1 ) * pageSize );
13 |         Integer maxRecords = Integer.valueOf( pageSize );
14 | 
15 |         String query =
16 |             ' SELECT ' +
17 |                 ' id, firstName, lastName, accountId, account.name ' +
18 |             ' FROM ' +
19 |                 ' Contact '
20 |         ;
21 | 
22 |         if ( String.isNotBlank( sortCol ) ) {
23 |             query += ' ORDER BY ' + String.escapeSingleQuotes( sortCol ) + ' ' + String.escapeSingleQuotes( sortDir );
24 |         }
25 | 
26 |         query += ' LIMIT :maxRecords ';
27 | 
28 |         query += ' OFFSET :skipRecords ';
29 | 
30 |         List<Contact> contacts = (List<Contact>) Database.query( query );
31 | 
32 |         //List<Contact> contacts = [
33 |         //    SELECT
34 |         //        id, firstName, lastName, accountId, account.name
35 |         //    FROM
36 |         //        Contact
37 |         //    ORDER BY
38 |         //        firstName
39 |         //    LIMIT
40 |         //        :maxRecords
41 |         //    OFFSET
42 |         //        :skipRecords
43 |         //];
44 | 
45 |         System.debug('queried contacts');
46 |         System.debug( contacts );
47 | 
48 |         return contacts;
49 |     }
50 | 
51 | }


--------------------------------------------------------------------------------
/src/classes/DataTableDemoAppController.cls-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>38.0</apiVersion>
4 |     <status>Active</status>
5 | </ApexClass>
6 | 


--------------------------------------------------------------------------------
/src/package.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <Package xmlns="http://soap.sforce.com/2006/04/metadata">
 3 |     <types>
 4 |         <members>DataTableDemoAppController</members>
 5 |         <name>ApexClass</name>
 6 |     </types>
 7 |     <types>
 8 |         <members>DataTableCellCmp</members>
 9 |         <members>DataTableCmp</members>
10 |         <members>DataTableColumnCmp</members>
11 |         <members>DataTableDemoApp</members>
12 |         <members>DataTablePageChangeEvent</members>
13 |         <members>DataTableSortChangeEvent</members>
14 |         <name>AuraDefinitionBundle</name>
15 |     </types>
16 |     <version>38.0</version>
17 | </Package>
18 | 


--------------------------------------------------------------------------------