Données invisible dans une table

**Subsanglant** · 03/05/2022, 22h29

Bonsoir,

Tout d'abord merci à celles et ceux qui prendront le temps de me lire et de m'aider

Rentrons direct dedans :

Avec le code que j'ai actuellement, j'importe un JSON dans App.vue et je le transmet aux composants souhaités avec les props. A priori j'arrive à avoir les bonnes données dans mon tableau, c'est ce que dit Vuedevtool (génial d'ailleurs !) et la méthode de filtre (car en fonction de ce que j'écris dans la barre de recherche, les lignes disparaissent). Pourquoi à priori me diriez-vous ? Et bien car je ne les vois pas, il y a seulement des rectangles grisés et vides alors que la donnée semble "être là".

Voilà les différents fichiers concernés et les screenshots :

Documents.vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<script>
import Grille from './Grille.vue'
 
export default {
    name:'DocumentsItem',
    components: {
        Grille,
    },
    data() {
        return {
        searchQuery: '',
        gridColumns: ['Date', 'Type','Origine','Aperçu','Titre'],
        };
    },
    props: ["dataUser"],
};
</script>
 
<template>
    <div>
        <form id="search">
            Search <input name="query" v-model="searchQuery">
        </form>
        <Grille
            :data="dataUser.documents"
            :columns="gridColumns"
            :filter-key="searchQuery" />
    </div>
</template>

Grille.vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
<template>
  <div>
    <table v-if="filteredData.length">
        <thead>
        <tr>
            <th v-for="column in columns"
            @click="sortBy(column)"
            :class="{ active: sortKey == column }" :key="column">
            {{ capitalize(column) }}
            <span class="arrow" :class="sortOrders[column] > 0 ? 'asc' : 'dsc'">
            </span>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="entry in filteredData" :key="entry">
            <td v-for="column in columns" :key="column">
            {{entry[column]}}
            </td>
        </tr>
        </tbody>
    </table>
    <p v-else>No matches found.</p>
  </div>
</template>
 
<script>
export default {
    name: 'GrilleItem',
    props: {
        data: Array,
        columns: Array,
        filterKey: String
    },
  data() {
    return {
      sortKey: '',
      sortOrders: this.columns.reduce((o, key) => ((o[key] = 1), o), {})
    }
  },
  computed: {
    filteredData() {
      const sortKey = this.sortKey
      const filterKey = this.filterKey && this.filterKey.toLowerCase()
      const order = this.sortOrders[sortKey] || 1
      let data = this.data
      if (filterKey) {
        data = data.filter((row) => {
          return Object.keys(row).some((key) => {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (sortKey) {
        data = data.slice().sort((a, b) => {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    }
  },
  methods: {
    sortBy(key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    },
    capitalize(str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  }
}
</script>
 
<style>
table {
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}
 
th {
  background-color: #42b983;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  user-select: none;
}
 
td {
  background-color: #f9f9f9;
}
 
th,
td {
  min-width: 120px;
  padding: 10px 20px;
}
 
th.active {
  color: #fff;
}
 
th.active .arrow {
  opacity: 1;
}
 
.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}
 
.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}
 
.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}
</style>

Le JSON

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
{
  "id": 10313,
  "last_name": "McNally",
  "first_name": "Robin",
  "birth_date": "...",
  "sex": "F",
  "residence_address": "...",
  "phone_number": "...",
  "zip_code": "...",
  "residence_city": "...",
  "residence_country": "...",
  "death_date": "...",
  "ipp": "...",
  "documents": [
    {
      "title": "Biology Analysis",
      "displayed_text": "...",
      "document_type": "Journal Article",
      "document_origin_code": "STARE",
      "document_date": "2006-01-27"
    },
    {
      "title": "Biology Analysis",
      "displayed_text": "...",
      "document_type": "Journal Article",
      "document_origin_code": "EPSOS",
      "document_date": "2013-02-09"
    }
  ]
}

Table avec filtre actif (2004 est bien dans mon JSON, je n'ai mis ici qu'un extrait)
Nom : Capture1.PNG
Affichages : 78
Taille : 6,0 Ko

Table sans filtre actif
Nom : Capture.PNG
Affichages : 76
Taille : 10,0 Ko

Et ce que me montre Vuedevtool
Nom : Capture2.PNG
Affichages : 83
Taille : 35,1 Ko

En écrivant ce post, je crois m'être rendu compte que je ne dis jamais quoi affecter à qui (que sous le <th> Titre il y a bien les titres etc etc), c'est peut-être lié à ça, qu'en pensez-vous ?

Merci pour votre aide

**gwyohm** · 04/05/2022, 09h49

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
['Date', 'Type','Origine','Aperçu','Titre'] // tes colonnes
// une donnée
{
      "title": "Biology Analysis",
      "displayed_text": "...",
      "document_type": "Journal Article",
      "document_origin_code": "STARE",
      "document_date": "2006-01-27"
    }, 
<tr v-for="entry in filteredData" :key="entry">
            <td v-for="column in columns" :key="column">
{{entry[column]}}

mais les clés ne match pas:
document_date est différent de Date par exemple

**Subsanglant** · 04/05/2022, 11h10

Bonjour,

Oui en effet elles matchent pas mais je comprenais pas bien ce que ça voulait dire quand je voyais ça dans la console...
Le seul truc c'est que je veux pas avoir écrit "document_date" en haut de la colonne date, je veux "Date", c'est pour ça que j'ai fait comme ça.
Ce que je faisais avant, c'était que j'affectais les bons champs aux bonnes colonnes avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
gridData: [
        { Date: this.dataUser.documents[0].document_date, Type:this.dataUser.documents[0].document_type, Origine: this.dataUser.documents[0].document_origin_code, Aperçu: this.dataUser.documents[0].displayed_text},
        { Date: this.dataUser.documents[1].document_date, Type:this.dataUser.documents[1].document_type, Origine: this.dataUser.documents[1].document_origin_code, Aperçu: this.dataUser.documents[1].displayed_text}
        ]

et le "data" de grille était gridData

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<Grille
            :data="dataGrid"
            :columns="gridColumns"
            :filter-key="searchQuery" />

Seulement le soucis avec cette façon de faire c'est que je suis obligé rentrer tous les "chemins" à a main, c'est pas du tout dynamique et j'aimerais que ça le soit ^^.
Sachant tout ça, comment je pourrais faire pour que les clés matchent et que j'ai bien ce que je veux d'écrit dans le <th> ?

Voici un lien vers un compilateur en ligne avec mon exemple : https://sfc.vuejs.org/#eyJBcHAudnVlI...VtcGxhdGU+In0=

**gwyohm** · 04/05/2022, 12h23

Tu peux utiliser ou t'inspirer de vue-18n
tu aurais donc quelque part un objet qui dit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
translations = {
  "document_date": "Date",
  "document_type": "Type",
  "document_origin_code": "Origine",
  "displayed_text": "Aperçu",
  "title": "Titre"
}

ensuite, tu changes ton code pour bien avoir les colonnes "techniques"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 gridColumns: ['document_date', 'document_type','document_origin_code','displayed_text','title'],

puis tu t'appuies sur translations pour afficher un libellé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<tr>
            <th v-for="column in columns"
            @click="sortBy(column)"
            :class="{ active: sortKey == column }" :key="column">
            {{ capitalize(translations[column]) }}
            <span class="arrow" :class="sortOrders[column] > 0 ? 'asc' : 'dsc'">
            </span>
            </th>
        </tr>

**Subsanglant** · 04/05/2022, 13h59

Merci de ta réponse détaillée !

Voilà où j'en suis (et ça marche youpiii) :

Grille.vue

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<template>
  <div>
    <table v-if="filteredData.length">
        <thead>
        <tr>
            <th v-for="column in columns"
            @click="sortBy(column)"
            :class="{ active: sortKey == column }" :key="column">
            {{ capitalize(column) }}
            <span class="arrow" :class="sortOrders[column] > 0 ? 'asc' : 'dsc'">
            </span>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="entry in filteredData" :key="entry">
          <template v-for="(column) in values" >
            <td :key="column">
              <template v-for="el in column.val" >
                  <p v-if="el === 'displayed_text'" :key="el">
                    {{ entry[el].substring(0, 40 - 3) + "..." }}
                </p>
                <p v-else :key="el">{{entry[el]}}</p>
              </template>
            </td>
          </template>
        </tr>          
        </tbody>
    </table>
    <p v-else>No matches found.</p>
  </div>
</template>
 
<script>
export default {
    name: 'GrilleItem',
    props: {
        data: Array,
        columns: Array,
        values: Array,      
        filterKey: String
    },
  data() {
    return {
      sortKey: '',
      sortOrders: this.values.reduce((o, key) => ((o[key] = 1), o), {})
    }
  },
  computed: {
    filteredData() {
      const sortKey = this.sortKey
      const filterKey = this.filterKey && this.filterKey.toLowerCase()
      const order = this.sortOrders[sortKey] || 1
      let data = this.data
      console.log(data);
      if (filterKey) {
        data = data.filter((row) => {
          return Object.keys(row).some((key) => {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (sortKey) {
        data = data.slice().sort((a, b) => {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    }
  },
  methods: {
    sortBy(key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    },
    capitalize(str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  }
}
</script>
 
<style>
table {
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}
 
th {
  background-color: #42b983;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  user-select: none;
}
 
td {
  background-color: #f9f9f9;
}
 
th,
td {
  min-width: 120px;
  padding: 10px 20px;
}
 
th.active {
  color: #fff;
}
 
th.active .arrow {
  opacity: 1;
}
 
.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}
 
.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}
 
.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}
</style>

Documents.vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<script>
import Grille from './Grille.vue'
// import Document from './Document.vue'
 
export default {
    name:'DocumentsItem',
    components: {
        Grille,
        // Document,
    },
    data() {
        return {
        searchQuery: '',
        gridColumns: [{val: ['document_date']}, {val: ['document_type']}, 
                      {val: ['document_origin_code']}, {val: ['title','displayed_text']}],          
				gridValues: ['Date', 'Type','Origin','Title/Text']
        };
    },
    props: ["dataUser"],
};
</script>
 
<template>
    <div>
        <form id="search">
            Search <input name="query" v-model="searchQuery">
        </form>
        <!-- <Document :doc="dataUser.documents"/> -->
        <Grille
            :data="dataUser.documents"
            :columns="gridValues"
            :values="gridColumns"
            :filter-key="searchQuery" />
    </div>
</template>

Maintenant je fais face à un problème, mon filtre marche plus du tout et je commence à me taper la tête sur le clavier, est ce que tu pourrais m'aider sur ce point ?
Aussi, comme tu peux le voir, pour "displayed_text" je coupe avec des "..." après 40 caractères. J'aimerai faire en sorte que quand on clique sur la cellule qui contient le texte on puisse avoir le texte qui s'affiche en entier et quand on reclique il revient à l'état initial, une idée ?

Je pense que tu dois l'avoir compris, je suis un débutant avec Vue et je voulais te remercier de ta patience et de ta compréhension, c'est super agréable !

**Subsanglant** · 09/05/2022, 09h57

Bonjour !
Merci encore à ceux qui m'ont aidé.
Pour ne pas laisser la question sans réponse, je met ici un lien vers une sandbox avec le résultat que je voulais.
https://sfc.vuejs.org/#eyJBcHAudnVlI...1wbGF0ZT4ifQ==

A une prochaine !

Données invisible dans une table

VueJS

Discussions similaires

Partager

Partager