Further Usage

In this demo, we continue our example of creating a table that contains a bunch of cool cars, and cover some features that weren't previously discussed.

Lets go!

Step 1: Creating the Table

Constructor

Like the previous example, I want to create a table that initially has three columns; "Model", "Brand", and "Year". Additionally, I want the end users to be able to search the rows, as well as sort the table by its columns, but only in ascending order.

Keeping the above specification in mind, I call the constructor with the following options enabled.

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

Custom Elements

Note that I did NOT set the option defaultSort = true, even though I said I wanted to enable sorting. This is because I want to use a custom element to let users sort columns. Additionally, the default sort buttons allow users to sort the columns in both ascending and descending order; I don't want to allow the latter.

I create input and button elements, and set the submit button's onclick attribute to the following:

sortButton.onclick = (event) => {
   myTable.sort(input.value, 1) }

When users press the sort button, the specified column is sorted in ascending order.

Creating custom searchbars and navigation buttons is very similar; create your elements, and call the corresponding methods in the custom elements' callbacks. Check the documentation for further details on these methods.

Result

Step 2: Adding Data

Loading Data

Instead of repeatedly calling .appendRow() or .insertRow(), I'm going to load the data from a CSV file that I already have.

// Get CSV
const csvString = gettingCSVFromSomewhere()
// Load CSV into table
myTable.loadFromCSV(csvString)

Adding Columns

Now that I've loaded the data, I feel like the table is not descriptive enough; I want to add another column.

I want the new Likes column to be the new first column of the table. Also, I want to set each new cell to have a specific value. I can achieve this by calling the .insertCol() method. This method takes in the following parameters: index, header, defaultData, and dataSet.

Given the requirements, I call the method with the following arguments. Note that I set the defaultData argument as null. This is to let the method know that I do NOT want each of the new cells to have a default value; rather, I want to assign each cell a unique value, as specified by the last argument.

myTable.insertCol(0, "Likes", null, [1, 2.5, 4, 5, 7, 8.5, 9])

Result

Step 3: Cell Manipulation

I want to let users "like" cars; I want to have the ability to double click on a cell in the Likes column to increment the count. We can do this easily by taking advantage of the .getCol() method, which returns a array of HTMLTableCellElement from the specified column.

First, we get the cells. Then, we iterate over each cell, setting its ondblclick callback as shown below.

myTable.getCol().forEach(cell => {
    cell.ondblclick = () => {cell.innerText = parseInt(cell.innerText) + 1}
})

Result

Step 4: Saving Data

Now, I have some data on which cars people like the most, and which they like the least. I would like to store this newly collected data. Luckily, EASYTable provides save methods that correspond to the load methods; you can store the contents of a table in CSV or JSON format.

In this case, I want to store my data in the CSV format, so I call the following method. Please visit the documentation to learn more about the JSON variant of this method.

const csvString = myTable.saveToCSV()
console.log(csvString)

Result

Likes, Model, Brand, Year
1, Camry, Toyota, 2000
2, Civic, Honda, 2005
4, Accord, Honda, 2001
5, Mustang, Ford, 1995
7, Aventador, Lamborghini, 2012
8, Huracan,  Lamborghini,  2018
9, P1,  McLaren,  2016