Lightweight Dynamic Data Table Plugin For Bootstrap - jQuery Raytable

Raytable is a lightweight yet feature-rich jQuery data table / data grid plugin styling with the popular Bootstrap framework. Features paging, row sorting and has the ability to interact with the tabular by clicking on a row or an action button you specify.

Basic usage:

1. Load the necessary jQuery library and Bootstrap framework in the html document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Download and load the Raytable plugin's file raydreams after jQuery.

<script src="raydreams.js"></script>

3. Create a DIV container for the generated data table.

<div id="dataTable" class="table table-striped table-bordered">
  <!--<thead>
    <tr>
      <th data-ray-field="firstName">First Name</th>
      <th data-ray-field="lasName">Last Name</th>
      <th data-ray-field="gender">Gender</th>
      <th data-ray-field="email">Email</th>
      <th data-ray-field="title">Title</th>
      <th data-ray-field="city">City</th>
    </tr>
  </thead>-->
</div>

4. Prepare your data to be rendered in the data table.

var myData =[  
   {  
      "id":"1",
      "firstName":"Darnall",
      "lastName":"Eakeley",
      "title":"Research Assistant I",
      "grade":8,
      "ssn":"313-24-2493",
      "birthDate":"1995-03-22T20:42:15Z"
   },
   {  
      "id":"2",
      "firstName":"Nollie",
      "lastName":"Poli",
      "title":"Electrical Engineer",
      "grade":3,
      "ssn":"539-37-8776",
      "birthDate":"1988-09-28T20:24:37Z"
   },
   ...
]

5. The JavaScript to generate the data table.

jQuery("#dataTable").raytable({
  data: myData
  columns: [
    { title: "Info", icons: [{ glyph: "glyphicon-info-sign", handler: iconAction, data:"id" }], renderIf: isManager },
    { field: "firstName", title: "First Name", sort:true },
    { field: "lastName", title: "Last Name", sort: true },
    { field: "title", title: "Title" },
    { field: "grade", title: "Grade", sort: true },
    { field: "ssn", title: "SSN"  },
    { field: "birthDate", title: "DOB", sort: true, format: parseDate },
    { title: "Delete", icons: [{ glyph: "glyphicon-trash", handler: iconAction, data: "id" }] }
  ]
});

6. All possible options to customize the data table.

jQuery("#dataTable").raytable({

  // data - the actual data to render
  // keyfield - the object property to use to identify each unique row object
  datasource: { 
    data: [], 
    keyfield: null 
  },

  // field - the field name.
  // title - column headers
  // icons - (optional) An arary of Glyph icons to display in the column
  //       - glyph - the glyph's CSS class name from the Bootstrap 3 glyphicons
  //       - handler - (optional) a callback to handle clicking on the icon
  // data - (optional) Additional data
  // sort - (optional, default is false) set to true to allowing sorting
  // renderIf - (optional) a callback function with the signature (item)->bool, where item is the object bound to that row, that returns whether to even render the contents of the cell at all. This can be use to skip cell icons based on some condition.
  // format - (optional) a callback function with the signature (item)->string, where item is the object bound to that row, that returns a format string to display in that cell, such as formatting dates.
  columns: [field, title, icons, sort, renderIf, format],

  // page size
  pageSize: 25, 

  // max number of pagination buttons
  maxPageButtons: 5,

  // current page index
  currentPageIdx: 0, 

  // the base HTML element
  parentElem: null, 
  
  // shows line numbers
  rowNumbers: true, 

  // the current field and direction of sorting
  currentSort: null, 

  // last clicked row
  currentSelection: null, 

  // external handler when a row is clicked
  onRowClick: null 

});

7. Load the data manually.

var myTable = jQuery("#dataTable").raytable();
myTable.data(myData,'id');

Changelog:

2021-01-30

• Updated for Bootstrap 4+

2018-11-29

• Bug fix in the page conntroller

2018-03-22

• bug fix with the cell width

2018-03-14

• Fixed paging.

2018-03-13

• Added maxPagerSize option

---

This awesome jQuery plugin is developed by GrumpyCockatiel. For more Advanced Usages, please check the demo page or visit the official website.