fixedHeader : booleanDefault: object

If set to true, add scroll to the table body

Examples

Material Design Without Pager

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

Material Design With Pager

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

Bootstrap 3 Without Pager

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

Bootstrap 3 With Pager

    
 <div class="container"><table id="grid"></table></div>
 <script>
     $('#grid').grid({
         uiLibrary: 'bootstrap',
         dataSource: '/Players/Get',
         fixedHeader: true,
         height: 200,
         columns: [
             { field: 'ID', width: 34 },
             { field: 'Name' },
             { field: 'PlaceOfBirth' }
         ],
         pager: { limit: 5 }
     });
 </script>

Bootstrap 4

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