search

🛠️Getting set up

hashtag
Installation

To get started with EzyTables, you need to include the library in your project. You can either download the JavaScript file or use a package manager like npm or yarn:

<script src="https://cdn.jsdelivr.net/npm/ezytables@0.8.1/dist/ezytables.iife.js"></sricpt>
npm install ezytables

hashtag
Usage

Here's a basic example of how to create a data table with EzyTables using the detached feature:

<!doctype html>
<html>
  <head>
    <title>EzyTables Example</title>
  </head>
  <body>
    <div class="table-controls">
      <label for="limitSelect">Show</label>
      <select id="limitSelect">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
      </select>
      <label for="searchInput">Search</label>
      <input id="searchInput" placeholder="Search..." />
    </div>
    <table id="myTable">
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
          <th>Status</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <div class="pagination">
      <button id="prevButton">Prev</button>
      <button id="nextButton">Next</button>
    </div>
    <p id="paginationInfo"></p>

    <script src="https://cdn.jsdelivr.net/npm/@ra9/ezytables/+mjs"></script>
    <script>
      const data = [
        {
          name: "John Brown",
          description:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.",
          status: "Active",
          date: "2020-01-01",
        },
        {
          name: "Jane Abram",
          description:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.",
          status: "Active",
          date: "2020-01-01",
        },
        {
          name: "Sam Smith",
          description:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.",
          status: "Active",
          date: "2020-01-01",
        },
        {
          name: "Ekaterina Tankova",
          description:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.",
          status: "Active",
          date: "2020-01-01",
        },
        {
          name: "Luisa Hanes",
          description:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.",
          status: "Active",
          date: "2020-01-01",
        },
      ];

      const customRender = data => {
        // Replace this with your custom rendering logic
        const tableBody = document.querySelector("#myTable tbody");
        tableBody.innerHTML = "";
        data.forEach(item => {
          const row = document.createElement("tr");
          row.innerHTML = `
            <td>${item.name}</td>
            <td>${item.description}</td>
            <td>${item.status}</td>
            <td>${item.date}</td>
          `;
          tableBody.appendChild(row);
        });

        // Display pagination info
        const pageInfo = document.querySelector("#paginationInfo");
        pageInfo.textContent = `${easyTable.getShowingInfo()}`;
      };

      const easyTable = new EzyTables({
        data,
        perPage: 3,
        renderFunction: customRender,
        clientEnabled: true,
        client: {
          perPage: 3,
        },
      });

      const searchInput = document.querySelector("#searchInput");
      searchInput.addEventListener("input", () => {
        easyTable.setSearchDebounced(searchInput.value);
      });

      const prevButton = document.querySelector("#prevButton");
      prevButton.addEventListener("click", () => {
        easyTable.prevPage();
      });

      const nextButton = document.querySelector("#nextButton");
      nextButton.addEventListener("click", () => {
        easyTable.nextPage();
      });
    </script>
  </body>
</html>

This simple example demonstrates how to create a table and bind it to EzyTables, apply search functionality, and customize the rendering logic.

PreviousFeaturesNextEzyTables HTML Wrapper

Last updated