Star Wars API Server Search (Object)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/canary/zinggrid-canary.min.js"></script>
  <style>
    :root {
      --bgColor: #041F35;
      --headerFontColor: #fff;
      --mainFontColor: var(--bgColor, darkblue);
      --rowColor: #777;
      --zg-caption-background: var(--bgColor, inherit);
      --zg-caption-color: var(--headerFontColor, white);
      --zing-grid-color: var(--mainFontColor);
    }

    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .button {
      text-align: center;
      background: #07C;
      color: #FFF;
      cursor: pointer;
      border-radius: 3px;
      font-size: 0.85rem;
      padding: 5px 20px;
      cursor: pointer;
      margin: 15px 0 15px 15px;
      position: relative;
      top: 0;
    }

    .button:hover {
      background: #1b6ead;
    }

    zing-grid[loading] {
      min-height: 600px;
    }

    /* hide some inner grid elements */

    zing-grid[loading] zg-pager {
      visibility: hidden;
    }

    zg-load-mask {
      /* set the color to match the gif */
      opacity: .90;
      top: 65px;
      height: calc(100% - 65px);
      /* custom gif for loading */
      background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
      /* Center and scale the image nicely */
      background-position: center;
      background-repeat: repeat;
      background-size: contain;
    }

    .zg-ref {
      display: none;
    }

    zing-grid[loading] {
      height: 800px;
    }
  </style>
</head>

<body>
  <div id="myGrid">
    <a class="zg-ref" href="https://www.zinggrid.com/">Powered by ZingGrid</a>
  </div>
  <script>
    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content

      // define params for fetching data
      const params = {
        // define the main source for the API
        src: 'https://swapi.py4e.com/api/people/',
        // define the path in the JSON to get the array of results. In this case it is body.results
        recordPath: 'results',
        // if loadByPage is set to true it will go to the server for each new page of data
        loadByPage: 'true',
        // define the "page" query parameter
        pageKey: 'page',
        // Need to tell ZG how many records were returned so it knows how to divide up the page-size
        countPath: 'count',
        // define the path in the result JSON to find next/prev urls
        nextPath: 'next',
        // define the path in the result JSON to find next/prev urls
        prevPath: 'previous',
        // Need to tell ZG how mto search the API
        searchKey: 'search',
      };

      // define columns
      let columns = [{
          index: 'name',
        },
        {
          index: 'height',
        },
        {
          index: 'mass',
        },
        {
          index: 'hair_color',
        },
        {
          index: 'eye_color',
        },
        {
          index: 'skin_color',
        }
      ];

      // define overall grid configuration
      let gridConfig = {
        caption: 'ZingGrid Star Wars',
        pager: true,
        pageSize: 5,
        search: true,
        params,
        columns,
      };

      // render grid and assign reference to variable
      let zgRef = new ZingGrid('myGrid', gridConfig);
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/canary/zinggrid-canary.min.js"></script>
</head>

<body>
  <div id="myGrid">
    <a class="zg-ref" href="https://www.zinggrid.com/">Powered by ZingGrid</a>
  </div>
</body>

</html>

:root {
  --bgColor: #041F35;
  --headerFontColor: #fff;
  --mainFontColor: var(--bgColor, darkblue);
  --rowColor: #777;
  --zg-caption-background: var(--bgColor, inherit);
  --zg-caption-color: var(--headerFontColor, white);
  --zing-grid-color: var(--mainFontColor);
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.button {
  text-align: center;
  background: #07C;
  color: #FFF;
  cursor: pointer;
  border-radius: 3px;
  font-size: 0.85rem;
  padding: 5px 20px;
  cursor: pointer;
  margin: 15px 0 15px 15px;
  position: relative;
  top: 0;
}

.button:hover {
  background: #1b6ead;
}

zing-grid[loading] {
  min-height: 600px;
}

/* hide some inner grid elements */

zing-grid[loading] zg-pager {
  visibility: hidden;
}

zg-load-mask {
  /* set the color to match the gif */
  opacity: .90;
  top: 65px;
  height: calc(100% - 65px);
  /* custom gif for loading */
  background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: repeat;
  background-size: contain;
}

.zg-ref {
  display: none;
}

// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content

  // define params for fetching data
  const params = {
    // define the main source for the API
    src: 'https://swapi.py4e.com/api/people/',
    // define the path in the JSON to get the array of results. In this case it is body.results
    recordPath: 'results',
    // if loadByPage is set to true it will go to the server for each new page of data
    loadByPage: 'true',
    // define the "page" query parameter
    pageKey: 'page',
    // Need to tell ZG how many records were returned so it knows how to divide up the page-size
    countPath: 'count',
    // define the path in the result JSON to find next/prev urls
    nextPath: 'next',
    // define the path in the result JSON to find next/prev urls
    prevPath: 'previous',
    // Need to tell ZG how mto search the API
    searchKey: 'search',
  };

  // define columns
  let columns = [{
      index: 'name',
    },
    {
      index: 'height',
    },
    {
      index: 'mass',
    },
    {
      index: 'hair_color',
    },
    {
      index: 'eye_color',
    },
    {
      index: 'skin_color',
    }
  ];

  // define overall grid configuration
  let gridConfig = {
    caption: 'ZingGrid Star Wars',
    pager: true,
    pageSize: 5,
    search: true,
    params,
    columns,
  };

  // render grid and assign reference to variable
  let zgRef = new ZingGrid('myGrid', gridConfig);
});