@iyulab/data-components 0.7.1 → 0.9.0

package/dist/components/simple-sheet/USimpleSheet.styles.js

@@ -12,14 +12,14 @@ var baseStyles = css`
     height: 100%;
     overflow: hidden;
     outline: none;
-    border: 1px solid var(--u-border-color, #e2e8f0);
+    border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: 4px;
-    background: var(--u-bg-color, #fff);
+    background: var(--u-bg-color, #FFFFFF);
   }
 
   .sheet-container:focus-within {
-    border-color: var(--u-blue-500, #3b82f6);
-    box-shadow: 0 0 0 2px var(--u-blue-100, #dbeafe);
+    border-color: var(--u-blue-500, #2196F3);
+    box-shadow: 0 0 0 2px var(--u-blue-100, #BBDEFB);
   }
 
   .sheet-scroll {
@@ -43,15 +43,15 @@ var baseStyles = css`
     z-index: 4;
     width: 48px;
     min-width: 48px;
-    background: var(--u-neutral-100, #f1f5f9);
-    border-right: 1px solid var(--u-border-color, #e2e8f0);
-    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
+    background: var(--u-neutral-100, #F5F5F5);
+    border-right: 1px solid var(--u-border-color, #E0E0E0);
+    border-bottom: 2px solid var(--u-border-color, #E0E0E0);
     cursor: pointer;
     user-select: none;
   }
 
   .corner:hover {
-    background: var(--u-neutral-200, #e2e8f0);
+    background: var(--u-neutral-200, #EEEEEE);
   }
 
   /* Column headers (A, B, C...) */
@@ -59,14 +59,14 @@ var baseStyles = css`
     position: sticky;
     top: 0;
     z-index: 2;
-    background: var(--u-neutral-100, #f1f5f9);
+    background: var(--u-neutral-100, #F5F5F5);
     padding: 4px 8px;
     text-align: center;
     font-size: 12px;
     font-weight: 600;
-    color: var(--u-txt-color-weak, #64748b);
-    border-right: 1px solid var(--u-border-color, #e2e8f0);
-    border-bottom: 2px solid var(--u-border-color, #e2e8f0);
+    color: var(--u-txt-color-weak, #757575);
+    border-right: 1px solid var(--u-border-color, #E0E0E0);
+    border-bottom: 2px solid var(--u-border-color, #E0E0E0);
     white-space: nowrap;
     min-width: 80px;
     cursor: pointer;
@@ -75,8 +75,8 @@ var baseStyles = css`
   }
 
   .col-header.col-selected {
-    background: var(--u-blue-200, #bfdbfe);
-    color: var(--u-blue-800, #1e40af);
+    background: var(--u-blue-200, #90CAF9);
+    color: var(--u-blue-800, #1565C0);
   }
 
   .resize-handle {
@@ -102,7 +102,7 @@ var baseStyles = css`
   }
 
   .resize-handle:hover::after {
-    background: var(--u-blue-500, #3b82f6);
+    background: var(--u-blue-500, #2196F3);
   }
 
   .sheet-container.is-resizing {
@@ -124,28 +124,31 @@ var baseStyles = css`
     text-align: right;
     padding: 0 6px;
     font-size: 11px;
-    color: var(--u-txt-color-weak, #64748b);
-    background: var(--u-neutral-50, #f8fafc);
-    border-right: 1px solid var(--u-border-color, #e2e8f0);
-    border-bottom: 1px solid var(--u-border-color-weak, #f1f5f9);
+    color: var(--u-txt-color-weak, #757575);
+    /* 예외 — 표면 높이 축이 없다. 행번호 여백은 "비활성"이 아니라 시트 바탕보다
+       한 단 내려간 면이다. --u-bg-color-disabled 를 쓰면 다크에서 바탕(neutral-100)과
+       같은 값이 되어 여백 구분이 사라진다 — 스냅샷이 그것을 잡았다. */
+    background: var(--u-neutral-50, #FAFAFA);
+    border-right: 1px solid var(--u-border-color, #E0E0E0);
+    border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
     cursor: pointer;
     user-select: none;
     vertical-align: middle;
   }
 
   .row-num.row-selected {
-    background: var(--u-blue-100, #dbeafe);
-    color: var(--u-blue-800, #1e40af);
+    background: var(--u-blue-100, #BBDEFB);
+    color: var(--u-blue-800, #1565C0);
     font-weight: 600;
   }
 
   /* Data cells */
   .cell {
     padding: 0 6px;
-    border-right: 1px solid var(--u-border-color-weak, #f1f5f9);
-    border-bottom: 1px solid var(--u-border-color-weak, #f1f5f9);
+    border-right: 1px solid var(--u-border-color-weak, #EEEEEE);
+    border-bottom: 1px solid var(--u-border-color-weak, #EEEEEE);
     font-size: 13px;
-    color: var(--u-txt-color, #0f172a);
+    color: var(--u-txt-color, #212121);
     min-width: 80px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -159,13 +162,13 @@ var baseStyles = css`
   }
 
   .cell.selected {
-    background: var(--u-blue-50, #eff6ff);
+    background: var(--u-primary-bg-color, #E3F2FD);
   }
 
   /* The anchor cell (top-left of selection) */
   .cell.anchor {
-    background: var(--u-bg-color, #fff);
-    outline: 2px solid var(--u-blue-500, #3b82f6);
+    background: var(--u-bg-color, #FFFFFF);
+    outline: 2px solid var(--u-blue-500, #2196F3);
     outline-offset: -2px;
     overflow: visible;
     z-index: 1;
@@ -185,16 +188,16 @@ var baseStyles = css`
     min-width: 100%;
     height: calc(100% + 2px);
     border: none;
-    outline: 2px solid var(--u-blue-500, #3b82f6);
+    outline: 2px solid var(--u-blue-500, #2196F3);
     outline-offset: -1px;
     padding: 0 6px;
     font-size: 13px;
     font-family: inherit;
-    color: var(--u-txt-color, #0f172a);
-    background: var(--u-bg-color, #fff);
+    color: var(--u-txt-color, #212121);
+    background: var(--u-bg-color, #FFFFFF);
     box-sizing: border-box;
     z-index: 10;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 2px 8px var(--u-shadow-color-strong, rgba(0, 0, 0, 0.16));
   }
 
   /* Dropdown overlay */
@@ -206,18 +209,18 @@ var baseStyles = css`
     min-width: 120px;
     max-height: 200px;
     overflow-y: auto;
-    background: var(--u-bg-color, #fff);
-    border: 1px solid var(--u-border-color, #e2e8f0);
+    background: var(--u-bg-color, #FFFFFF);
+    border: 1px solid var(--u-border-color, #E0E0E0);
     border-top: none;
     border-radius: 0 0 4px 4px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 4px 12px var(--u-shadow-color-normal, rgba(0, 0, 0, 0.12));
     z-index: 20;
   }
 
   .dropdown-item {
     padding: 4px 8px;
     font-size: 13px;
-    color: var(--u-txt-color, #0f172a);
+    color: var(--u-txt-color, #212121);
     cursor: pointer;
     white-space: nowrap;
     overflow: hidden;
@@ -225,18 +228,18 @@ var baseStyles = css`
   }
 
   .dropdown-item:hover {
-    background: var(--u-neutral-100, #f1f5f9);
+    background: var(--u-neutral-100, #F5F5F5);
   }
 
   .dropdown-item.highlighted {
-    background: var(--u-blue-50, #eff6ff);
-    color: var(--u-blue-800, #1e40af);
+    background: var(--u-primary-bg-color, #E3F2FD);
+    color: var(--u-blue-800, #1565C0);
   }
 
   .dropdown-empty {
     padding: 6px 8px;
     font-size: 12px;
-    color: var(--u-txt-color-weak, #64748b);
+    color: var(--u-txt-color-weak, #757575);
     font-style: italic;
   }
 
@@ -247,33 +250,33 @@ var baseStyles = css`
 
   /* Readonly column/cell */
   .cell.cell-readonly {
-    background: var(--u-neutral-50, #f8fafc);
-    color: var(--u-txt-color-weak, #64748b);
+    background: var(--u-bg-color-disabled, #FAFAFA);
+    color: var(--u-txt-color-weak, #757575);
     cursor: default;
   }
 
   .cell.cell-readonly.selected {
-    background: var(--u-neutral-100, #f1f5f9);
+    background: var(--u-neutral-100, #F5F5F5);
   }
 
   .cell.cell-readonly.anchor {
-    background: var(--u-neutral-50, #f8fafc);
+    background: var(--u-bg-color-disabled, #FAFAFA);
   }
 
   /* Computed column/cell */
   .cell.cell-computed {
-    background: var(--u-blue-50, #eff6ff);
-    color: var(--u-txt-color, #0f172a);
+    background: var(--u-primary-bg-color, #E3F2FD);
+    color: var(--u-txt-color, #212121);
     font-style: italic;
     cursor: default;
   }
 
   .cell.cell-computed.selected {
-    background: var(--u-blue-100, #dbeafe);
+    background: var(--u-blue-100, #BBDEFB);
   }
 
   .cell.cell-computed.anchor {
-    background: var(--u-blue-50, #eff6ff);
+    background: var(--u-primary-bg-color, #E3F2FD);
   }
 
   /* Readonly mode (whole sheet) */
@@ -288,122 +291,23 @@ var DARK_PREFIXES = [
 	":host-context([data-theme=\"dark\"])"
 ];
 var darkRules = (host) => `
-  ${host} .sheet-container {
-    background: var(--u-bg-color, #121212);
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
-  ${host} .sheet-container:focus-within {
-    border-color: var(--u-blue-500, #6ba3e3);
-    box-shadow: 0 0 0 2px var(--u-blue-100, #1e3a5f);
-  }
-
-  ${host} .corner {
-    background: var(--u-neutral-100, #121212);
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
-  ${host} .corner:hover {
-    background: var(--u-neutral-200, #1E1E1E);
-  }
-
-  ${host} .col-header {
-    background: var(--u-neutral-100, #121212);
-    color: var(--u-txt-color-weak, #8A8A8A);
-    border-color: var(--u-border-color, #3D3D3D);
-  }
-
   ${host} .col-header.col-selected {
-    background: var(--u-blue-100, #1e3a5f);
-    color: var(--u-blue-800, #c2deff);
-  }
-
-  ${host} .row-num {
-    background: var(--u-neutral-50, #0A0A0A);
-    color: var(--u-txt-color-weak, #8A8A8A);
-    border-right-color: var(--u-border-color, #3D3D3D);
-    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
-  }
-
-  ${host} .row-num.row-selected {
-    background: var(--u-blue-100, #1e3a5f);
-    color: var(--u-blue-800, #c2deff);
-  }
-
-  ${host} .cell {
-    color: var(--u-txt-color, #D4D4D4);
-    border-right-color: var(--u-border-color-weak, #2A2A2A);
-    border-bottom-color: var(--u-border-color-weak, #2A2A2A);
-  }
-
-  ${host} .cell.cell-readonly {
-    background: var(--u-neutral-100, #1E1E1E);
-    color: var(--u-txt-color-weak, #8A8A8A);
+    background: var(--u-blue-100, #BBDEFB);
   }
 
   ${host} .cell.cell-readonly.selected {
-    background: var(--u-neutral-200, #2A2A2A);
-  }
-
-  ${host} .cell.cell-readonly.anchor {
-    background: var(--u-neutral-100, #1E1E1E);
+    background: var(--u-neutral-200, #EEEEEE);
   }
 
-  ${host} .cell.cell-computed {
-    background: var(--u-blue-100, #1e3a5f);
-    color: var(--u-txt-color, #D4D4D4);
-  }
 
   ${host} .cell.cell-computed.selected {
-    background: var(--u-blue-200, #2a4a6f);
+    background: var(--u-blue-200, #90CAF9);
   }
 
   ${host} .cell.cell-computed.anchor {
-    background: var(--u-blue-100, #1e3a5f);
-  }
-
-  ${host} .cell.selected {
-    background: var(--u-blue-0, #0a1e3d);
-  }
-
-  ${host} .cell.anchor {
-    background: var(--u-bg-color, #121212);
-    outline-color: var(--u-blue-500, #6ba3e3);
-  }
-
-  ${host} .resize-handle:hover::after {
-    background: var(--u-blue-500, #6ba3e3);
-  }
-
-  ${host} .cell-input {
-    background: var(--u-bg-color, #121212);
-    color: var(--u-txt-color, #D4D4D4);
-    outline-color: var(--u-blue-500, #6ba3e3);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+    background: var(--u-blue-100, #BBDEFB);
   }
 
-  ${host} .cell-dropdown {
-    background: var(--u-bg-color, #121212);
-    border-color: var(--u-border-color, #3D3D3D);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-  }
-
-  ${host} .dropdown-item {
-    color: var(--u-txt-color, #D4D4D4);
-  }
-
-  ${host} .dropdown-item:hover {
-    background: var(--u-neutral-100, #1E1E1E);
-  }
-
-  ${host} .dropdown-item.highlighted {
-    background: var(--u-blue-100, #1e3a5f);
-    color: var(--u-blue-800, #c2deff);
-  }
-
-  ${host} .dropdown-empty {
-    color: var(--u-txt-color-weak, #8A8A8A);
-  }
 `;
 var styles = [baseStyles, unsafeCSS(DARK_PREFIXES.map(darkRules).join("\n"))];
 //#endregion

package/dist/components/u-rich-table/URichTable.d.ts

@@ -9,6 +9,19 @@ export declare class URichTable extends LitElement {
     currentPage: number;
     loading: boolean;
     emptyMessage: string;
+    /** 로딩 표시 문구 */
+    loadingMessage: string;
+    /** 필터 입력 placeholder */
+    filterPlaceholder: string;
+    /** 필터 select 의 "전체" 항목 문구 */
+    filterAllLabel: string;
+    /** 새 행 추가 버튼 문구 */
+    addRowLabel: string;
+    /**
+     * 페이지 정보 문구. (전체, 시작, 끝) 을 받아 문자열을 만든다.
+     * 언어마다 어순이 달라 템플릿 문자열이 아니라 함수로 연다.
+     */
+    pageInfoFormatter: (total: number, start: number, end: number) => string;
     selectable: boolean;
     editable: boolean;
     addable: boolean;
@@ -27,6 +40,18 @@ export declare class URichTable extends LitElement {
     revertRow(_rowId: string): void;
     setRowError(rowId: string, message: string): void;
     clearRowError(rowId: string): void;
+    /**
+     * 행의 식별자. 선택·확장·행 오류 상태가 전부 이 값으로 추적된다.
+     *
+     * ⚠`_id` 는 이 컴포넌트가 **부여하지 않는다.** 소비자가 넣어 주지 않으면 모든 행의
+     * `_id` 가 `undefined` 가 되고, Set 은 그 하나만 담으므로 **한 행을 고르면 전부
+     * 골라진다.** 그래서 없을 때는 위치를 대신 쓴다 — 다만 위치 기반 식별은 데이터가
+     * 재정렬·재페이징되면 **선택이 다른 행으로 옮겨간다.** 정렬/필터/페이지가 소비자
+     * 책임인 컴포넌트이므로, 실제 사용에서는 `_id` 를 주는 것이 옳다.
+     */
+    private _rowId;
+    private _warnedMissingRowId;
+    private _warnMissingRowId;
     getSelectedRows(): Record<string, unknown>[];
     render(): TemplateResult;
     private _renderToolbar;

package/dist/components/u-rich-table/URichTable.js

@@ -15,6 +15,11 @@ var URichTable = class URichTable extends LitElement {
 		this.currentPage = 1;
 		this.loading = false;
 		this.emptyMessage = "데이터가 없습니다";
+		this.loadingMessage = "로딩 중...";
+		this.filterPlaceholder = "필터...";
+		this.filterAllLabel = "전체";
+		this.addRowLabel = "+ 새 행";
+		this.pageInfoFormatter = (total, start, end) => `전체 ${total.toLocaleString()}건 중 ${start}-${end} 표시`;
 		this.selectable = false;
 		this.editable = false;
 		this.addable = false;
@@ -29,6 +34,7 @@ var URichTable = class URichTable extends LitElement {
 		this.filters = {};
 		this.validationErrors = /* @__PURE__ */ new Map();
 		this.rowErrors = /* @__PURE__ */ new Map();
+		this._warnedMissingRowId = false;
 		this._lastSelectedIndex = -1;
 		this._onGlobalKeyDown = (e) => {
 			if (e.ctrlKey || e.metaKey) {
@@ -65,7 +71,8 @@ var URichTable = class URichTable extends LitElement {
 				}
 				if (e.key === " " && this.selectable) {
 					e.preventDefault();
-					const rowId = this.data[this.focusedCell.rowIndex]?._id;
+					const r = this.data[this.focusedCell.rowIndex];
+					const rowId = r ? this._rowId(r, this.focusedCell.rowIndex) : void 0;
 					if (rowId) this._onRowSelect(rowId);
 				}
 				if (e.key === "Delete" && this.selectedIds.size > 0) for (const row of this.getSelectedRows()) this.dispatchEvent(new CustomEvent("row-delete", {
@@ -88,8 +95,28 @@ var URichTable = class URichTable extends LitElement {
 		next.delete(rowId);
 		this.rowErrors = next;
 	}
+	/**
+	* 행의 식별자. 선택·확장·행 오류 상태가 전부 이 값으로 추적된다.
+	*
+	* ⚠`_id` 는 이 컴포넌트가 **부여하지 않는다.** 소비자가 넣어 주지 않으면 모든 행의
+	* `_id` 가 `undefined` 가 되고, Set 은 그 하나만 담으므로 **한 행을 고르면 전부
+	* 골라진다.** 그래서 없을 때는 위치를 대신 쓴다 — 다만 위치 기반 식별은 데이터가
+	* 재정렬·재페이징되면 **선택이 다른 행으로 옮겨간다.** 정렬/필터/페이지가 소비자
+	* 책임인 컴포넌트이므로, 실제 사용에서는 `_id` 를 주는 것이 옳다.
+	*/
+	_rowId(row, index) {
+		const id = row._id;
+		if (id !== void 0 && id !== null) return String(id);
+		this._warnMissingRowId();
+		return `#${index}`;
+	}
+	_warnMissingRowId() {
+		if (this._warnedMissingRowId) return;
+		this._warnedMissingRowId = true;
+		console.warn("[@iyulab/data-components] u-rich-table: 행에 `_id` 가 없어 **위치**로 식별합니다. 데이터가 재정렬·재페이징되면 선택 상태가 다른 행으로 옮겨갑니다. 각 행에 고유한 `_id` 를 부여하세요.");
+	}
 	getSelectedRows() {
-		return this.data.filter((row) => this.selectedIds.has(row._id));
+		return this.data.filter((row, i) => this.selectedIds.has(this._rowId(row, i)));
 	}
 	render() {
 		return html`
@@ -122,7 +149,7 @@ var URichTable = class URichTable extends LitElement {
         <div style="flex:1"></div>
         <slot name="toolbar-end"></slot>
         ${this.addable ? html`
-          <button class="btn btn-success" @click=${this._onAddRowClick}>+ 새 행</button>
+          <button class="btn btn-success" @click=${this._onAddRowClick}>${this.addRowLabel}</button>
         ` : ""}
       </div>
     `;
@@ -157,10 +184,10 @@ var URichTable = class URichTable extends LitElement {
         ${this.columns.map((col) => html`
           <td>
             ${col.filterable !== false ? col.filterType === "select" && col.options ? html`<select @change=${(e) => this._onFilterChange(col.key, e.target.value)}>
-                    <option value="">전체</option>
+                    <option value="">${this.filterAllLabel}</option>
                     ${col.options.map((o) => html`<option value=${o.value}>${o.label}</option>`)}
                   </select>` : html`<input
-                    placeholder="필터..."
+                    placeholder=${this.filterPlaceholder}
                     @input=${(e) => this._onFilterChange(col.key, e.target.value)} />` : ""}
           </td>
         `)}
@@ -169,10 +196,10 @@ var URichTable = class URichTable extends LitElement {
     `;
 	}
 	_renderBody() {
-		if (this.loading) return html`<tr><td colspan=${this._colSpan()}><div class="loading-overlay">로딩 중...</div></td></tr>`;
+		if (this.loading) return html`<tr><td colspan=${this._colSpan()}><div class="loading-overlay">${this.loadingMessage}</div></td></tr>`;
 		if (this.data.length === 0) return html`<tr><td colspan=${this._colSpan()}><div class="empty-message">${this.emptyMessage}</div></td></tr>`;
 		return this.data.map((row, rowIdx) => {
-			const rowId = row._id;
+			const rowId = this._rowId(row, rowIdx);
 			const isSelected = this.selectedIds.has(rowId);
 			const isExpanded = this.expandedIds.has(rowId);
 			const hasError = this.rowErrors.has(rowId);
@@ -192,7 +219,7 @@ var URichTable = class URichTable extends LitElement {
           ` : ""}
           ${this.columns.map((col, colIdx) => this._renderCell(row, rowIdx, col, colIdx))}
           <td class="actions-cell">
-            <span style="cursor:pointer;color:#94a3b8" @click=${() => this._onRowMenu(row)}>⋯</span>
+            <span class="row-menu" @click=${() => this._onRowMenu(row)}>⋯</span>
           </td>
         </tr>
         ${isExpanded && this.detailRenderer ? html`
@@ -201,7 +228,7 @@ var URichTable = class URichTable extends LitElement {
           </tr>
         ` : ""}
         ${hasError ? html`
-          <tr><td colspan=${this._colSpan()} style="padding:2px 8px;background:#fef2f2;color:#ef4444;font-size:11px;">
+          <tr><td colspan=${this._colSpan()} class="row-error-cell">
             ${this.rowErrors.get(rowId)}
           </td></tr>
         ` : ""}
@@ -264,7 +291,7 @@ var URichTable = class URichTable extends LitElement {
 	_renderNewRow() {
 		return html`
       <tr class="new-row">
-        ${this.selectable ? html`<td class="checkbox-cell"><span style="color:#86efac">+</span></td>` : ""}
+        ${this.selectable ? html`<td class="checkbox-cell"><span class="new-row-marker">+</span></td>` : ""}
         ${this.expandable ? html`<td></td>` : ""}
         ${this.columns.map((col, colIdx) => html`
           <td>
@@ -287,7 +314,7 @@ var URichTable = class URichTable extends LitElement {
 		const end = Math.min(this.currentPage * this.pageSize, this.totalCount);
 		return html`
       <div class="pagination">
-        <span>전체 ${this.totalCount.toLocaleString()}건 중 ${start}-${end} 표시</span>
+        <span>${this.pageInfoFormatter(this.totalCount, start, end)}</span>
         <div class="page-buttons">
           <button ?disabled=${this.currentPage <= 1} @click=${() => this._onPageChange(this.currentPage - 1)}>◀</button>
           ${this._getPageNumbers(totalPages).map((p) => html`
@@ -306,7 +333,7 @@ var URichTable = class URichTable extends LitElement {
     `;
 	}
 	_onSelectAll(e) {
-		if (e.target.checked) this.selectedIds = new Set(this.data.map((r) => r._id));
+		if (e.target.checked) this.selectedIds = new Set(this.data.map((r, i) => this._rowId(r, i)));
 		else this.selectedIds = /* @__PURE__ */ new Set();
 		this._fireSelectionChange();
 	}
@@ -322,7 +349,7 @@ var URichTable = class URichTable extends LitElement {
 		const start = Math.min(this._lastSelectedIndex, rowIdx);
 		const end = Math.max(this._lastSelectedIndex, rowIdx);
 		const next = new Set(this.selectedIds);
-		for (let i = start; i <= end; i++) next.add(this.data[i]._id);
+		for (let i = start; i <= end; i++) next.add(this._rowId(this.data[i], i));
 		this.selectedIds = next;
 		this._fireSelectionChange();
 	}
@@ -445,7 +472,7 @@ var URichTable = class URichTable extends LitElement {
 		this.expandedIds = next;
 		this.dispatchEvent(new CustomEvent("row-expand", {
 			detail: {
-				row: this.data.find((r) => r._id === rowId),
+				row: this.data.find((r, i) => this._rowId(r, i) === rowId),
 				expanded
 			},
 			bubbles: true,
@@ -588,7 +615,7 @@ var URichTable = class URichTable extends LitElement {
 		};
 	}
 	_selectAll() {
-		this.selectedIds = new Set(this.data.map((r) => r._id));
+		this.selectedIds = new Set(this.data.map((r, i) => this._rowId(r, i)));
 		this._fireSelectionChange();
 	}
 	static define(tagName = "u-rich-table") {
@@ -602,6 +629,11 @@ __decorate([property({ type: Number }), __decorateMetadata("design:type", Object
 __decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], URichTable.prototype, "currentPage", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], URichTable.prototype, "loading", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "emptyMessage", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "loadingMessage", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "filterPlaceholder", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "filterAllLabel", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], URichTable.prototype, "addRowLabel", void 0);
+__decorate([property({ attribute: false }), __decorateMetadata("design:type", Function)], URichTable.prototype, "pageInfoFormatter", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], URichTable.prototype, "selectable", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], URichTable.prototype, "editable", void 0);
 __decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], URichTable.prototype, "addable", void 0);