Admin tables adhere to appending bodyHtml and headHtml when in API mode

CHANGELOG-WIP.md

@@ -599,6 +599,7 @@
 - Removed `craft\web\User::startElevatedSession()`. `login()` should be used instead.
 - Removed `craft\web\twig\variables\Cp::getEntryTypeOptions()`.
 - Admin tables now support client-side searching when not running in API mode. ([#14126](https://github.com/craftcms/cms/pull/14126))
+- Admin tables now support appending `bodyHtml` and `headHtml` when running in API mode.
 - Added `Craft.BaseElementSelectInput::defineElementActions()`.
 - Added `Craft.CP::setSiteCrumbMenuItemStatus()`.
 - Added `Craft.CP::showSiteCrumbMenuItem()`.

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Entry chips no longer display their entry type’s icon.
 - Element types can now implement `craft\base\Iconic` to have an icon displayed within their cards.
 - Element queries’ `level` param now supports passing an array which includes `null`. ([#14419](https://github.com/craftcms/cms/issues/14419))
+- Admin tables now support appending `bodyHtml` and `headHtml` when running in API mode.
 - Added `craft\fieldlayoutelements\BaseField::baseInputName()`.
 - Added `craft\fieldlayoutelements\BaseField::errorKey()`.
 - Fixed a bug where it wasn’t possible to clear out users’ full names once they were set. ([#14402](https://github.com/craftcms/cms/pull/14402))

packages/craftcms-vue/admintable/App.vue

@@ -96,6 +96,7 @@
             :no-data-template="noDataTemplate"
             :query-params="queryParams"
             :row-class="rowClass"
+            :http-fetch="fetch"
             pagination-path="pagination"
             @vuetable:loaded="init"
             @vuetable:loading="loading"
@@ -487,6 +488,7 @@
         lastPage: 1,
         detailRow: AdminTableDetailRow,
         dragging: false,
+        endpointResponse: null,
         initTableData: [],
         isEmpty: false,
         isLoading: true,
@@ -525,7 +527,24 @@
             }
 
             if (this.tableDataEndpoint) {
-              Craft.initUiElements(this.container);
+              new Promise(async (resolve) => {
+                if (this.endpointResponse) {
+                  // Check to see if `headHtml` is in the response
+                  if (this.endpointResponse['headHtml']) {
+                    // Append the headHtml to the page
+                    await Craft.appendHeadHtml(this.endpointResponse.headHtml);
+                  }
+
+                  // Check to see if `bodyHtml` is in the response
+                  if (this.endpointResponse['bodyHtml']) {
+                    // Append the bodyHtml to the page
+                    await Craft.appendBodyHtml(this.endpointResponse.bodyHtml);
+                  }
+                }
+                resolve();
+              }).finally(() => {
+                Craft.initUiElements(this.container);
+              });
             }
           }
         });
@@ -554,6 +573,10 @@
         }
       },
 
+      fetch(url, options) {
+        return Craft.sendActionRequest('GET', url, options);
+      },
+
       loading(isLoading = true) {
         this.isLoading = isLoading;
 
@@ -765,7 +788,9 @@
       },
 
       onLoadSuccess(data) {
+        this.endpointResponse = null;
         if (data && data.data && data.data.data) {
+          this.endpointResponse = data.data;
           let emitData = data.data.data;
           this.$emit('data', emitData);
           if (this.onData instanceof Function) {

src/web/assets/admintable/dist/js/app.js.LICENSE.txt

@@ -1,3 +1,5 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
 /**
  * @license
  * Lodash <https://lodash.com/>