Using fixedColumns with a hidden column, or specifying a target?

serverFault

Hello,

I have question regarding fixedColumns. I have created a test case, linked below.

Background:
I have a table that lists employees, and days of the week. Foremen access this to schedule their employees for a given week, typically via mobile, when clicking on a cell brings up a dialog allowing them to select jobs, schedule work, send SMS to employees, etc. The problem is that quite a few of our employees have very long names, such that the name field takes up 75% of the horizontal screen space, so even with fixedColumn enabled users can only see 1-1.5 days of the week when scrolling in the X axis.

Question:
Can I enable fixedColumn such that when you begin to scroll to the right, a column that was hidden becomes visible and it only displays the FirstName + MiddleInitial? So when not scrolling you see the entire name (LastName, FirstName MiddleInitial), but the moment you scroll more than, say, 30px to the right, the column is replaced with a truncated version showing less info (and taking up less horizontal space)? I know how to sort a Datatable using a hidden column, but am not sure if this is possible with fixedColumns.

Restrictions:
One limitation on my options - the name field MUST display the entirety of LastName, FirstName MiddleInitial by default. I might be able to convince them to split LastName and FirstName MiddleInitial into two separate columns, but even then how do I make it so the second column (FirstName MiddleInitial) is the fixedColumn, not the first column? Here too I'd need the first column to be scrolled out of the viewport, or set it to hidden when scrolling.

Any help greatly appreciated.

Test case/Example: https://live.datatables.net/joxupavo/1/

serverFault

I've been looking at other ways of achieving this. Rather than finding a solution using fixedColumns, is it possible, while using fixedCoulmns, to "detect" when the table is scrolled horizontally? So when the table is in its original position, you see the full name. Then, using JS, when the table is scrolled, I replace the contents of the name column for each row with a shortened name that I store as an attribute?

Is that possible? I've updated the below test case to include the attribute short-name and another full-name, but I'm not sure how to make that work. Any guidance greatly appreciated.

Updated test case: https://live.datatables.net/gehuhibi/1/

kthorngren

That was a fun puzzle. I think this is what you are looking for:
https://live.datatables.net/gehuhibi/2/edit

It uses the jQuery scroll for the Datatable and uses jQuery scrollLeft() to get the scroll position. If 0 it uses the full-name attribute otherwise is uses the short-name attribute.

It uses a debounce function to keep from getting into an infinite loop. cells().every() is used to loop through all the cells in column 0 to update the HTML display with cell().node(). This allows the Datatables data cache to not be updated so the user can still search for the full name. Finally columns.adjust() is called to make sure the header widths are adjusted to the updated column width.

The transition flag is used to see if the scroll bar is move from the far left or back to the far left. This is to keep from performing updates each time the table is scrolled.

Make sure to test by going to other pages, performing searches and ordering the table.

Kevin

serverFault

@kthorngren Thank you, I really appreciate it! I wound up using scrollLeft too in my current attempts, though mine is not as responsive as the demo you built as I attached the position test to a mouse event.

As an alternative I wound up creating a floating action button that allowed users to pin/unpin the name column, and toggle the name length using jQuery.

I'll integrate this into my test and see how it performs. Much appreciated!

allan

That sounds quite cool - if you are able to link to the page, I'd quite like to see that in action. Always interested in new ways of presenting UI control for a table.

Allan

serverFault

@kthorngren One problem with your proposed solution that I'm running into.

The width of the first column is only resized successfully if the header row isn't sticky. So if you've scrolled part way down the table before scrolling horizontally, the width of the name column doesn't actually change. Any thoughts?

allan

Can you post a link to an example demonstrating the issue please?

Allan

serverFault

@allan I was actually using the example that kthorngren made, but I've created an alternate version that makes the easier to encounter.

kthorngren made a version of the table where when you scroll left, the Name column's contents are shortened to a shorter version of the name. This works great. The column header resizes as well, EXCEPT when you've scrolled down enough to activate the floating header. When the floating header is visible, and the table is scrolled left, the floating header's name column doesn't shrink on its own. Hoping there's a way to fix this.

Here's my demo. Scroll down enough for the floating header to be visible, then use your arrow keys or mouse to scroll left and you'll see the issue: https://live.datatables.net/gehuhibi/5