QGrid Demo

Code

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Sodium (mg)	Calcium (%)	Iron (%)
Frozen Yogurt	159	6	24	4	87	14%	1%
Ice cream sandwich	237	9	37	4.3	129	8%	1%
Eclair	262	16	23	6	337	6%	7%
Cupcake	305	3.7	67	4.3	413	3%	8%
Gingerbread	356	16	49	3.9	327	7%	16%

Records per page:

5

1-5 of 10

Code

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Sodium (mg)	Calcium (%)	Iron (%)

Frozen Yogurt	159	6	24	4	87	14%	1%
Ice cream sandwich	237	9	37	4.3	129	8%	1%
Eclair	262	16	23	6	337	6%	7%
Cupcake	305	3.7	67	4.3	413	3%	8%
Gingerbread	356	16	49	3.9	327	7%	16%

Records per page:

5

1-5 of 10

Code

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Sodium (mg)	Calcium (%)	Iron (%)
Frozen Yogurt	159	6	24	4	87	14%	1%
Ice cream sandwich	237	9	37	4.3	129	8%	1%
Eclair	262	16	23	6	337	6%	7%
Cupcake	305	3.7	67	4.3	413	3%	8%
Gingerbread	356	16	49	3.9	327	7%	16%

Records per page:

5

1-5 of 10

Code

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Sodium (mg)	Calcium (%)	Iron (%)
Frozen Yogurt	159	6	24	4	87	14%	1%
Ice cream sandwich	237	9	37	4.3	129	8%	1%
Eclair	262	16	23	6	337	6%	7%
Cupcake	305	3.7	67	4.3	413	3%	8%
Gingerbread	356	16	49	3.9	327	7%	16%

Records per page:

5

1-5 of 10

Code

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Sodium (mg)	Calcium (%)	Iron (%)

Frozen Yogurt	159	6	24	4	87	14%	1%
Ice cream sandwich	237	9	37	4.3	129	8%	1%
Eclair	262	16	23	6	337	6%	7%
Cupcake	305	3.7	67	4.3	413	3%	8%
Gingerbread	356	16	49	3.9	327	7%	16%

Records per page:

5

1-5 of 10

Code

Template

Script

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

<template>
  <q-card :class="!$q.dark.isActive?'my-lg q-pa-md q-ma-sm bg-grey-2':'my-lg q-pa-md q-ma-sm bg-grey-8'">
    <q-toolbar>
      <q-ribbon
        position="left"
        color="rgba(0,0,0,.58)"
        background-color="#c0c0c0"
        leaf-color="#a0a0a0"
        leaf-position="bottom"
        decoration="rounded-out"
      >
        <q-toolbar-title
          class="example-title"
          style="padding: 5px 20px;"
        ><span class="ellipsis">Slot Demo</span></q-toolbar-title>
      </q-ribbon>
    </q-toolbar>
    <q-card-section class="q-pb-sm">
      <code-tabs :tagParts="tagParts"></code-tabs>
    </q-card-section>
    <q-card-section>
      <q-grid :data="data" :columns="columns" :columns_filter="true" :draggable="true">
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="name">
              {{ props.row.name }}
            </q-td>
            <q-td key="calories">
              <q-badge color="green">
                {{ props.row.calories }}
              </q-badge>
            </q-td>
            <q-td key="fat">
              <q-badge color="purple">
                {{ props.row.fat }}
              </q-badge>
            </q-td>
            <q-td key="carbs">
              <q-badge color="orange">
                {{ props.row.carbs }}
              </q-badge>
            </q-td>
            <q-td key="protein">
              <q-badge color="primary">
                {{ props.row.protein }}
              </q-badge>
            </q-td>
            <q-td key="sodium">
              <q-badge color="teal">
                {{ props.row.sodium }}
              </q-badge>
            </q-td>
            <q-td key="calcium">
              <q-badge color="accent">
                {{ props.row.calcium }}
              </q-badge>
            </q-td>
            <q-td key="iron">
              <q-badge color="amber">
                {{ props.row.iron }}
              </q-badge>
            </q-td>
          </q-tr>
        </template>
      </q-grid>
    </q-card-section>
  </q-card>
</template>

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Sodium (mg)	Calcium (%)	Iron (%)

Frozen Yogurt	159	6	24	4	87	14%	1%
Ice cream sandwich	237	9	37	4.3	129	8%	1%
Eclair	262	16	23	6	337	6%	7%
Cupcake	305	3.7	67	4.3	413	3%	8%
Gingerbread	356	16	49	3.9	327	7%	16%

Records per page:

5

1-5 of 10

Code

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Sodium (mg)	Calcium (%)	Iron (%)

Frozen Yogurt	159	6	24	4	87	14%	1%
Ice cream sandwich	237	9	37	4.3	129	8%	1%
Eclair	262	16	23	6	337	6%	7%
Cupcake	305	3.7	67	4.3	413	3%	8%
Gingerbread	356	16	49	3.9	327	7%	16%

Records per page:

5

1-5 of 10

Selected: []

Code

Template

Script

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

<template>
  <q-card :class="!$q.dark.isActive?'my-lg q-pa-md q-ma-sm bg-grey-2':'my-lg q-pa-md q-ma-sm bg-grey-8'">
    <q-toolbar>
      <q-ribbon
        position="left"
        color="rgba(0,0,0,.58)"
        background-color="#c0c0c0"
        leaf-color="#a0a0a0"
        leaf-position="bottom"
        decoration="rounded-out"
      >
        <q-toolbar-title
          class="example-title"
          style="padding: 5px 20px;"
        ><span class="ellipsis">Select column filter</span></q-toolbar-title>
      </q-ribbon>
    </q-toolbar>
    <q-card-section class="q-pb-sm">
      <code-tabs :tagParts="tagParts"></code-tabs>
    </q-card-section>
    <q-card-section>
      <q-grid :data="data" :columns="columns" :columns_filter="true" :draggable="true" :fullscreen="true" :csv_download="true" :global_search="true">
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="name">
              {{ props.row.name }}
            </q-td>
            <q-td key="calories">
              <q-badge color="green">
                {{ props.row.calories }}
              </q-badge>
            </q-td>
            <q-td key="fat">
              <q-badge color="purple">
                {{ props.row.fat }}
              </q-badge>
            </q-td>
            <q-td key="carbs">
              <q-badge color="orange">
                {{ props.row.carbs }}
              </q-badge>
            </q-td>
            <q-td key="protein">
              <q-badge color="primary">
                {{ props.row.protein }}
              </q-badge>
            </q-td>
            <q-td key="sodium">
              <q-badge color="teal">
                {{ props.row.sodium }}
              </q-badge>
            </q-td>
            <q-td key="calcium">
              <q-badge color="accent">
                {{ props.row.calcium }}
              </q-badge>
            </q-td>
            <q-td key="iron">
              <q-badge color="amber">
                {{ props.row.iron }}
              </q-badge>
            </q-td>
          </q-tr>
        </template>
      </q-grid>
    </q-card-section>
  </q-card>
</template>

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Sodium (mg)	Calcium (%)	Iron (%)

Frozen Yogurt	159	6	24	4	87	14%	1%
Ice cream sandwich	237	9	37	4.3	129	8%	1%
Eclair	262	16	23	6	337	6%	7%
Cupcake	305	3.7	67	4.3	413	3%	8%
Gingerbread	356	16	49	3.9	327	7%	16%

Records per page:

5

1-5 of 10

Note - For showing columns in grouping selection you need to pass grouping:true in column object

Code

Group By Field

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Sodium (mg)	Calcium (%)	Iron (%)

Frozen Yogurt	159	6	24	4	87	14%	1%
Ice cream sandwich	237	9	37	4.3	129	8%	1%
Eclair	262	16	23	6	337	6%	7%
Cupcake	305	3.7	67	4.3	413	3%	8%
Gingerbread	356	16	49	3.9	327	7%	16%

Records per page:

5

1-5 of 11