Kodlar: github.com/tayfunerbilen/react-table Demo: react-table-prototurk.netlify.app/ Not: Sonlara doğru sorting'i bozmuşuz, onun için ufak bi bug fix geçtim, şu committen ne yaptığıma bakabilirsiniz: github.com/tayfunerbilen/react-table/commit/83ace8fcf184ed4b1fcac553a3f4b036fd3cf091 Ek olarak elbette çoğunlukla server-side tarafında isteklerle bu tablo yapısını kullanıyoruz, dolayısı ile pagination ile birlikte server-side işlemleri de uygulayabildiğimiz bir tablo yapısı için beğenmeyi unutmayın, react-query dersinden sonra yeterli istek olursa böyle bir güncelleme videosu çekebilirim
Elinize,emeğinize sağlık Tayfun Hocam çok başarılı bir anlatım ve proje olmuş, yaklaşık 8 yıldır takip ediyorum sizi ve ilgili kişilere ilk sizin videolarınızı tavsiye ediyorum 👏👏
Media query olayı müthişmiş hocam teşekkürler, yani tasarımları yaparken hep mobili de düşünerek yazıyordum artık böyle bir strese girmeye gerek yok bence. Tasarımlar direkt farklı componentlara bölünerek oluşturulabilir, bundan sonrası artık hayal gücümüze kalmış. Componentlara bölmeden classnames kullanarak da kullanılabilir gerçekten süper ya
Bence harika olmuş. Elinize sağlık. Mobilde Sorting yok oluyor :). Ayrıca multiple sort özelliği de harik olurmuş. Name asc Age desc gibi. Export Excel ve Sayfalama özelliği eklenirse tadından yenmez her projede kemik komponent olarak kullanılır.
Hocam neden bilmiyorum çok garip, bi projede sıra X işine geliyor, X işini nasıl yaparım diye düşünürken ertesi gününde o işi siz yapmış ve paylaşmış oluyorsunuz. 1 değil 2 oldu tablo videosundan sonra, şans mı diyelim :D
hocam 13:46-da ternary operatörü kullanarak Array-se div içerisinde butonlar gəlsin, değilse item-lar. O zaman hər iki koşulu da sağladığı içinmi hem item-lar geldi hem de div içerisimde butonlar?
Tayfun hocam size bir sorum olacak Smart Search nasil yapabiliriz ? Diyelim Title su sekilde olsun -> "Tayfun Erbilen 29 Yaşında ve Eskişehir de yaşıyor" Biz arama kutucuguna Tayfun 29 Eskişehir yazdıgımızda sonuç boş geliyor. Buna nasil bir cozum uygulayabiliriz ?
içlerinden biri date olsaydı bu sort işlemi date için çalışmıyor. O zaman column date ise farklı değilse farklı bir sort mu yapmak gerekir yoksa daha iyi bir yol var mı?
hayır, tarihli kısmı bir div içine alıp key ya da searchableText propuna date'i timestamp'e çevirip eklersen düzgün şekilde çalışacaktır, video da sorting bu ayarlardan sonra patlıyordu onu unutmuşum en son düzeltmeyi, sabitlediğim yorumdaki düzeltme linkinde yaptığım ufak değişikliği görüp ona göre uyarlayabilirsin
Classname'ler ile nasıl still verebiliyoruz? Gerçekten birçok yöntemi denedim ancak class nameler içersine yazılan stilleri kendi projemde çekemedim malesef :(
@@PROTOTURKCOM Eski yorumu GitHub reposu ekleyerek guncellemistim ve 1-2dk sonra kalkti. Onu belirtmistim. Neyse gerek yok, demek ki yorum ayarlarinda varsayilan gelen bir durum.
Kodlar: github.com/tayfunerbilen/react-table
Demo: react-table-prototurk.netlify.app/
Not: Sonlara doğru sorting'i bozmuşuz, onun için ufak bi bug fix geçtim, şu committen ne yaptığıma bakabilirsiniz:
github.com/tayfunerbilen/react-table/commit/83ace8fcf184ed4b1fcac553a3f4b036fd3cf091
Ek olarak elbette çoğunlukla server-side tarafında isteklerle bu tablo yapısını kullanıyoruz, dolayısı ile pagination ile birlikte server-side işlemleri de uygulayabildiğimiz bir tablo yapısı için beğenmeyi unutmayın, react-query dersinden sonra yeterli istek olursa böyle bir güncelleme videosu çekebilirim
Elinize,emeğinize sağlık Tayfun Hocam çok başarılı bir anlatım ve proje olmuş, yaklaşık 8 yıldır takip ediyorum sizi ve ilgili kişilere ilk sizin videolarınızı tavsiye ediyorum 👏👏
Media query olayı müthişmiş hocam teşekkürler, yani tasarımları yaparken hep mobili de düşünerek yazıyordum artık böyle bir strese girmeye gerek yok bence. Tasarımlar direkt farklı componentlara bölünerek oluşturulabilir, bundan sonrası artık hayal gücümüze kalmış. Componentlara bölmeden classnames kullanarak da kullanılabilir gerçekten süper ya
React serisi gerçekten çok faydalı oluyor, react için böyle bir Türçe kaynak oluşturduğunuz için teşekkürler hocam devamını merakla bekliyoruz🙂
Efsane anlatım olmuş. Tablo gibi görünüyor ama object array state yönetiminin tüm temel taşları var.
Bence harika olmuş. Elinize sağlık. Mobilde Sorting yok oluyor :). Ayrıca multiple sort özelliği de harik olurmuş. Name asc Age desc gibi. Export Excel ve Sayfalama özelliği eklenirse tadından yenmez her projede kemik komponent olarak kullanılır.
Hocam neden bilmiyorum çok garip, bi projede sıra X işine geliyor, X işini nasıl yaparım diye düşünürken ertesi gününde o işi siz yapmış ve paylaşmış oluyorsunuz. 1 değil 2 oldu tablo videosundan sonra, şans mı diyelim :D
Kendi içeceğim kadar damıtıyorum 😊
Emeklerine sağlık kardeşim. süpersin.👌
Reis api ile guzel bir proje yapsan
Tekrardan hoş geldin abi :)))
İyi yayınlar
anlaşılır ve çok güzel bir video olmuş eline emeğine sağlık teşekkürler :D kullandığın bu thema ne göze hoş geliyor.
Efsanesin abi, bu çok iyi oldu
hocam 13:46-da ternary operatörü kullanarak Array-se div içerisinde butonlar gəlsin, değilse item-lar. O zaman hər iki koşulu da sağladığı içinmi hem item-lar geldi hem de div içerisimde butonlar?
teşekkür ederim reis
teşekkürler :)
Thanks!
süper yaa :)
Videolar gelir)))
Cox iyi olmus
eline sağlık
Tayfun hocam size bir sorum olacak Smart Search nasil yapabiliriz ? Diyelim Title su sekilde olsun -> "Tayfun Erbilen 29 Yaşında ve Eskişehir de yaşıyor" Biz arama kutucuguna Tayfun 29 Eskişehir yazdıgımızda sonuç boş geliyor. Buna nasil bir cozum uygulayabiliriz ?
Sorunu bu sekilde cozdum , inaniyorum ki cogu kisiye lazim olacak bir ozellik
const [search, setSearch] = useState("");
const regexStr = "(?=.*" + search.split(/\,|\s/).join(")(?=.*") + ")";
const expr = new RegExp(regexStr, "gi");
const filtredData = body.filter(
items =>
items.some(item =>
expr.test(item.toString().toLowerCase())
)
);
Müthiş
Hocam şu
Json.stringify(filteredData, null, 2)
Yazısında null ve 2 nedir öyle? Onun için bir derslik anlatmışsınızmı ya da varmı?
ua-cam.com/video/BZvLCGQvbs8/v-deo.html bu videoda detaylari mevcut
@@PROTOTURKCOM saol hocam
içlerinden biri date olsaydı bu sort işlemi date için çalışmıyor. O zaman column date ise farklı değilse farklı bir sort mu yapmak gerekir yoksa daha iyi bir yol var mı?
hayır, tarihli kısmı bir div içine alıp key ya da searchableText propuna date'i timestamp'e çevirip eklersen düzgün şekilde çalışacaktır, video da sorting bu ayarlardan sonra patlıyordu onu unutmuşum en son düzeltmeyi, sabitlediğim yorumdaki düzeltme linkinde yaptığım ufak değişikliği görüp ona göre uyarlayabilirsin
@@PROTOTURKCOM tamamdır çok teşekkürler. Timestamp kısmı aklıma gelmemişti.
abi bunu tailwind kullanmasak nasıl yapacaktık ? sadece css media queryleriyle yapabilir miydik ?
responsive için tailwind kullanmadık zaten, css media query'si ile yaptık, yani zorunda değilsin tailwind kullanmak stil işlemi için
Classname'ler ile nasıl still verebiliyoruz?
Gerçekten birçok yöntemi denedim ancak class nameler içersine yazılan stilleri kendi projemde çekemedim malesef :(
Tailwind imiş 😙
Link ekledim, yorumum kaldırıldı. GitHub repo'su vardı. Üzdü! (Bilmediğim bir özellik olduğunu ümit ediyorum...)
anlamadım demek istediğini?
@@PROTOTURKCOM Eski yorumu GitHub reposu ekleyerek guncellemistim ve 1-2dk sonra kalkti. Onu belirtmistim. Neyse gerek yok, demek ki yorum ayarlarinda varsayilan gelen bir durum.
youtube otomatik olarak spam algılıyor olabilir benlik bir şey değildi :)
@@PROTOTURKCOM Evet, gereksiz bir muhabbet açtım. Bu vesileyle emeklerine sağlık diyeyim. Yeni videolar tekrar bir hız kazandi ve süper gidiyor. 👏🏼
bu ne ya
Neye benziyor
hocam devamı gelsin lütfenn