Cách Hiển Thị Bảng Dữ Liệu Với Tabular JS Trong Apps Script

Tabular JS là một thư viện JavaScript mạnh mẽ cho phép bạn dễ dàng hiển thị và quản lý bảng dữ liệu. Khi kết hợp với Google Apps Script, Tabular JS có thể giúp bạn tạo ra các bảng dữ liệu tương tác từ Google Sheets một cách đơn giản và hiệu quả. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng Tabular JS để hiển thị bảng dữ liệu từ Google Sheets thông qua Apps Script.

Bước 1: Tạo Google Sheet và Chuẩn Bị Dữ Liệu

Đầu tiên, bạn cần chuẩn bị dữ liệu trong Google Sheets. Ví dụ, bạn có thể tạo một bảng dữ liệu đơn giản như sau:

Name	Age	Country
John Doe	28	USA
Jane Smith	34	UK
Alice Brown	29	Canada

Cách Hiển Thị Bảng Dữ Liệu Với Tabular JS Trong Apps Script

Bước 2: Viết Apps Script để Lấy Dữ Liệu

Tiếp theo, bạn cần tạo một Google Apps Script để lấy dữ liệu từ Google Sheets. Đoạn mã dưới đây giúp bạn lấy dữ liệu từ bảng và trả về dưới dạng JSON:

function doGet() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('index');
  return htmlOutput;
}

function getData() {
  var sheet = SpreadsheetApp.openById('YOUR_SHEET_ID').getSheetByName('Sheet1');
  var data = sheet.getDataRange().getValues();

  // Chuyển đổi dữ liệu thành đối tượng JSON
  var jsonData = [];
  var headers = data.shift();
  data.forEach(function(row) {
    var record = {};
    headers.forEach(function(header, index) {
      record[header] = row[index];
    });
    jsonData.push(record);
  });

  return jsonData;
}

Trong đoạn mã này, bạn cần thay thế YOUR_SHEET_ID bằng ID của Google Sheet mà bạn đã tạo.

Bước 3: Tạo Giao Diện HTML và Sử Dụng Tabular JS

Sau khi đã có dữ liệu, bước tiếp theo là tạo giao diện HTML và sử dụng Tabular JS để hiển thị bảng dữ liệu.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/tabular-js@latest"></script>
    <link rel="stylesheet" href="https://unpkg.com/tabular-js@latest/tabular.min.css">
    <style>
      #dataTable {
        width: 100%;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <div id="dataTable"></div>

    <script>
      // Lấy dữ liệu từ Apps Script và hiển thị bằng Tabular JS
      google.script.run.withSuccessHandler(function(data) {
        var table = new Tabular.Table({
          data: data,
          columns: [
            { title: "Name", field: "Name" },
            { title: "Age", field: "Age" },
            { title: "Country", field: "Country" }
          ],
          pagination: true,
          search: true
        });

        document.getElementById('dataTable').appendChild(table.render());
      }).getData();
    </script>
  </body>
</html>

Bước 4: Triển Khai và Kiểm Tra Kết Quả

Cuối cùng, lưu và triển khai script dưới dạng web app để kiểm tra kết quả. Bảng dữ liệu từ Google Sheets sẽ được hiển thị một cách sinh động và tương tác thông qua Tabular JS.

Kết Luận

Việc sử dụng Tabular JS trong Google Apps Script không chỉ giúp bạn hiển thị bảng dữ liệu một cách dễ dàng mà còn tạo ra trải nghiệm người dùng tốt hơn với các tính năng như phân trang và tìm kiếm. Hy vọng với bài viết này, bạn đã có thể áp dụng Tabular JS vào dự án của mình một cách hiệu quả.

Dịch vụ lập trình ứng dụng

🎯 Lập trình API, Python, Node JS, Telegram Bot, Automate Workflow, Power Apps and Apps Script.

📒 Nhận dạy Lập trình Apps Script, Power Apps từ cơ bản đến nâng cao.

📞 +84 78 600 5534 (Zalo, WhatsApp, Telegram)

💻 Github

🌏 appscript.online