Display a table from MySQL

NOTE DataGridXL requires a commercial license.

We are mostly front-end guys, but we remember this PHP script that selects rows from a database table. It goes back a long way...

php

<?php
  // connect to database
  $mysqli = new mysqli("localhost",$username,$password,$database);

  // select records from database table
  $sql = mysqli_query("SELECT name, votes, origin FROM dogbreeds");

  // create rows array and add sql results to it
  $rows = array();
  while($r = mysqli_fetch_assoc($sql)) {
      $rows[] = $r;
  }

  // convert PHP array to JSON string
  $rows_json = json_encode($rows);
?>

Once you have collected your $rows_json JSON-string, you can pass it to the DataGridXL constructor:

php

<!-- empty div (container for our grid) -->
<div style="width:100%;height:400px;"></div>
<script>

  const my_data = <?php echo $rows_json; ?>;
  console.log('is our data valid?', my_data);

  const grid = new DataGridXL("grid", {
    data: my_data
  });

</script>

We know that not everybody appreciates this style of echoing PHP strings inside a <script> block.

To not upset the gods of programming, consider writing your SQL results (encoded as JSON) to a file, then load that file remotely via AJAX.