Update datatable details panels

JonellaCulmer commented 2 years ago

What we're after: Make changes to the details panel to help support improved usability across all datatables.

Completion criteria:

[ ] Details panel is updated to match the design
[ ] Any followup tickets are created for additional work
[ ] Ticket added to update pattern library

Considerations:

How will our table and grid structures impact the layout for details panels with a larger amount of data?
Can we use the jQuery datatables built in funnctionality row-details ?: https://datatables.net/examples/server_side/row_details.html
Or other existing jQuery datatables utilities
How can GTM be leveraged to implement these changes and track user engagement?

Designs

New details panel 1

dorothyyeager commented 2 years ago

Blocked; need to review results of A/B testing.

johnnyporkchops commented 2 years ago

jQuery datatables has built-in methods that might work for this https://datatables.net/examples/server_side/row_details.html

johnnyporkchops commented 3 weeks ago

The last time we discussed implementing this new pattern, we opted not to. I don't remember why(maybe to wait for webpack PR?). In case we end up in the same holding pattern again and need to fix the existing details panel in the meantime, this older issue has a conversation on why its happening and possible approaches to fixing it: https://github.com/fecgov/fec-cms/issues/4913

fecgov / fec-cms

Update datatable details panels #4942

Designs