bug fixes

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-table/angular",
-  "version": "3.0.0-beta.16",
+  "version": "3.0.0-beta.17",
   "main": "dist/cjs/index.js",
   "module": "dist/index.es.js",
   "types": "dist/types/angular/src/index.d.ts",

packages/angular/src/buildVanillaConfig.ts

@@ -1,9 +1,10 @@
 import type { ApplicationRef, EnvironmentInjector } from "@angular/core";
-import type { SimpleTableConfig, HeaderObject, ColumnEditorConfig } from "simple-table-core";
+import type { SimpleTableConfig, HeaderObject, ColumnEditorConfig, Row } from "simple-table-core";
 import type {
   SimpleTableAngularProps,
   AngularHeaderObject,
   AngularColumnEditorConfig,
+  AngularIconsConfig,
 } from "./types";
 import { wrapAngularRenderer } from "./utils/wrapAngularRenderer";
 
@@ -14,19 +15,36 @@ export function buildVanillaConfig(
 ): SimpleTableConfig {
   const {
     defaultHeaders,
+    rows,
     footerRenderer,
     emptyStateRenderer,
     errorStateRenderer,
     loadingStateRenderer,
     tableEmptyStateRenderer,
     headerDropdown,
     columnEditorConfig,
+    icons,
     ...rest
   } = config;
 
   const wrap = <P extends object>(component: any) =>
     wrapAngularRenderer<P>(component, appRef, injector);
 
+  function transformIcons(icons: AngularIconsConfig): NonNullable<SimpleTableConfig["icons"]> {
+    const result: NonNullable<SimpleTableConfig["icons"]> = {};
+    for (const [key, value] of Object.entries(icons)) {
+      if (value == null) continue;
+      if (typeof value === "string" || value instanceof HTMLElement || value instanceof SVGSVGElement) {
+        (result as any)[key] = value;
+      } else if ((value as any).ɵcmp) {
+        (result as any)[key] = wrap(value as any)({});
+      } else {
+        (result as any)[key] = value;
+      }
+    }
+    return result;
+  }
+
   function transformColumnEditorConfig(cfg: AngularColumnEditorConfig): ColumnEditorConfig {
     const { rowRenderer, customRenderer, ...cfgRest } = cfg;
     return {
@@ -66,6 +84,7 @@ export function buildVanillaConfig(
 
   const vanillaConfig: SimpleTableConfig = {
     ...rest,
+    rows: rows as Row[],
     defaultHeaders: defaultHeaders.map(transformHeader),
   };
 
@@ -113,5 +132,9 @@ export function buildVanillaConfig(
     vanillaConfig.columnEditorConfig = transformColumnEditorConfig(columnEditorConfig);
   }
 
+  if (icons !== undefined) {
+    vanillaConfig.icons = transformIcons(icons);
+  }
+
   return vanillaConfig;
 }

packages/angular/src/defaultHeadersFromCore.ts

@@ -0,0 +1,14 @@
+import type { HeaderObject } from "simple-table-core";
+import type { AngularHeaderObject } from "./types";
+
+export function defaultHeaderFromCore(header: HeaderObject): AngularHeaderObject {
+  return header as unknown as AngularHeaderObject;
+}
+
+export function defaultHeadersFromCore(headers: readonly HeaderObject[]): AngularHeaderObject[] {
+  return headers as unknown as AngularHeaderObject[];
+}
+
+export function mapToAngularHeaderObjects(columns: readonly object[]): AngularHeaderObject[] {
+  return columns as unknown as AngularHeaderObject[];
+}

packages/angular/src/index.ts

@@ -1,5 +1,11 @@
 // Component
 export { SimpleTableComponent } from "./lib/SimpleTableComponent";
+export { asRows } from "simple-table-core";
+export {
+  defaultHeaderFromCore,
+  defaultHeadersFromCore,
+  mapToAngularHeaderObjects,
+} from "./defaultHeadersFromCore";
 
 // Provider helper
 export { provideSimpleTable } from "./lib/provideSimpleTable";
@@ -9,6 +15,8 @@ export type {
   SimpleTableAngularProps,
   TableInstance,
   AngularHeaderObject,
+  AngularIconsConfig,
+  AngularIconSlot,
   AngularColumnEditorConfig,
   AngularCellRenderer,
   AngularHeaderRenderer,
@@ -31,6 +39,7 @@ export type {
   Cell,
   CellChangeProps,
   CellClickProps,
+  CellRenderer,
   CellRendererProps,
   CellValue,
   ChartOptions,

packages/angular/src/lib/SimpleTableComponent.ts

@@ -15,7 +15,6 @@ import { SimpleTableVanilla } from "simple-table-core";
 import type { TableAPI } from "simple-table-core";
 import { buildVanillaConfig } from "../buildVanillaConfig";
 import type { SimpleTableAngularProps, TableInstance, AngularHeaderObject } from "../types";
-import type { Row } from "simple-table-core";
 
 /**
  * SimpleTable — Angular adapter for simple-table-core.
@@ -36,7 +35,7 @@ import type { Row } from "simple-table-core";
   styles: [":host { display: block; }"],
 })
 export class SimpleTableComponent implements OnInit, OnChanges, OnDestroy {
-  @Input({ required: true }) rows!: Row[];
+  @Input({ required: true }) rows!: SimpleTableAngularProps["rows"];
   @Input({ required: true }) defaultHeaders!: AngularHeaderObject[];
 
   // All optional SimpleTableAngularProps inputs

packages/angular/src/types.ts

@@ -3,6 +3,7 @@ import type {
   SimpleTableProps,
   SimpleTableConfig,
   HeaderObject,
+  Row,
   TableAPI,
   CellRendererProps,
   HeaderRendererProps,
@@ -14,7 +15,6 @@ import type {
   ColumnEditorRowRendererProps,
   ColumnEditorCustomRendererProps,
   ColumnEditorConfig,
-  IconsConfig,
 } from "simple-table-core";
 
 // ─── Internal instance contract ───────────────────────────────────────────────
@@ -37,6 +37,23 @@ export type AngularLoadingStateRenderer = Type<LoadingStateRendererProps>;
 export type AngularErrorStateRenderer = Type<ErrorStateRendererProps>;
 export type AngularEmptyStateRenderer = Type<EmptyStateRendererProps>;
 
+/** Per-slot icon: Angular component or vanilla element/string (pass-through). */
+export type AngularIconSlot = Type<unknown> | SVGSVGElement | HTMLElement | string;
+
+export interface AngularIconsConfig {
+  drag?: AngularIconSlot;
+  expand?: AngularIconSlot;
+  filter?: AngularIconSlot;
+  headerCollapse?: AngularIconSlot;
+  headerExpand?: AngularIconSlot;
+  next?: AngularIconSlot;
+  prev?: AngularIconSlot;
+  sortDown?: AngularIconSlot;
+  sortUp?: AngularIconSlot;
+  pinnedLeftIcon?: AngularIconSlot;
+  pinnedRightIcon?: AngularIconSlot;
+}
+
 // ─── Column editor config override ───────────────────────────────────────────
 export interface AngularColumnEditorConfig
   extends Omit<ColumnEditorConfig, "rowRenderer" | "customRenderer"> {
@@ -45,33 +62,33 @@ export interface AngularColumnEditorConfig
 }
 
 // ─── HeaderObject override ────────────────────────────────────────────────────
+/**
+ * Column definition for `defaultHeaders`: core column metadata with Angular-only
+ * renderer fields. For trees from `simple-table-core`, use `defaultHeadersFromCore` /
+ * `mapToAngularHeaderObjects`.
+ */
 export interface AngularHeaderObject
   extends Omit<HeaderObject, "cellRenderer" | "headerRenderer" | "children" | "nestedTable"> {
   cellRenderer?: AngularCellRenderer;
   headerRenderer?: AngularHeaderRenderer;
   children?: AngularHeaderObject[];
-  nestedTable?: Omit<SimpleTableAngularProps, "rows">;
+  nestedTable?: Omit<
+    SimpleTableAngularProps,
+    | "rows"
+    | "loadingStateRenderer"
+    | "errorStateRenderer"
+    | "emptyStateRenderer"
+    | "tableEmptyStateRenderer"
+  >;
 }
 
 // ─── Top-level props ──────────────────────────────────────────────────────────
-// Mirrors SimpleTableProps with Angular-specific overrides.
-// `tableRef` is omitted — consumers use Angular's @ViewChild decorator instead:
-//   @ViewChild(SimpleTableComponent) tableRef!: SimpleTableComponent;
-//   then: this.tableRef.getAPI()?.sort(...)
+// Mirrors SimpleTableProps with Angular-specific overrides. Use @ViewChild on the
+// table component and `getAPI()` for the imperative TableAPI.
 export interface SimpleTableAngularProps
   extends Omit<
     SimpleTableProps,
-    | "tableRef"
-    | "allowAnimations"
-    | "expandIcon"
-    | "filterIcon"
-    | "headerCollapseIcon"
-    | "headerExpandIcon"
-    | "nextIcon"
-    | "prevIcon"
-    | "sortDownIcon"
-    | "sortUpIcon"
-    | "columnEditorText"
+    | "rows"
     | "defaultHeaders"
     | "footerRenderer"
     | "emptyStateRenderer"
@@ -80,16 +97,19 @@ export interface SimpleTableAngularProps
     | "tableEmptyStateRenderer"
     | "headerDropdown"
     | "columnEditorConfig"
+    | "icons"
   > {
   defaultHeaders: AngularHeaderObject[];
+  /** Row data: domain objects or core `Row[]`; cast inside the adapter. */
+  rows: ReadonlyArray<Row> | ReadonlyArray<object>;
   footerRenderer?: AngularFooterRenderer;
   loadingStateRenderer?: AngularLoadingStateRenderer;
   errorStateRenderer?: AngularErrorStateRenderer;
   emptyStateRenderer?: AngularEmptyStateRenderer;
   tableEmptyStateRenderer?: HTMLElement | string | null;
   headerDropdown?: AngularHeaderDropdown;
   columnEditorConfig?: AngularColumnEditorConfig;
-  icons?: IconsConfig;
+  icons?: AngularIconsConfig;
 }
 
 // Re-export vanilla prop types that consumers still need directly

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-table-core",
-  "version": "3.0.0-beta.16",
+  "version": "3.0.0-beta.17",
   "main": "dist/cjs/index.js",
   "module": "dist/index.es.js",
   "types": "dist/src/index.d.ts",

packages/core/src/core/SimpleTableVanilla.ts

@@ -21,7 +21,6 @@ import AriaAnnouncementManager from "../hooks/ariaAnnouncements";
 
 import { calculateScrollbarWidth } from "../hooks/scrollbarWidth";
 import { generateRowId, rowIdToString } from "../utils/rowUtils";
-import { checkDeprecatedProps } from "../utils/deprecatedPropsWarnings";
 import { deepClone } from "../utils/generalUtils";
 
 import {
@@ -106,8 +105,6 @@ export class SimpleTableVanilla {
     this.container = container;
     this.config = config;
 
-    checkDeprecatedProps(config);
-
     this.customTheme = TableInitializer.mergeCustomTheme(config);
     this.mergedColumnEditorConfig =
       TableInitializer.mergeColumnEditorConfig(config);
@@ -518,6 +515,7 @@ export class SimpleTableVanilla {
       getCollapsedRows: () => this.collapsedRows,
       getCollapsedHeaders: () => this.collapsedHeaders,
       getExpandedRows: () => this.expandedRows,
+      getHeaders: () => this.headers,
       getRowStateMap: () => this.rowStateMap,
       setColumnEditorOpen: (open: boolean) => {
         this.columnEditorOpen = open;
@@ -617,6 +615,11 @@ export class SimpleTableVanilla {
     this.render("update");
   }
 
+  /** @deprecated Use {@link update} — same behavior. */
+  updateConfig(config: Partial<SimpleTableConfig>): void {
+    this.update(config);
+  }
+
   destroy(): void {
     this.mounted = false;
     this.firstRenderDone = false;

packages/core/src/core/initialization/TableInitializer.ts

@@ -73,10 +73,7 @@ export class TableInitializer {
 
   static mergeColumnEditorConfig(config: SimpleTableConfig): MergedColumnEditorConfig {
     return {
-      text:
-        config.columnEditorConfig?.text ??
-        config.columnEditorText ??
-        DEFAULT_COLUMN_EDITOR_CONFIG.text,
+      text: config.columnEditorConfig?.text ?? DEFAULT_COLUMN_EDITOR_CONFIG.text,
       searchEnabled:
         config.columnEditorConfig?.searchEnabled ?? DEFAULT_COLUMN_EDITOR_CONFIG.searchEnabled,
       searchPlaceholder:

packages/core/src/core/rendering/RenderOrchestrator.ts

@@ -42,6 +42,7 @@ export interface RenderContext {
   getCollapsedRows: () => Map<string, number>;
   getCollapsedHeaders?: () => Set<Accessor>;
   getExpandedRows: () => Map<string, number>;
+  getHeaders: () => HeaderObject[];
   getRowStateMap: () => Map<string | number, RowState>;
   headerRegistry: Map<string, any>;
   headers: HeaderObject[];
@@ -655,6 +656,7 @@ export class RenderOrchestrator {
       getCollapsedRows: context.getCollapsedRows,
       getCollapsedHeaders: context.getCollapsedHeaders,
       getExpandedRows: context.getExpandedRows,
+      getHeaders: context.getHeaders,
       getRowStateMap: context.getRowStateMap,
       positionOnlyBody: context.positionOnlyBody,
       essentialAccessors: context.essentialAccessors,

packages/core/src/core/rendering/TableRenderer.ts

@@ -40,6 +40,7 @@ export interface TableRendererDeps {
   getCollapsedHeaders?: () => Set<Accessor>;
   getCollapsedRows: () => Map<string, number>;
   getExpandedRows: () => Map<string, number>;
+  getHeaders: () => HeaderObject[];
   getRowStateMap: () => Map<string | number, any>;
   headerRegistry: Map<string, any>;
   headers: HeaderObject[];
@@ -205,7 +206,7 @@ export class TableRenderer {
       },
       setHeaders: (value: any) => {
         if (typeof value === "function") {
-          deps.setHeaders(value(deps.headers));
+          deps.setHeaders(value(deps.getHeaders()));
         } else {
           deps.setHeaders(value);
         }

packages/core/src/index.ts

@@ -29,7 +29,6 @@ import type SharedTableProps from "./types/SharedTableProps";
 import type SortColumn from "./types/SortColumn";
 import type TableHeaderProps from "./types/TableHeaderProps";
 import type { TableAPI, SetHeaderRenameProps, ExportToCSVProps } from "./types/TableAPI";
-import type TableRefType from "./types/TableRefType";
 import type TableRowProps from "./types/TableRowProps";
 import type Theme from "./types/Theme";
 import type UpdateDataProps from "./types/UpdateCellProps";
@@ -81,6 +80,7 @@ import type { RowId } from "./types/RowId";
 import type { PinnedSectionsState } from "./types/PinnedSectionsState";
 
 export { SimpleTableVanilla };
+export { asRows } from "./utils/asRows";
 
 export type {
   Accessor,
@@ -149,7 +149,6 @@ export type {
   TableAPI,
   TableFilterState,
   TableHeaderProps,
-  TableRefType,
   TableRowProps,
   Theme,
   PinnedSectionsState,

packages/core/src/styles/base.css

@@ -967,6 +967,11 @@ input {
   color: white;
 }
 
+/* Set by createTableFooter when page controls exceed MAX_COMPACT_VISIBLE_PAGE_BUTTONS */
+.st-footer-pagination .st-page-btn.st-page-btn--compact-hidden {
+  display: none;
+}
+
 .st-page-ellipsis {
   display: inline-flex;
   align-items: center;

packages/core/src/styles/themes/modern-dark.css

@@ -226,18 +226,6 @@
   font-weight: 600;
 }
 
-/* Hide buttons beyond the 9th one to prevent overflow */
-.theme-modern-dark .st-page-btn:nth-child(n+10):not(.active) {
-  display: none;
-}
-
-/* Always show active button and adjacent buttons */
-.theme-modern-dark .st-page-btn.active,
-.theme-modern-dark .st-page-btn.active + .st-page-btn,
-.theme-modern-dark .st-page-btn:has(+ .st-page-btn.active) {
-  display: inline-flex;
-}
-
 /* Next/Prev buttons */
 .theme-modern-dark .st-next-prev-btn {
   padding: 6px 8px;