Feature Hide/Show Columns, Column Filter in Headings

[bkd]

What would be the best approach to enable a hide / show column feature?

I've also been able to hack together filters for each column (simliar to https://github.com/vedmack/yadcf) but its not tidy and I would expect that its not the best way.

Are there any suggestions on how this can be done cleanly?

[bkd]

My solution so far only works on sortable columns but you get the idea. Please advise!

I'm using notation of "f_" to denote a filter field

When the filter is applied on the scoped model I store the <%=session["last_changed"]%> to the filter applied. I have a list of filters for each model stored and save them as session vars

I iterate through each param filter for the model when the ajax request is exectued

session["last_changed"]=param if params[param] != session[param]

Also needed to remove the following, so that the filtered column headings appear even if no results are present

 - unless smart_listing.empty?

_update_list.js.erb

var smart_listing = $('#<%= name %>').smart_listing();
smart_listing.update_list("<%= escape_javascript(render(:partial => part, :locals => {:smart_listing => smart_listing})) %>", <%= smart_listing_data.to_json.html_safe %>);
var item = $('#<%=session["last_changed"]%>');
var strLength= item.val().length * 2; 
item.focus();
item[0].setSelectionRange(strLength, strLength);

_sortable.html.erb

<input autocomplete="off" class="smart_filters search" id="<%=attribute.gsub('.','_')%>" name="  <%=attribute%>" placeholder="<%=title%>..." value="<%=session['f_'+attribute.gsub(".","_")]%>" type="text">
<%= link_to url, :class => container_classes, :data => {:attr => attribute}, :remote => true do %>`

application.js.cofee

$ ->
  $("body").on "keydown", ".smart_filters", ->
    $('.smart_filters').keyup (e) ->
      txtVal = $(this).val()
      id= "#f_"+$(this).attr("id")
      id = id.replace(".","_")
      $(id).attr 'value', txtVal
      $(id).trigger("keydown")
      $(id).trigger("change")
      return

In the controls for the smart listing filter I hide the input boxes inside the form

<input autocomplete="off" class=" search form-control" id="f_people_headline" name="f_people_headline" placeholder="Headline..." value="" type="hidden">

Some css to clear up the layout

.sortable{
  margin-left:-5px;
  display:inline;
  border: 1px solid #CCC;
  padding: 7px;
  border-radius: 0 4px 4px 0;
  background-color: #EFEFEF;
  height: 30px;
}

.smart_filters{
  width:70%;
  min-width:40px;
  display:inline;
  font-weight: 400;
  height: 30px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  background-color: #FFF;
  padding: 6px 2px 6px 2px;
  border: 1px solid #CCC;
}

See below an example of what it looks like.

I think it would be good to have this in the core feature list ;-)

[ljachymczyk]

Can you make a pull request with such feature?

[jumhh]

Filtering per column is very interesting point. I just tried to integrate filter as a second header line under the sorting header elements. You see an example in the image below. But this only works, if I do not use your in-place editing. So I have to decide either using in-place editing or integrating column filters in the table.
Alternatively I can define the column filters outside but then their layout is different from the columns of the table, if I do not use fixed width.
Filtering itself I implemented on server side via params and scopes.
So I would appreciate a solution for this topic!

[ljachymczyk]

@jumhh, why in-place-editing breaks your column filters?

[ljachymczyk]

Closing due to lack of feedback.