JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="utf-8" />
  <title>V4 - Table + Filter</title>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <style>
    #control { margin-bottom: 12px; }
    table { border-collapse: collapse; width: 100%; max-width: 900px; }
    th, td { border: 1px solid #ccc; padding: 6px; text-align: left; }
  </style>
</head>
<body>
  <h2>Version 4 — 顯示表格並可搜尋（前端 filter）</h2>

  <div id="control">
    搜尋客戶名稱： <input id="searchName" placeholder="輸入客戶名稱（含部分字）"/>
    <button id="searchBtn">搜尋</button>
    <button id="resetBtn">重置</button>
  </div>

  <div id="demo">讀取中...</div>

  <script>
    // 請替換成你的試算表 ID 與工作表名稱
	var SHEET_ID = "1QScI5d56Kh-LGywY4WR6EvRGPcalFQYUAdqMxbFVDvk";
    var SHEET_NAME = "工作表1"; // 或你自己的工作表名稱
    var baseUrl = 'https://docs.google.com/spreadsheets/d/' + SHEET_ID + '/gviz/tq?sheet=' + encodeURIComponent(SHEET_NAME);
    var lastDataTable = null; // 供前端 filter 使用

    google.charts.load('current', { packages: ['corechart'] });
    google.charts.setOnLoadCallback(loadAll);

    function loadAll() {
      var query = new google.visualization.Query(baseUrl);
      query.setQuery('select *'); // 讀全部
      query.send(storeAndRender);
    }

    function storeAndRender(response) {
      if (response.isError()) {
        document.getElementById('demo').innerText = "讀取錯誤：" + response.getMessage();
        return;
      }
      lastDataTable = response.getDataTable();
      renderTable(lastDataTable);
    }

    function renderTable(dataTable, filterName) {
      if (!dataTable) { document.getElementById('demo').innerText = "沒有資料"; return; }

      var rows = dataTable.getNumberOfRows();
      var cols = dataTable.getNumberOfColumns();

      var html = "<table><tr>";
      for (var c = 0; c < cols; c++) {
        html += "<th>" + dataTable.getColumnLabel(c) + "</th>";
      }
      html += "</tr>";

      var matchCount = 0;
     ...