Table with filter

alexander uhlemann
4 Posts
alexander uhlemann posted this 2 weeks ago
Wishlist

Hi there,

is there a way to create a table with filter over columns?
Like if you put an search text in an field, the rows should be reduced accordingly
Thanks
Alex

Hi there, is there a way to create a table with filter over columns? Like if you put an search text in an field, the rows should be reduced accordingly Thanks Alex

Last edited 2 weeks ago by Support Team

Vote to pay developers attention to this features or issue.
5 Replies
Order By: Standard | Newest
Support Team
Support Team posted this 2 weeks ago

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

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
alexander uhlemann
4 Posts
alexander uhlemann posted this 2 weeks ago

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, 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>
alexander uhlemann
4 Posts
alexander uhlemann posted this 15 hours ago

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

Hi there, do you have any updates on this? How can I use NicePage Links in my custom HTML?
Support Team
Support Team posted this 1 hour ago

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

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
alexander uhlemann
4 Posts
alexander uhlemann posted this 33 min ago

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

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

You must log in or register to leave comments