TypeScript Types

TypeScript Types

All types are available from the package type declarations (types/*.d.ts).

Table Component

import type { DsxColumn } from '@bnotk/dsx/components/table.js';

interface DsxColumn {
  id: string;          // Field key in row data
  label: string;       // Column header text
  resizable?: boolean; // Allow column resize (default: true)
  sortable?: boolean;  // Allow column sort
  align?: 'left' | 'right' | 'center';
  width?: string;      // CSS width (e.g., '200px')
  hidden?: boolean;    // Initially hidden
}

Dropdown Typeahead

import type { DsxOption } from '@bnotk/dsx/components/dropdown-typeahead.js';

interface DsxOption {
  value: string;     // Option value
  label: string;     // Display label
  disabled?: boolean; // Prevent selection
}

Dialog

// Size variants
type DsxDialogSize = 'sm' | 'md' | 'lg';

// Status variants (for confirmation dialogs)
type DsxDialogStatus = 'warning' | 'error' | 'success' | '';

Accordion

// Variant types
type DsxAccordionVariant = 'default' | 'card';

Tooltip

type DsxTooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
type DsxTooltipTrigger = 'hover' | 'click' | 'focus';

Split Button

type DsxSplitVariant = 'primary' | 'secondary';

Event Details

All custom events use CustomEvent<T> with typed detail payloads:

// Table events
interface DsxSortChangeDetail { column: string; direction: 'asc' | 'desc' | '' }
interface DsxRowClickDetail { row: Record<string, unknown>; index: number }
interface DsxColumnToggleDetail { column: string; visible: boolean }

// Dialog events
// dsx-close: no detail

// Accordion item events
// dsx-expand: no detail
// dsx-collapse: no detail
// dsx-remove: no detail

// Datepicker events
interface DsxDateChangeDetail { value: string } // ISO date string

// Dropdown Typeahead events
interface DsxDropdownChangeDetail { value: string | string[] }
interface DsxSearchDetail { query: string }

// Form Wizard events
interface DsxStepChangeDetail { index: number; label: string }

// Side Panel events
interface DsxToggleDetail { open: boolean }

// Split Button events
interface DsxOptionSelectDetail { value: string }
// dsx-click: no detail