Bringing back customRenderer

Author: petera2c

packages/angular/package.json

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

packages/angular/src/buildVanillaConfig.ts

@@ -28,10 +28,11 @@ export function buildVanillaConfig(
     wrapAngularRenderer<P>(component, appRef, injector);
 
   function transformColumnEditorConfig(cfg: AngularColumnEditorConfig): ColumnEditorConfig {
-    const { rowRenderer, ...cfgRest } = cfg;
+    const { rowRenderer, customRenderer, ...cfgRest } = cfg;
     return {
       ...cfgRest,
       ...(rowRenderer ? { rowRenderer: wrap(rowRenderer) as any } : {}),
+      ...(customRenderer ? { customRenderer: wrap(customRenderer) as any } : {}),
     };
   }
 

packages/angular/src/index.ts

@@ -15,6 +15,7 @@ export type {
   AngularFooterRenderer,
   AngularHeaderDropdown,
   AngularColumnEditorRowRenderer,
+  AngularColumnEditorCustomRenderer,
   AngularLoadingStateRenderer,
   AngularErrorStateRenderer,
   AngularEmptyStateRenderer,
@@ -36,6 +37,8 @@ export type {
   ColumnEditorConfig,
   ColumnEditorRowRenderer,
   ColumnEditorRowRendererComponents,
+  ColumnEditorCustomRenderer,
+  ColumnEditorCustomRendererProps,
   ColumnEditorRowRendererProps,
   ColumnEditorSearchFunction,
   ColumnType,

packages/angular/src/types.ts

@@ -12,6 +12,7 @@ import type {
   EmptyStateRendererProps,
   HeaderDropdownProps,
   ColumnEditorRowRendererProps,
+  ColumnEditorCustomRendererProps,
   ColumnEditorConfig,
   IconsConfig,
 } from "simple-table-core";
@@ -31,13 +32,16 @@ export type AngularHeaderRenderer = Type<HeaderRendererProps>;
 export type AngularFooterRenderer = Type<FooterRendererProps>;
 export type AngularHeaderDropdown = Type<HeaderDropdownProps>;
 export type AngularColumnEditorRowRenderer = Type<ColumnEditorRowRendererProps>;
+export type AngularColumnEditorCustomRenderer = Type<ColumnEditorCustomRendererProps>;
 export type AngularLoadingStateRenderer = Type<LoadingStateRendererProps>;
 export type AngularErrorStateRenderer = Type<ErrorStateRendererProps>;
 export type AngularEmptyStateRenderer = Type<EmptyStateRendererProps>;
 
 // ─── Column editor config override ───────────────────────────────────────────
-export interface AngularColumnEditorConfig extends Omit<ColumnEditorConfig, "rowRenderer"> {
+export interface AngularColumnEditorConfig
+  extends Omit<ColumnEditorConfig, "rowRenderer" | "customRenderer"> {
   rowRenderer?: AngularColumnEditorRowRenderer;
+  customRenderer?: AngularColumnEditorCustomRenderer;
 }
 
 // ─── HeaderObject override ────────────────────────────────────────────────────
@@ -98,4 +102,5 @@ export type {
   EmptyStateRendererProps,
   HeaderDropdownProps,
   ColumnEditorRowRendererProps,
+  ColumnEditorCustomRendererProps,
 };

packages/core/package.json

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

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

@@ -1,6 +1,8 @@
 import { SimpleTableConfig } from "../../types/SimpleTableConfig";
 import { CustomTheme, DEFAULT_CUSTOM_THEME } from "../../types/CustomTheme";
 import { DEFAULT_COLUMN_EDITOR_CONFIG } from "../../types/ColumnEditorConfig";
+import { ColumnEditorRowRenderer } from "../../types/ColumnEditorRowRendererProps";
+import { ColumnEditorCustomRenderer } from "../../types/ColumnEditorCustomRendererProps";
 import HeaderObject, { Accessor } from "../../types/HeaderObject";
 import {
   createAngleLeftIcon,
@@ -31,7 +33,8 @@ export interface MergedColumnEditorConfig {
   searchPlaceholder: string;
   allowColumnPinning: boolean;
   searchFunction?: (header: HeaderObject, searchText: string) => boolean;
-  rowRenderer?: any;
+  rowRenderer?: ColumnEditorRowRenderer;
+  customRenderer?: ColumnEditorCustomRenderer;
 }
 
 export class TableInitializer {
@@ -84,6 +87,7 @@ export class TableInitializer {
         DEFAULT_COLUMN_EDITOR_CONFIG.allowColumnPinning,
       searchFunction: config.columnEditorConfig?.searchFunction,
       rowRenderer: config.columnEditorConfig?.rowRenderer,
+      customRenderer: config.columnEditorConfig?.customRenderer,
     };
   }
 

packages/core/src/index.ts

@@ -55,6 +55,10 @@ import type {
   ColumnEditorRowRenderer,
   ColumnEditorRowRendererComponents,
 } from "./types/ColumnEditorRowRendererProps";
+import type {
+  ColumnEditorCustomRendererProps,
+  ColumnEditorCustomRenderer,
+} from "./types/ColumnEditorCustomRendererProps";
 import type HeaderDropdownProps from "./types/HeaderDropdownProps";
 import type { HeaderDropdown } from "./types/HeaderDropdownProps";
 import type { RowButtonProps } from "./types/RowButton";
@@ -91,6 +95,8 @@ export type {
   CellValue,
   ChartOptions,
   ColumnEditorConfig,
+  ColumnEditorCustomRenderer,
+  ColumnEditorCustomRendererProps,
   ColumnEditorRowRenderer,
   ColumnEditorRowRendererComponents,
   ColumnEditorRowRendererProps,

packages/core/src/types/ColumnEditorConfig.ts

@@ -1,5 +1,6 @@
 import HeaderObject from "./HeaderObject";
 import { ColumnEditorRowRenderer } from "./ColumnEditorRowRendererProps";
+import { ColumnEditorCustomRenderer } from "./ColumnEditorCustomRendererProps";
 
 /**
  * Custom search function for filtering columns in the column editor
@@ -28,10 +29,12 @@ export interface ColumnEditorConfig {
   allowColumnPinning?: boolean;
   /** Custom renderer for column editor row layout to reposition icons and labels */
   rowRenderer?: ColumnEditorRowRenderer;
+  /** Custom renderer for the entire column editor panel. Receives pre-built sections (search, list, reset) and headers. */
+  customRenderer?: ColumnEditorCustomRenderer;
 }
 
 export const DEFAULT_COLUMN_EDITOR_CONFIG: Required<
-  Omit<ColumnEditorConfig, "searchFunction" | "rowRenderer">
+  Omit<ColumnEditorConfig, "searchFunction" | "rowRenderer" | "customRenderer">
 > = {
   text: "Columns",
   searchEnabled: true,
@@ -43,4 +46,4 @@ export const DEFAULT_COLUMN_EDITOR_CONFIG: Required<
 export type MergedColumnEditorConfig = Required<
   Pick<ColumnEditorConfig, "text" | "searchEnabled" | "searchPlaceholder" | "allowColumnPinning">
 > &
-  Pick<ColumnEditorConfig, "searchFunction" | "rowRenderer">;
+  Pick<ColumnEditorConfig, "searchFunction" | "rowRenderer" | "customRenderer">;

packages/core/src/types/ColumnEditorCustomRendererProps.ts

@@ -0,0 +1,18 @@
+import type HeaderObject from "./HeaderObject";
+
+export interface ColumnEditorCustomRendererProps {
+  /** The current headers array */
+  headers: HeaderObject[];
+  /** Pre-built search input section, or null if search is disabled */
+  searchSection: HTMLElement | null;
+  /** Pre-built column list section with drag-and-drop, checkboxes, etc. */
+  listSection: HTMLElement;
+  /** Pre-built reset button section, or null if no default headers are configured */
+  resetSection: HTMLElement | null;
+  /** Function to reset columns to their default configuration */
+  resetColumns?: () => void;
+}
+
+export type ColumnEditorCustomRenderer = (
+  props: ColumnEditorCustomRendererProps,
+) => HTMLElement | string | null;