Tag Archive Library

Byphunsanit

Tabulator: javascript tables library

เพราะว่าตัว Datatables ยังคงผูกตัวเองอยู่กับ jQuery มันก็ใช้ดี ง่าย ดัดแปลงได้หลากหลาย แต่เพราะว่า jQuery แทบจะหยุดพัฒนาแล้วจึงจำเป็นที่จะต้องหา javascript tables library ตัวใหม่ที่เข้ากับจาวาสคริปต์สมัยใหม่มากกว่าเดิมก็มาถูกใจ Tabulatot
Tabulator/installation.CDN.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabulator: Installation CDN</title>
    <!-- Tabulator CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/css/tabulator.min.css"
        integrity="sha512-RYFH4FFdhD/FdA+OVEbFVqd5ifR+Dnx2M7eWcmkcMexlIoxNgm89ieeVyHYb8xChuYBtbrasMTlo02cLnidjtQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" rel="stylesheet" />
</head>

<body>
    <div id="tabulator-table"></div>

    <!-- Tabulator JS -->
    <script integrity="sha512-8+qwMD/110YLl5T2bPupMbPMXlARhei2mSxerb/0UWZuvcg4NjG7FdxzuuvDs2rBr/KCNqhyBDe8W3ykKB1dzA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"
        src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/js/tabulator.min.js"></script>
    <script>
        // table data
        var tableData = [
            { id: 1, name: "Pitt", surname: "Phunsanit", age: 43, gender: "Male" },
            { id: 2, name: "พิชญ์", surname: "พันธุ์สนิท", age: 43, gender: "ชาย" }
        ];

        // Tabulator setup
        var table = new Tabulator("#tabulator-table", {
            columns: [
                {
                    field: "id",
                    title: "ID",
                    width: 60
                },
                {
                    field: "name",
                    title: "Name"
                },
                {
                    field: "surname",
                    title: "Surname"
                },
                {
                    field: "age",
                    title: "Age"
                },
                {
                    field: "gender",
                    title: "Gender"
                }
            ],
            data: tableData,
            layout: "fitColumns"
        });
    </script>
</body>

</html>

จะเห็นว่า มันใช้งานง่ายจริง ๆ