How to Create a Table with Search in WordPress Without a Plugin

WordPress is renowned for its flexibility, often encouraging us to look beyond ready-made plugins and craft custom solutions. One common requirement is displaying data in tables your visitors can easily search.

Whether listing products, comparing features, or simply displaying data, adding a live search capability can enhance user experience. This post will explore how to create a table with search in WordPress using only HTML, CSS, and JavaScript.

Why Choose a Custom Solution?

Using a custom code approach instead of a plugin offers several benefits:

• Performance: Plugins can add unnecessary bloat. Custom code keeps your site lean and efficient.
• Control: You decide precisely how your table functions and looks.
• Learning Experience: This approach deepens your understanding of front-end web development.
• Flexibility: Customize the search behavior to suit your data structure perfectly.

With these benefits in mind, let’s start building our searchable table.

Step 1: Creating the HTML Table

For this guide we’ll be using the custom HTML block.

Go to your post/page editor, add a custom HTML block, and then copy and paste the code below.  

<div id="searchable-table-container">
  <!-- Search Input Field -->
  <input type="text" id="table-search" placeholder="Search the table..." onkeyup="searchTable()" style="margin-bottom: 10px; padding: 8px; width: 100%;" />

  <!-- Data Table -->
  <table id="data-table" border="1" cellpadding="10" cellspacing="0" style="width: 100%; border-collapse: collapse;">
    <thead>
      <tr>
        <th>Product</th>
        <th>Category</th>
        <th>Price</th>
        <th>Availability</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alpha Widget</td>
        <td>Gadgets</td>
        <td>$29.99</td>
        <td>In Stock</td>
      </tr>
      <tr>
        <td>Beta Widget</td>
        <td>Gadgets</td>
        <td>$39.99</td>
        <td>Out of Stock</td>
      </tr>
      <tr>
        <td>Gamma Gizmo</td>
        <td>Tools</td>
        <td>$19.99</td>
        <td>In Stock</td>
      </tr>
      <tr>
        <td>Delta Device</td>
        <td>Electronics</td>
        <td>$49.99</td>
        <td>Limited</td>
      </tr>
      <tr>
        <td>Epsilon Apparatus</td>
        <td>Home</td>
        <td>$59.99</td>
        <td>In Stock</td>
      </tr>
      <tr>
        <td>Zeta Machine</td>
        <td>Gadgets</td>
        <td>$69.99</td>
        <td>Out of Stock</td>
      </tr>
      <tr>
        <td>Eta Contraption</td>
        <td>Tools</td>
        <td>$15.99</td>
        <td>In Stock</td>
      </tr>
      <tr>
        <td>Theta Equipment</td>
        <td>Electronics</td>
        <td>$89.99</td>
        <td>Limited</td>
      </tr>
      <tr>
        <td>Iota Instrument</td>
        <td>Musical</td>
        <td>$99.99</td>
        <td>In Stock</td>
      </tr>
      <tr>
        <td>Kappa Gadget</td>
        <td>Gadgets</td>
        <td>$45.99</td>
        <td>Out of Stock</td>
      </tr>
      <tr>
        <td>Lambda Tool</td>
        <td>Tools</td>
        <td>$34.99</td>
        <td>In Stock</td>
      </tr>
      <tr>
        <td>Mu Device</td>
        <td>Electronics</td>
        <td>$55.99</td>
        <td>Limited</td>
      </tr>
      <tr>
        <td>Nu Widget</td>
        <td>Gadgets</td>
        <td>$23.99</td>
        <td>In Stock</td>
      </tr>
      <tr>
        <td>Xi Gizmo</td>
        <td>Tools</td>
        <td>$27.99</td>
        <td>Out of Stock</td>
      </tr>
      <tr>
        <td>Omicron Widget</td>
        <td>Gadgets</td>
        <td>$39.99</td>
        <td>In Stock</td>
      </tr>
      <tr>
        <td>Pi Gadget</td>
        <td>Electronics</td>
        <td>$42.99</td>
        <td>Limited</td>
      </tr>
      <tr>
        <td>Rho Device</td>
        <td>Home</td>
        <td>$37.99</td>
        <td>In Stock</td>
      </tr>
      <tr>
        <td>Sigma Contraption</td>
        <td>Tools</td>
        <td>$49.99</td>
        <td>Out of Stock</td>
      </tr>
      <tr>
        <td>Tau Apparatus</td>
        <td>Gadgets</td>
        <td>$31.99</td>
        <td>In Stock</td>
      </tr>
      <tr>
        <td>Upsilon Machine</td>
        <td>Electronics</td>
        <td>$65.99</td>
        <td>Limited</td>
      </tr>
    </tbody>
  </table>
</div>

Once added, hit the Preview and there you have it!

And this is how it looks!

This simple HTML snippet creates a table wrapped in a container. At the top, you’ll see an input field with an onkeyup attribute that calls a JavaScript function named searchTable().

Step 2: Adding the JavaScript Search Function

Right after the HTML code, paste this JS function. 

The core functionality of this solution lies in filtering table rows based on user input. The JavaScript function below does just that:

<script>
  function searchTable() {
    // Declare variables
    var input, filter, table, tr, td, i, j, txtValue;
    input = document.getElementById("table-search");
    filter = input.value.toUpperCase();
    table = document.getElementById("data-table");
    tr = table.getElementsByTagName("tr");

    // Loop through all table rows except the header row
    for (i = 1; i < tr.length; i++) {
      var rowMatches = false;
      // Get all cells in the row
      td = tr[i].getElementsByTagName("td");

      // Loop through each cell in the row
      for (j = 0; j < td.length; j++) {
        if (td[j]) {
          txtValue = td[j].textContent || td[j].innerText;
          // Check if the cell text contains the search term
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            rowMatches = true;
            break;
          }
        }
      }

      // Show or hide the row based on search result
      tr[i].style.display = rowMatches ? "" : "none";
    }
  }
</script>

How the Code Works

• Input and Filter: The function grabs the value from the search input and converts it to uppercase. This conversion makes the search case-insensitive.
  
• Row Looping: It then loops over every row in the table (ignoring the header) and inspects each cell.
  
• Matching Logic: For each cell, it checks if the content contains the search term. If at least one cell in a row matches, that row is displayed; otherwise, it is hidden.

You avoid needing external plugins by embedding this script directly on your page.

Step 3: Enhancing the Table with CSS

To ensure your table not only works well but also looks polished, add some custom CSS. You can include this CSS in your theme’s stylesheet, the page’s header, or even inside a <style> tag in your page/post.

<style>
  /* Container Styling */
  #searchable-table-container {
    max-width: 800px;
    margin: 20px auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
    background: #f0f4f8;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  /* Search Input Styling */
  #table-search {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  #table-search:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
  }

  /* Data Table Styling */
  #data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    animation: fadeInUp 0.5s ease-out;
  }

  #data-table th,
  #data-table td {
    padding: 12px;
    border: 1px solid #e0e7ff;
    text-align: left;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  /* Table Header with Gradient Background */
  #data-table thead th {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Alternating Row Colors */
  #data-table tr:nth-child(even) {
    background-color: #f9fafb;
  }

  #data-table tr:nth-child(odd) {
    background-color: #ffffff;
  }

  /* Row Hover Effects */
  #data-table tr:hover {
    background-color: #e0e7ff;
    transform: scale(1.02);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  /* Fade In Animation for Table */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>

And this is how your final product looks like!

Step 4: Testing and Troubleshooting

After embedding the code, testing the functionality across various browsers and devices is essential. 

Here are some troubleshooting tips:

• Check Browser Console: Open the developer console in your browser (F12 or right-click > Inspect) to see if there are any JavaScript errors.
• Responsive Design: Verify that the table displays correctly on mobile devices. Adjust the CSS if necessary.
• Edge Cases: Test search queries that might include numbers, special characters, or different cases to ensure the case-insensitive search works as intended.
• Performance: If your table grows very large, consider optimizing the JavaScript loop or using techniques like pagination to maintain performance.

Advanced Customizations

Once the basic functionality is working, you can expand the search feature. Here are some ideas:

• Column-Specific Search: Instead of searching the entire table, create individual search inputs for each column. This would require modifying the JavaScript function to target specific columns.
• Highlighting Search Terms: Enhance the user experience by highlighting the matching text in each row. This can be achieved by wrapping the matching text with a <span> tag and applying a highlight style.
• Sorting Functionality: Combine search with sortable columns. Many lightweight JavaScript libraries can help you sort table data without adding too much overhead.
• AJAX Loading: If you’re dealing with large datasets, consider implementing AJAX-based loading to improve performance.

Each of these enhancements will require additional code and testing. Start with the basic functionality, then iterate to add features as needed.

Benefits of a Custom Approach

Using custom HTML, JavaScript, and CSS in WordPress to build a searchable table offers several distinct advantages:

• Speed: By not loading an extra plugin, your site remains lightweight and loads faster.
• Customization: You can tailor the code precisely to your needs rather than relying on a plugin’s generic options.
• Maintainability: If you’re comfortable with code, maintaining and troubleshooting your custom solution can be easier than debugging third-party plugins.
• Learning Opportunity: Developing custom functionality deepens your understanding of web technologies and makes you a more proficient developer.

Final Thoughts

Creating a searchable table without a plugin is a fantastic way to add interactivity to your WordPress site while keeping control over the performance and design. The solution we’ve outlined is flexible enough to handle most small-to-medium data tables and is a great starting point if you’re looking to delve deeper into custom coding.

As you refine this solution, always keep your users in mind. The goal is to make the data as accessible and easily navigable as possible. With these custom code techniques, you’re well on your way to creating a dynamic and responsive data presentation tool without overloading your site with extra plugins.

Feel free to experiment and modify the code to suit your unique requirements. Happy coding, and enjoy building your custom searchable table in WordPress!