Dynamic Sütunlu Vue — Vuetify Data Table

Selamlar, geçtiğimiz günlerde sütun sayısının sabit olmadığı bir vuetify data table oluşturmam gerekti. Genel olarak baktığımda Vuetify’ın böyle bir çözümünün olmadığını fark ettim ve basit bir component oluşturarak bunu sonradan da kullanılabilecek hale getirmek istedim (DRY!). Bu yazıda böyle bir yapıyı nasıl kurgulayabileceğimizden bahsedeceğim.

Özet olarak mantığı şu şekilde açıklayabilirim. Bu component’ımızda data isminde bir prop yer alıyor. Gelen data’yı ise onMounted içerisinde manipüle etmeye başlıyoruz.

Header’ımız yani sütunlarımızı şurada

if (props.data.length > 0) {
for (const [key] of Object.entries(props.data[0])) {
state.headers.push({ text: key, value: key })
}
}

Eğer ki data array’i içerisinde birden fazla eleman varsa, ilki bizim için yeterli olacaktır. Buradaki önemli nokta ise biz data array’i içerisindeki objelerin propertylerini üstteki kod ile manipüle ederek Vuetify’ın data table yapısına dönüştürmüş oluyoruz.

Ayrıca, objeler içerisindeki dataların da birer obje olabilme ihtimaline karşı bunları da JSON.stringify ile stringe çevirdim. Bu sizin tercihinize ve ihtiyacınıza göre kullanılmayacak bir parça da olabilir.

Aklınıza takılan bir kısım olursa lütfen sormaktan çekinmeyin. Bir sonraki yazıda görüşmek üzere, sağlıkla kalın.