{#if header.key === "port"} {header.value} (network) {:else}{header.value}{/if} {#if cell.key === "rule" && cell.value === "Round robin"} {cell.value} {:else}{cell.value}{/if} { return row.name.includes(value); }} /> Restart all API documentation Stop all Restart all API documentation Stop all cost + " €" }, { key: "expireDate", value: "Expire date", display: (date) => new Date(date).toLocaleString(), sort, }, ]} rows={[ { id: 0, name: "Load Balancer 3", protocol: "HTTP", port: 3000, cost: 100, expireDate: "2020-10-21", }, { id: "b", name: "Load Balancer 1", protocol: "HTTP", port: 443, cost: 200, expireDate: "2020-09-10", }, { id: "c", name: "Load Balancer 2", protocol: "HTTP", port: 80, cost: 150, expireDate: "2020-11-24", }, { id: "d", name: "Load Balancer 6", protocol: "HTTP", port: 3000, cost: 250, expireDate: "2020-12-01", }, { id: "e", name: "Load Balancer 4", protocol: "HTTP", port: 443, cost: 550, expireDate: "2021-03-21", }, { id: "f", name: "Load Balancer 5", protocol: "HTTP", port: 80, cost: 400, expireDate: "2020-11-14", }, ]} />

      {JSON.stringify(row, null, 2)}

      {JSON.stringify(row, null, 2)}

{ return value + " Protocol"; }, }, { key: "port", value: "Port", display: (value, row) => { console.log(row.port); return value + " €"; }, sort: (a, b) => { if (a > b) return 1; return 0; }, }, { key: "rule", value: "Rule", }, ]} sortKey="name" on:click:row={(e) => { const detail = e.detail; detail.name; detail.port; }} on:click:cell={(e) => { const detail = e.detail; switch (detail.key) { case "name": detail.value; break; } }} on:click={(e) => { e.detail.cell; e.detail.row?.name; }} on:click:row--expand={(e) => { const detail = e.detail; detail.row.id; detail.row.name; }} />