dap-design-system/dist/components/datatable/types/cell-content.d.ts

Official design system for the DÁP (dap.gov.hu)

import { TemplateResult } from 'lit';
/**
 * Simple primitive values that can be rendered directly
 */
export type CellContentValue = string | number | boolean | null | undefined;
/**
 * Cell content with inline styling
 * @example
 * {
 *   value: 'Active',
 *   style: { color: 'green', fontWeight: 500 },
 *   className: 'status-badge'
 * }
 */
export interface StyledCellContent {
    /** The content to display */
    value: CellContentValue;
    /** Inline styles to apply (CSS-in-JS or Record) */
    style?: Partial<CSSStyleDeclaration> | Record<string, string | number>;
    /** CSS class name(s) to apply */
    className?: string;
}
/**
 * Cell content as HTML string (sanitized by default)
 * @example
 * {
 *   html: '<dap-ds-badge variant="success">Active</dap-ds-badge>',
 *   sanitize: true
 * }
 */
export interface HtmlCellContent {
    /** HTML string to render */
    html: string;
    /** Whether to sanitize the HTML (default: true) */
    sanitize?: boolean;
}
/**
 * Cell content with custom render callback
 * Provides maximum flexibility for framework integration
 * @example
 * {
 *   render: (container) => {
 *     const badge = document.createElement('dap-ds-badge')
 *     badge.setAttribute('variant', 'success')
 *     badge.textContent = 'Active'
 *     container.appendChild(badge)
 *   },
 *   cleanup: () => {
 *     // Clean up resources
 *   }
 * }
 */
export interface RenderCallbackContent {
    /**
     * Callback to render content into the container
     * @param container - The DOM element to render into
     */
    render: (container: HTMLElement) => void;
    /**
     * Optional cleanup callback called when cell is removed
     * Use this to unmount components, remove listeners, etc.
     */
    cleanup?: () => void;
}
/**
 * All supported cell content formats
 *
 * Format 1: Primitive Values (string, number, boolean, null, undefined)
 * Format 2: Styled Objects ({ value, style, className })
 * Format 3: DOM Elements (HTMLElement instances)
 * Format 4: HTML Strings ({ html, sanitize })
 * Format 5: Render Callbacks ({ render, cleanup })
 * Format 6: Lit Templates (TemplateResult from 'lit')
 */
export type CellContent = CellContentValue | StyledCellContent | HtmlCellContent | RenderCallbackContent | HTMLElement | TemplateResult;