column.sortable : boolean|objectDefault: false

Indicates if the column is sortable. If set to true the user can click the column header and sort the grid by the column source field.

Examples

Remote

    
 <table id="grid"></table>
 <script>
     $('#grid').grid({
         dataSource: '/Players/Get',
         columns: [
             { field: 'ID', width: 56 },
             { field: 'Name', sortable: true },
             { field: 'PlaceOfBirth', sortable: false }
         ]
     });
 </script>

Local Custom

    
 <table id="grid"></table>
 <script>
     var data = [
         { 'ID': 1, 'Value1': 'Foo', 'Value2': 'Foo' },
         { 'ID': 2, 'Value1': 'bar', 'Value2': 'bar' },
         { 'ID': 3, 'Value1': 'moo', 'Value2': 'moo' },
         { 'ID': 4, 'Value1': null, 'Value2': undefined }
     ];
     var caseSensitiveSort = function (direction, column) {
         return function (recordA, recordB) {
             var a = recordA[column.field] || '',
                 b = recordB[column.field] || '';
             return (direction === 'asc') ? a < b : b < a;
         };
     };
     $('#grid').grid({
         dataSource: data,
         columns: [
             { field: 'ID' },
             { field: 'Value1', sortable: true },
             { field: 'Value2', sortable: { sorter: caseSensitiveSort } }
         ]
     });
 </script>

Remote Bootstrap 3

    
 <table id="grid"></table>
 <script>
     $('#grid').grid({
         uiLibrary: 'bootstrap',
         dataSource: '/Players/Get',
         columns: [
             { field: 'ID', width: 34 },
             { field: 'Name', sortable: true },
             { field: 'PlaceOfBirth', sortable: false }
         ]
     });
 </script>

Remote Bootstrap 4 Material Icons

    
 <table id="grid"></table>
 <script>
     $('#grid').grid({
         uiLibrary: 'bootstrap4',
         dataSource: '/Players/Get',
         columns: [
             { field: 'ID', width: 56 },
             { field: 'Name', sortable: true },
             { field: 'PlaceOfBirth', sortable: false }
         ]
     });
 </script>

Remote Bootstrap 4 FontAwesome

    
 <table id="grid"></table>
 <script>
     $('#grid').grid({
         uiLibrary: 'bootstrap4',
         iconsLibrary: 'fontawesome',
         dataSource: '/Players/Get',
         columns: [
             { field: 'ID', width: 42 },
             { field: 'Name', sortable: true },
             { field: 'PlaceOfBirth', sortable: false }
         ]
     });
 </script>