search

HC200ok / vue3-easy-data-table

A customizable and easy-to-use data table component made with Vue.js 3.x
MIT License
538 stars 108 forks source link

Possibility to customise the :key of the row and column #158

Open nclemeur opened 2 years ago

nclemeur commented 2 years ago

Currently the key attribute to loop of the rows is using the loop index for the key attribute (see https://github.com/HC200ok/vue3-easy-data-table/blob/ff68c9e1c07845b19a365807d09794ac2c7e670c/src/components/DataTable.vue#L112). I believe that's not the correct approach as I have some rows not refreshing properly when changing pages...

Instead, it should be possible to define an attribute of the data as the key (maybe it could be 'id' by default).

Something similar should be done for the iterations on the columns (for example using the 'value' property of the header) instead of using the loop index. That would allow implementing a more robust hiding/showing mechanism for columns.

HC200ok commented 2 years ago

@nclemeur Could you please provide a reproduction so that I can debug？

nclemeur commented 2 years ago

I don't have an easy example to share, but I know that in the past I had issue with for example v-tooltip (from vuetify) showing the wrong data if my components were not keyed properly. Also, my impression from reading https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key, is that it would be a good idea to at least provide a way to do it. Maybe an optional dataKey or item-key props on the table. If specified it's used for the key of the row instead of the index.

taunoha commented 1 year ago

@nclemeur I ran into a similar problem. Components will not be re-rendered if I use a component inside a slot and use the table pagination. In my case, I used a component which will fetch data and has its own state.