Javascript ability to customize table columns. A button that allows users to remove and add new columns

Question

I would like to make my table customizable. I'm looking for the ability to add new columns and remove existing columns. For visualizing what I want to do, here is my site: https://www.coinmarketstreet.com/. I would like to add a button that allows users to change the layout of the table. For example, if a user wants to remove the Dominance column and display a Price BTC column, he has the ability of doing so with the click of a button.

Here is my HTML table:

<table class="table coin_table">
    <tr class="header_row">
      <th><%= sortable "rank", "#" %></th>
      <th class="text-center">Symbol</th>
      <th class="text-center"><%= sortable "name", "Coin" %></th>
      <th class="text-center"><%= sortable "price", "Price" %></th>
      <th class="text-center"><%= sortable "percent_change_1h", "Change(1Hr)" %></th>
      <th class="text-center"><%= sortable "change_24hr", "Change(24Hr)" %></th>
      <th class="text-center"><%= sortable "percent_change_7d", "Change(7D)" %></i></th>
      <th class="text-center"><%= sortable "market_cap", "Market Cap" %></th>
      <th class="text-center"><%= sortable "volume_24hr", "24 Hr Volume" %></th>
      <th class="text-center"><%= sortable "current_supply", "Current Supply" %></th>
      <th class="text-center">Dominance</th>
    </tr>

    <% @cryptos.each do |crypto| %>
      <tr class="text-center" data-link="<%= crypto_path(crypto.id) %>">
        <th class="column_1"><%= crypto.rank %></th>
          <td><div><%= fetch_image_tag(crypto.symbol, :width => 50, :height => 50, :crop => :fill) %></div></td>
        <td class = "center_style2"><div><%= crypto.name %></div><div>(<%= crypto.nick_name %>)</div></td>

        <% if crypto.price == nil %>
           <td class="center_style">?</td>
        <% else %>
            <% if crypto.price < 1 %>
              <td class="center_style"><%= convert_number_currency(crypto.price, cookies[:selected_currency], 6) %></td>
            <% else %>
              <td class="center_style"><%= convert_number_currency(crypto.price, cookies[:selected_currency], 2) %></td>
            <% end %>
        <% end %>

        <% if crypto.percent_change_1h == nil %>
          <td class = "center_style">?</td>
        <% else %>
          <% if crypto.percent_change_1h < 0 %>
            <td class="percent_change down center_style"><%= number_to_percentage(crypto.percent_change_1h, precision: 2) %></td>
          <% else %>
            <td class="percent_change up center_style"><%= number_to_percentage(crypto.percent_change_1h, precision: 2) %></td>
          <% end %>
        <% end %>

        <% if crypto.change_24hr == nil %>
          <td class = "center_style">?</td>
        <% else %>
          <% if crypto.change_24hr < 0 %>
            <td class="percent_change down center_style"><%= number_to_percentage(crypto.change_24hr, precision: 2) %></td>
          <% else %>
            <td class="percent_change up center_style"><%= number_to_percentage(crypto.change_24hr, precision: 2) %></td>
          <% end %>
        <% end %>

        <% if crypto.percent_change_7d == nil %>
          <td class = "center_style">?</td>
        <% else %>
          <% if crypto.percent_change_7d < 0 %>
            <td class="percent_change down center_style"><%= number_to_percentage(crypto.percent_change_7d, precision: 2) %></td>
          <% else %>
            <td class="percent_change up center_style"><%= number_to_percentage(crypto.percent_change_7d, precision: 2) %></td>
          <% end %>
        <% end %>

        <% if crypto.market_cap == nil %>
          <td class = "center_style">?</td>
        <% else %>
          <td class = "center_style"><%= convert_number_currency(crypto.market_cap, cookies[:selected_currency], 0) %></td>
        <% end %>

        <% if crypto.volume_24hr == nil %>
          <td class="center_style">$0</td>
        <% else %>
          <td class="center_style"><%= convert_number_currency(crypto.volume_24hr, cookies[:selected_currency], 0) %></td>
        <% end %>

        <% if crypto.current_supply == nil %>
          <td class="center_style">?</td>
        <% else %>
          <td class="center_style"><%= number_with_delimiter(crypto.current_supply, :delimiter => ',') + " " + crypto.nick_name %></td>
        <% end %>
        <td class="center_style"><%= number_to_percentage((crypto.market_cap / @market_cap_sum) * 100, precision: 2) %></td>
      </tr>
    <% end %>
</table>

I have not been able to find an easy guide to do this, so if I could be pointed to the right direction it would be greatly appreciated. Also, a simple code example on how to do this would be even more appreciated!

Answer 1

If you want a more comprehensive solution, I would also recommend jQuery DataTables see this for ideas

The hide part can be done easily with basic html, css, and jquery. Maybe this is enough to give you some idea how to do what you're trying to. For this example I'm just using a very simple table.

<style>
  .hidden {
  display: none;
}
</style>

<table>
  <tr class="header_row">
    <td class="column1", id="column1">col1</td>
    <td class="column2", id="column2">col2</td>
    <td class="column3", id="column3">col3</td>
  </tr>
  <tr>
    <td class="column1">col 1 stuff</td>
    <td class="column2">col 2 stuff</td>
    <td class="column3">col 3 stuff</td>
  </tr>
</table>

<script>
  $('tr td').click(function(){
    var toggleId = this.id;
    $('.'+toggleId).toggleClass('hidden');
  });
</script>

See working bare bones example: https://jsfiddle.net/a4rwgtdh/

Answer 2

I suggest that you investigate using the DataTables jQuery plugin. While it may not bet the ultimate scalable solution, it's much quicker to get started and figure out whether the feature is something your users want. Specifically, there is a buttons DataTables extension that allows end users to modify the table on-page. If you need to persist the user's preferences you may have to write that part yourself.