${row.data
278 | .map((cell) =>
279 | !cell.hide
280 | ? `| ${cell.pre}${cell.content}${cell.suf} | `
281 | : ""
282 | )
283 | .join("")}
`
284 | )
285 | .join("");
286 |
287 | // if configured, set clickable row to show device popup-dialog
288 | rows.forEach((row) => {
289 | const elem = this.shadowRoot.getElementById(
290 | `device_row_${row.device.attributes.device_reg_id}`
291 | );
292 | const root = this.shadowRoot;
293 | // bind click()-handler to row (if configured)
294 | elem.onclick = this.tbl.cfg.clickable
295 | ? function (clk_ev) {
296 | let ev = new Event("location-changed", {
297 | bubbles: true,
298 | cancelable: false,
299 | composed: true,
300 | });
301 | ev.detail = { replace: false };
302 | history.pushState(
303 | null,
304 | "",
305 | "/config/devices/device/" + row.device.attributes.device_reg_id
306 | );
307 | root.dispatchEvent(ev);
308 | }
309 | : null;
310 | });
311 | }
312 |
313 | set hass(hass) {
314 | const config = this._config;
315 | const root = this.shadowRoot;
316 |
317 | hass
318 | .callWS({
319 | type: "zha/devices",
320 | })
321 | .then((devices) => {
322 | // `raw_rows` to be filled with data here, due to 'attr_as_list' it is possible to have
323 | // multiple data `raw_rows` acquired into one cell(.raw_data), so re-iterate all rows
324 | // to---if applicable---spawn new DataRowZHA objects for these accordingly
325 | let raw_rows = devices.map(
326 | (e) => new DataRowZHA({ attributes: e }, config.strict)
327 | );
328 | raw_rows.forEach((e) => e.get_raw_data(config.columns));
329 |
330 | // now add() the raw_data rows to the DataTableZHA
331 | this.tbl.clear_rows();
332 | raw_rows.forEach((row_obj) => {
333 | if (!row_obj.has_multiple) this.tbl.add(row_obj);
334 | else
335 | this.tbl.add(
336 | ...transpose(row_obj.raw_data).map(
337 | (new_raw_data) =>
338 | new DataRowZHA(row_obj.device, row_obj.strict, new_raw_data)
339 | )
340 | );
341 | });
342 |
343 | // finally set card height and insert card
344 | this._setCardSize(this.tbl.rows.length);
345 | // all preprocessing / rendering will be done here inside DataTableZHA::get_rows()
346 | this._updateContent(
347 | root.getElementById("zhatable"),
348 | this.tbl.get_rows()
349 | );
350 | });
351 | }
352 |
353 | _setCardSize(num_rows) {
354 | this.card_height = parseInt(num_rows * 0.5);
355 | }
356 |
357 | getCardSize() {
358 | return this.card_height;
359 | }
360 | }
361 |
362 | customElements.define("zha-network-card", ZHANetworkCard);
363 |
--------------------------------------------------------------------------------