EASYDocs
Here you will find the complete and detailed list of features and functionalities offered by the EASYTable libary. Please visit the getting-started page for setup help, and to get a basic understanding of the library's core features. For a demo of some of the more advanced features, please visit the examples page.
Constructor
Syntax
const myTable = new EasyTable(name, parent_element, options)
Parameters
name
Name of table for easy identification
parent_element
Id of parent element; the newly created table is appended as a child to the element with id parent_element
options
An object-literal that specifies the properties of the table being constructed. The following attributes can be set within the object-literal
columns
Array of strings representing column headers.
defaultStyle [optional]
1, 2, or 3. Sets the corresponding default styles provided by the library. Defaults to style 1 if none of the three style attributes are set (defaultStyle, stylesheet, or cssText).
stylesheet [optional]
Path to custom CSS file. Note that each EASYTable DOM element is encapsulated within a shadow-root; selectors designed for the table will not affect the rest of the HTML.
cssText [optional]
String containing inline-css to set the style of the table.
paginate [optional]
An object-literal that specifies the properties of the pagination feature.
perPage
Number of rows per page. Must be set to a positive integer to enable the pagination feature.
default
Boolean to enable/disable the default buttons for navigating the pages of the table. If not specified, you must explicitly call the .prevPage() and .nextPage() methods to enable navigation between the pages of the table.
defaultSearch [optional]
Boolean to enable/disable the default search bar. If not specified, you must explicitly set the .search() method as a callback to a button-click event (or some alternative) to enable searching.
defaultSort [optional]
Boolean to enable/disable the default sorting buttons. If not specified, you must explicitly set the .sort() method as a callback to a button-click event (or some alternative) to enable sorting.
Example
const myTable = new EasyTable("myTable", "main", {
columns: ['Model', 'Brand', 'Year'],
defaultSearch: true,
defaultStyle: 1,
defaultSort: true,
paginate: { perPage: 4, default: true}
}
Result
Note that some data has been added.
Attributes
EASYTable takes a Pythonic approach in defining the accesibility of its attributes; there are many internal attributes which are accessible, but are not designed to be externally modified. It is left to the user's discretion to access and modify attributes such as the underlying HTMLElement* objects table, header, body, and footer, among others.
If you need access to a particular attribute, please check the rest of the documentation first; you might find a built-in solution!
Loading Data-Sets
loadFromCSV()
Syntax
myTable.loadFromCSV(csvString)
Parameters
csvString
String containing data in valid CSV format. Note that the corresponding columns must be set during instantiation; .loadFromCSV() doesn't set the columns based on data read from csvString
Return
true on success, false otherwise.
loadFromJSON()
Syntax
myTable.loadFromJSON(jsonString)
Parameters
jsonString
String containing data in valid JSON format. Currently, EASYTable only provides support for linear (non-nested) JSON . Note that the corresponding columns must be set during instantiation; .loadFromJSON() doesn't set the columns based on data read from jsonString
Return
true on success, false otherwise.
Saving Data-Sets
saveToCSV()
Syntax
myTable.saveToCSV()
Return
A string containing the table's data in CSV format.
saveToJSON()
Syntax
myTable.saveToJSON()
Return
A string containing the table's data in JSON format.
Row Methods
getRowCount()
Returns the number of rows in the displayed table. If the table is currently showing the results of a search, it will return the number of rows of the table in this state (number of rows that match the search query).
Syntax
myTable.getRowCount()
Return
Number of rows in the currently displayed table.
getRow()
Gets and returns a row at the desired index.
Syntax
myTable.getRow(i)
Parameters
i
Index of the desired row.
Return
The HTMLTableRowElement at index i on success, null otherwise.
setRow()
Modifies all of the cells of a given row.
Syntax
myTable.setRow(i, cells)
Parameters
i
Index of the desired row.
cells
Array of data to be set in the cells of the row at index i. Note that cells.length must match the number of columns for this call to be successful.
Return
true on success, false otherwise.
appendRow()
Appends a new row to the end of the table.
Syntax
myTable.appendRow(cells)
Parameters
cells
Array of data to be set in the cells of the row. Note that cells.length must match the number of columns for this call to be successful.
Return
true on success, false otherwise.
insertRow()
Inserts a new row at the desired index.
Syntax
myTable.appendRow(cells)
Parameters
i
The index at which to insert the new row.
cells
Array of data to be set in the cells of the row at index i. Note that cells.length must match the number of columns for this call to be successful.
Return
true on success, false otherwise.
popRow()
Delete the last row in the table.
Syntax
myTable.popRow()
Return
true on success, false otherwise.
deleteRow()
Delete the i'th row from the table.
Syntax
myTable.deleteRow(i)
Parameters
i
Index of the row to be deleted.
Return
true on success, false otherwise.
Cell Methods
getCell()
Gets the cell at the position (row, col).
Syntax
myTable.getCell(row, col)
Parameters
row
Index of the row of the desired cell.
col
Index of the column of the desired cell.
Return
The HTMLTableCellElement at position (row,col) on success, null otherwise.
getCells()
Gets all of the cells in the table.
Syntax
myTable.getCells()
Return
An array of HTMLTableCellElement elements.
setCell()
Set the value of the cell at the position (row, col) to data.
Syntax
myTable.setCell(row, col, data)
Parameters
row
Index of the row of the desired cell.
col
Index of the column of the desired cell.
data
Data to set in the new cell.
Return
true on success, false otherwise.
Column Methods
getColCount()
Returns the number of columns in the table.
Syntax
myTable.getColCount()
Return
Number of columns in the table.
getCol()
Returns the cells of the specified column.
Syntax
myTable.getCol(index)
Parameters
index
Index of the desired column.
Return
An array of the cells of the column at the specified index.
appendCol()
Appends a new column to the end of the table.
Syntax
myTable.appendCol(header, defaultData, dataList)
Parameters
header
Header of the new column.
defaultData
If specified, and dataList is set to null, the cells of the new column will all be set to defaultData.
dataList
Array of data. If specified, and defaultData is set to null, the cells of the new column will be set to the corresponding element of dataList. Note that dataList.length must match the number of rows in the table (at time of insertion).
Return
true on success, false otherwise.
insertCol()
Inserts a new column at the desired index.
Syntax
myTable.insertCol(i, header, defaultData, dataList)
Parameters
i
The index at which to insert the new column.
header
Header of the new column.
defaultData
If specified, and dataList is set to null, the cells of the new column will all be set to defaultData.
dataList
Array of data. If specified, and defaultData is set to null, the cells of the new column will be set to the corresponding element of dataList. Note that dataList.length must match the number of rows in the table (at time of insertion).
Return
true on success, false otherwise.
Searching
search()
Search and display the rows of the table that match the specified query. Note that this method is implicitly called whenever the default search button is clicked (if the defaultSearch option is enabled during instantiation).
If defaultSearch is not set, you must explicitly call the .search() method to enable searching, probably as the onclick() callback for some custom element.
Syntax
myTable.search(query)
Parameters
query
String to search for.
Return
true if at least one matching row was found, false otherwise.
resetTable()
Clear the results of the .search() method, and restore the table to its original state (pre-search). Note that this method is implicitly called whenever the default clear-input button is clicked (if the defaultSearch option is enabled during instantiation).
If defaultSearch is not set, you must explicitly call the .resetTable() method to clear the results of the search, and restore the table to its pre-search state.
Syntax
myTable.resetTable()
Return
None
Sorting
sort()
Sort the rows of the table by the values in a specified column.
If defaultSort is not set during instantiation, you must explicitly call the .sort() method to enable sorting, probably as the onclick() callbacks for some custom elements.
Syntax
myTable.sort(col, direction)
Parameters
col
Index of the column to sort the rows by.
direction
1 to sort the table in ascending order, -1 for descending order.
Return
None
Pagination
Note that pagination must be enabled for the following methods to succeed; the paginate.perPage option must be set during instantiation.
If the default value of the paginate option is not set during instantiation, you must explicitly call the .prevPage() and .nextPage() methods to enable navigation between the pages of the table. This will probably be done by setting the onclick() callbacks for some custom elements.
prevPage()
Navigate to the previous page of the table.
Syntax
myTable.prevPage()
Return
None
nextPage()
Navigate to the next page of the table.
Syntax
myTable.nextPage()
Return
None