Creating a Custom DataTable in JavaScript

A custom DataTable in JavaScript refers to a dynamically created and styled table that allows developers to present and manipulate data in a web application in a highly customized and interactive manner. Instead of relying on a standard HTML <table >element, developers build their own DataTables from scratch or use third-party libraries like DataTables.js or ag-Grid to create powerful data tables with advanced features.

Dynamic Data Rendering

Custom DataTables can display data from various sources, such as arrays, JSON objects, APIs, or databases. They dynamically generate table rows and columns based on the data provided.

Customizable UI:

Users can typically sort data in ascending or descending order by clicking on column headers. Sorting can be implemented based on text, numbers, or custom criteria.

Sorting:

Developers have full control over the DataTable's appearance, including styling, theming, and the layout of elements like headers, footers, and rows.

Filtering:

Custom DataTables often provide filtering options that allow users to search for specific data within the table, making it easier to find relevant information in large datasets.

Row Selection:

Users can select one or more rows in the DataTable, which is useful for actions like bulk updates or deletion.

Event Handling:

Developers can attach event handlers to DataTables to respond to user interactions, such as row clicks, cell edits, or context menu actions.

Data Binding:

In some cases, custom DataTables may support two-way data binding, allowing changes made in the DataTable to automatically update the underlying data source.

Source Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DataTable in JS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <table class="table">
      <thead>
        <tr>
          <th><input type="text" class="search-txt" placeholder="Name" /></th>
          <th><input type="text" class="search-txt" placeholder="Course" /></th>
          <th><input type="text" class="search-txt" placeholder="City" /></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Suresh Kumar</td>
          <td>B.SC MICRO</td>
          <td>Chennai</td>
        </tr>
        <tr>
          <td>Arun</td>
          <td>B.SC BIOCHEM</td>
          <td>Salem</td>
        </tr>
        <tr>
          <td>Shilpa</td>
          <td>B.A ENGLISH</td>
          <td>Hosur</td>
        </tr>
        <tr>
          <td>Rama Chandran</td>
          <td>B.B.A</td>
          <td>Salem</td>
        </tr>
        <tr>
          <td>Pavithra</td>
          <td>M.SC MATHS</td>
          <td>Salem</td>
        </tr>
        <tr>
          <td>Sakthi</td>
          <td>B.C.A</td>
          <td>Dharmapuri</td>
        </tr>
        <tr>
          <td>Ajay</td>
          <td>M.A ENGLISH</td>
          <td>Salem</td>
        </tr>
        <tr>
          <td>Anand</td>
          <td>B.SC CS</td>
          <td>Banglore</td>
        </tr>
        <tr>
          <td>Chandra Sekar</td>
          <td>B.COM</td>
          <td>Dharmapuri</td>
        </tr>
        <tr>
          <td>Dinakaran</td>
          <td>B.COM CA</td>
          <td>Chennai</td>
        </tr>
        <tr>
          <td>Gopinath</td>
          <td>B.SC MATHS</td>
          <td>Banglore</td>
        </tr>
        <tr>
          <td>Jayasurya</td>
          <td>B.COM B&I</td>
          <td>Salem</td>
        </tr>
        <tr>
          <td>John</td>
          <td>B.ED</td>
          <td>Salem</td>
        </tr>
        <tr>
          <td>Kumaravel</td>
          <td>AUMCA</td>
          <td>Banglore</td>
        </tr>
        <tr>
          <td>Loganathan</td>
          <td>B.SC CHEM</td>
          <td>Dharmapuri</td>
        </tr>
        <tr>
          <td>Mohan</td>
          <td>B.SC PHYSICS</td>
          <td>Salem</td>
        </tr>
        <tr>
          <td>Pradeep</td>
          <td>B.SC ELE & COMM.</td>
          <td>Namakkal</td>
        </tr>
        <tr>
          <td>Praveen</td>
          <td>B.B.A CA</td>
          <td>Banglore</td>
        </tr>
        <tr>
          <td>Saludeen</td>
          <td>M.COM</td>
          <td>Chennai</td>
        </tr>
        <tr>
          <td>Sathish Kumar</td>
          <td>B.B.A</td>
          <td>Salem</td>
        </tr>
        <tr>
          <td>Tamil</td>
          <td>M.SC MATHS</td>
          <td>Chennai</td>
        </tr>
        <tr>
          <td>Venkateshen</td>
          <td>B.C.A</td>
          <td>Banglore</td>
        </tr>
        <tr>
          <td>Victor</td>
          <td>M.A ENGLISH</td>
          <td>Chennai</td>
        </tr>
        <tr>
          <td>Aishwarya</td>
          <td>B.SC CS</td>
          <td>Salem</td>
        </tr>
        <tr>
          <td>Ayesha</td>
          <td>B.COM</td>
          <td>Namakkal</td>
        </tr>
        <tr>
          <td>Bawya</td>
          <td>B.COM CA</td>
          <td>Namakkal</td>
        </tr>
        <tr>
          <td>Chellabharathi Sree</td>
          <td>B.SC MATHS</td>
          <td>Hosur</td>
        </tr>
        <tr>
          <td>Dhanushya</td>
          <td>B.COM B&I</td>
          <td>Chennai</td>
        </tr>
      </tbody>
    </table>
    <script src="script.js"></script>
  </body>
</html>

js/script.js

The provided JavaScript code is an event listener that responds to the "DOMContentLoaded" event, which is triggered when the HTML document has been fully loaded and parsed. It adds functionality to search/filter table rows based on user input in text fields with the class "search-txt."

In summary, this code sets up a live search/filter functionality for multiple tables on a page. It listens for changes in the "search-txt" input fields, finds the corresponding table, determines the column being searched, and hides rows that don't match the user's search query by applying a "visibility: collapse" style to those rows. This allows users to quickly filter the displayed rows in a table based on the text they enter into the associated search input field

document.addEventListener("DOMContentLoaded", function () {
  const txtSearch = document.querySelectorAll(".search-txt");

  txtSearch.forEach((input) => {
    
    const tblRows = input.closest("table").querySelectorAll("tbody tr");
    const headerCell = input.closest("th");
    const otherHeaderCells = input.closest("tr").querySelectorAll("th");
    const columnIndex = Array.from(otherHeaderCells).indexOf(headerCell);
    const searchableCells = Array.from(tblRows).map((row) => {
      return row.querySelectorAll("td")[columnIndex];
    });

    input.addEventListener("input", () => {
      const searchQuery = input.value.toLowerCase();
      for (const tableCell of searchableCells) {
        const row = tableCell.closest("tr");
        const value = tableCell.textContent.toLowerCase();
        row.style.visibility = null;
        if (value.search(searchQuery) === -1) {
          row.style.visibility = "collapse";
        }
      }
    });
  });
});

Finally, you can add some CSS styles to enhance the look and feel of the button and container. you can adjust the CSS styles as desired to match the design of your website.

css/style.css

@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap");
* {
  font-family: "Ubuntu", sans-serif;
}

table {
  border-collapse: collapse;
}
table th,
table td {
  border: 1px solid #dc3d08;
}

table td,
.search-txt {
  padding: 0.6em 1em;
}

.search-txt {
  border: none;
  outline: none;
}

Output

Live Preview

Creating a custom DataTable in JavaScript requires a good understanding of HTML, CSS, and JavaScript programming. Developers can either build their own DataTable component from scratch or leverage existing DataTable libraries that offer extensive customization options and features out of the box. The choice often depends on the specific project requirements and development preferences.