How to create table with resizable columns using Lightning Design System ( Column Resizable DataTable )

Lightning design system comes with some really nice cascading stylesheet but still, there are some components where JS support is not provided. During a project, I came across the same where I had to write Javascript code by myself. After going many rounds of testing and changes, finally, I managed to get it working. It’s Data Table component which I am talking about.

How does the column resizing work?

I have used mousedown and mousemove events to recognize the mouse cursor moment. Resizable columns have a divider which let users change the column width. You can check the following Gist for the code.

LINK TO SAMPLE CODE

Table

Please feel free to comment your question/suggestions in the comment box.

How to recreate modal component for force:lightningQuickActionWithoutHeader

If you are building a lightning component for a lightning-quick action then you must be having a hard time to add additional buttons to the footer. If you are implementing the force:lightningQuickActionWithoutHeader interface in the component then you can get rid of the default header and footer and can create your own footer with the buttons of your choice. But still, it doesn’t match with the Lightning Experienceince view. I had the same issue on a recent project and I was able to make it look like the default button’s pop-up.

In order to get the lightning experience matching modal, you need to make some tweaks in the CSS along with lightning design system CSS. You need to include some styles which will modify the standard style so you can get the same look and feel.

After Salesforce Spring ’18 release, Tag Not Allowed in Components. You can’t add a  tag in component markup or when you dynamically create a component in JavaScript code. This restriction ensures better component encapsulation and prevents component styling interfering with the styling of another component.

So,  In order to use a workaround, we will have to include a CSS in our lightning component using a static resource to modify the CSS of the container which is wrapping the lightning component.

.cuf-content{
    padding:0 !important;
}
.slds-p-around--medium{
    padding:0 !important;
}
.slds-modal__container{
    width:80% !important; // You can update the width as per your need
    max-width:80% !important;
}
.slds-modal__content{
    overflow-y:hidden !important;
    height:unset !important;
    max-height:unset !important;
}

Above provided CSS needs to be loaded as an external resource. You will need to copy and paste the CSS into a file and save it as a static resource. Make sure file extension is “.css”. For instance, assume we have uploaded it as a static resource and named it “quickActionStyle”.

Sample Component

Screenshot_1

 

Now, the quick action will look like below.

Screenshot_6

So, we are able to achieve what we were looking for with some small tweaks. If you have any question and concern then feel free to comment on the post.

Happy Easter!!

Salesforce Cookies #2

Now using Lightning Design System in Lightning Application is easier – No static resource is required to include CSS files. An application automatically gets Lightning Design System styles and design tokens if it extends force:slds.

<aura:application extends="force:slds">
    <!-- customize your application here -->
</aura:application>
 

Same behaviour can be accomplished in Visualforce pages with the help of apex:slds component. Include <apex:slds /> in a Visualforce page to use Lightning Design System stylesheets in the page.

&lt;apex:page&gt;

     &lt;apex:slds /&gt;
     &lt;!-- Your SLDS-styled content --&gt;

&lt;/apex:page&gt;