Comments (2)
@yavuzseker You can use visible_columns
prop and pass the array.
from quasar-qgrid.
Sample Code
<q-toggle v-model="visibleColumns" val="calories" label="Calories" />
<q-toggle v-model="visibleColumns" val="fat" label="Fat" />
<q-toggle v-model="visibleColumns" val="carbs" label="Carbs" />
<q-toggle v-model="visibleColumns" val="protein" label="Protein" />
<q-toggle v-model="visibleColumns" val="sodium" label="Sodium" />
<q-toggle v-model="visibleColumns" val="calcium" label="Calcium" />
<q-toggle v-model="visibleColumns" val="iron" label="Iron" /></div>
<q-grid :data="data" :columns="columns" :visible_columns="visibleColumns"></q-grid>
data() {
return {
visibleColumns: [ 'calories', 'desc', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron' ],
columns: [
{
name: 'name',
required: true,
label: 'Dessert (100g serving)',
align: 'left',
field: 'name',
sortable: true
},
{name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true},
{name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true},
{name: 'carbs', label: 'Carbs (g)', field: 'carbs'},
{name: 'protein', label: 'Protein (g)', field: 'protein'},
{name: 'sodium', label: 'Sodium (mg)', field: 'sodium'},
{
name: 'calcium',
label: 'Calcium (%)',
field: 'calcium',
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
},
{
name: 'iron',
label: 'Iron (%)',
field: 'iron',
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
}
],
data: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '8%',
iron: '1%'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
sodium: 337,
calcium: '6%',
iron: '7%'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
sodium: 413,
calcium: '3%',
iron: '8%'
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
sodium: 327,
calcium: '7%',
iron: '16%'
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
sodium: 50,
calcium: '0%',
iron: '0%'
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
sodium: 38,
calcium: '0%',
iron: '2%'
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
sodium: 562,
calcium: '0%',
iron: '45%'
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
sodium: 326,
calcium: '2%',
iron: '22%'
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
sodium: 54,
calcium: '12%',
iron: '6%'
}
]
}
},
from quasar-qgrid.
Related Issues (20)
- How to add a header filter for a field, which is an array HOT 1
- Dragged rows issue with reactive data HOT 7
- Filters doesn't work with api req HOT 2
- Option to disable draggable for specific rows HOT 10
- dragged_row not declared in emits or props HOT 2
- Prop for default value Records per page HOT 5
- QGrid Date Range Filter HOT 5
- How to display object in grid
- Throws run time error- filter is undefined on the page where qgrid is used. HOT 1
- Minor Improvements HOT 1
- Version 0.0.8 api.registerDescribeApi is not a function error HOT 2
- Selected array on multi selection not working HOT 22
- Customize column HOT 1
- Custom selected row not working HOT 7
- Filter data HOT 2
- How to get filtered data when the column filtered HOT 3
- Returns an undefined column error when using a functional field in column definitions HOT 3
- cannot sort when pass prop pagination as an object HOT 2
- cannot filter when passing string from a parent component. HOT 10
- filter type select failed HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from quasar-qgrid.