AgExcel Documentation

Introduction

AgExcel is a FREE wrapper library for JExcel v3

JExcel is a lightweight Vanilla JavaScript plugin to create amazing web-based interactive HTML tables and spreadsheets compatible with other spreadsheet software. You can create an online spreadsheet table from a JS array, JSON, CSV or XSLX files. You can copy from excel and paste straight to your Jspreadsheet CE spreadsheet and vice versa. It is very easy to integrate any third party JavaScript plugins to create your own custom columns, custom editors, and customize any feature into your application. Jspreadsheet CE has plenty of different input options through its native column types to cover the most common web-based application requirements. It is a complete solution for web data management. Create amazing applications with Jspreadsheet CE JavaScript spreadsheet

JExcel has an angular library but it is paid. Javascript version can be implemented, but scripts and styles needs to be loaded before hand, AgExcel takes care of loading all the files for you and AgExcel can be installed to your angular project directly from npm. AgExcel contents all features of JExcel with extras such as -

  • Auto Max Width
  • OnChange Subjects for Every Column
  • Type Script - Support
*Next Version of AgExcel will include models for everything (As of now 'any' is used for all) *

Inputs

ngModel: Array<any>

This is Two Way Binded Variable that is used to get and set the data of the AgExcel (JExcel)


Columns: Array<any>

This Variables requires array of column data as follows

[
     { title:'Model', width:300, type:'text'; },
     { title:'Price', width:80, type:'numeric' },
     { title:'Date', width:100, type:'calendar', options: { format:'DD/MM/YYYY' } },
     { title:'Photo', width:150, type:'image' },
     { title:'Condition', width:150, type:'dropdown', source:['New','Used'] },
     { title:'Color', width:80, type:'color' },
     { title:'Available', width:80, type:'checkbox' },
]

setWidthToMaxParent: boolean

Default = False

If set to true columns' width are set to the parents width


minColumns: number

Default = 0

Define a minimum Column size.


minRows: number

Default = 0

Define a minimum Row size.


Outputs

AgOnLoad

OnLoad Event for JExcel is called when method setData is called so, I've Created a New Event Whihc is called only when JExcel is Loaded

JExcel Docs - [onload] This method is called when the method setData


OnLoad

JExcel Docs - [onload] This method is called when the method setData


OnBeforeChange

JExcel Docs - [onbeforechange] Before a column value is changed. NOTE: It is possible to overwrite the original value, by return a new value on this method. v3.4.0+


OnChange

JExcel Docs - [onchange] After a column value is changed.


OnAfterChanges

JExcel Docs - [onafterchanges] After all changes are applied in the table.


OnPaste

JExcel Docs - [onpaste] After a paste action is performed in the javascript table.


OnBeforePaste

JExcel Docs - [onbeforepaste] Before the paste action is performed. Used to parse any input data, should return the data.


OnInsertRow

JExcel Docs - [oninsertrow] After a new row is inserted.


OnBeforeInsertRow

JExcel Docs - [onbeforeinsertrow] Before a new row is inserted. You can cancel the insert event by returning false.


OnDeleteRow

JExcel Docs - [ondeleterow] After a row is excluded.


OnBeforeDeleteRow

JExcel Docs - [onbeforedeleterow] Before a row is deleted. You can cancel the delete event by returning false.


OnInsertColumn

JExcel Docs - [oninsertcolumn] After a new column is inserted.


OnBeforeInsertColumn

JExcel Docs - [onbeforeinsertcolumn] Before a new column is inserted. You can cancel the insert event by returning false.


OnDeleteColumn

JExcel Docs - [ondeletecolumn] After a column is excluded.


OnBeforeDeleteColumn

JExcel Docs - [onbeforedeletecolumn] Before a column is excluded. You can cancel the insert event by returning false.


OnMoveRow

JExcel Docs - [onmoverow] After a row is moved to a new position.


OnMoveColumn

JExcel Docs - [onmovecolumn] After a column is moved to a new position.


OnResizeRow

JExcel Docs - [onresizerow] After a change in row height.


OnResizeColumn

JExcel Docs - [onresizecolumn] After a change in column width.


OnSelection

JExcel Docs - [onselection] On the selection is changed.


OnSort

JExcel Docs - [onsort] After a colum is sorted.


OnFocus

JExcel Docs - [onfocus] On table focus


OnBlur

JExcel Docs - [onblur] On table blur


OnMerge

JExcel Docs - [onmerge] On column merge


OnChangeHeader

JExcel Docs - [onchangeheader] On header change


OnUndo

JExcel Docs - [onundo] On undo is applied


OnRedo

JExcel Docs - [onredo] On redo is applied


OnEditionStart

JExcel Docs - [oneditionstart] When a openEditor is called.


OnEditionEnd

JExcel Docs - [oneditionend] When a closeEditor is called.


OnChangeStyle

JExcel Docs - [onchangestyle] When a setStyle is called.


OnChangeMeta

JExcel Docs - [onchangemeta] When a setMeta is called.


Methods

GetColumnsConfig()

This Method will return an object with Columns (After Passing them to JExcel), AgColumns (After Updating passed columns with new column data types), AgColumnsBeforeSetup (Original Columns passed by the Developer)


GetJSpreadsheetObject()

This Method will return full object of the JExcel


GetData(onlyHighlighedCells: boolean = false)

JExcel Docs - getData: Get the full or partial table data @Param boolan onlyHighlighedCells - Get only highlighted cells


GetRowData(rowNumber: number)

JExcel Docs - getRowData: Get the data from one row by number @Param integer rowNumber - Row number


SetRowData(rowNumber: number, rowData: Array)

JExcel Docs - setRowData: Set the data from one row by number @Param integer rowNumber - Row number @param array rowData - Row data


GetColumnData(columnNumber: number)

JExcel Docs - getColumnData: Get the data from one column by number @Param integer columnNumber - Column number


SetColumnData(columnNumber: number, colData: Array)

JExcel Docs - setColumnData: Set the data from one column by number @Param integer columnNumber - Column number @param array colData - Column data


SetData(newData: any)

JExcel Docs - setData: Set the table data @Param json newData - New json data, null will reload what is in memory.


SetMerge(columnName: string, colspan: number, rowspan: number)

JExcel Docs - setMerge: Merge cells @Param string columnName - Column name, such as A1. @Param integer colspan - Number of columns @Param integer rowspan - Number of rows


GetMerge(columnName: string)

JExcel Docs - getMerge: Get merged cells properties @Param string columnName - Column name, such as A1.


RemoveMerge(columnName: string)

JExcel Docs - removeMerge: Destroy merged by column name @Param string columnName - Column name, such as A1.


DestroyMerged()

JExcel Docs - destroyMerged: Destroy all merged cells


GetCell(columnName: string)

JExcel Docs - getCell: get current cell DOM @Param string columnName - str compatible with excel, or as object.


GetLabel(columnName: string)

JExcel Docs - getLabel: get current cell DOM innerHTML @Param string columnName - str compatible with excel, or as object.


GetValue(cellIdent: any)

JExcel Docs - getValue: get current cell value @Param mixed cellIdent - str compatible with excel, or as object.


GetValueFromCoords(x: number, y: number)

JExcel Docs - getValueFromCoords: get value from coords @Param integer x @Param integer y


SetValue(cellIdent: any, Value: string, force: boolean)

JExcel Docs - setValue: change the cell value @Param mixed cellIdent - str compatible with excel, or as object. @Param string Value - new value for the cell @Param bool force - update readonly columns


SetValueFromCoords(x: number, y: number, Value: string, force: boolean)

JExcel Docs - setValueFromCoords: get value from coords @Param integer x @Param integer y @Param string Value - new value for the cell @Param bool force - update readonly columns


ResetSelection(executeBlur: any)

JExcel Docs - resetSelection: Reset the table selection @Param boolean executeBlur - execute the blur from the table


UpdateSelection(startCell: any, endCell: any, ignoreEvents: boolean)

JExcel Docs - updateSelection: select cells @Param object startCell - cell object @Param object endCell - cell object @Param boolean ignoreEvents - ignore onselection event


UpdateSelectionFromCoords(x1: number, y1: number, x2: number, y2: number)

JExcel Docs - updateSelectionFromCoords: select cells @Param integer x1 @Param integer y1 @Param integer x2 @Param integer y2


GetWidth(columnNumber: number)

JExcel Docs - getWidth: get the current column width @Param integer columnNumber - column number starting on zero


SetWidth(columnNumber: number, newColumnWidth: string)

JExcel Docs - setWidth: change column width @Param integer columnNumber - column number starting on zero @Param string newColumnWidth - New column width


GetHeight(rowNumber: number)

JExcel Docs - getHeight: get the current row height @Param integer rowNumber - row number starting on zero


SetHeight(rowNumber: number, newRowHeight: string)

JExcel Docs - setHeight: change row height @Param integer rowNumber - row number starting on zero @Param string newRowHeight- New row height


GetHeader(columnNumber: number)

JExcel Docs - getHeader: get the current header by column number @Param integer columnNumber - Column number starting on zero


GetHeaders()

JExcel Docs - getHeaders: get all header titles


SetHeader(columnNumber: number, columnTitle: string)

JExcel Docs - setHeader: change header by column @Param integer columnNumber - column number starting on zero @Param string columnTitle - New header title


GetStyle(cell: any)

JExcel Docs - getStyle: get table or cell style @Param mixed - cell identification or null for the whole table.


SetStyle(data: any, k: string | undefined = undefined, v: string | undefined = undefined)

JExcel Docs - setStyle: set cell(s) CSS style @Param mixed - json with whole table style information or just one cell identification. Ex. A1. @param k [optional]- CSS key @param v [optional]- CSS value


ResetStyle(columnName: string)

JExcel Docs - resetStyle: remove all style from a cell @Param string columnName - Column name, example: A1, B3, etc


GetComments(cellIdentification: any = null)

JExcel Docs - getComments: get cell comments @Param mixed - cell identification or null for the whole table.


SetComments(cell: any, text: string)

JExcel Docs - setComments: set cell comments @Param cell - cell identification @Param text - comments


OrderBy(columnNumber: number, sortType: boolean)

JExcel Docs - orderBy: reorder a column asc or desc @Param integer columnNumber - column number starting on zero @Param smallint sortType - One will order DESC, zero will order ASC, anything else will toggle the current order


GetConfig()

JExcel Docs - getConfig: get table definitions


InsertColumn(numOfColumns: any, columnNumber: number, insertBefore: boolean, properties: any)

JExcel Docs - insertColumn: add a new column @param mixed - num of columns to be added or data to be added in one single column @param int columnNumber - number of columns to be created @param boolean insertBefore @param object properties - column properties


DeleteColumn(columnNumber: number, numOfColumns: number)

JExcel Docs - deleteColumn: remove column by number @Param integer columnNumber - Which column should be excluded starting on zero @param integer numOfColumns - number of columns to be excluded from the reference column


MoveColumn(columnPosition: number, newColumnPosition: number)

JExcel Docs - moveColumn: change the column position @Param integer columnPosition @Param integer newColumnPosition


InsertRow(numberOfBlankLines: any, rowNumber: number, insertBefore: boolean)

JExcel Docs - insertRow: add a new row @Param mixed - number of blank lines to be insert or a single array with the data of the new row @Param integer rowNumber - reference row number @param boolean insertBefore


DeleteRow(rowNumber: number, numOfRows: number)

JExcel Docs - deleteRow: remove row by number @Param integer rowNumber - Which row should be excluded starting on zero @Param integer numOfRows - number of lines to be excluded


MoveRow(rowPosition: number, newRowPosition: number)

JExcel Docs - moveRow: change the row position @Param integer rowPosition @Param integer newRowPosition


Download(parsedFormulas: boolean = false)

JExcel Docs - download: get the current data as a CSV file @Param bool - true to download parsed formulas.


GetMeta(cellIdentification: any)

JExcel Docs - getMeta: get the table or cell meta information @Param mixed - cell identification or null for the whole table.


SetMeta(Data: any)

JExcel Docs - setMeta: set the table or cell meta information @Param mixed - json with whole table meta information.


Fullscreen(fullscreen: boolean)

JExcel Docs - fullscreen: Toogle table fullscreen mode @Param boolan fullscreen - define fullscreen status as true or false


GetSelectedRows(asIds: boolean)

JExcel Docs - getSelectedRows: Get the selected rows @Param boolan asIds - Get the rowNumbers or row DOM elements


GetSelectedColumns()

JExcel Docs - getSelectedColumns: Get the selected columns


ShowIndex()

JExcel Docs - showIndex: show column of index numbers


HideIndex()

JExcel Docs - hideIndex: hide column of index numbers


Search(searchString: string)

JExcel Docs - search: search in the table, only if directive is enabled during inialization. @Param string - Search for word


ResetSearch()

JExcel Docs - resetSearch: reset search table


WhichPage()

JExcel Docs - whichPage: Which page showing on Jspreadsheet - Valid only when pagination is true.


Page(pageNumber: number)

JExcel Docs - page: Go to page number- Valid only when pagination is true. @Param integer - Go to page number


Undo()

JExcel Docs - undo: Undo last changes


Redo()

JExcel Docs - redo: Redo changes