jQuery Dynamic Data Grid Plugin - appendGrid

jQuery Dynamic Data Grid Plugin - appendGrid
File Size: 52.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

appendGrid is a powerful jQuery table plugin that turns the standard html table into a dynamic and editable data grid. You can add, remove, edit, move up, move down records row by row such like filled spreadsheet.

You might also like:


  • Compatible with several jQuery UI widget
  • Allows you to get value of a control in a row or changing it
  • Allows to create custom type of control to fit every situation
  • Allows to validate form controls using jQuery Validation Plugin
  • Large Data Set supported

Basic Usage:

1. Include jQuery, jQuery UI and jQuery appendGrid on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="jquery.appendGrid-1.0.0.js"></script>

2. Include required CSS files

<link href="jquery.appendGrid-1.0.0.css" rel="stylesheet" type="text/css">
<link href="jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css">

3. Markup

<table id="tblAppendGrid">

4. Initialize appendGrid

$(function () {
caption: 'My CD Collections',
initRows: 1,
columns: [
{ name: 'Album', display: 'Album', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '160px'} },
{ name: 'Artist', display: 'Artist', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '100px'} },
{ name: 'Year', display: 'Year', type: 'text', ctrlAttr: { maxlength: 4 }, ctrlCss: { width: '40px'} },
{ name: 'Origin', display: 'Origin', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Hong Kong', 2: 'Taiwan', 3: 'Japan', 4: 'Korea', 5: 'US', 6: 'Others'} },
{ name: 'Poster', display: 'With Poster?', type: 'checkbox' },
{ name: 'Price', display: 'Price', type: 'text', ctrlAttr: { maxlength: 10 }, ctrlCss: { width: '50px', 'text-align': 'right' }, value: 0 },
{ name: 'RecordId', type: 'hidden', value: 0 }

5. The default initial options.

// The text as table caption, set null to disable caption generation.
caption: null,

// Tooltip for caption.
captionTooltip: null,

// The total number of empty rows generated when init the grid. This will be ignored if `initData` is assigned.
initRows: 3,
// The maximum number of rows allowed in this grid.
maxRowsAllowed: 0,

// An array of data to be filled after initialized the grid.
initData: null,

// Array of column options.
columns: null,

// Labels or messages used in grid.
i18n: null,

// The ID prefix of controls generated inside the grid. Table ID will be used if not defined.
idPrefix: null,

// Enable row dragging by using jQuery UI sortable on grid rows.
rowDragging: false,

// Hide the buttons at the end of rows or bottom of grid.
hideButtons: null,

// Hide the row number column.
hideRowNumColumn: false,

// Generate row buttom column in the front of input columns.
rowButtonsInFront: false,

// The variable name of row count used for object mode of getAllValue
rowCountName: '_RowCount',

// The extra class names for buttons.
buttonClasses: null,

// The extra class names for table sections.
sectionClasses: null,

// Custom the standard grid buttons.
customGridButtons: null,

// Adding extra button(s) at the end of rows.
customRowButtons: null,

// Adding extra button(s) at the bottom of grid.
customFooterButtons: null,

// Use the sub panel or not
useSubPanel: false,

// Maintain the scroll position after appended or removed last row.
maintainScroll: false,

// The maximum height of grid content, scroll bar will be display when the height is greater than this value.
maxBodyHeight: 0,

// Auto calculate the column width when scroll bar on table body is in use.
autoColumnWidth: true

6. Default column options.

// Type of column control.
type: 'text',

// Name of column.
name: null,

// Default value.
value: null,

// Display text on the header section.
display: null,

// Extra CSS setting to be added to display text.
displayCss: null,

// Tooltip for column head.
displayTooltip: null,

// The `colspan` setting on the column header.
headerSpan: 1,

// Extra CSS setting to be added to the control container table cell.
cellCss: null,

// Extra attributes to be added to the control.
ctrlAttr: null,

// Extra properties to be added to the control.
ctrlProp: null,

// Extra CSS to be added to the control.
ctrlCss: null,

// Extra name of class to be added to the control.
ctrlClass: null,

// The available option for building `select` type control.
ctrlOptions: null,

// Options for initalize jQuery UI widget.
uiOption: null,

// Options for initalize jQuery UI tooltip.
uiTooltip: null,

// Let column resizable by using jQuery UI Resizable Interaction.
resizable: false,

// Show or hide column after initialized.
invisible: false,

// The value to compare for indentify this column value is empty.
emptyCriteria: null,

// Callback function to build custom type control.
customBuilder: null,

// Callback function to get control value.
customGetter: null,

// Callback function to set control value.
customSetter: null,

// The `OnClick` event callback of control.
onClick: null,

// The `OnChange` event callback of control.
onChange: null

7. Default callbacks.

// for format the HTML name of generated controls.
nameFormatter: null,

// triggered after all data loaded to grid.
dataLoaded: null,

// triggered after data loaded to a row.
rowDataLoaded: null,

// triggered after new row appended.
afterRowAppended: null,

// triggered after new row inserted.
afterRowInserted: null,

// triggered after grid row swapped.
afterRowSwapped: null,

// triggered before grid row remove.
beforeRowRemove: null,

// triggered after grid row removed.
afterRowRemoved: null,

// triggered after grid row dragged.
afterRowDragged: null,

// for generating sub panel content.
subPanelBuilder: null,

// for getting values from sub panel. Used for `getAllValue` method.
subPanelGetter: null,

// triggered when row(s) is/are adding to grid but the maximum number of rows allowed is reached.
maxNumRowsReached: null

More Example:

Change Logs:

v1.7.1 (2017-09-14)

  • Fixed a problem on get/set values on select element with multiple attribute

v1.7.0 (2017-09-10)

  • Fixed jQuery UI Button issues on jQuery UI v1.12.
  • jQuery UI v1.12 will become minimum requirement as it had some breaking changes that incompatible with its previous version.

v1.6.3 (2017-02-28)

  • Fixed a problem that column width is not correct when no command buttons visible at the end of row.

v1.6.2 (2016-02-21)

  • Fixed a problem that calculation on column width is wrong when maxBodyHeight is used with Bootstrap.

v1.6.1 (2015-09-25)

  • Fixed a problem that uniqueIndex become undefined in afterRowDragged callback.

v1.6.0 (2015-08-06)

  • Added maxBodyHeight option to limit the maximum height on table body and vertical scrollbar will be displayed when this height limit is reached.
  • Fixed a problem that buttonClasses is not working.

v1.5.2 (2015-02-28)

  • Fixed a problem that nameFormatter is not working on hidden type columns.

v1.5.1 (2014-12-21)

  • Added maxRowsAllowed option and maxNumRowsReached callback function to limit the number of rows allowed. 
  • Added maintainScroll option to scroll the page after appended or removed last row.
  • Removed unnecessary coding so that appendGrid requires jQuery UI Core, Widget and Button components only for all standard features. But you will not able to use Datepicker or other jQuery UI widgets.

v1.5.0 (2014-10-12)

  • Added useSubPanel option to enable the sub panal mode. Users can generated extra elements to the under each of the normal appendGrid row. Please notice that useSubPanel is not compatible with rowDragging feature. (Thanks iannos for naming)
  • Added subPanelBuilder and subPanelGetter callback function that required for sub panel.
  • Added subPanel option for sectionClasses.
  • The long-awaited sub grid feature is available by make use of sub panel!
  • Added rowCountName option for changing the key name of row count variable for the result of getAllValue method.
  • Parameter order of rowDataLoaded method is changed.
  • Performaced improve by changing the use of insertRow and insertCell javascript function to appendChild.

v1.4.2 (2014-10-02)

  • caption and display can be fully customized by passing a callback function. (Thanks iannos for suggestion)
  • Added captionTooltip and displayTooltip that make use of jQuery UI tooltip for generate tooltip on caption or column header text. (Thanks iannos for suggestion)
  • Added sectionClasses that can specify CSS classes to different table section. (Thanks iannos for suggestion)
  • Added emptyCriteria option to identify a row is empty. Also, isRowEmpty and removeEmptyRows methods are added that make use of this changes. (Thanks iannos for suggestion)
  • Added support on generating select element with optgroup support. You can also specify the title attribute for each option. (Thanks iannos for suggestion)
  • Added rowDataLoaded callback function that will be useful when loading data into a row with controls with dynamic content, such as cascading drop down list.

v1.4.1 (2014-08-10)

  • Added afterRowDragged callback function to be triggered after grid row dragged. (Thanks for PolarbearDK's work)
  • Added nameFormatter callback function for format the HTML name of generated controls. (Thanks iannos for suggestion)

v1.4.0 (2014-07-16)

  • Added invisible option and showColumn / hideColumn / isColumnInvisible methods for changing / checking visibility of columns.
  • Added resizable option that allow column resizable.
  • Added getColumn method to get columns array used for grid initialization.
  • [Important] You are allowed to call appendGrid methods by passing ONE element in jQuery object only. It will not be affected if you are already using ID, such as $("tblAppendGrid"), as jQuery selector.

v1.3.6 (2014-06-28)

  • Added getCellCtrl and getCellCtrlByUniqueIndex methods for retrieving generated control for further customization.

v1.3.5 (2014-04-23)

  • update.

v1.3.4 (2014-03-27)

  • update.

v1.3.3 (2014-03-27)

  • Added rowBottonsInFront option to allow generating row buttons in the front of input columns.

v1.3.2 (2014-03-09)

  • Added headerSpan to allow header cell column span. (Thanks Rajeevgandhi for suggestion)
  • Allowed to pass array of data to appendRow and insertRow method. (Thanks mailivore for suggestion)
  • Fixed a problem that empty row message will not be displayed when passing empty array to load method. (Thanks mailivore for reporting)

v1.3.1 (2014-01-27)

  • Removed firstCellWidth and lastCellWidth parameters
  • Added customFooterButtons option that allow adding extra buttons to the bottom of grid
  • The last column will not be displayed if all buttons are hidden

v1.3.0 (2014-01-21)

  • Added hideButtons option that allow hiding each buttons individually and removed hideMoveUpDown option
  • Added customRowButtons option that allow adding extra buttons at the last cell of each row
  • Added hideRowNumColumn option that allow to not generating the row number column
  • Added a message to be displayed when the grid is empty (Thanks mailivore for above ideas)

v1.2.3 (2014-01-17)

  • Fixed a problem on setting default value on hidden type columns

v1.2.2 (2014-01-03)

  • Fixed a problem on serializing hidden type columns

v1.2.1 (2013-12-23)

  • Added buttonClasses initial parameters

v1.2.0 (2013-11-16)

  • Added drag & drop support
  • Added rowDragging and hideMoveUpDown initial parameters

v1.1.3 (2013-10-30)

  • Fixed a problem that `i18n` parameter not working even correct values passed in

v1.1.2 (2013-05-19)

  • Fixed a problem on generating ui-datepicker columns

v1.1.0 (2013-04-16)

  • Added support to HTML5 input type such as date/time/email
  • Added ctrlProp column parameter


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