@htmlbricks/hb-bundle/types/elements/table/webcomponent.type.d.ts

Single IIFE loader for all HTML Bricks hb-* web components from the jsDelivr CDN, with optional Subresource Integrity; includes agent/LLM docs and theme CSS variables.

import type { Component as FormComponent } from "../form/webcomponent.type";
import type { TTooltip } from "../tooltip/webcomponent.type";

export interface IFilter {
  key: string;
  value?: string;
  type?: "datetime" | "string" | "enum" | "number" | "ip";
  start?: Date;
  end?: Date;
}
export interface ITableHeader {
  label: string;
  key: string;
  /**
   * Column value kind. **`ip`**: IPv4 `A.B.C.D` or CIDR `A.B.C.D/p` (`p` 0–32); local sort is numeric on address then prefix.
   */
  type?: "datetime" | "string" | "enum" | "actions" | "number" | "ip";
  format?: string;
  search?: boolean;
  click?: boolean;
  select?: string[];
  nosort?: boolean;
  sortBy?: "asc" | "desc" | "none";
  truncateAt?: number;
  copyTxt?: boolean;
  tooltip?: TTooltip;
  /** When `true`, body cells (and loading skeleton) for this column use horizontal center alignment. */
  centerCell?: boolean;
  /**
   * When `true`, header cells for this column center the label / filters; the sort control
   * (when present) stays on the **left** of the title row.
   */
  centerHeader?: boolean;
}

export interface IRow {
  _id: string;
  _actions?: IActionButton[];
  _evidenced?: boolean;
  [k: string]: string | IActionButton[] | any;
}

export interface IActionButton {
  name: string;
  type: "icon" | "text";
  iconOrText: string;
  /** Bulma colour token; when omitted the button is `is-link`. Outline follows `btnFill` and active theme (see `btnFill`). */
  btnClass?: string;
  /**
   * When `true` / `"yes"`, filled (no `is-outlined`). When omitted, `false`, or `"no"`, `is-outlined` only while the **resolved** Bulma theme on this host is dark (`getComputedStyle(host)` for `--bulma-scheme-brightness` / related tokens, then `data-theme` / `.theme-*` / `prefers-color-scheme`).
   */
  btnFill?: boolean;
  disabled?: boolean;
  confirm?: {
    title: string;
    text?: string;
    confirmLabel: string;
    denyLabel?: string;
    content: string;
  };
  edit?: {
    title: string;
    text?: string;
    confirmLabel: string;
    denyLabel?: string;
    description?: string;
    schema: FormComponent["schema"];
  };
  tooltip?: TTooltip;
}

export type Component = {
  id?: string;
  style?: string;
  /** From HTML / `setAttribute`: only **`yes`** or **`no`** (or legacy `"true"` / `"false"`). Not a boolean attribute. */
  externalfilter?: string;
  rows: IRow[];
  size?: number;
  /** Current page index for pagination; **zero-based** (first page is `0`). */
  page?: number;
  /** Total number of pages (non-negative integer). */
  pages?: number;
  headers: ITableHeader[];
  actions?: IActionButton[];
  selectactions?: any[];
  selectrow?: string;
  enableselect?: string;
  disablepagination?: boolean;
  add_item?: boolean;
  i18nlang?: string;
  total?: number;
  selected?: string;
  /** Type of page size selector: "number" for free input, "select" for dropdown */
  page_size_type?: "number" | "select";
  /** Comma-separated list of page size options for select mode (e.g. "10,25,50,100") */
  page_size_options?: string;
  /** Default sort field value — if it matches a sortable column, that column is pre-selected with "default" direction (e.g. "title") */
  sort_default?: string;
  /** Custom label for the "Default" sort option in the pagination bar (e.g. "Relevance") */
  sort_default_label?: string;
  /** When true, hides the sort select and direction button from the pagination bar */
  disable_paginate_sort?: boolean;
  /** When true, sort direction only allows "asc" and "desc" (no "default" state) */
  sort_strict_direction?: boolean;
  /** Current sort direction */
  sort_direction?: "asc" | "desc" | "default";
  /**
   * When true (or web attribute `"yes"` / `"true"`), tbody shows Bulma skeleton rows
   * (count matches `size`, capped at 100) and a single `skeleton-block` covers `hb-paginate` (still mounted, hidden).
   */
  is_loading?: boolean;
  /**
   * When `"yes"`, columns use `table-layout: fixed` with text ellipsis on overflow.
   * When `"no"` (default), columns size dynamically (`table-layout: auto`).
   */
  fixed_columns?: string;
};

export type Events = {
  /** `page` is zero-based (first page = `0`). */
  pageChange: { page: number; pages: number };
  changePageSize: { page_size: number };
  removeFilter: { key: string };
  changeFilter: { filter: IFilter };
  tableCustomActionClick: { itemId: string; action: string };
  tableaction: { itemId: string; action: string };
  cellclick: { rowId: string; cellId: string };
  actiononselected: { key: string; selectedItems: string[] };
  clickonrow: { itemId: string };
  changeSort: {
    sortedBy: string | undefined;
    sortedDirection: "asc" | "desc" | "default";
  };
  showConfirmModal: { action: string; detail: { id: string; show: boolean } };
  showConfirmModalForm: {
    action: string;
    detail: { id: string; show: boolean };
  };
  confirmActionModalForm: { action: string; id: string; confirm: boolean };
  confirmActionModal: { action: string; id: string; confirm: boolean };
  clipboardCopyText: { text: string };
  addItem: { id: string };
};