{#if title || $$slots.title || description || $$slots.description}
{#if title || $$slots.title}

{title}

{/if} {#if description || $$slots.description}

{description}

{/if}
{/if} {#if expandable} {/if} {#if selectable && !batchSelection} {/if} {#if batchSelection && !radio} {/if} {#each headers as header (header.key)} {#if header.empty} {:else} { dispatch("click", { header }); if (header.sort === false) { dispatch("click:header", { header }); } else { let currentSortDirection = sortKey === header.key ? sortDirection : "none"; sortDirection = sortDirectionMap[currentSortDirection]; sortKey = sortDirection === "none" ? null : thKeys[header.key]; dispatch("click:header", { header, sortDirection }); } }} > {header.value} {/if} {/each} {#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)} { // forgo "click", "click:row" events if target // resembles an overflow menu, a checkbox, or radio button if ( [...target.classList].some((name) => /^bx--(overflow-menu|checkbox|radio-button)/.test(name), ) ) { return; } dispatch("click", { row }); dispatch("click:row", row); }} on:mouseenter={() => { dispatch("mouseenter:row", row); }} on:mouseleave={() => { dispatch("mouseleave:row", row); }} > {#if expandable} {#if !nonExpandableRowIds.includes(row.id)} {/if} {/if} {#if selectable} {/if} {#each tableCellsByRowId[row.id] as cell, j (cell.key)} {#if headers[j].empty} {:else} { dispatch("click", { row, cell }); dispatch("click:cell", cell); }} > {cell.display ? cell.display(cell.value, row) : cell.value} {/if} {/each} {#if expandable} { if (nonExpandableRowIds.includes(row.id)) return; parentRowId = row.id; }} on:mouseleave={() => { if (nonExpandableRowIds.includes(row.id)) return; parentRowId = null; }} > {#if expandedRows[row.id] && !nonExpandableRowIds.includes(row.id)}
{/if} {/if} {/each}
{#if batchExpansion} {/if} { dispatch("click:header--select", { indeterminate, selected: !indeterminate && e.target.checked, }); if (indeterminate) { e.target.checked = false; selectAll = false; selectedRowIds = []; return; } if (e.target.checked) { selectedRowIds = selectableRowIds; } else { selectedRowIds = []; } }} /> {#if !nonSelectableRowIds.includes(row.id)} {@const inputId = `${id}-${row.id}`} {#if radio} { selectedRowIds = [row.id]; dispatch("click:row--select", { row, selected: true }); }} /> {:else} { if (selectedRowIds.includes(row.id)) { selectedRowIds = selectedRowIds.filter( (id) => id !== row.id, ); dispatch("click:row--select", { row, selected: false }); } else { selectedRowIds = [...selectedRowIds, row.id]; dispatch("click:row--select", { row, selected: true }); } }} /> {/if} {/if} {cell.display ? cell.display(cell.value, row) : cell.value}