Dynamic CRUD table Data Grid Input JavaScript Plugin | appendGrid

AppendGrid allows you to enter data that is structured row by row like filling out spreadsheets. It allows you to add/remove/insert/delete rows in the grid.

The input/select/text area generated controls are well-named for rendering to server-side applications such as ASP.NET/PHP/JSP. Multiple options and callback events are available to suit different situations.

Feature guides

  • Easy to use
  • Built-in multiple input types include HTML5 input types
  • Customizable input types
  • Compatible with major web browsers
  • Ready for internationalization

How to make use of it:

1. Install and import the appendGrid library into the doc.

# NPM
$ npm install jquery.appendgrid --save
<script src="dist/appendGrid.js"></script>

2. Or from a CDN.

<script src="https://unpkg.com/[email protected]/dist/AppendGrid.js"></script>

3. Create an empty table component on the webpage.

<table id="tblAppendGrid"></table>

4. Create a brand new appendGrid instance with a number of choices.

window.myAppendGrid = new AppendGrid({
  element: document.getElementById("tblAppendGrid"),
  uiFramework: "bulma", // ui framework
  iconFramework: "fontawesome5", // iconic font
  columns: [
  {
    name: "company",
    display: "Company" },

  {
    name: "name",
    display: "Contact Person" },

  {
    name: "country",
    display: "Country",
    type: "select",
    ctrlOptions: [
    "",
    "Germany",
    "Hong Kong",
    "Japan",
    "Malaysia",
    "Taiwan",
    "United Kingdom",
    "United States"] },


  {
    name: "isNPO",
    display: "NPO?",
    type: "checkbox",
    cellClass: "has-text-centered" },

  {
    name: "orderPlaced",
    display: "Order Placed",
    type: "number",
    ctrlAttr: {
      min: 0,
      max: 10000 } },


  {
    name: "memberSince",
    display: "Member Since",
    type: "date",
    ctrlAttr: {
      maxlength: 10 } },


  {
    name: "uid",
    type: "hidden",
    value: "0" }],


  sectionClasses: {
    table: 'is-narrow is-fullwidth' } 
    
});

5. Push your personal tabular information to the table.

myAppendGrid.load([
  {
    uid: "d4c74a61-a24e-429f-9db0-3cf3aaa22845",
    name: "Monique Zebedee",
    company: "Welch LLC",
    country: "Japan",
    memberSince: "2012-02-18",
    orderPlaced: 111,
    level: "Bronze",
    isNPO: true },

  {
    uid: "afdf285d-da5c-4fa8-9225-201c858a223d",
    name: "Daryle McLaren",
    company: "Bogisich Group",
    country: "United States",
    memberSince: "2016-10-08",
    orderPlaced: 261,
    level: "Diamond",
    isNPO: false },

  {
    uid: "202a8afb-130b-476b-b415-c659f21a80e7",
    name: "Glori Spellecy",
    company: "Grady and Sons",
    country: "Germany",
    memberSince: "2014-07-28",
    orderPlaced: 282,
    level: "Gold",
    isNPO: false },

  {
    uid: "08c9adee-abdd-43d5-866d-ce540be20be8",
    name: "Blondy Boggis",
    company: "Eichmann, Parker and Herzog",
    country: "Malaysia",
    memberSince: "2010-08-17",
    orderPlaced: 308,
    level: "Platinum",
    isNPO: true },

  {
    uid: "57644023-cd0c-47ec-a558-fd8d4e71a4e7",
    name: "Batholomew Zecchii",
    company: "Corwin-Fahey",
    country: "Malaysia",
    memberSince: "2016-09-20",
    orderPlaced: 881,
    level: "Gold",
    isNPO: true },

  {
    uid: "38e08e8a-c7eb-41eb-9191-6bb5df1fd30b",
    name: "Paulie Poel",
    company: "MacGyver, Rohan and West",
    country: "United Kingdom",
    memberSince: "2016-12-26",
    orderPlaced: 387,
    level: "Silver",
    isNPO: false },

  {
    uid: "d7bf56d4-f955-4dca-b3db-b30eab590828",
    name: "Jessica Levett",
    company: "Lind, O'Kon and Hamill",
    country: "United States",
    memberSince: "2015-04-26",
    orderPlaced: 984,
    level: "Gold",
    isNPO: false },

  {
    uid: "b9075764-5228-4ca7-9435-7c362ce088e5",
    name: "Fonsie Spring",
    company: "McKenzie, Block and Wiegand",
    country: "Japan",
    memberSince: "2013-11-08",
    orderPlaced: 875,
    level: "Silver",
    isNPO: false }
]);

6. All default choices to customize the information grid.

// The UniqueIndex accumulate counter
uniqueIndex: 0,

// The row order array
rowOrder: [],

// Indicate data is loaded or not
isDataLoaded: false,

// Visible column count for internal calculation
visibleCount: 0,

// Total colSpan count after excluding `hideRowNumColumn` and not generating last column
finalColSpan: 0,

// Indicate to hide last column or not
hideLastColumn: false,

// The element ID of the `appendGrid` wrapper
wrapperId: null,

// Indicate calculate width or not
// calculateWidth: true,
// Settings
settings: null,

// The table element
tbWhole: null,

// The table body element
tbBody: null,

// Icon Framework object to be used:
// fontawesome5, ionicon4, materialdesignicons
// openiconic, typicons2, or default
iconFramework: null,

// UI Framework object to be used:
// bootstrap4, bulma,
// foundation, or default
uiFramework: 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,

// 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 extra class names for table sections.
sectionClasses: 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

7. Default column choices.

// 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

8. Default callbacks.

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

// The callback function to be triggered after all data loaded to grid.
dataLoaded: null,

// The callback function to be triggered after data loaded to a row.
rowDataLoaded: null,

// The callback function to be triggered after new row appended.
afterRowAppended: null,

// The callback function to be triggered after new row inserted.
afterRowInserted: null,

// The callback function to be triggered after grid row swapped.
afterRowSwapped: null,

// The callback function to be triggered before grid row remove.
beforeRowRemove: null,

// The callback function to be triggered after grid row removed.
afterRowRemoved: null,

// The callback function to be triggered after grid row dragged.
afterRowDragged: null,

// The callback function for generating sub panel content.
subPanelBuilder: null,

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

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

9. API strategies.

// Append a specified number of rows or row data to the grid
myAppendGrid(3);
myAppendGrid.appendRow([ 
  { "foo": "1A", "bar": "2019-01-01" },
  { "foo": "2A", "bar": "2019-02-02" },
  { "foo": "3A", "bar": "2019-03-03" },
]);

// Gets the control (DOM element) generated by specified column name and row index
myAppendGrid.getCellCtrl(name, index);

// Gets the control (DOM element) generated by specified column name and unique index.
myAppendGrid.getCellCtrlByUniqueIndex(name, uniqueindex);

// Gets an array of columns
myAppendGrid.getColumns();

// Gets the control value on specified column and row index of first element in the set of matched elements.
myAppendGrid.getCtrlValue(name, index);

// Gets the number of rows
myAppendGrid.getRowCount();

// Gets the unique index array of the grid.
myAppendGrid.getRowOrder();

// Gets the row index by unique index.
myAppendGrid.getRowIndex(uniqueindex);

// Gets the unique index by row index.
myAppendGrid.getUniqueIndex(rowindex);

// Gets all control values of specified row index of current grid.
myAppendGrid.getRowValue(index);

// Gets all control values of current grid.
myAppendGrid.getAllValue();

// Inserts a specified number of row or row data above the specified rowIndex.
myAppendGrid.insertRow(number/data, index);

// Checks if the row is empty
myAppendGrid.isRowEmpty(index);

// Loads records to the current grid. 
myAppendGrid.load(data);

// Moves the row down.
myAppendGrid.moveDownRow(index);

// Moves the row up
myAppendGrid.moveUpRow(index);

// Removes the row
myAppendGrid.removeRow(index);

// Sets the control value on specified column and row index of current grid.
myAppendGrid.setCtrlValue(name, index, value);

// Removes all empty rows in the grid. 
myAppendGrid.removeEmptyRows();

Dynamic CRUD Data Grid Library, AppendGrid Plugin/Github, jquery datagrid example, javascript crud table


See Demo And Download

Official Website(hkalbertl): Click Here

This superior jQuery/javascript plugin is developed by hkalbertl. For extra Advanced Usage, please go to the official website.

Share