Resizable Data Table ( Lightning Design System )

ResizableTable.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="mouseStart" type="string" />
    <aura:attribute name="newWidth" type="string" />
    <aura:attribute name="currentEle" type="Object" />
    
	<div class="container" onmouseup="{!c.resetColumn}">
        <div class="slds-table--header-fixed_container slds-scrollable_x">
            <div class="">
                <table class="slds-table slds-table--header-fixed slds-table_bordered slds-table_edit slds-table_resizable-cols" style="table-layout:fixed">
                    <thead>
                        <tr class="slds-text-title_caps">
                            <th scope="col" class="slds-is-resizable" style="width:300px;">
                                <div class="slds-cell-fixed" style="width:300px;" onmousemove="{!c.setNewWidth}">
                                    <a href="javascript:void(0);" role="button" class="slds-th__action slds-text-link_reset">
                                        <span class="slds-truncate" title="Opportunity Name">Opportunity Name</span>
                                    </a>
                                    <div class="slds-resizable">
                                        <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-assignment" tabindex="-1" />
                                        <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}">
                                            <span class="slds-resizable__divider"></span>
                                        </span>
                                    </div>
                                </div>
                            </th>
                            
                            <th scope="col" class="slds-is-resizable" style="width: 200px;">
                                <div class="slds-cell-fixed" style="width: 200px;" onmousemove="{!c.setNewWidth}">
                                    <a href="javascript:void(0);" role="button" class="slds-th__action slds-text-link_reset">
                                        <span class="slds-truncate" title="Account Name">Account Name</span>
                                    </a>
                                    <div class="slds-resizable">
                                        <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-assignment" tabindex="-1" />
                                        <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}"  >
                                            <span class="slds-resizable__divider"></span>
                                        </span>
                                    </div>
                                </div>
                            </th>
                            <th scope="col" class="slds-is-resizable" style="width: 120px;">
                                <div class="slds-cell-fixed" style="width: 120px;" onmousemove="{!c.setNewWidth}">
                                    <a href="javascript:void(0);" role="button" class="slds-th__action slds-text-link_reset">
                                        <span class="slds-truncate" title="Close Date">Close Date</span>
                                    </a>
                                    <div class="slds-resizable">
                                        <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-assignment" tabindex="-1" />
                                        <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}">
                                            <span class="slds-resizable__divider"></span>
                                        </span>
                                    </div>
                                </div>
                            </th>
                            <th scope="col" class="slds-is-resizable" style="width: 200px;">
                                <div class="slds-cell-fixed" style="width: 200px;" onmousemove="{!c.setNewWidth}">
                                    <a href="javascript:void(0);" role="button" class="slds-th__action slds-text-link_reset">
                                        <span class="slds-truncate" title="Stage">Stage</span>
                                    </a>
                                    <div class="slds-resizable">
                                        <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-assignment" tabindex="-1" />
                                        <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}">
                                            <span class="slds-resizable__divider"></span>
                                        </span>
                                    </div>
                                </div>
                            </th>
                            <th scope="col" class="slds-is-resizable" style="width: 200px;">
                                <div class="slds-cell-fixed" style="width: 200px;" onmousemove="{!c.setNewWidth}">
                                    <a href="javascript:void(0);" role="button" class="slds-th__action slds-text-link_reset">
                                        <span class="slds-truncate" title="Confidence">Confidence</span>
                                    </a>
                                    <div class="slds-resizable">
                                        <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-assignment" tabindex="-1" />
                                        <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}">
                                            <span class="slds-resizable__divider"></span>
                                        </span>
                                    </div>
                                </div>
                            </th>
                            <th scope="col" class="slds-is-resizable" style="width: 200px;">
                                <div class="slds-cell-fixed" style="width: 200px;" onmousemove="{!c.setNewWidth}">
                                    <a href="javascript:void(0);" role="button" class="slds-th__action slds-text-link_reset">
                                        <span class="slds-truncate" title="Amount">Amount</span>
                                    </a>
                                    <div class="slds-resizable">
                                        <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-assignment" tabindex="-1" />
                                        <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}">
                                            <span class="slds-resizable__divider"></span>
                                        </span>
                                    </div>
                                </div>
                            </th>
                            <th scope="col" class="slds-is-resizable" style="width: 200px;">
                                <div class="slds-cell-fixed" onmousemove="{!c.setNewWidth}" style="width: 200px;">
                                    <a href="javascript:void(0);" role="button" class="slds-th__action slds-text-link_reset">
                                        <span class="slds-truncate" title="Contact">Contact</span>
                                    </a>
                                    <div class="slds-resizable">
                                        <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-assignment" tabindex="-1" />
                                        <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}">
                                            <span class="slds-resizable__divider"></span>
                                        </span>
                                    </div>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody onmousemove="{!c.resetColumn}">
                        <tr>
                            <th data-label="Opportunity Name">
                                <div class="slds-truncate" title="aptclouds"><a href="javascript:void(0);">aptclouds</a></div>
                            </th>
                            <td data-label="Account Name">
                                <div class="slds-truncate" title="aptclouds">aptclouds</div>
                            </td>
                            <td data-label="Close Date">
                                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                            </td>
                            <td data-label="Prospecting">
                                <div class="slds-truncate" title="Prospecting">Prospecting</div>
                            </td>
                            <td data-label="Confidence">
                                <div class="slds-truncate" title="20%">20%</div>
                            </td>
                            <td data-label="Amount">
                                <div class="slds-truncate" title="$25k">$25k</div>
                            </td>
                            <td data-label="Contact">
                                <div class="slds-truncate" title="naval@aptclouds.com"><a href="javascript:void(0);">naval@aptclouds.com</a></div>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row" class="fixed-col col-1" data-label="Opportunity Name">
                                <div class="slds-truncate" title="aptclouds + Anypoint Connectors"><a href="javascript:void(0);">aptclouds + Anypoint Connectors</a></div>
                            </th>
                            <td data-label="Account Name">
                                <div class="slds-truncate" title="aptclouds">aptclouds</div>
                            </td>
                            <td data-label="Close Date">
                                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                            </td>
                            <td data-label="Prospecting">
                                <div class="slds-truncate" title="Prospecting">Prospecting</div>
                            </td>
                            <td data-label="Confidence">
                                <div class="slds-truncate" title="20%">20%</div>
                            </td>
                            <td data-label="Amount">
                                <div class="slds-truncate" title="$25k">$25k</div>
                            </td>
                            <td data-label="Contact">
                                <div class="slds-truncate" title="naval@aptclouds.com"><a href="javascript:void(0);">naval@aptclouds.com</a></div>
                            </td>
                        </tr>
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</aura:component>

ResizableTableController.js

({
  
    calculateWidth: function(component, event, helper) {
        
        var childObj = event.target
        var mouseStart=event.clientX;
        component.set("v.currentEle", childObj);
        component.set("v.mouseStart",mouseStart);
        // Stop text selection event so mouse move event works perfectlly.
        if(event.stopPropagation) event.stopPropagation();
        if(event.preventDefault) event.preventDefault();
        event.cancelBubble=true;
        event.returnValue=false;  
    },
    
    setNewWidth: function(component, event, helper) {
        var currentEle = component.get("v.currentEle");
        if( currentEle != null && currentEle.tagName ) {
            var parObj = currentEle;
            while(parObj.parentNode.tagName != 'TH') {
                if( parObj.className == 'slds-resizable__handle')
                    currentEle = parObj;    
                parObj = parObj.parentNode;
                count++;
            }
            var count = 1;
            var mouseStart = component.get("v.mouseStart");
            var oldWidth = parObj.offsetWidth;  // Get the width of DIV
            var newWidth = oldWidth + (event.clientX - parseFloat(mouseStart));
            component.set("v.newWidth", newWidth);
            currentEle.style.right = ( oldWidth - newWidth ) +'px';
            component.set("v.currentEle", currentEle);
        }
    },
	// We are setting the width which is just changed by the mouse move event     
    resetColumn: function(component, event, helper) {
        // Get the component which was used for the mouse move
        if( component.get("v.currentEle") !== null ) {
            var newWidth = component.get("v.newWidth"); 
            var currentEle = component.get("v.currentEle").parentNode.parentNode; // Get the DIV
            var parObj = currentEle.parentNode; // Get the TH Element
            parObj.style.width = newWidth+'px';
            currentEle.style.width = newWidth+'px';
            console.log(newWidth);
            component.get("v.currentEle").style.right = 0; // Reset the column devided 
            component.set("v.currentEle", null); // Reset null so mouse move doesn't react again
        }
	}
})