@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
151 lines (150 loc) • 6.09 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
import { PaginationState, RowSelectionState, SortingState } from '@tanstack/table-core';
import { Density } from '../types';
export interface ITableColumn {
/** Key to access data from row object */
accessor: string;
/** Custom cell renderer */
cellRenderer?: (value: unknown, row: unknown) => string | HTMLElement;
/** Class names for the column */
className?: string;
/** Header content - can be string or HTML */
header: string | HTMLElement;
/** Unique identifier for the column */
id: string;
/** Width style (e.g., '200px', '50%') */
width?: string;
/** Whether the column is sortable */
sortable?: boolean;
/** Built-in editor type to render when the cell is in edit mode. */
editor?: 'text' | 'number' | 'autocomplete' | 'date' | 'custom';
/** Extra props specific to the editor component. */
editorProps?: Record<string, unknown>;
/** Custom renderer invoked when editor === 'custom'. Must call onCommit with the new value. */
customEditorRenderer?: (value: unknown, onCommit: (val: unknown) => void, row: Record<string, unknown>) => HTMLElement | string;
/**
* Alternative to built-in editors: raw HTML string. `${value}` placeholder will
* be replaced with the current cell value.
*/
editorTemplate?: string;
/**
* Runs once after the editor element is added to the DOM. Gives full control
* for wiring events, populating data, etc.
*/
editorSetup?: (el: HTMLElement, row: Record<string, unknown>, commit: (newVal: unknown) => void) => void;
}
export interface IPaginationChangeEventDetail {
currentPage: number;
pageSize: number;
}
export declare class ModusWcTable {
private inheritedAttributes;
private table;
private tanStackColumns;
private globalClickHandler?;
private activeEditorElement?;
/** Reference to the host element */
el: HTMLElement;
/** Enable cell editing. Either a boolean (all rows) or a predicate per row. */
editable?: boolean | ((row: Record<string, unknown>) => boolean);
/** An array of column definitions. */
columns: ITableColumn[];
/** Custom CSS class to apply to the inner div. */
customClass?: string;
/** An array of data objects. */
data: Record<string, unknown>[];
/** The density of the table, used to save space or increase readability. */
density?: Density;
/** Enable hover effect on table rows. */
hover?: boolean;
/** The current page number in pagination (1-based index). */
currentPage: number;
/** Enable pagination for the table. */
paginated?: boolean;
/** Available options for the number of rows per page. */
pageSizeOptions: number[];
/** Show/hide the page size selector in pagination. */
showPageSizeSelector?: boolean;
/** Enable sorting functionality for sortable columns. */
sortable?: boolean;
/** Row selection mode: 'none' for no selection, 'single' for single row, 'multi' for multiple rows. */
selectable?: 'none' | 'single' | 'multi';
/** Array of selected row IDs. Used for controlled selection state. */
selectedRowIds?: string[];
/** Zebra striped tables differentiate rows by styling them in an alternating fashion. */
zebra?: boolean;
/** Accessibility caption for the table (visually hidden but available to screen readers). */
caption?: string;
/** Currently editing cell coordinates */
activeEditor?: {
rowIndex: number;
colId: string;
} | null;
/** Emits when cell editing starts. */
cellEditStart: EventEmitter<{
rowIndex: number;
colId: string;
}>;
/** Emits when cell editing is committed with the new value. */
cellEditCommit: EventEmitter<{
rowIndex: number;
colId: string;
newValue: unknown;
updatedRow: Record<string, unknown>;
}>;
/** Internal state for column sorting. */
sorting: SortingState;
/** Internal state for pagination. */
internalPagination: PaginationState;
/** Internal state for row selection. */
internalRowSelection: RowSelectionState;
/** Emits when a row is clicked. */
rowClick: EventEmitter<{
row: Record<string, unknown>;
index: number;
}>;
/** Emits when sorting changes with the new sorting state. */
sortChange: EventEmitter<SortingState>;
/** Emits when pagination changes with the new pagination state. */
paginationChange: EventEmitter<IPaginationChangeEventDetail>;
/** Emits when row selection changes with the selected rows and their IDs. */
rowSelectionChange: EventEmitter<{
selectedRows: Record<string, unknown>[];
selectedRowIds: string[];
}>;
handleCurrentPageChange(newValue: number): void;
handleDataChange(newData: Record<string, unknown>[]): void;
handleColumnsChange(newColumns: ITableColumn[]): void;
handleSortableChange(newSortable: boolean): void;
handlePaginatedChange(newPaginated: boolean): void;
handleSelectedRowIdsChange(newIds: string[] | undefined): void;
componentWillLoad(): void;
disconnectedCallback(): void;
private handleSortingChange;
private handlePaginationChange;
private handleRowSelectionChange;
private initializeTable;
private getClasses;
private handleRowClick;
private toggleRowSelection;
private handleHeaderClick;
private getTotalPages;
private handlePageChange;
private handlePageSizeOptionChange;
private renderCell;
private getPaginationSize;
private renderPageSizeSelector;
private renderPaginationInfo;
private isRowEditable;
/**
* Validate that the row index and column ID are valid
* @param rowIndex The row index to validate
* @param colId The column ID to validate
* @returns true if both row index and column ID are valid
*/
private validateRowAndColumn;
private enterEdit;
private commitEdit;
private setupEditorCell;
render(): any;
}