The sample above shows a standard Springbase grid control bound to a data table.  The following are standard features of the grid control:

• On-demand scrolling - Rows are loaded on demand for high performance even with millions of rows.
• Custom formatting - Percentage and date columns are formatted with custom formatting functions (see code below).
• Resize and show/hide columns - Drag the column dividers to resize.  Open the header drop-down menu to show and hide columns.

The Code

No code is needed to use the grid control; binding to a data source is enough.  The following code shows how to customize the grid's columns using server-side JavaScript:

Define a custom server-side formatting function:

var percentChangeFormatter = function(val) {
  return (val > 0 ? "+" : "") + parseFloat(val).toFixed(2) + " %";
};

Customize the columns shown in the grid:

grid.addColumns([{
  fieldName: "DATE",
  title: "Date",
  formatter: function(val) {
    return DateTime.format(val, "MM/dd/yyyy");
  }
  ...
}]);

Use the formatting function defined earlier to format a percent column:

...
},{
  fieldName: "WCURCIR_PCH",
  title: "% Change",
  formatter: percentChangeFormatter
},{
...