Documentation

# Introduction

A brief overview of SuperGrid

SuperGrid is a jQuery plugin that provides functionality to display and manipulate tabular data on the web. With a lesser number of parameters and more functionality, it is one of the best jquery Grid/Table plugins.
The first version (1.0.0) support only "array of objects" data available locally.

Below are the steps to get you started -

  • Write a table tag with a unique id
  • import all the necessary dependencies (jQuery, Bootstrap, Font Awesome)
  • Call supergrid plugin for your table to create a grid
Look at the examples below to understand it better.

Explanation

1. Let's say you have a table with id "testGrid" in which you want populate the data that you have available locally in the file data.js.

<table id="testGrid"> </table>

2. The file data.js contains an array of objects.
Here's an example-

const data = [
{
  id:0,
  name:"Sudhanshu Kumar",
  age: "25",
  gender:"male",
  dob: "18/03/1997",
  doj: "2021-10-10",
  project: "Enterprise Systems",
  isReporting: "Shubhangi Shinde",
  rrtid: "232323",
  projStartDate: "10/10/2021",
  clientName: "Enterprise Systems",
  functions: "Designer",
  primarySkill: "HTML, CSS, BOOTSTRAP, JAVASCRIPT, PHP, SQL, JAVASCRIPT",
  comment: "Hello World"
},
{
  id:1,
  name:"Sachin Kumar",
  age: "25",
  dob: "18/03/1997",
  doj: "23/04/2021",
  project: "Enterprise Systems",
  isReporting: "Shubhangi Shinde",
  rrtid: "232323",
  projStartDate: "10/10/2021",
  clientName: "Enterprise Systems",
  functions: "Designer",
  primarySkill: "HTML, CSS, BOOTSTRAP, JAVASCRIPT, PHP, SQL, JAVASCRIPT, JAVASCRIPT, PHP, SQL, JAVASCRIPT",
  comment: "Hello World"
},
]

3. Then we initialized the supergrid plugin for the table we just created.

$("#testGrid").superGrid({
  dataType: "local",
  data: myData,
  colModel: {
   .....
   .....
  }
})

# Options

Use options to make your grid come alive

Options are key-value pairs that can be used to enable or disable a SuperGrid feature on you table. Below are the list of options available in this version of SuperGrid.

# theme
Theme option is responsible for the appearance of the grid. By default, it uses Bootstrap5 theme and that's the only theme available for his version.

theme: "bootstrap5"

Sticky Header can be used to fix the table header to the top of the container. Rest of the content in the body can scroll horizontally or vertically.

stickyHeader: true, // boolean

# stickyCols

This option can be used to freeze/fix/stick first x columns from left

stickyCols: 2, // number of rows from left to freeze- default value 0

# scroller

Scroller is a sticky left and right buttons in the grid which help us scroll horizontally when there are too many columns in the grid. Demo
Note: It is recommended to use scroller with sticky columns enabled for the best experience.

scroller: true, // boolean

# scrollSpeed

It is a numberical value that tells scroller to scroll horizontally given number of pixels per click.

scrollSpeed: 100, // number

# pager

Pager is a navigation panel that sticks to the bottom of the table when enabled.

pager: true // boolean

# rowsPerPage

This option lets you specify the number of rows that you want to display at a time in the grid.
Note: This option works only when pager is enabled.

rowsPerPage: 10 // Number

# rowNumbering

Enabling this option assigns number to each row in the first column in increasing order starting from 1.

rowNumbering: true // boolean

# multiSelect

This option provides us with the feature to select multiples rows by adding a checkbox in the first column.

multiSelect: true // boolean

# colModel

This is an array that take objects. Each object inside this array represents a column. Inside those objects you can define the properties of each column individually.
Adding two properties name and label is mandatory for the grid to work.
Let's understand each colModel property individually below.

colModel: [{
  .....
  .....
}] // array

# name

This is a colModel property that takes the key of your data. That mean if you say name: "fullName", it means this particular column will contain all the full names from the data you have provided.

colModel: [
  { name: "fullName" }
] // array

# label

This property lets you write the heading of the column. It appears in the first row at the top of the grid.

colModel: [
  { name: "fullName", label: "Full Name" }
]

# width

This property lets you set the min-width of an individual column.

colModel: [
  { name: "fullName", label: "Full Name", width: "200" }
]

# colDataType

This property lets you set the type of data that you want to display in that column.
There are 4 options for this property -

  • plainText
  • number
  • date
  • form
The default option is plainText

colModel: [
  { name: "fullName", label: "Full Name", width: "200", colDataType:"plainText" },
  { name: "age", label: "Age", width: "50", colDataType:"number" },
  { name: "dob", label: "Date of Birth", width: "150", colDataType:"date" },
]

# formInputType

If your colDataType is form then you can set formInputType to specify which kind of form element do you want to use.
Below are all the options available for this property -

  • text
  • number
  • radio
  • checkbox
  • password
  • date
  • time
  • textarea
  • select (provide options using "selectOptions". See below.)
The default input type is text

colModel: [
  { name: "fullName", label: "Full Name", width: "200", colDataType:"form", formInputType:"text" },
  { name: "fullName", label: "Full Name", width: "200", colDataType:"form", formInputType:"checkbox" },
  { name: "fullName", label: "Full Name", width: "200", colDataType:"form", formInputType:"date" },
]

# selectOptions

If your formInputType is select then you'll have to provide selectOptions to add the options in the dropdown.
selectOptions accepts array of options.

colModel: [
  { name: "gender", label: "Gender", width: "200", colDataType:"form", formInputType:"select", selectOptions:["Male", "Female","Others"] },
]

# hidden

This option is used to show or hide a column.

colModel: [
  { name: "fullName", label: "Full Name", width: "200", hidden: true }
]

# resizable

This option make the given column resizable horizontally. That means, you can stretch the width of the column using your mouse pointer if the resizable option is true for that column.

colModel: [
  { name: "fullName", label: "Full Name", width: "200", hidden: false, resizable: true }
]