Server Side Sorting

Simply add server config to the sort block to enable server-side sorting:

Live Editor

const grid = new Grid({ sort: { multiColumn: false, server: { url: (prev, columns) => { if (!columns.length) return prev; const col = columns[0]; const dir = col.direction === 1 ? 'asc' : 'desc'; let colName = ['name', 'rarity'][col.index]; return `${prev}&order=${colName}&dir=${dir}`; } } }, columns: [ 'Name', 'Rarity', { name: 'Image', width: '50px', sort: false, formatter: (img) => html(`<center><img src='${img}'/></center>`) } ], server: { url: 'https://api.scryfall.com/cards/search?q=Inspiring', then: data => data.data.map(card => [card.name, card.rarity, card.image_uris.small]), total: data => data.total_cards } });

const grid = new Grid({
  sort: {
    multiColumn: false,
    server: {
      url: (prev, columns) => {
       if (!columns.length) return prev;
       
       const col = columns[0];
       const dir = col.direction === 1 ? 'asc' : 'desc';
       let colName = ['name', 'rarity'][col.index];
       
       return `${prev}&order=${colName}&dir=${dir}`;
     }
    }
  },
  columns: [
   'Name',
   'Rarity',
   {
     name: 'Image',
     width: '50px',
     sort: false,
     formatter: (img) => html(`<center><img src='${img}'/></center>`)
   }
  ],
  server: {
    url: 'https://api.scryfall.com/cards/search?q=Inspiring',
    then: data => data.data.map(card => [card.name, card.rarity, card.image_uris.small]),
    total: data => data.total_cards
  } 
});

Result