WEBアプリでの検索窓の付け方を教えてください。

【対応したいこと】
スプレッドシートからのGASにてWEBアプリに検索窓をつけたい。

スプレッドシートからGASにてWebアプリをつくっています。
見え方としては、
①Aさん、Bさんで見える行が変わる
②検索機能をつけたい

例えばAさんは20件表示に対してBさんは500件表示など人によって見える件数が違うため検索したいと言う声あり。
氏名で検索するときもあれば、項目6を使って検索したい場合などさまざまです。

①はなんとかできたように思いますが、ここに検索機能（検索窓）をつけるにはどうしたらいいかわかりません。
解決方法を教えて下さい。

【コード】
// @ts-nocheck
// アクセスしてきた人のメールアドレスを取得
function getEmail() {
const email = Session.getActiveUser().getEmail();
if (email === '') throw 'メールアドレスを取得できません。';
return email;
}

const USERS_SHEET_NAME = 'Users';
// メールアドレスからユーザIDを取得する
function fetchUserId(email) {
const rows = SpreadsheetApp.getActive().getSheetByName(USERS_SHEET_NAME).getDataRange().getValues().slice(1)
.filter(row => row[1] === email);
if (rows.length < 1) throw ${email}に相当するユーザー情報が定義されていません。;
if (rows.length > 1) throw ${email}に相当するユーザー情報が複数定義されています。;
return rows[0][0];
}

const DATA_SHEET_NAME = 'Data';
// ユーザーIDを含む（複数の）行を取得する
function filterRows(userId) {
return (
SpreadsheetApp.getActive().getSheetByName(DATA_SHEET_NAME).getDataRange().getValues().slice(1)
.filter(row => row[0] === userId));
}

function doGet() {
const html = HtmlService.createTemplateFromFile('Index');
const email = getEmail();
// テンプレート変数にプッシュする
html.email = email;
html.rows = filterRows(fetchUserId(email));
return html.evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

【HTML】
< !DOCTYPE html>
< html>
< head>
< base target="_top">
< /head>
< body>
< p>あなたのメールアドレスは = email ?> です。< /p>

 <table border="5">
  <tr>
    <th>社員番号</th>
    &nbsp;&nbsp;&nbsp;
    <th>氏名</th>
    &nbsp;&nbsp;&nbsp;
    <th bgColor=yellow>項目1</th>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <th bgColor=yellow>項目2</th>
    &nbsp;&nbsp;&nbsp;
    <th>項目3</th>
    &nbsp;&nbsp;&nbsp;
    <th>項目4</th>
    &nbsp;&nbsp;&nbsp;
    <th>項目5</th>
     &nbsp;&nbsp;&nbsp;
     <hr>
    <th>項目6</th>
        </tr>
  <? for (let row of rows) { ?>
    <tr>
      <td><?= row[1] ?></td>
      &nbsp;&nbsp;&nbsp;
      <td><?= row[2] ?></td>
      &nbsp;&nbsp;&nbsp;
      <td bgColor=yellow><center><?= row[3] ?></center></td>
      &nbsp;&nbsp;&nbsp;
      <td bgColor=yellow><center><b><?= row[4] ?></b></center></td>
      &nbsp;&nbsp;&nbsp;
      <td><center><?= row[5] ?></center></td>
      &nbsp;&nbsp;&nbsp;
      <td><?= row[6] ?></td>
      &nbsp;&nbsp;&nbsp;
      <td><center><?= row[7] ?></center></td>
      &nbsp;&nbsp;&nbsp;
      <td><center><?= row[8] ?></center></td>
     </tr>
  <? } ?>
</table>

< /body>
< /html>