How to hide and show column from table

Hello, i have a table builded in vue js with some data fetched from db. I use laravel for bakend. I want to make my table column dynamically and let user to decide witch colum can see, so i have trued a method but i think it is not the right way beacouse if i dynamically add new column on my table i cant hide or show it by this way. this is table on vue

<table class="table table-hover align-middle mb-0">
                    <thead class="">
                        <tr>
                            <th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
                            <th scope="col" v-if="id">Id</th>
                            <th scope="col">First Name</th>
                            <th scope="col">Last Name</th>
                            <th scope="col">Email</th>
                            <th scope="col">Phone</th>
                            <th scope="col">Status</th>
                            <th scope="col">Notes</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-show="leads.length" v-for="(lead, index) in leads" :key="lead.id">
                            <td>
                                <input type="checkbox" class="form-check-input" v-model="selected" :value="lead.id" />
                            </td>
                            <td :key="lead.id" v-if="id">{{index + 1}}</td>
                            <td>{{lead.first_name}}</td>
                            <td>{{lead.last_name}}</td>
                            <td>{{lead.primary_email}}</td>
                            <td>{{lead.primary_phone}}</td>
                            <td>{{lead.lead_status}}</td>
                            <td>{{lead.notes}}</td>
                        </tr>
                        <tr v-show="!leads.length">
                            <td colspan="12" class="text-center">Sorry :( No data found.</td>
                        </tr>
                    </tbody>
                </table>

button i use to collapse column

<button class="btn btn-danger dropdown dropdown-toggle" type="button" id="setVisibility" data-mdb-toggle="dropdown" aria-expanded="false" >
                                Hide/Show
   </button>
       <ul class="dropdown-menu py-1 px-2" aria-labelledby="setVisibility">
           <li>
              <div class="form-check form-switch">
                 <input v-model="id" class="form-check-input" type="checkbox" id="id" />
                 <label class="form-check-label" for="id">ID</label>
               </div>
              </li>
       </ul>

data() {
        return {
            id: true,
            leads: [],
            selected: [],
        }
    },

But how can i do same thing with all table colum dynamically?

lbecket

3 years ago

Level 39

Rather than hard-coding your columns, I would suggest placing them in a data object that you iterate over. I have solved this in the past with something like this:

 <th 
	v-for="(header, i) in visibleHeaders"
	:key="i"
	scope="col">
		{{ header.title }}
</th>

...

data() {
	return {
		headers: [
			{title: 'id', visible: false},
			{title: 'First Name', visible: true},
			{title: 'Last Name', visible: true},
			{title: 'Email', visible: true},
			{title: 'Status', visible: true},
			{title: 'Notes', visible: true},
		]
	}
},

computed: {
	visibleHeaders() {
		return this.headers.map(h => {
			return h.visible;
		});
	}
}

I recognize that this only solves the column headers and that you still need to isolate only the visible fields in your data, but maybe this gives you some ideas on how you might achieve that. Perhaps leads becomes a computed property that maps over another data object and only returns those columns that you've designated as being visible.

Maison012

3 years ago

Level 4

@lbecket hello. Thanks for responding, but this method does not work for mee. I can see headers as vue component but in my table view i cant see the table header. If take look on inspect i see only empty div

Maison012

3 years ago

Level 4

@lbecket i tryed this method and it works fine if i want to show all records in table. But when i add pagination function in laravel backend i get an error like this

app.js:34778 [Vue warn]: Error in render: "TypeError: this.leads.map is not a function"

found in

---> <Leads> at resources/js/components/leads/LeadsComponent.vue
       <Root>

also i use resource collection for pagination

$paginate = $request->perPage;
return new LeadsResource(Lead::paginate($paginate));

MaverickChan

3 years ago

Level 47

better do it in backend , Laravel has a helper function forget , check the document.

Maison012

3 years ago

Level 4

@MaverickChan I take a look there , but really i dont understand how to use this method. Can you do an example for me?

MaverickChan

3 years ago

Level 47

@Leon012

example:

forget() is a laravel collection method which simply removes given key and its value from all the items in the collection.

$users = collect(['name' => 'John Doe', 'email' => '[email protected]']);

$users->forget('name');

$users->all();

// ['email' => '[email protected]']

Please or to participate in this conversation.