Table with filter

Hello Alexander,

Unfortunately, there is no such possibility in NIcepage, we added your proposition to our wishlist, but we would appreciate it if you could provide some examples so we could add them to the case.

For now, we can only suggest using any trusted third-party plugins with such functionality.
...................................................
Sincerely,
Negat Veri
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi there, well I created some Html/css and JavaScript to solve the Problem. May you can create an standard for nicepage, that would be very helpful.

But, how can I use "nicepage links" to link from custom html to other sites and have it all published (wordpress)

For examble:

    <style>
table#foobar-table thead {
 position: sticky;
}
table#foobar-table thead {
 inset-block-start: 0;
}
table#foobar-table,
table#foobar-table > thead > tr > th,
table#foobar-table > tbody > tr > td {
 border: Solid 1px #888888;
 padding: 5px;
 color: #000000;
}
table#foobar-table > thead > tr {
 background-color: rgba(255,174,94,0.8);
}
table#foobar-table > tbody > tr:nth-child(even) {
 background-color: #FFFFFF;
}
table#foobar-table > tbody > tr:nth-child(odd) {
 background-color: #FFD2A6;
}
#foobar-table,
p#eingabe {
 margin-left: 50px;
}
</style>


<script>
$(document).ready(function() {
  $('left').css("width".$('#places-table').width());
});
</script>


<div align="center">
<p id="eingabe">
 <label>Filter: <input type="search" class="filter-table" data-for="#foobar-table" autofocus="autofocus"></label>
</p>
<table id="foobar-table" style="width:100%;">
<thead>
 <tr>
  <th id="left" width="10%">Name</th>
  <th width="30%">City</th>
  <th width="60%">Contact</th>
 </tr>
</thead>
<tbody>
 <tr>  
  <td>Mr Hoo</td>
  <td>City 1</td>
  <td>Administration</td>
 </tr>
 <tr>  
  <td>Mr Foo</td>
  <td>City 2</td>
  <td>Support</td>
 </tr>
 <tr>  
  <td>Mr Goo</td>
  <td>City 3</td>
  <td>Accounting</td>
 </tr>
 <tr>  
  <td>Mr Loo</td>
  <td>City 4</td>
  <td>Technical</td>
 </tr>
 <tr>  
  <td>Mr Too</td>
  <td>City 5 </td>
  <td>Food</td>
 </tr>


</tbody>
</table>
</div>
<script>
// filter
document.querySelectorAll(".filter-table").forEach(function (input) {
  var table = document.querySelector(input.dataset.for);
  var rows = table.querySelectorAll("tbody tr");
  input.addEventListener("input", () => {
    rows.forEach(function (tr) {
      if (input.value.length > 0) {
        if (input.value[0] == input.value[0].toUpperCase()) {
          tr.hidden = !tr.textContent.includes(input.value);
        } else {
          tr.hidden = !tr.textContent.toLowerCase().includes(input.value.toLowerCase());
        }
      } else {
        tr.hidden = !tr.textContent.includes(input.value);
      }
    });
  });
});
</script>

Hi there, do you have any updates on this?
How can I use NicePage Links in my custom HTML?

Alexander,

If you set the link style in the Theme Settings, that style will be applied automatically to any links added; it will be the default, or please clarify what you mean by Nicepag links.

...................................................
Sincerely,
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

HI there,

well, I design a whole website in Nicepage and like to use some content of this custom table to link to specific content.
But I can't select any links from specified content and if I do it hard coded in html, it won't be work on wordpress (after export).

I can't test it in preview and after export I have to relink everything of this table content.

Also I thougth you would be able to add an flexible and filternd table like my examble as a feature.

best
Alex

Last edited 30 min ago by alexander uhlemann