lightning:datatable

1<aura:component>
2    <aura:attribute name="mydata" type="Object"/>
3    <aura:attribute name="mycolumns" type="List"/>
4    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
5    <lightning:datatable data="{! v.mydata }" 
6        columns="{! v.mycolumns }" 
7        keyField="id"
8        onrowselection="{! c.getSelectedName }"/>
9</aura:component>

1({
2    init: function (cmp, event, helper) {
3    cmp.set('v.mycolumns', [
4                {label: 'Opportunity name', fieldName: 'opportunityName', type: 'text'},
5                {label: 'Confidence', fieldName: 'confidence', type: 'percent', cellAttributes:
6                    { iconName: { fieldName: 'trendIcon' }, iconPosition: 'right' }},
7                {label: 'Amount', fieldName: 'amount', type: 'currency', typeAttributes: { currencyCode: 'EUR'}},
8                {label: 'Contact Email', fieldName: 'contact', type: 'email'},
9                {label: 'Contact Phone', fieldName: 'phone', type: 'phone'}
10            ]);
11        cmp.set('v.mydata', [{
12                id: 'a',
13                opportunityName: 'Cloudhub',
14                confidence: 0.2,
15                amount: 25000,
16                contact: 'jrogers@cloudhub.com',
17                phone: '2352235235',
18                trendIcon: 'utility:down'
19            },
20            {
21                id: 'b',
22                opportunityName: 'Quip',
23                confidence: 0.78,
24                amount: 740000,
25                contact: 'quipy@quip.com',
26                phone: '2352235235',
27                trendIcon: 'utility:up'
28            }]);
29    },
30    getSelectedName: function (cmp, event) {
31        var selectedRows = event.getParam('selectedRows');
32        // Display that fieldName of the selected rows
33        for (var i = 0; i < selectedRows.length; i++){
34            alert("You selected: " + selectedRows[i].opportunityName);
35        }
36    }
37})

1public with sharing class ContactController {
2    @AuraEnabled
3    public static List<Contact> getContacts() {
4        List<Contact> contacts = 
5                [SELECT Id, Name, Phone, Email FROM Contact];
6        //Add isAccessible() check
7        return contacts;
8    }
9}

1<aura:component controller="ContactController">
2    <aura:attribute name="mydata" type="Object"/>
3    <aura:attribute name="mycolumns" type="List"/>
4    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
5    <lightning:datatable data="{! v.mydata }" 
6        columns="{! v.mycolumns }" 
7        keyField="Id"
8        hideCheckboxColumn="true"/>
9</aura:component>

1({
2   init: function (cmp, event, helper) {
3        cmp.set('v.mycolumns', [
4                {label: 'Contact Name', fieldName: 'Name', type: 'text'},
5                {label: 'Phone', fieldName: 'Phone', type: 'phone'},
6                {label: 'Email', fieldName: 'Email', type: 'email'}
7            ]);
8        helper.getData(cmp);
9    }
10})

1({
2    getData : function(cmp) {
3        var action = cmp.get('c.getContacts');
4        action.setCallback(this, $A.getCallback(function (response) {
5            var state = response.getState();
6            if (state === "SUCCESS") {
7                cmp.set('v.mydata', response.getReturnValue());
8            } else if (state === "ERROR") {
9                var errors = response.getError();
10                console.error(errors);
11            }
12        }));
13        $A.enqueueAction(action);
14    }
15})

1columns: [
2    {label: 'Amount', fieldName: 'amount', type: 'currency', typeAttributes: { currencyCode: 'EUR' }}
3    // other column data
4]

1var columns = [
2   // simple icon
3   {label: 'Close date', fieldName: 'closeDate', type: 'date', sortable: true, cellAttributes: { iconName: 'utility:event' }},
4   // icon appended with a label
5   {label: 'Confidence', fieldName: 'confidence', type: 'percent', cellAttributes:
6           { iconName: { fieldName: 'confidenceDeltaIcon' }, iconLabel: { fieldName: 'confidenceDelta' }, iconPosition: 'right' }}
7    // other column data
8    ]

1<aura:component controller="ContactController">
2    <aura:attribute name="columns" type="List" default="[]"/>
3    <aura:attribute name="data" type="List" default="[]"/>
4    <aura:attribute name="enableInfiniteLoading" type="Boolean" default="true"/>
5    <aura:attribute name="initialRows" type="Integer" default="30"/>
6    <aura:attribute name="rowsToLoad" type="Integer" default="50"/>
7    <aura:attribute name="totalNumberOfRows" type="Integer" default="300"/>
8    <aura:attribute name="loadMoreStatus" type="String" default=""/>
9    <!-- Retrieve your data using an Apex Controller -->
10    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
11    <div style="height: 500px">
12        <lightning:datatable
13                columns="{! v.columns }"
14                data="{! v.data }"
15                keyField="id"
16                enableInfiniteLoading="true"
17                onloadmore="{! c.loadMoreData }"/>
18    </div>
19    {! v.loadMoreStatus }
20</aura:component>

1({
2    loadMoreData: function (cmp, event, helper) {
3        //Display a spinner to signal that data is being loaded
4        event.getSource().set("v.isLoading", true);
5        //Display "Loading" when more data is being loaded
6        cmp.set('v.loadMoreStatus', 'Loading');
7        helper.fetchData(cmp, cmp.get('v.rowsToLoad'))
8            .then($A.getCallback(function (data) {
9                if (cmp.get('v.data').length >= cmp.get('v.totalNumberOfRows')) {
10                    cmp.set('v.enableInfiniteLoading', false);
11                    cmp.set('v.loadMoreStatus', 'No more data to load');
12                } else {
13                    var currentData = cmp.get('v.data');
14                    //Appends new data to the end of the table
15                    var newData = currentData.concat(data);
16                    cmp.set('v.data', newData);
17                    cmp.set('v.loadMoreStatus', '');
18                }
19               event.getSource().set("v.isLoading", false);
20            }));
21    }
22})

1SELECT COUNT(Id) FROM Contact

1<aura:attribute name="rawData" type="Object" description="Stores the currently displayed rows of data"/>
2<aura:attribute name="activeFilter" type="string" default="all" description="The currently selected actions filter"/>
3<lightning:datatable
4            columns="{! v.mycolumns }"
5            data="{! v.mydata }"
6            keyField="id"
7            onheaderaction="{! c.handleHeaderAction }"/>

1({
2    init: function (cmp, event, helper) {
3    var headerActions = [
4            {
5                label: 'All',
6                checked: true,
7                name:'all'
8            },
9            {
10                label: 'Published',
11                checked: false,
12                name:'show_published'
13            },
14            {
15                label: 'Unpublished',
16                checked: false,
17                name:'show_unpublished'
18            },
19        ];
20        cmp.set('v.mycolumns', [
21            // other column data
22            {
23                label: 'Publishing State',
24                fieldName: 'published',
25                type: 'text',
26                actions: headerActions
27            }
28        ]);
29    },
30    handleHeaderAction: function (cmp, event, helper) {
31        // Retrieves the name of the selected filter
32        var actionName = event.getParam('action').name;
33        // Retrieves the current column definition
34        // based on the selected filter
35        var colDef = event.getParam('columnDefinition');
36        var columns = cmp.get('v.mycolumns');
37        var activeFilter = cmp.get('v.activeFilter');
38        if (actionName !== activeFilter) {
39            var idx = columns.indexOf(colDef);
40            // Update the column definition with the updated actions data
41            var actions = columns[idx].actions;
42            actions.forEach(function (action) {
43                action.checked = action.name === actionName;
44            });
45            cmp.set('v.activeFilter', actionName);
46            helper.updateBooks(cmp);
47            cmp.set('v.mycolumns', columns);
48        }
49    }
50})

1({
2    updateBooks: function (cmp) {
3        var rows = cmp.get('v.rawData');
4        var activeFilter = cmp.get('v.activeFilter');
5        var filteredRows = rows;
6        if (activeFilter !== 'all') {
7            filteredRows = rows.filter(function (row) {
8                return (activeFilter === 'show_published' ||
9                    (activeFilter === 'show_unpublished');
10            });
11        }
12        cmp.set('v.mydata', filteredRows);
13    }
14})

1<lightning:datatable
2            columns="{! v.mycolumns }"
3            data="{! v.mydata }"
4            keyField="id"
5            onrowaction="{! c.handleRowAction }"/>

1({
2    init: function (cmp, event, helper) {
3        var actions = [
4            { label: 'Show details', name: 'show_details' },
5            { label: 'Delete', name: 'delete' }
6        ];
7        cmp.set('v.mycolumns', [
8            // Other column data here
9            { type: 'action', typeAttributes: { rowActions: actions } }
10        ]);
11    },
12    handleRowAction: function (cmp, event, helper) {
13        var action = event.getParam('action');
14        var row = event.getParam('row');
15        switch (action.name) {
16            case 'show_details':
17                alert('Showing Details: ' + JSON.stringify(row));
18                break;
19            case 'delete':
20                var rows = cmp.get('v.mydata');
21                var rowIndex = rows.indexOf(row);
22                rows.splice(rowIndex, 1);
23                cmp.set('v.mydata', rows);
24                break;
25        }
26})

1@AuraEnabled
2public static Contact deleteContact(Contact contact) {
3    delete contact;
4    return contact;
5}

1helper.deleteRow(cmp, row);

1({
2    deleteRow: function(cmp, row) {
3      var action = cmp.get("c.deleteContact");
4        action.setParams({
5            "contact":row
6        });
7        action.setCallback(this, function(response) {
8            var state = response.getState();
9            if (state === "SUCCESS") {
10                var rows = cmp.get('v.mydata');
11                var rowIndex = rows.indexOf(row);
12                rows.splice(rowIndex, 1);
13                cmp.set('v.mydata', rows);
14            }
15            else if (state === "ERROR") {
16                // handle error
17            }
18        });
19        $A.enqueueAction(action);
20    }
21})

1({
2     init: function (cmp, event, helper) {
3         var actions = helper.getRowActions.bind(this, cmp);
4         cmp.set('v.mycolumns', [
5             // Other column data here
6             { label: 'State', fieldName: 'active', type: 'text' },
7             { type: 'action', typeAttributes: { rowActions: actions } }
8         ]);
9         // Fetch or set your data
10     },
11     handleRowAction: function (cmp, event, helper) {
12        var action = event.getParam('action');
13        var row = event.getParam('row');
14        switch (action.name) {
15            case 'activate':
16                helper.activateContact(cmp, row)
17                break;
18            case 'deactivate':
19                helper.deactivateContact(cmp, row)
20                break;
21        }
22    }
23})

1({
2    getRowActions: function (cmp, row, doneCallback) {
3        var actions = [];
4        if (row['isActive']) {
5            actions.push({
6                'label': 'Deactivate',
7                'iconName': 'utility:block_visitor',
8                'name': 'deactivate'
9            });
10        } else {
11            actions.push({
12                'label': 'Activate',
13                'iconName': 'utility:adduser',
14                'name': 'activate'
15            });
16        }
17        // simulate a trip to the server
18        setTimeout($A.getCallback(function () {
19            doneCallback(actions);
20        }), 200);
21    },
22    activateContact: function (cmp, row) {
23        var rows = cmp.get('v.data');
24        var rowIndex = rows.indexOf(row);
25        rows[rowIndex]['isActive'] = true;
26        rows[rowIndex]['active'] = 'Active';
27        cmp.set('v.data', rows);
28    },
29    deactivateContact: function (cmp, row) {
30        var rows = cmp.get('v.data');
31        var rowIndex = rows.indexOf(row);
32        rows[rowIndex]['isActive'] = false;
33        rows[rowIndex]['active'] = 'Inactive';
34        cmp.set('v.data', rows);
35    }
36})

1<div style="height: 300px;">
2    <!-- lightning:datatable goes here -->
3</div>

1<aura:component>
2    <!-- Attributes and init handler here -->
3    <lightning:datatable
4        columns="{! v.columns }"
5        data="{! v.data }"
6        keyField="id"
7        selectedRows="{! v.selectedRows }" />
8    <lightning:button label="Select" onclick="{!c.handleSelect}"/>
9</aura:component>

1({
2    // Load data via init handler first
3    // then handle programmatic selection
4    handleSelect: function (cmp, event, helper) {
5        var rows = ['a'];
6        cmp.set('v.selectedRows', rows);
7    }
8})

1({
2    // Client-side controller called by the onsort event handler
3    updateColumnSorting: function (cmp, event, helper) {
4        var fieldName = event.getParam('fieldName');
5        var sortDirection = event.getParam('sortDirection');
6        // assign the latest attribute with the sorted column fieldName and sorted direction
7        cmp.set("v.sortedBy", fieldName);
8        cmp.set("v.sortedDirection", sortDirection);
9        helper.sortData(cmp, fieldName, sortDirection);
10    }
11    })

1({
2    sortData: function (cmp, fieldName, sortDirection) {
3        var data = cmp.get("v.data");
4        var reverse = sortDirection !== 'asc';
5        //sorts the rows based on the column header that's clicked
6        data.sort(this.sortBy(fieldName, reverse))
7        cmp.set("v.data", data);
8    },
9    sortBy: function (field, reverse, primer) {
10        var key = primer ?
11            function(x) {return primer(x[field])} :
12            function(x) {return x[field]};
13        //checks if the two rows should switch places
14        reverse = !reverse ? 1 : -1;
15        return function (a, b) {
16            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
17        }
18    }
19})