You're looking at DataGridXL v1. Click here to go to the latest version.

Display a table from MySQL

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

  // 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);

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


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

  var grid = new DataGridXL("grid", {
    data: my_data


If you console.log(my_data) you should see a nice data collection formatted in an array-of-objects type fashion.

We know that not everybody appreciates this style of echoing PHP strings inside a <script> block. Instead, you could write your SQL results (encoded as JSON) to a file, then load that file remotely via AJAX.

Leave email to receive latest updates!