JavaScript Grids

ZingGrid Promo
Visit www.ZingGrid.com

ZingGrid is a Javascript library for rendering grids and data tables. ZingGrid's main focus is on fast, responsive, and customizable grids utilizing ES6 and native web components. The goal is to solve the problem of creating a CRUD grid in under five minutes. With an appropriate REST endpoint, this is easily achievable. Try it out for free here.

ZingGrid Tech Demo

Overview

JavaScript Grids are a great way to display information in a table format, where data can be organized into various categories. ZingChart allows for multiple styling options of JavaScript grids.

{
  type: "grid",
  plotarea: {
    margin: 20
  },
  options: {
    'col-labels': [ "Id", "First id", "Last id", "Birthday", "Sex", "Country" ],
    'col-widths': [ "5%", "25%", "25%", "15%", "5%", "25%" ]
  },
  series: [
    {
      values: [1, "Jon", "Anderson", "January 9, 1957", "M", "United Kingdom" ]
    },
    {
      values: [2, "Steve", "Hogarth", "January 25, 1950", "M", "United Kingdom" ]
    },
    {
      values: [3, "Jim", "Carrey", "June 12, 1972", "M", "United States" ]
    },
    {
      values: [4, "Paul", "Hogan", "October 22, 1956", "M", "Australia" ]
    },
    {
      values: [5, "Margaret", "Thatcher", "January 27, 1937", "F", "United Kingdom" ]
    }
  ]
}

Data Format

String/Number Array

Create a "series" object array. Each object corresponds to a row in the grid. Within each object, create a "values" array of numbers and/or strings to populate each cell of a row.

{
  type: "grid",
  series: [ // Array of objects
    {
      values: [ // Array of numbers | strings
        (Row 1-Col 1),
        (Row 1-Col 2),
        ...,
        (Row 1-Col N)
      ]
    },
    {
      values: [
        (Row 2-Col 1),
        (Row 2-Col 2),
        ...,
        (Row 2-Col N)
      ]
    },
    ...,
    {
      values: [
        (Row N-Col 1),
        (Row N-Col 2),
        ...,
        (Row N-Col N)
      ]
    }
  ]
}

Grid-Specific Properties

JavaScript grids include a number of unique chart-specific properties that allow you to manipulate the appearance and behaviors of your HTML5 grid. They can be implemented into your chart by placing them within the "options" object.

Header Column

The "header-col" attribute sets whether the grid has a header column or not. It can be added by setting the "header-col" attribute to true, or by creating an empty "header-col" object.

{
  type: "grid",
  options: {
    'header-col': true
  },
  // Series data omitted for brevity
}
https://app.zingsoft.com/demos/embed/6A4R0ACS
https://app.zingsoft.com/demos/embed/6A4R0ACS

Header Row

The "header-row" attribute sets whether the grid has a header row or not. It can be added by setting the "header-row" attribute to true, or by creating an empty "header-row" object.

{
  type: "grid",
  options: {
    'header-row': true
  },
  // Series data omitted for brevity
}
https://app.zingsoft.com/demos/embed/FOQRWYE6
https://app.zingsoft.com/demos/embed/FOQRWYE6

Column Labels

The "col-labels" attribute defines the labels of the grid column.

{
  type: "grid",
  options: {
    'col-labels': [ "ID", "FIRST id", "LAST id", "BIRTHDAY", "SEX", "COUNTRY" ],
  },
  // Series data omitted for brevity
}
https://app.zingsoft.com/demos/embed/WMISY3RH
https://app.zingsoft.com/demos/embed/WMISY3RH

Column Widths

The "col-widths" attribute defines the widths of the grid columns, specified either in fixed values or as a percentage.

{
  type: "grid",
  options: {
    'col-widths': [ "5%", "25%", "25%", "15%", "5%", "25%" ],
  },
  // Series data omitted for brevity
}
https://app.zingsoft.com/demos/embed/CLK1JRVL
https://app.zingsoft.com/demos/embed/CLK1JRVL

Flat

The "flat" attribute sets whether the grid cells are clickable or not.

{
  type: "grid",
  options: {
    flat: true
  },
  // Series data omitted for brevity
}

Using Data Sources

Graph

The "graph" attribute sets the ID of the chart that the grid is being linked with.

{
  type: "grid",
  options: {
    'data-source': {
      graph: "..."
    }
  },
  // Series data omitted for brevity
}

Scale

The "scale" attribute sets the id of the scale from which the column labels are being imported.

{
  type: "grid",
  options: {
    'data-source': {
      scale: "..."
    }
  },
  // Series data omitted for brevity
}

Styling Attributes

AttributeDescription
.tdThe ".td" attribute defines the style for grid cells.
.td_3The ".td_3" attribute defines the style for grid cells on column 3.
.td_2_3The ".td_2_3" attribute defines the style for grid cells on row 2, column 3.
.td_evenThe ".td_even" attribute defines the style for the even grid cells.
.td_oddThe ".td_odd" attribute defines the style for the odd grid cells.
.td_firstThe ".td_first" attribute defines the style for the first grid cells.
.td_lastThe ".td_last" attribute defines the style for the last grid cells.
.thThe ".th" attribute defines the style for the header cells.
.th_3The ".th_3" attribute defines the style for the header cells on column 3.
.th_evenThe ".th_even" attribute defines the style for the even header cells.
.th_oddThe ".th_odd" attribute defines the style for the odd header cells.
.th_firstThe ".th_first" attribute defines the style for the first header cells.
.th_lastThe ".th_last" attribute defines the style for the last header cells.
.trThe ".tr" attribute defines the style for the grid rows.
.tr_3The ".tr_3" attribute defines the style for the grid rows on row 3.
.tr_evenThe ".tr_even" attribute defines the style for the even grid rows.
.tr_oddThe ".tr_odd" attribute defines the style for the odd grid rows.
.tr_firstThe ".tr_first" attribute defines the style for the first grid rows.
.tr_lastThe ".tr_last" attribute defines the style for the last grid rows.

Summary

Got a question about how grid charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.