Method sort

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container"></div>
<button onclick="sortNameASC()" style="margin-top: 10px;">
  Sort ASC by name
</button>
<button onclick="sortNameDESC()" style="margin-top: 10px;">
  Sort DESC by name
</button>
<button onclick="sortNameDROP()" style="margin-top: 10px;">
  Sort DROP by name
</button>

JavaScript

var grid;

function sortNameASC(){
  grid.sort('name', 'ASC');
}

function sortNameDESC(){
  grid.sort('name', 'DESC');
}

function sortNameDROP(){
  grid.sort('name', 'DROP');
}

document.addEventListener("DOMContentLoaded", function() {
  grid = new FancyGrid({
    renderTo: 'container',
    width: 550,
    height: 500,
    data: data,
    defaults: {
      sortable: true,
      resizable: true,
      draggable: true
    },
    events: [{
      sort: function(){
        console.log(arguments);        
      }
    }],
    columns: [{
      index: 'name',
      title: 'Name'
    }, {
      index: 'surname',
      title: 'SurName'
    }, {
      index: 'country',
      title: 'Country'
    }, {
      index: 'position',
      title: 'Position'
    }, {
      index: 'email',
      title: 'Email'
    }]
  });
});

var data = [{
  "name": "Mia",
  "surname": "Moore",
  "id": 1,
  "country": "Netherlands",
  "position": "Software Tester",
  "email": "mia.moore@fancygrid.com"
}, {
  "name": "David",
  "surname": "Johnson",
  "id": 2,
  "country": "Belgium",
  "position": "Frontend Developer",
  "email": "david.johnson@fancygrid.com"
}, {
  "name": "Isabella",
  "surname": "Miller",
  "id": 3,
  "country": "Sweden",
  "position": "Frontend Developer",
  "email": "isabella.miller@fancygrid.com"
}, {
  "name": "Ivan",
  "surname": "West",
  "id": 4,
  "country": "San Marino",
  "position": "iOS Developer",
  "email": "ivan.west@fancygrid.com"
}, {
  "name": "Christopher",
  "surname": "Grant",
  "id": 5,
  "country": "Taiwan",
  "position": "Data Science Engineer",
  "email": "christopher.grant@fancygrid.com"
}, {
  "name": "Addison",
  "surname": "Thomson",
  "id": 6,
  "country": "Japan",
  "position": "ASP.NET Developer",
  "email": "addison.thomson@fancygrid.com"
}, {
  "name": "Ethan",
  "surname": "Brown",
  "id": 7,
  "country": "Germany",
  "position": "C# Developer",
  "email": "ethan.brown@fancygrid.com"
}, {
  "name": "Matthew",
  "surname": "Smith",
  "id": 8,
...