EasyTable Examples!

EASYTable Demo

Welcome to the EASYTable demo! In this step-by-step guide, I'll demonstrate how to use the EASYTable library to quickly and effectively manipulate HTML tables. This guide only demonstrates the most basic features that will help developers get started quickly. Please visit the documentation page for a detailed list of functionalities, and the examples page for a demonstration of some of the more advanced features.

In this example, we will be creating a simple three column table that shows us the model, brand, and year of some cool cars.

Using the EASYTable Libary

First, we must download the EASYTable library. Then, paste the following script tag in your HTML file with the appropriate path. Thats it! Now we can go ahead and use the library to create awesome tables!

Creating a New Table

To create a new table, we call the constructor and pass in the following arguments: name of table, id of parent, and an options object-literal, set with the following attributes: columns, defaultSearch, and defaultStyle.

Using the constructor below will create an empty table with the headers "Model", "Brand", and "Year. This table will be appended to the HTML element with id main, and will use default style 1. Additionally, it will have a library-provided default search bar, which lets users search the rows of the table. Feel free to try it out in later examples.

const myTable = new EasyTable("myTable", "main", {
columns: ['Model', 'Brand', 'Year'],
defaultSearch: true,
defaultStyle: 1,
}

Resulting Table

Entering Data

Adding new data is very simple, as EASYTable provides multiple methods for inserting new cells, rows, and even columns. For a detailed list, please visit the docs.

Here, we call the .appendRow() method to append a few rows to the end of the table. This method only has one argument; an array of values. Note that number of elements in the array must match the number of columns; the insertion will fail otherwise.

Appending Some Rows

myTable.appendRow(["Camry", "Toyota", "2000"])
myTable.appendRow(["Civic", "Honda", "2005"])
myTable.appendRow(["Accord", "Honda", "2001"])
myTable.appendRow(["Gustang", "Ford", "1995"])
myTable.appendRow(["Yaris", "Toyota", "1996"])
myTable.appendRow(["Model-T", "Ford", "1102"])
myTable.appendRow(["Enzo", "Ferrari", "1996"])
myTable.appendRow(["458", "Ferrari", "1996"])

Resulting Table

Here, why don't you try adding some data? Behind the scenes, I have set the onclick() callback of the submit button to the .appendRow() method.

Updating the Table

Setting Data

Woops! Looks like I misspelled Mustang. Luckily, EASYTable provides methods that allow users to update tables at the granularity of rows or cells. Realisticaly, these methods would be used to update specific rows/cells based on certain user interactions, and not to fix spelling mistakes. Here, I choose to employ the .setCell() method to fix the error. It takes 3 parameters; index of row, index of column, and the data to be set in the specified cell.

Updating the Cell

myTable.setCell(3, 0, "Mustang")

Resulting Table

Removing Data

You know what, I no longer want the Model-T in our table; its too old! To delete a row, we can call the .deleteRow() method, which only takes in one argument; the index of the row we wish to delete. Conviently, this method returns a boolean value that indicates whether the operation was successful or not. We can use it to error check our code, but its not necessary here.

Deleting Row

myTable.deleteRow(5)

Resulting Table

Loading Data-Sets

Congrats! By this point, you know how to perform basic CRUD operations! Before you move on, however, I'd like to show you one more basic, but powerful, feature: loading data-sets. EASYTable currently supports two data formats; CSV and JSON. That means if you have tabular data in either of these formats, you can use the built-in methods to quickly load them into an instance of EASYTable.

Note that EASYTable can only transform data from these formats; it is up to you, the developer, to get the data-set from your desired source (API call / database / local file).

To load a CSV data set, first get the data, then call the .loadFromCSV() method; this will read the provided data, and transform it into a table. Similarly, to load a JSON data-set, call .loadFromJSON() . The best part about these methods is that you can call them anytime, and not just immidiately after instantiation.

Loading CSV

const csv = "Huracan, Lamborghini, 2016\n Aventador, Lamborghini, 2012"
myTable.loadFromCSV(csv)

Resulting Table

Loading JSON

const json = `[{ "Model": "Rogue", "Brand": "Nissan", "Year": "2014" }]`
myTable.loadFromJSON(json)

Resulting Table

Next Steps

For more cool features, such as searching, sorting, and pagination, please visit the documentation and examples pages.