0

I am trying to make a basic, external app with the Salesforce look-and-feel using Salesforce Lightning Design System (SLDS). Notably, the app includes data tables so I want to use the Data Table component. However I also want some interactive in-browser functions such as column sorting and in-text search. I see SLDS provides UI components for such functions, however it seems to be only CSS and the examples do not actually feature any interactivity.

Prior to integrating SLDS I was using the jQuery DataTables library for handy sorting function. However the library includes its own CSS look-and-feel and it does not seem too compatible with SLDS. In fact, if I use them separately, it works fine, but on the DataTable I do not have SLDS styling and on the SLDS table I do not have interactivity. If use both on the same table, the table elements' appearance gets broken.

  • Is there a way to make jQuery DataTables compatible with SLDS Data Tables?
  • In the negative case, is there a JavaScript library available for actual column sorting & search on a SLDS table? Or will I have to reinvent DataTable's functions by myself?
0

You can check the following documentation (with sample codes) about using Lightning Design system for other Javascript libraries:

  1. Lightning Design System for Angular
  2. Lightning Design System for React

The above links provide examples about column sorting and you can build up on the examples to add the search feature.

Check the Get Started pages for more info about installation steps

  • Thanks! That's interesting. I'm not sure I'm going to use a full front-end framework though. If Salesforce doesn't provide a lighter solution using, say, jQuery, I might have to do it myself eventually. – tuzepoito Jul 19 at 21:58
  • I see your point. Unlike for Angular and React, to my knowledge there is no similar documentation about Lightning design system for jQuery (at least for now but this may change in the future) – Shamina Jul 20 at 6:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.