I was really excited to use the new Lightning DataTables Component with the release of Winter 18. I have implemented them in a new project that needs to be functional on mobile and desktop. As the LDS (lightning design system) and LEX (lightning experience) are mobile first, responsive UX frameworks I assumed the UX would be seamless on both desktop and mobile. I was wrong and it was not until after I opened a case with SFDC and 2 weeks of back and forth that I get an answer from the SFDC tier 3 support stating that the DataTables are not mobile ready because they are leveraging the LDS. Now, first off I am not accepting this answer because I have used LDS to style tables that work swimmingly on mobile. I have said as much to the ticket owner at SFDC and will see what they say. To give a description of the problem—
When the user scrolls on mobile the header row disappears or partially disappears… it comes back if you tap it but then disappears again when you scroll. This is not the only issue I have fount with the DataTable component.
- Sort is weird… it sorts alright but once you sort one column the next column you sort seems to be dependent on the initially sorted column.
- Column sizing turned on seems to break the responsive table.
- Of course the aforementioned header on mobile issue.
If I had known these things I would have rolled my own table because another big limitation (that I did know up front) is that DataTables does not allow for input elements.