how to access header index in vue-good-table

Question

How do you access these header's index in a grouped table?

Please add some your code so we can get more idea – Bhavin Solanki Dec 21 '18 at 06:27 — Bhavin Solanki, Dec 21 '18 at 06:27

Bhavin Solanki · Answer 1 · 2018-12-21T06:39:50.670

2

You can get column name using props.column. props.column will give you full column object so you can get index from it. props.column.field will give you column name title.

You can check index with props.column.originalIndex
The original row object can be accessed via props.row
The currently displayed table row index can be accessed via props.index .
The original row index can be accessed via props.row.originalIndex.
You can then access the original row object by using rows[props.row.originalIndex].
The column object can be accessed via props.column
You can access the formatted row data (for example - formatted date) via props.formattedRow

For example :

<vue-good-table
  :columns="columns"
  :rows="rows">
  <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'age'">
      <span style="font-weight: bold; color: blue;">{{props.row.age}}</span> 
    </span>
    <span v-else>
      {{props.formattedRow[props.column.field]}}
    </span>
  </template>
</vue-good-table>

Source

edited Dec 21 '18 at 06:39

answered Dec 21 '18 at 06:26

Bhavin Solanki

4,740
3
26
46

@JielNiñoGaid `props.column` will give you full column object so you can get index from it. – Bhavin Solanki Dec 21 '18 at 06:31
@JielNiñoGaid you can check it with `props.column.originalIndex` – Bhavin Solanki Dec 21 '18 at 06:33
thanks anyways, but the headers in the picture is not a column, it's a row... see grouped table... – Jiel Dec 21 '18 at 06:35
if it is row, you can use `props.row.originalIndex` – Bhavin Solanki Dec 21 '18 at 06:35
@JielNiñoGaid The currently displayed table **row index** can be accessed via `props.index` – Bhavin Solanki Dec 21 '18 at 06:36
if i do props.index.. it will return 0, 1 (group1) , 0, 1 (group2), 0,1 (group 3) if i do props.row.originalIndex, it will return 0, 1(group1), 2, 3(group2), 4, 5(group 3) – Jiel Dec 21 '18 at 06:38
anyway it's so hilarious, i just found it out and it was just props.row.vgt_id... – Jiel Dec 21 '18 at 06:39
i've already read that in the documentation. none of it was the answer i was looking... though it was, props.row.vgt_id – Jiel Dec 21 '18 at 06:49

score 1 · Accepted Answer · answered Dec 21 '18 at 06:32

1

i just found it out, the answer was just in the picture

answered Dec 21 '18 at 06:32

Jiel

103
1
2
12

score 0 · Answer 3 · answered Jun 14 '22 at 10:35

0

try this:

{{props.row.originalIndex}}

answered Jun 14 '22 at 10:35

Hamed B

183
1
12

how to access header index in vue-good-table

3 Answers3