🔥 อยากสร้าง Data Table เพื่อรองรับข้อมูลอันมหาศาลลล ทำยังไงดี ??
ต้องนี่ !! Library เจ๋ง ๆ จาก JavaScript ที่จะช่วยให้เพื่อน ๆ สร้าง Data Table ได้อย่างง่ายดาย แถมยังมีรูปแบบ Table ให้เลือกตามใจชอบเลยจ้าาา มีอะไรบ้างนั้น ไปดูกันเลย
.
🔴 1) DataTables
เป็น Libs จาก JavaScript ใช้งานง่าย และฟรี มีฟีเจอร์เยอะไม่ว่าจะเป็นการแบ่งหน้า, ช่อง Search, เลือกจำนวน Entries แถมรองรับการแสดงผลบนมือถืออีกด้วย
.
👉 โหลดใช้งานได้ที่นี่จ้า >> https://www.datatables.net/
.
🟠 2) Webix DataTable
เป็น Libs ที่จะช่วยให้เพื่อน ๆ สามารถจัดการกับข้อมูลในตารางอย่างง่ายดาย สามารถรองรับข้อมูลขนาดใหญ่ได้ด้วย แสดงผลได้รวดเร็ว มีฟีเจอร์เจ๋ง ๆ เช่น รูปแบบตารางหลากหลาย, ลากวางวิดเจ็ตได้อย่างอิสระ
.
👉 โหลดใช้งานได้ที่นี่ >> https://webix.com/widget/datatable/
🟡 3) PrimeNG Table
เป็น Component UI สำหรับ Angular รองรับการทำ Dynamic column เป็น Open-Source ใช้งานได้ฟรี ๆ จัดเรียง Column ใหม่ได้ง่าย ๆ และสามารถ Export ข้อมูลในตารางได้อีกด้วย
.
👉 โหลดใช้งานได้ที่นี่ >> https://www.primefaces.org/primeng/showcase/#/table
🟢 4) Vuetable
Libs JavaScript สุดเจ๋ง ใช้งานร่วมกับ Vue.js และ Axios ได้ มีฟีเจอร์หลากหลาย เช่น แปลงข้อมูลในตารางเป็น JSON, รองรับ CSS Framework, ปรับแต่ง Field ได้อิสระ, ปรับแต่งการ Sorting ได้ตามต้องการ
.
👉 โหลดใช้งานได้ที่นี่ >> https://www.vuetable.com/
🟣 5) KendoReact
สร้าง Data Table แถมยัง Export ข้อมูลเป็นไฟล์ Excel และ PDF ได้อีกด้วย ทำงานได้รวดเร็ว สามารถปรับแต่งได้เยอะ สามารถแยกบันทึกข้อมูลตาม Record ที่ต้องการได้ และสามารถตรึง Column ที่ต้องการได้ง่าย ๆ
.
👉 โหลดใช้งานได้ที่นี่ >> https://www.telerik.com/kendo-react-ui/components/grid/
.
ครบทั้ง 5 อันแล้ว เป็นยังไงกันบ้าง ลองเอาไปปรับใช้กับโปรเจกต์ของเพื่อน ๆ ดูนะ และหวังว่ามีเป็นประโยชน์กับเพื่อน ๆ น้า 😍
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
同時也有10000部Youtube影片,追蹤數超過2,910的網紅コバにゃんチャンネル,也在其Youtube影片中提到,...
datatable json data 在 コバにゃんチャンネル Youtube 的最佳解答
datatable json data 在 大象中醫 Youtube 的最讚貼文
datatable json data 在 大象中醫 Youtube 的最佳貼文
datatable json data 在 DataTable with JSON data - Stack Overflow 的相關結果
The "data" attribute for initializing your Data Table is expecting a list (Each element representing a row). Modify your ajax response, ... ... <看更多>
datatable json data 在 jQuery Datatables Example with JSON Data - Codez Up 的相關結果
jQuery Datatables is a very popular and open source jQuery grid plugin and it is used for converting the Html table into a powerful grid. One of the main ... ... <看更多>
datatable json data 在 Ajax sourced data - DataTables example 的相關結果
Name Position Office Extn Start date Salary
Airi Satou Accountant Tokyo 5407 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 5797 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 1562 2009/01/12 $86,000 ... <看更多>