Change View of Table

Question

There is the possibility that I can create a menu, where I can choose which fields to show in my table?

for example, I have a class with the following attributes:

Name, Colour, Dating, Cpf, Rg, Id.

Then my table would show just all this data.

Only that I wanted to be able to give the choice to the user, where to have a menu, with the options, in which he wants them to appear, in the table. By default it would show all fields, but if it wanted to see only. Nome, Rg, or Data dating, Cpf.. So on. I just had to select it from the menu. anyone knows if I can do this using Asp.Net Mvc, Razor..

Edit 1: The problem has been solved, using the datatable, only now I want to print only the columns I left appearing in.

My HTML:

<table style="font-size:12px;" id="tableClientes" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Pessoa</th>
                        <th>Cód</th>
                        <th>Cadastro</th>
                        <th>Razão Social</th>
                        @*<th>Nome Fantasia</th>*@
                        <th>C.N.P.J</th>
                        <th>Insc.Estadual</th>
                        <th>-Telefone-</th>
                        <th>Sistemas</th>
                        <th>Status</th>
                        <th>#</th>
                    </tr>
                </thead>
                <tbody>
                    @if (Model != null)
                    {
                        foreach (var item in Model)
                        {
                            <tr>
                                <td>@Html.DisplayFor(modelItem => item.TipoPessoa)</td>
                                <td>@Html.DisplayFor(modelItem => item.Id)</td>
                                <td style="width:5%">@item.DataCadastro.ToString("dd/MM/yyyy")</td>
                                <td width="40%">@Html.DisplayFor(modelItem => item.RazaoSocial)</td>
                                @*<td>@Html.DisplayFor(modelItem => item.NomeFantasia)</td>*@
                                <td>@Html.DisplayFor(modelItem => item.Cnpj)</td>
                                <td>@Html.DisplayFor(modelItem => item.InscricaoEstadual)</td>
                                <td width="10%">@Html.DisplayFor(modelItem => item.Celular)</td>
                                <td>
                                    @foreach (var sistema in item.TipoDeSistemas)
                                    {
                                        <p class="sistema" id="topp">@sistema.Descricao</p>
                                    }
                                </td>
                                @if (item.StatusCliente == Smc.Dominio.Model.StatusCliente.Bloqueado || item.StatusCliente == Smc.Dominio.Model.StatusCliente.Cancelado || item.StatusCliente == Smc.Dominio.Model.StatusCliente.Inativo)
                                {
                                    <td style="color:#ff0e0f;text-align:center">@Html.DisplayFor(modelItem => item.StatusCliente)</td>
                                }
                                else
                                {
                                    <td style="color:#00ff21;text-align:center">@Html.DisplayFor(modelItem => item.StatusCliente)</td>
                                }


                                <th style="width:5%; text-align:center">
                                    <a href="@Url.Action("Editar","ClienteEmpresa",new { id=item.Id })" class="load"><i class="fa fa-eye text-success"></i></a>
                                </th>
                            </tr>
                        }
                    }
                    else
                    {
                        <tr>
                            <td colspan="11">Nenhum Dado Cadastrado</td>
                        </tr>
                    }
                </tbody>

            </table>

My script is that way:

$(document).ready(function () {
        var table = $('#tableClientes').DataTable();

        new $.fn.dataTable.Buttons(table, {
            buttons: [
                {
                    text: 'Imprimir',
                    extend: 'print',
                    header: false,
                    //messageTop: 'Impressão tabela'
                },
                {
                    text: 'Exportar Excel',
                    extend: 'excel'
                },
                {
                    text: 'Salvar PDF',
                    extend: 'pdf',
                    orientation: 'landscape',
                    Header: false
                },
                {
                    text: 'Visibilidade',
                    extend: 'colvis', fixedColumns: {
                        leftColumns: 2
                    }
                },
            ]

        });

        table.buttons(0, null).container().prependTo(
            table.table().container()
        );
    });

Answer 1

Implement your table using the project Datatables. It has several options and ways to use, from simple and complex Tables with loads with Json, paging resources, responsiveness, etc... and is widely used in the world.

Follow the example links of the functionality you want:

• Using the Colvis extension: https://datatables.net/extensions/fixedcolumns/examples/styling/colvis.html
• Using the api: https://datatables.net/examples/api/show_hide.html

Below the examples you can see the codes used by clicking on the tabs Javascript, HTML and CSS.

Take a look at the documentation and other examples at: https://datatables.net/examples/index

I hope I’ve helped!