replace custom tables with datatables.net

[simonLeary42]

I've long been hacking with tables.js, filter.js and sort.js, and I don't wish to maintain them any longer. https://datatables.net/ is compatible with tables generated by PHP, is open source, is packed with features, looks good enough, and runs fast enough. This is a big improvement for mobile.

groups.php

pi.php

user-mgmt.php

pi-mgmt.php

column visibility selector modal

Features

• sorting, filtering, searching
  • datetime sorting
  • numeric sorting
• pagination
• stripes
• highlight on hover
• hide columns to make table thinner when necessary
  • click on row to reveal hidden columns below transposed
    • in groups.php this is able to replace the expandable ajax functionality from tables.js
    • in pi-mgmt.php this feature could not be used due to the complexity of the expandable content, so the mobile experience is still not great
• Select which columns to display

Downsides

• datatables JS files are being loaded on all pages, even pages without tables

  • I plan to fix this by refactoring the <script> elements as separate PHP includes
  • with browser caching this is kind of a non-issue

• groups.php now loads all PI membership data at once instead of individually for each PI on click

  • this is limited to just the PIs that the current user is a member of, so there should be no performance hit

• there is a slight delay before the tables are rendered, only noticable on the admin pages with lots of data

  demo with production LDAP data (much bigger than dev environment):

  datatables-user-mgmt-demo-blurred.mp4

  datatables-pi-mgmt-demo-blurred.mp4

Issues Closed

• Closes pagination #140
• Closes groups.php looks bad on mobile #373
• Closes use datatables.net? #450
• Closes de-nest sort.js #449
• Closes JS optimizations #448
• Closes replace "Unity ID" with "GID" in pi-mgmt #447
• Closes user management search box disappears #115
• Closes pi mgmt: group with no users looks weird #143
• Closes Make admin panel tables sortable and filterable #70
• Closes sort.js filter.js: mark column as non-sortable, non-filterable #451

Other Changes of Note

• Changed "Unity ID" to "GID" in pi-mgmt.php
• Changed "Pending PI Requests" to "PI Group Requests" in pi-mgmt.php
• Changed "List of PIs" to "PI Groups" in pi-mgmt.php
• Removed the prettifying of the Requested On datetime in pi-mgmt so that datatables would automatically detect it and add proper sorting
• Added column headers to some tables
• Moved the Actions column in pi.php from the left side to the right side

Future work

• load sort.js filter.js only when needed? #445
• user-mgmt.php: sort users based on whether or not they've requested account deletion #146

[Copilot]

Pull request overview

This PR replaces custom table implementations with the datatables.net library, modernizing the table functionality across the application. The changes introduce comprehensive table features including sorting, filtering, searching, pagination, and responsive design while removing legacy custom JavaScript and CSS code.

Key changes include:

• Integration of datatables.net CDN resources for enhanced table functionality
• Removal of custom table handling code (tables.js, sort.js, filter.js and associated CSS files)
• Refactoring of AJAX endpoints that previously served expandable table data

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
resources/templates/header.php	Added datatables.net CDN includes and removed references to deleted CSS files
webroot/panel/groups.php	Converted custom table to DataTable with responsive features and removed AJAX expandable functionality
webroot/panel/pi.php	Removed mailto links from email columns for consistency with DataTable output
webroot/admin/user-mgmt.php	Replaced custom filterable/sortable table with DataTable implementation
webroot/admin/pi-mgmt.php	Converted both PI request and PI list tables to DataTable format with responsive design
webroot/js/tables.js	Removed legacy expandable table JavaScript functionality
webroot/js/sort.js	Removed custom sorting implementation
webroot/js/filter.js	Removed custom filtering implementation
webroot/css/tables.css	Removed custom table styling
webroot/css/filters.css	Removed custom filter styling
webroot/panel/ajax/get_group_members.php	Removed AJAX endpoint as group members are now loaded inline
webroot/admin/ajax/get_group_members.php	Removed AJAX endpoint as group members are now loaded inline
resources/lib/UnityLDAP.php	Added new method to fetch PI group attributes with member UID filter
tools/docker-dev/identity/bootstrap.ldif	Updated test user email address

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[simonLeary42]

• TODO

problem: get_group_members.php has a feature where an admin can approve and deny users' membership requests, which is now gone.

see reqChild

Removed unused Actions column in pi-mgmt.php

Was not actually unused

[Copilot]

Pull request overview

Copilot reviewed 15 out of 17 changed files in this pull request and generated 18 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.