I voted for this feaure request: New Table Data Sorting
Is there a way, even using code, to not allow users to click a heading to sort? My table has a rather complicated, specific sort column, and any other sort wouldn’t make sense. It’s also not obvious how to revert to the specified sort column once a header has been clicked.
You need to click 3 times:
.newTable tr:first-child > td > button {
pointer-events: none;
}
Thanks!
I’ve only dabbled in CSS and I don’t have any success under my belt so far. When I insert that code in the Custom CSS settings, and the corresponding CSS class in the component, toggle on preview, I still get the sort arrows. Is there another step I need to do? Sorry I’m not very experienced with this.
Please try it like this
The CSS goes under App → Settings → Appearance
And the class name goes under the Table Component → Options → CSS class
Yes, that matches what I have tried
This should work if you do it correctly as shown in the screenshot provided by @Eric_Penn.
Disregard previous comment, I think that the “Preview Custom CSS” button on my end was not turned on. Can you try again and turn that on?
Pretty sure I’m tracking the advice here, but it’s still not working.
The sort arrow in the last image shows up and functions. Is the code supposed to disable it, hide it, or both? I’d prefer both, but I’d be ok with just disabling it.
Could you provide clearer data or a screenshot? Is your last image the header, in the main table without grouping or with grouping?
There is grouping and column headers are blank, which is my preference for this table.
If you apply grouping, the header is counted as the second row. Please test it again.
.newTable tr:nth-child(2) > td > button {
pointer-events: none;
}
Brilliant! Thanks for the answer 
Since we’re on roll here, would you be able to add more CSS to the same class? As covered here, I’d like to limit the width of the table to the width of the app, and not have to scroll to the right to reach the actions, even if Group by text is unusually long. Is that possible?
Can you show me a screenshot with your very long group by text?
Here’s what it looks like in the old table component. Essentially we use this table as a calendar. We’re looking at several different crews for one day. Crew members see a different view with only their events. The first item is a meeting that shows up on everyone’s individual schedule, in this case, with 17 names (First L) as a joined list. The later groups that are for a crew’s jobs for the day include a summary of hours, rates, and $ total for the crew’s day. The long group text wraps, and the actions are still accessible without scrolling.
Here’s what it looks like in the new table component. The long grouping text extends the width of the table, and you have to scroll to get to the actions. I put in a workaround to clip the long group name, but it would be nice if it wrapped at the max width like the old one. As this project has progressed, I’ve gotten more careful about adding ever more columns to solve problems. Also, as mentioned here, the grouping is much nicer in the old table component - the headings and white space are organized better.
So what you want is to wrap the group text?
I think that would do the trick. And if I learn how to control wrapping I would use that in new table columns as well if that’s possible. Two for one 
Is this what you were expecting?
.newTable tr > td {
white-space: normal;
}
Amazing! I really need to learn more about CSS…
Thanks again
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.