Listing switch from data table to card view.

The current listing module allows you to have a datatable or card view, but there is not the option to set when the datatable changes to a card view with a change of viewport.  Adding the following code to the on init JS in the listing will allow this to occur

let myMediaQuery = window.matchMedia('(min-width: 900px)');

function widthChangeCallback(myMediaQuery) {
  var listingModuleId = 868
  if(myMediaQuery.matches) {
  document.getElementById("viewDataTable-" + listingModuleId).click();
  return false;
   } else {
  document.getElementById("viewCards-" + listingModuleId).click();
  return false;
   }
}
myMediaQuery.addEventListener('change', widthChangeCallback);

you can add a min max such as 
(min-width: 600px) and (max-width: 800px) to the match media

To see in action just resize the width of your browser

Token code
{
  "exportType": "TokenNamespaces",
  "exportDate": "2024-04-20T11:17:10.927Z",
  "namespaces": [
    {
      "id": 54,
      "globalId": "d48189d8-751f-42b9-a95c-02a1eb5db5ec",
      "portalId": 0,
      "name": "Skin",
      "description": null,
      "isSystem": false,
      "tokens": [
        {
          "globalId": "8683bab3-dbf0-4115-8f71-722636fe7324",
          "name": "ResponsiveListing",
          "description": "javascript for responsive listing\nfor individual query (min-width: 900px)\nor (min-width: 600px) and (max-width: 800px)\nmoduleId is id of the listing module",
          "defaultValue": "",
          "lastModifiedDate": "2024-04-20T11:15:57.7547606+00:00",
          "lastModifiedBy": 2,
          "cacheTimeSec": 0,
          "cacheLayer": 0,
          "src": {
            "type": "string",
            "text": "let myMediaQuery = window.matchMedia('[TknParams:MediaQuery]');\n\nfunction widthChangeCallback(myMediaQuery) {\n  var listingModuleId = [TknParams:ModuleId]\n  if(myMediaQuery.matches) {\n  document.getElementById(\"viewDataTable-\" + listingModuleId).click();\n  return false;\n   } else {\n  document.getElementById(\"viewCards-\" + listingModuleId).click();\n  return false;\n   }\n}\nmyMediaQuery.addEventListener('change', widthChangeCallback);",
            "evaluateTokens": false,
            "params": [
              "MediaQuery",
              "ModuleId"
            ]
          },
          "parser": {
            "type": "string",
            "replace": false,
            "decodeHtml": false
          },
          "sourceName": "Constant String"
        }
      ]
    }
  ]
}