fixermark/index.html

## index.html
<html>
  <head>
    <title>Test Dashboard</title>
    <script src="/networktables/networktables.js"></script>
    <script src="/table-viewer.js"></script>
  </head>
  <body>
    <h2>Network Table Entries</h2>
    <table>
      <thead>
        <tr>
          <th>Field</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody id="network-table"></tbody>
    </table>
    <script language="javascript">
      TableViewer.connect('network-table');
    </script>
  </body>
</html>

## table-viewer.js
/** NOTE: this script must be loaded after /networktables/networktables.js */

TableViewer = (() => {

  /** Add an entry to the table and create HTML elements to display it
   *
   *  @param {Object} networkTableEntries Map from keys to the <td> displaying the value of the key
   *  @param {string} htmlTBodyId ID of the table body element containing all key-value pairs
   *  @param {string} key Key to add
   *  @param {any} value Value to display
   */
  addTableEntry = (networkTableEntries, htmlTBodyId, key, value) => {
    const tableRow = document.createElement('tr');
    const keyTableData = document.createElement('td');
    keyTableData.innerText = key;

    const valueTableData = document.createElement('td');
    valueTableData.innerText = `${value}`;

    networkTableEntries[key] = valueTableData;
    tableRow.append(keyTableData, valueTableData);
    document.getElementById(htmlTBodyId).append(tableRow);
  };

  /** Update an existing table entry
   *
   *  @param {Object} networkTableEntries Map from keys to the <td> displaying the value of the key
   *  @param {string} key Key to update
   *  @param {any} value Value to show as the updated value
   */
  updateTableEntry = (networkTableEntries, key, value) => {
    networkTableEntries[key].innerText = `${value}`;
  };

  return {
    /** Binds the specified <tbody> to the Network Tables so that any update to the
     *  table values is reflected in the table body
     *
     *  @param {string} htmlTbodyId The HTML ID of the table body to bind to
     */
    connect: (htmlTBodyId) => {
      console.log('connected to HTML <tbody>');
      const networkTableEntries = {};
      NetworkTables.addGlobalListener((key, value) => {
        if (key in networkTableEntries) {
          updateTableEntry(networkTableEntries, key, value);
        } else {
          addTableEntry(networkTableEntries, htmlTBodyId, key, value);
        }
      }, true);
    }
  };
})();
	<html>
	<head>
	<title>Test Dashboard</title>
	<script src="/networktables/networktables.js"></script>
	<script src="/table-viewer.js"></script>
	</head>
	<body>
	<h2>Network Table Entries</h2>
	<table>
	<thead>
	<tr>
	<th>Field</th>
	<th>Value</th>
	</tr>
	</thead>
	<tbody id="network-table"></tbody>
	</table>
	<script language="javascript">
	TableViewer.connect('network-table');
	</script>
	</body>
	</html>
	/** NOTE: this script must be loaded after /networktables/networktables.js */

	TableViewer = (() => {

	/** Add an entry to the table and create HTML elements to display it
	*
	* @param {Object} networkTableEntries Map from keys to the <td> displaying the value of the key
	* @param {string} htmlTBodyId ID of the table body element containing all key-value pairs
	* @param {string} key Key to add
	* @param {any} value Value to display
	*/
	addTableEntry = (networkTableEntries, htmlTBodyId, key, value) => {
	const tableRow = document.createElement('tr');
	const keyTableData = document.createElement('td');
	keyTableData.innerText = key;

	const valueTableData = document.createElement('td');
	valueTableData.innerText = `${value}`;

	networkTableEntries[key] = valueTableData;
	tableRow.append(keyTableData, valueTableData);
	document.getElementById(htmlTBodyId).append(tableRow);
	};

	/** Update an existing table entry
	*
	* @param {Object} networkTableEntries Map from keys to the <td> displaying the value of the key
	* @param {string} key Key to update
	* @param {any} value Value to show as the updated value
	*/
	updateTableEntry = (networkTableEntries, key, value) => {
	networkTableEntries[key].innerText = `${value}`;
	};

	return {
	/** Binds the specified <tbody> to the Network Tables so that any update to the
	* table values is reflected in the table body
	*
	* @param {string} htmlTbodyId The HTML ID of the table body to bind to
	*/
	connect: (htmlTBodyId) => {
	console.log('connected to HTML <tbody>');
	const networkTableEntries = {};
	NetworkTables.addGlobalListener((key, value) => {
	if (key in networkTableEntries) {
	updateTableEntry(networkTableEntries, key, value);
	} else {
	addTableEntry(networkTableEntries, htmlTBodyId, key, value);
	}
	}, true);
	}
	};
	})();