resizableColumns : booleanDefault: false

If set to true, users can resize columns by dragging the edges (resize handles) of their header cells.

Examples

Material Design

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

Bootstrap

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

Bootstrap 4

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

Bootstrap 4 FixedHeader

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