[SalesForce] How to Add Column Resizing to Lightning Design System Data Table

I am working to build a Lightning Design System data table. I will have several columns that will push the width of the table body beyond a normal screen width. Therefore, I want to add column resizing to the table. I see that the LDS guide gives the CSS classes needed to display the resize bar, but not the interactive code via Javascript to execute the resize. I was unsure how to achieve this.

I did not know if there is an OOTB way to do this via LDS or if custom Javascript would be needed?

The LDS guide section I am referencing can be found here.

Best Answer

There is no out of the box way to do it in LDS. This has been discussed here as well.

There are several JS plugins which can help you achieve this though. A popular one is colResizable

Sample code

$("#sample").colResizable({
        liveDrag:true
});

You might want to look at this thread which lists multiple approaches and pick one based on our use cases (e.g. drag)

Related Solutions

[SalesForce] Lightning component linking salesforce lightning design system

There's a badge for that! Trailhead has a great unit that walks you through the process. To simplify the install you can go here and install it as a managed package.

Step 2 - Install the SLDS Unmanaged Package

The easiest way to get started is to install the latest Salesforce Lightning Design System unmanaged package, which includes the Design System as a static resource zip file.

Log in to your developer org

In a separate browser window, go to the Salesforce Lightning Design System downloads page, look under the Design System Unmanaged Packages section, and click on the latest unmanaged package. Press Install to install it. This will install the package in your Salesforce org. The unmanaged package includes the Salesforce Lightning Design System as a static resource zip file

[SalesForce] Lightning: with dynamic column count, want fixed width columns and scrolling instead of automatic resizing

Table elements always expand to take up all available space. Instead, you'll want to use normal div elements. I'm not going to try and build a perfectly working example, but you'll want to start off like this:

<div class="slds-scrollable_x">
  <div ...> <!-- set table styles here -->
    <lightning:layout>
      <aura:iteration ...>
        <lightning:layoutItem size="4">
          ...
        </lightning:layoutItem>
     </aura:iteration>
   </div>
   <aura:iteration ...>
     <lightning:layout>
       <aura:iteration ...>
         <lightning:layoutItem size="4">
           ...
         </lightning:layoutItem>
       </aura:iteration>
     </lightning:layout>
   </aura:iteration>
 </div>
</div>

This will produce the effect you're looking for without the use of a table element.

Edit: Here's a really simple example app that demonstrates the logic I'm describing.

<aura:application extends="force:slds">
    <aura:attribute name="columns" type="Integer" default="1" />
    <aura:attribute name="rows" type="List" default="[['Column 1']]" />
    <lightning:slider label="Columns" step="1" value="{!v.columns}" onchange="{! c.handleChange }"/>

    <div class="slds-scrollable_x">
        <aura:iteration items="{!v.rows}" var="row">
            <lightning:layout>
                <aura:iteration items="{!row}" var="col">
                    <lightning:layoutItem size="2">
                        {!col}
                    </lightning:layoutItem>
                </aura:iteration>
            </lightning:layout>
        </aura:iteration>
    </div>
</aura:application>

({
    handleChange: function(component, event, helper) {
        var data = [];
        var cols = component.get("v.columns");
        var row = [];
        while(row.length < cols) {
            row.push("Column "+(row.length+1));
        }
        while(data.length < 10) {
            data.push(row);
        }
        component.set("v.rows", data);
    }
})

Best Answer

Related Solutions

[SalesForce] Lightning component linking salesforce lightning design system

Related Topic