อะไรจะดีไปกว่าการที่เราสามารถดึงข้อมูลจาก Google Sheet ไปแสดงผลบน website ของเราได้โดยตรง เพราะการใช้งาน Google Sheets นั้นเรียกว่าแทบจะอยู่ในชีวิตประจำวันของใครหลายคนอยู่แล้ว การเปลี่ยนไปให้ website ใช้เนื้อหาข้อมูลจาก Google Sheets โดยตรง ก็จะช่วยลดงานของ website developer ตั้งแต่เริ่มต้น ตลอดจนการ maintain websitee ในระยะยาวอีกด้วย

บทความในวันนี้จะพูดถึง JavaScript library ตัวนึง ที่เราได้มีโอกาสนำไปใช้งานกับโปรเจค website ร้านบอร์ดเกม wakaproject.comใช้ในการแสดงผลทั้งอันดับ ranking ของผู้เข้าแข่งขันทัวร์นาเมนต์เกม รวมไปถึงการแสดงผล catalog สินค้าที่ทางร้านวางขาย หลังจากศึกษาหาข้อมูลออนไลน์มาสักพัก ก็ได้มาเจอกับ library ตัวนี้ ที่มีชื่อว่า Sheetrock

Sheetrock is a JavaScript library for querying, retrieving, and displaying data from Google Sheets.

การนำ Sheetrock ไปใช้งานก็เรียกว่าสะดวก และตอบโจทย์มากๆ ใช้งานง่าย มี documentation ที่อธิบายไว้อย่างละเอียด รวมถึงสามารถทำงานร่วมกับ library ชื่อดังอย่าง DataTables ได้อีกด้วย

โครงสร้างการใช้งาน

จริงๆแล้วโครงสร้างการใช้งาน Sheetrock ในส่วนของการนำข้อมูลจาก Google Sheet ไปแสดงผลนั้นเรียบง่ายมากๆ เพราะความซับซ้อนจะอยู่ในส่วนของการทำ customization รูปร่างหน้าตาของตารางที่เราดึงข้อมูลมามากกว่า

จากตัวอย่างข้างล่างนี้ จะเห็นว่าการนำไปใช้งานนั้นง่ายมากๆ เพียงแค่เราเรียกใช้ .sheetrock(), ระบุ table id leader-table และก็อย่าลืมเรียกใช้ .js dependencies ก็เป็นอันเรียบร้อย

    <table id="statistics" class="table table-condensed table-striped"></table>

    var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1qT1LyvoAcb0HTsi2rHBltBVpUBumAUzT__rhMvrz5Rk/edit#gid=0';

    $('#statistics').sheetrock({
      url: mySpreadsheet
    });

    <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://unpkg.com/sheetrock@1.2.0/dist/sheetrock.min.js"></script>

เพิ่มความ advanced ด้วย DataTables

หากเรามีจำนวนข้อมูลที่จะแสดงผ่านตารางไม่มาก สัก 10 หรือ 20 rows การแสดงผลตามตัวอย่างด้านบนก็คงเพียงพอ แต่บางครั้งการใช้งานจริงมีความซับซ้อนมากกว่านั้น เช่น เราต้องการให้ตารางมีความสามารถแบบตารางจริงๆ ไม่ใช่แค่แสดงผลอย่างเดียว เช่นความสามารถในการ search หรือ sort ข้อมูล

กรณีนี้เราจึงต้องอาศัย library อย่าง DataTables เข้ามาอำนวยความสะดวกเพิ่มเติม ต้องบอกเลยว่า DataTables เป็น js library ที่มี use cases หลากหลายมากๆ ครอบคลุมแทบจะทุกอย่าง แถมยังมีคนใช้งานจำนวนมาก จึงมี community ที่เข้มแข็ง มีคนถาม-ตอบ การใช้งานให้เราได้ศึกษากันเพียบ

การเชื่อมต่อ SheetRock เข้ากับ DataTables ก็ทำได้ง่ายมากๆเช่นเดียวกัน เราเพียงแค่ต้อง refer js script และ stylesheet ของ DataTables มา

    <script src="https://unpkg.com/datatables@1.10.18/media/js/jquery.dataTables.min.js"></script>
    <link href="https://unpkg.com/datatables@1.10.18/media/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">

อย่างไรก็ตาม ด้วยความที่ DataTables นั้นมาพร้อมกับ plugins และ extensions มากมายให้เราได้เลือกใช้ ให้ตรงกับความต้องการของเรา การ refer ถึงไฟล์ด้านบนนี้ ก็อาจจะแตกต่างกันออกไปขึ้นกับการใช้งานของเรา รายละเอียดทั้ง design และ extensions ต่างๆ ตรงนี้เพื่อนๆสามารถเช็คเพิ่มเติมได้จาก DataTables Download เลย

    <table id="raw-table" class="table table-condensed table-striped"></table>

    $('#raw-table').sheetrock({
      url: mySpreadsheet,
      query: "select A,B,C,D,E,L order by L desc",
    }).on('sheetrock:loaded', function () {
      $(this).DataTable();
    });

อีกหนึ่งจุดเด่นของ SheetRock เลยก็คือความสามารถในการ query มาแสดงผล ด้วย syntax ง่ายๆ เหมือนการใช้ SQL ทั่วไป ทำให้เราสามารถ control การแสดงผลของ columns และเรียงลำดับของข้อมูลได้ตามต้องการ

ตัวอย่างการใช้งานจริง เลือก columns เลือกเฉพาะแถวที่มีข้อมูล ตั้งชื่อ columns ใหม่ และเพิ่ม scrollbar

ตัวอย่างด้านล่างนี้ ถูกนำไปใช้เพื่อแสดงผล Leaderboard Tournament จัดอันดับและแสดงคะแนนของผู้เล่น

• จะเห็นถึงการใช้ query syntax เพื่อแสดงผลเฉพาะแถวที่มีชื่อผู้เล่น select A,B,C,D where B <> ''
• การ disble การแสดงผล pagination เนื่องจากข้อมูลจำนวนไม่มาก ไม่ต้องการให้มีหลายหน้า paging: false
• การระบุขนาดแสดงผลของตารางด้วย scrollY: 375
• dom เป็น option การ control ว่าต้องการให้ตารางนี้แสดง feature ไหนบ้าง เช่น t table, p pagination, f fiter, etc. อ่านเพิ่มเติม
• การตั้งชื่อ columns ซึ่งเราสามารถระบุได้เองใน script โดยตรง หรือถ้าไม่ได้ระบุ ค่า default ก็จะเป็นตามตารางของเราบน Google Sheet ตัวอย่างการใช้งานนี้จะมีความซับซ้อนขึ้นเล็กน้อย เพราะมีการนำเอา html class เข้ามาช่วย <br class='d-md-none'>
  • เนื่องจากชื่อ column หรือ header ของตารางค่อนข้างยาว หากต้องนำตารางไปแสดงผลบนมือถือจะทำให้ข้อความแสดงผลได้ไม่ครบถ้วน
  • โดยสิ่งที่เราต้องการก็คือ การขึ้นต้นบรรทัดใหม่ <br> ธรรมดา แต่ว่าเราก็ไม่ต้องการให้ขึ้นบรรทัดใหม่ หากตารางนี้แสดงผลบนหน้าจอขนาดใหญ่อย่าง desktop ที่มีพื้นที่เหลือเฟือ
  • เราจึงใช้ stylesheet เข้ามาช่วย โดย bootstrap เค้าจะมี class นึงที่ชื่อว่า d-md-none ซึ่งจะไม่แสดงผลบน desktop นั่นเอง

     $('#leader-table').sheetrock({
          url: leadSpreadsheet,
          query: "select A,B,C,D where B <> '' ",
        }).on('sheetrock:loaded', function () {
     $(this).DataTable({
            paging: false,
            scrollY: 375,
            scrollCollapse: true,
            scrollX: false,
            dom: 't',
            columns: [
             { title: "Rank"},
             { title: "Pokemon<br class='d-md-none'> Trainer" },
             { title: "Victory<br class='d-md-none'> Road WP" },    
             { title: "Forever<br class='d-md-none'> WP"}   
             ]
     });
        });

ตัวอย่างการใช้งานจริง - ใช้งาน responsive plugin, แสดงผลรูปภาพบนตาราง, เพิ่มปุ่มสำหรับการเลือกข้อมูล

มาดูอีกตัวอย่างนึง สำหรับตารางนี้เราจะใช้ในการแสดงผล catalog การ์ดสินค้าภายในร้าน ซึ่งมี concept ว่าให้ลูกค้าสามารถ search หา แล้วกดเลือกสินค้าไว้ตามต้องการ และเนื่องจากสินค้าที่ขายเป็นลักษณะของการ์ดเกม ซึ่งลูกค้ามักจะซื้อทีละหลายๆใบ เราจึงออกแบบตารางออกมาให้สามารถเลือกได้หลาย rows พร้อมๆกัน รวมไปถึงการเพิ่มปุ่มสำหรับ deselect all และ show only selected เพื่อเป็น action สุดท้ายสำหรับให้ลูกค้าแคปหน้าจอสินค้าที่เลือกทั้งหมด

• เรายังคงมีการใช้ query เพื่อแสดงผลเฉพาะแถวที่เราต้องการแสดงผล select B,C,D,E,G,H,I,K where M = 'Y'
• ออกแบบให้ตารางสามารถแสดงผลได้อย่างสวยงามผ่าน plugin responsive responsive: true
• กำหนดจำนวนแถวที่แสดงต่อหน้า pageLength: 10
• ตั้งชื่อ column รวมถึงสร้างฟังก์ชันแปลงข้อมูลใน column Image เพื่อดึง url รูปภาพมาแสดงผลเป็นรูปภาพในตารางโดยตรง
• ใช้ plugin select เพื่อให้ตาราง selectable และเลือกรูปแบบ multiple selection style: 'multi'
• กำหนดการแสดงผลของตารางด้วย dom โดยในครั้งนี้ เรามีทั้ง B button, f filter, i information และ p pagination
• ดึง plugin buttons มาสำหรับแสดง 2 ปุ่ม ทั้ง selectNone สำหรับ deselect all และ showSelected สำหรับแสดงผล only selected ส่วน spacer คือเพื่อให้มีเส้นแบ่งระหว่างปุ่ม

        $('#raw-table').sheetrock({
          url: mySpreadsheet,
          query: "select B,C,D,E,G,H,I,K where M = 'Y'"
         
        }).on('sheetrock:loaded', function () {
        table = $(this).DataTable({
            responsive: true,
            pageLength: 10, 
            columns: [
             { title: "Expansion" },
             { title: "Name (EN)" },
             { title: "Name (TH)" },
             { title: "Image" ,
                render: function (data, type, row, meta) {
                    return '<a href="' + data + '" data-lightbox="image" data-title="'+ row[2] +'"><img src="' + data + '"width="50" height="50"/></a>';
                }
             },
             { title: "Price"},
             { title: "Label"},
             { title: "Rarity"},
             { title: "Remark"}
            ],

          select: {
            style: 'multi',
          },

          rowId: 'id',
          dom: 'Bfrtip',
          buttons: [
            'selectNone',
            'spacer',
            'showSelected',
         ]
        });
    });

จบกันไปแล้วสำหรับตัวอย่างการใช้งาน javascript SheetRock และ DataTables ต้องบอกเลยว่าเป็น libraries ที่ทรงพลังมากๆ ดูจาก documentation แล้ว นี่น่าจะเป็นเพียงแค่น้ำจิ้มเท่านั้นเอง DataTables น่าจะยังสามารถนำไปประยุกต์ใช้ได้อีกเยอะ การใช้งานปุ่มในตารางก็สามารถไปไกลถึงขั้นส่งข้อมูลที่เลือกบนตารางไปยังฐานข้อมูลได้ตาม script เพื่อนๆคนไหนสนใจก็สามารถไปศึกษารายละเอียดเพิ่มเติมจาก documentation ของเค้าได้เลย ลาไปแต่เพียงเท่านี้ แล้วพบกันใหม่ :3