Create a Table Using Object-Oriented Javascript

How to Create a Table Using Object-Oriented Javascript

Table is main building block when we create web layout. In the Javascript interview, we get a problem where we have to implement something using Object-Oriented Javascript, so here I try to implement Table class.

Object-Oriented JavaScript (OOJS) is a programming paradigm that uses objects and their interactions to design applications and computer programs. It is a powerful and flexible way to write JavaScript code, and it is widely used in modern web development.

One of the key benefits of OOJS is that it allows you to create reusable and maintainable code. This is because objects can encapsulate data and behavior, and they can be inherited from other objects to create new objects with additional functionality.

Table Using Object-Oriented Javascript

To create a table using OOJS, you can create a class to represent the table. This class can have properties to store the table's data, as well as methods to add and remove rows and columns.

You can then instantiate the table class to create a new table object. This object will have all of the properties and methods that you defined in the class.

To add rows and columns to the table, you can call the appropriate methods on the table object. You can also access the table's data by reading the values of its properties.

Here is a simple example of how to create a table using OOJS:

here is the index.js:

index.js

class Table {
  constructor(data) {
    this.data = data;
    this.rows = [];
    this.columns = [];
  }

  addRow(row) {
    this.rows.push(row);
  }

  addColumn(column) {
    this.columns.push(column);
  }

  render() {
    let table = document.createElement("table");

    // Create the table header
    let thead = document.createElement("thead");
    let headerRow = document.createElement("tr");
    for (let column of this.columns) {
      let th = document.createElement("th");
      th.textContent = column;
      headerRow.appendChild(th);
    }
    thead.appendChild(headerRow);
    table.appendChild(thead);

    // Create the table body
    let tbody = document.createElement("tbody");
    for (let row of this.rows) {
      let tr = document.createElement("tr");
      for (let cell of row) {
        let td = document.createElement("td");
        td.textContent = cell;
        tr.appendChild(td);
      }
      tbody.appendChild(tr);
    }
    table.appendChild(tbody);

    return table;
  }
}

// Create a new table object
let table = new Table([
  ["Name", "Age"],
  ["John Doe", 30],
  ["Jane Doe", 25],
]);

// Add a new row to the table
table.addRow(["Peter Parker", 20]);

// Render the table
document.body.appendChild(table.render());

here is the index.html

index.html

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <div id="main-container"></div>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

This code will create a simple table with two columns and three rows. The table will be appended to the document.body, so it will be displayed on the web page.

You can use OOJS to create more complex tables, such as tables with nested rows and columns, or tables with different types of data. You can also use OOJS to create tables that are dynamically updated, such as tables that display real-time data.

Key aspects of creating a table using OOJS:

Create a class to represent the table.
Define properties to store the table's data.
Define methods to add and remove rows and columns.
Instantiate the table class to create a new table object.
Call the appropriate methods on the table object to add rows and columns.
Access the table's data by reading the values of its properties.

Benefits of using OOJS to create tables:

Reusable and maintainable code.
Can be used to create complex tables.
Can be used to create dynamically updated tables.