🔥 อยากสร้าง 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影片中提到,...
「javascript export」的推薦目錄:
- 關於javascript export 在 BorntoDev Facebook 的最佳貼文
- 關於javascript export 在 卡斯伯 Facebook 的最讚貼文
- 關於javascript export 在 卡斯伯 Facebook 的最佳解答
- 關於javascript export 在 コバにゃんチャンネル Youtube 的最佳解答
- 關於javascript export 在 大象中醫 Youtube 的最佳解答
- 關於javascript export 在 大象中醫 Youtube 的最佳貼文
- 關於javascript export 在 完全解析JavaScript import、export - 前端,沒有極限 的評價
- 關於javascript export 在 [ES6] Javascript Import & Export 教學| Modules | 模組化 的評價
- 關於javascript export 在 module.exports vs exports in Node.js - Stack Overflow 的評價
- 關於javascript export 在 jmaister/excellentexport: Javascript export to Excel - GitHub 的評價
javascript export 在 卡斯伯 Facebook 的最讚貼文
ES6 import/export 完全解析
import、export 是 JavaScript 模組管理的方法
可以將每個檔案視為一個獨立的模組匯出
本篇先從兩種匯出形式做介紹
帶大家輕鬆了解完整的模組概念
javascript export 在 卡斯伯 Facebook 的最佳解答
現在主要的 Style guide 有 StandardJS, Airbnb, Google 三家
我自己雖然偏好 Standard 但現在也轉向其它兩家 (懶得加分號啊~)
這裡列出 Google Style Guide 的一些特色
- 使用兩個空白 (別用四個空白或 tab)。
- 請記得加入分號。
- 先別用 ES6 module export,因為語意尚未完全定義。
- 別使用 var,改使用 let, const。
- 盡可能使用 arrow function。
- 使用 template String,並且大括號內部變數不需要額外空白如: `${variable}`。
- const 所宣告的變數使用全大寫。
- 字串使用單引號。
介紹: https://goo.gl/5RufGG
Google JavaScript Style Guide:
https://google.github.io/styleguide/jsguide.html
javascript export 在 完全解析JavaScript import、export - 前端,沒有極限 的推薦與評價
import 、export 是JavaScript 模組管理的方法,可以將每個檔案視為一個獨立的模組匯出,並在另一個檔案匯入使用。透過此方式每個檔案更能專注在特定的 ... ... <看更多>