Table

Table

• __@actualTableVariantSymbol@5847

  AddedContext<ActualTableVariant>

• __@tableHeadersSharedDataSymbol@5848

  AddedContext<{ listSlot: ListSlotType; textContent: string; }[]>

• adoptedCallback

  () => void

• attributeChangedCallback

  (name: string) => void

• click

  Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.

  ({ sourceEvent }?: ClickOptions) => void

• connectedCallback

  () => void

• disconnectedCallback

  () => void

• hasNextPage

  Whether there's an additional page of data.

  boolean

• hasPreviousPage

  Whether there's a previous page of data.

  boolean

• loading

  Whether the table is in a loading state, such as initial page load or loading the next page in a paginated table. When true, the table could be in an inert state, which prevents user interaction.

  boolean

• paginate

  Whether to use pagination controls.

  boolean

• queueRender

  Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.

  () => void

• setAttribute

  (name: string, value: string) => void

• variant

  Sets the layout of the Table. - `list`: The Table is always displayed as a list. - `table`: The Table is always displayed as a table. - `auto`: The Table is displayed as a table on wide devices and as a list on narrow devices.

  "auto" | "list"

declare class Table extends PreactCustomElement implements TableProps {
  accessor variant: TableProps['variant'];
  accessor loading: TableProps['loading'];
  accessor paginate: TableProps['paginate'];
  accessor hasPreviousPage: TableProps['hasPreviousPage'];
  accessor hasNextPage: TableProps['hasNextPage'];
  /**
   * @private
   * The actual table variant, which is either 'table' or 'list'.
   */
  [actualTableVariantSymbol]: AddedContext<ActualTableVariant>;
  /** @private */
  [tableHeadersSharedDataSymbol]: AddedContext<
    {
      listSlot: TableHeaderProps['listSlot'];
      textContent: string;
    }[]
  >;

  constructor();
}

AddedContext

• addEventListener

  Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched. The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture. When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET. When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners. When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed. If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted. The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

  (type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void

• dispatchEvent

  Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

  (event: Event) => boolean

• removeEventListener

  Removes the event listener in target's event listener list with the same type, callback, and options.

  (type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void

• value

  T

declare class AddedContext<T> extends EventTarget {
  constructor(defaultValue: T);
  get value(): T;
  set value(value: T);
}

ActualTableVariant

'table' | 'list'

ListSlotType

'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'

ClickOptions

• sourceEvent

  The event you want to influence the synthetic click.

  ActivationEventEsque

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

• button

  number

• ctrlKey

  boolean

• metaKey

  boolean

• shiftKey

  boolean

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

TableSlots

• filters

  Additional filters to display in the table. For example, the `s-search-field` component can be used to filter the table data.

  HTMLElement

export interface TableSlots {
  /**
   * Additional filters to display in the table. For example, the `s-search-field` component can be used to filter the table data.
   */
  filters?: HTMLElement;
}

TableEvents

• nextpage

  CallbackEventListener<typeof tagName> | null

• previouspage

  CallbackEventListener<typeof tagName> | null

export interface TableEvents {
  previouspage: CallbackEventListener<typeof tagName> | null = null;
  nextpage: CallbackEventListener<typeof tagName> | null = null;
}

CallbackEventListener

(EventListener & {
      (event: CallbackEvent<T>): void;
    }) | null

CallbackEvent

Event & {
  currentTarget: HTMLElementTagNameMap[T];
}

TableBody

• adoptedCallback

  () => void

• attributeChangedCallback

  (name: string) => void

• click

  Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.

  ({ sourceEvent }?: ClickOptions) => void

• connectedCallback

  () => void

• disconnectedCallback

  () => void

• queueRender

  Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.

  () => void

• setAttribute

  (name: string, value: string) => void

declare class TableBody extends PreactCustomElement implements TableBodyProps {
  constructor();
}

ClickOptions

• sourceEvent

  The event you want to influence the synthetic click.

  ActivationEventEsque

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

• button

  number

• ctrlKey

  boolean

• metaKey

  boolean

• shiftKey

  boolean

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

TableCell

• adoptedCallback

  () => void

• attributeChangedCallback

  (name: string) => void

• click

  Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.

  ({ sourceEvent }?: ClickOptions) => void

• connectedCallback

  () => void

• disconnectedCallback

  () => void

• queueRender

  Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.

  () => void

• setAttribute

  (name: string, value: string) => void

declare class TableCell extends PreactCustomElement implements TableCellProps {
  constructor();
}

ClickOptions

• sourceEvent

  The event you want to influence the synthetic click.

  ActivationEventEsque

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

• button

  number

• ctrlKey

  boolean

• metaKey

  boolean

• shiftKey

  boolean

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

TableHeader

• adoptedCallback

  () => void

• attributeChangedCallback

  (name: string) => void

• click

  Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.

  ({ sourceEvent }?: ClickOptions) => void

• connectedCallback

  () => void

• disconnectedCallback

  () => void

• listSlot

  Content designation for the table's `list` variant. - `primary'`: The most important content. Only one column can have this designation. - `secondary`: The secondary content. Only one column can have this designation. - `kicker`: Content that is displayed before primary and secondary content, but with less visual prominence. Only one column can have this designation. - `inline`: Content that is displayed inline. - `labeled`: Each column with this designation displays as a heading-content pair.

  ListSlotType

• queueRender

  Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.

  () => void

• setAttribute

  (name: string, value: string) => void

declare class TableHeader
  extends PreactCustomElement
  implements TableHeaderProps
{
  accessor listSlot: TableHeaderProps['listSlot'];
  constructor();
}

ListSlotType

'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'

ClickOptions

• sourceEvent

  The event you want to influence the synthetic click.

  ActivationEventEsque

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

• button

  number

• ctrlKey

  boolean

• metaKey

  boolean

• shiftKey

  boolean

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

TableHeaderRow

• adoptedCallback

  () => void

• attributeChangedCallback

  (name: string) => void

• click

  Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.

  ({ sourceEvent }?: ClickOptions) => void

• connectedCallback

  () => void

• disconnectedCallback

  () => void

• queueRender

  Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.

  () => void

• setAttribute

  (name: string, value: string) => void

declare class TableHeaderRow
  extends PreactCustomElement
  implements TableHeaderRowProps
{
  constructor();
  /** @private */
  connectedCallback(): void;
  disconnectedCallback(): void;
}

ClickOptions

• sourceEvent

  The event you want to influence the synthetic click.

  ActivationEventEsque

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

• button

  number

• ctrlKey

  boolean

• metaKey

  boolean

• shiftKey

  boolean

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

TableRow

• adoptedCallback

  () => void

• attributeChangedCallback

  (name: string) => void

• click

  Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.

  ({ sourceEvent }?: ClickOptions) => void

• connectedCallback

  () => void

• disconnectedCallback

  () => void

• queueRender

  Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.

  () => void

• setAttribute

  (name: string, value: string) => void

declare class TableRow extends PreactCustomElement implements TableRowProps {
  constructor();
}

ClickOptions

• sourceEvent

  The event you want to influence the synthetic click.

  ActivationEventEsque

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

• button

  number

• ctrlKey

  boolean

• metaKey

  boolean

• shiftKey

  boolean

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}