Stop using JavaScript to hide columns

[rfultz]

Summary

• Resolves Bug: On mobile, after opening details panel, columns disappear from view #4913

Required reviewers

• front-end
• UX
• someone else to help check possible weirdness

Impacted areas of the application

Potentially all datatables

Screenshots

left: initial load;
right: after opening a details panel on the smallest browser width

Related PRs

None

How to test

How to replicate

• go to a datatables page
• shrink the browser window to the smallest width
• reload the page
• right-click the first Source name listed and Inspect
• see how there are seven <td>? That quantity is what we're watching
• back to the main window
• close the filters (they're just in the way)
• click one of the ⊕ in the right column of the table
• see how now there are fewer <td>?
• now expanding the browser window won't restore those <td> because they no longer exist
• that's what this PR is trying to fix

Testing this PR

• pull the branch
• maybe npm i but likely not
• npm run build (or just npm run build-js)
• ./manage.py runserver
• go to the datatables page linked in 'How to replicate'
• follow the replication steps
• now, expanding the browser window after having opened and closed the ⊕ panel should show the same columns as a wide-layout page load

Side effects

• Does this break anything on other datatables pages?
• This won't be a fun test.
• We'll need to test opening and close panels on different width on every template.
• Why was api.columns…visible() being used at all? Was it just left-over from before the hide-panel-* classes were implemented? There's a comment in tables.js: // TODO figure way to share these values with CSS.

Next steps

If approved, remove the commented code from tables.js

[johnnyporkchops]

@rfultz I think this code was to hide some columns to keep the details panel from getting pushed under the table at a certain desktop breakpoint. But then on mobile (where thats not needed because of the overlay behavior), the columns do not reappear after the panel is closed. Is there a better way to solve that display problem or just remove the classes upon closing panel ?

Here is what I am seeing with this code removed on the PR branch ( I don't think you would see it if the filter panel is collapsed):

[JonellaCulmer]

Everything is working as it should again - no disappearing columns at the smallest widths! Thank you, @rfultz