Table of Contents

  1. Description
  2. Sorting
  3. Filtering
  4. Link
  5. Image in cells
  6. Pagination
  7. Usage
    1. Call using arrays
    2. Call using HTML table


BE Pro Grid is a JQuery plugin which displays preliminarily given array in a table view and allows to sort and filter data of the table. The plugin gives an opppurtunity to enter several types of data in entry fields: text characters, numbers, dates. It’s also possible to do filtering by selecting a range of numbers or dates, or by choosing any option from datalist. Depending on what fields you want to have for filter, you can give input types as you want, regardless of the amount and position. On the picture you can see how it looks:


You can sort your table in ascending and descending order simply clicking on the appropriate column’s header: Sorting is doing according to corresponding column data. After the first click on the columns’ headers, data will be sorted in ascending (A-Z) order and after the second click– in descending (Z-A) order (see picture).


The BE Pro Grid plugin has a feature of real-time data filtering. Filtering allows to filter data by input types:
search: filtering is done by characters.
number: filtering is done by digital characters.
date: filtering is done by dates.
date range: you can select start and end, so the filtering will be done by your selected date range.
number range: filtering will be done within your selected number range.
datalist: filtering will be done by the selected option of the list, by the way data of that list is taken from the appropriate column.

On the following picture you can see how it works:

The plugin allows to have row linking and cell linking. Clicking on the rows /if that rows have links/ you will go through row links. Clicking on the words in cells /if that cell have links/ you will go through cell links. Both links should be beforehand transmitted via parameters.

row linking - you need to transmit url parameter, which described in detail in section Usage.
cell linking - you need to transmit the following:

Note: If you want to see a title on the cell link , transmit the value which you want to data attribute. If you want to override the default style of the cell title, add your style in be_pro_grid_link_style.css file.
Note: You cannot transmit links to table if data is passed from HTML table.

Image in cellsTop

You can put image instead of input types. In this case filtering and sorting don't work. The image source path should be transmitted as a data.


The BE Pro Grid plugin has a feature of pagination. Client can specify the number of rows to show per page.Pagination also works during filtering and sorting

NOTE: If you don't want to have pagination, transmit var num_per_page = ""; or var num_per_page = 0;.


The call of BE Pro Grid plugin is made in the following way.

Call using arrays:



  • ".be-pro-grid"is a div class which responses for drawing of the table

  • paramsis the needed parameters: in this case required arrays, we draw the table by means of them.

              var params ={
              "header": header,
              "input_types": input_types,
              "data": data,
              "url": url


  • header is an array containing columns headers.

  • input_types is an array containing types of input fields intended for filtering. By the way, it’s possible to change the places of input types fields, as you wish.

  • datais an array containing table content

  • num_per_page specifies the number of rows to show per page

  • urlis an array containing links and row ID-s


              var header = ["First-Name", "Last-Name", "Company-Name", "City", "Date", "Date-Range", "Number ", "Num-Range"];
              var input_types = ["search", "search", "datalist", "datalist", "date", "date-range", "number", "range"];
              var data = [
              ["James", "Butt", "Benton, John B Jr", "New Orleans", "2016-07-17", "2016-07-10", 1, 300, '1'],
              ["Josephine", "Darakjy", "Chanay, Jeffrey A Esq", "Brighton", "2016-07-17", "2016-07-12", 20, 200,'2'],
              ["Art", "Venere", "Chemel, James L Cpa", "Bridgeport", "2016-08-17", "2016-07-14", 40, 500, '3'],
              ["Lenna", "Paprocki", "Feltz Printing Service", "Anchorage", "2016-07-17", "2016-07-15", 35, 100,'4'],
              ["Donette", "Foller", "Printing Dimensions", "Hamilton", "2015-05-17", "2016-07-18", 12, 300,'5'],
              ["Simona", "Morasca", "Chapman, Ross E Esq", "Ashland", "2016-03-17", "2016-07-19", 11, 400,'6'],
              ["Mitsue", "Tollner", "Morlong Associates", "Chicago", "2016-01-17", "2016-07-21", 11, 250, '7'],
              ["Leota", "Dilliard", "Commercial Press", "San Jose", "2016-04-17", "2016-07-22", 25, 400,'8'],
              ["Sage", "Wieser", "Truhlar And Truhlar Attys", "Sioux Falls", "2016-05-15", "2016-07-23", 12, 120,'9'],
              ["Kris", "Marrier", "King, Christopher A Esq", "Baltimore", "2016-05-17", "2016-07-14", 75, 130,'10'],
              ["Minna", "Amigon", "Dorl, James J Esq", "Kulpsville", "2016-07-10", "2016-07-20", 76, 450, '11'],
              ["Abel", "Maclead", "Rangoni Of Florence", "Middle Island", "2014-04-11", "2016-07-16", 91, 660,'12'],
              ["Kiley", "Caldarera", "Feiner Bros", "Los Angeles", "2016-07-17", "2016-07-17", 32, 780, '13'],
              ["Graciela", "Ruta", "Buckley Miller & Wright", "Chagrin Falls", "2016-07-17", "2016-07-13", 55, 320,'14'],
              ["Cammy", "Albares", "Rousseaux, Michael Esq", "Laredo", "2016-07-20", "2016-07-13", 78, 780, '15'],
              ["Cammy", "Albares", "Rousseaux, Michael Esq", "Laredo", "2016-10-10", "2016-07-11", 78, 780, '16'],
              ["Cammy", "Albares", "Rousseaux, Michael Esq", "Laredo", "2016-10-11", "2016-07-11", 61, 781, '17']
              var url = [
              ['1', ''],
              ['2', ''],
              ['3', ''],
              ['17', '']
              var num_per_page = 5;


NOTE: The last element of the array describing each row is the row ID. It should match with link ID: the first element of url array's each element.

Resulting table:

2. Call using HTML table:

Another way is using HTML table as input data. Just set the selector to appropriate id as described in the following example, but notice that in this case you should transmit the array of input types:

table in grid