Akıllı Veri Tablosu App Kodla

Vanilla JavaScript ile sıfırdan interaktif veri tablosu uygulaması geliştirmek isteyen geliştiriciler için hazırlanmış profesyonel bir prompt. Prompt, harici kütüphane veya framework kullanmadan tek HTML dosyasında çalışan, modern ve responsive bir tablo arayüzü oluşturur. Kullanıcı verilerini dinamik olarak görselleştirir, sütun bazlı sıralama, global arama, sayfalama ve filtreleme özellikleri sunar.

Prompt, Material Design ilkelerine uygun temiz bir kullanıcı arayüzü tasarlar ve localStorage entegrasyonu ile tablo durumunu tarayıcıda kalıcı hale getirir. CSV dışa aktarma butonu, koyu/açık tema geçişi ve sütun başına özelleştirilebilir filtreler gibi gelişmiş işlevler standart olarak dahildir. Yazılım & Kodlama alanında çalışan geliştiriciler, bu promptu müşteri panelleri, admin arayüzleri veya veri görselleştirme projeleri için kullanabilir.

Çıktı formatı: Prompt, yalnızca çalıştırılmaya hazır HTML kodu üretir; açıklama veya yorum satırı içermez. Üretilen kod, doğrudan tarayıcıda açılabilir ve tüm JavaScript/CSS embed edilmiş şekilde gelir. Sayfalama mantığı, sıralama algoritması ve filtre mekanizması tamamen vanilla JS ile yazılır; jQuery veya benzeri bağımlılık gerektirmez.

Geliştiriciler, prompt içinde veri setini, sütun isimlerini, renk şemasını ve ek özellikleri (örneğin satır seçimi, toplu işlem butonları) belirterek çıktıyı projeye özel hale getirebilir. localStorage kullanımı sayesinde kullanıcı, sayfayı yenilediğinde son sıralama, filtre ve tema tercihlerini korur.

{ }Değişken Açıklamaları:

• [YOUR DATA]: Tabloda görüntülenecek veri setini temsil eder; JSON array formatında nesne listesi beklenir. Örneğin: [{"ID":1,"NAME":"ALI","AGE":28},{"ID":2,"NAME":"AYŞE","AGE":34}], [{"PRODUCT":"LAPTOP","PRICE":15000,"STOCK":12}], [{"DATE":"2025-01-10","REVENUE":45000}]
• [LİST COLUMN NAMES]: Tabloda gösterilecek sütun başlıklarını ve veri anahtarlarını belirtir; virgülle ayrılmış liste veya JSON key isimleri. Örneğin: Id, name, age, email, id, product, price, stock, date, revenue, category
• [ADD ANY EXTRAS]: Tabloya eklenecek ek işlevleri tanımlar; satır seçimi, toplu silme, inline düzenleme gibi özellikler. Örneğin: Row selection with checkboxes, inline edit on double-click, bulk delete button, add new row form, row highlight on hover
• [COLOR SCHEME]: Arayüzde kullanılacak renk paletini ve tema stilini belirler; hex kodları veya renk isimleri. Örneğin: #3B82F6 primary, #10B981 accent, dark mode with #1F2937 background, purple and teal gradient, minimalist gray and white