import { VNode } from '../../stencil-public-runtime'; import * as VegaComponents from '../../components'; import { JSXBase } from '../../stencil-public-runtime'; import { BreakpointsForPrefixType } from '../../types/ui.type'; /** * A virtual DOM node */ export declare type VegaTableNode = VNode; /** * Content that can be rendered in a table cell, supporting VNode, strings, or numbers. */ export declare type VegaTableCellNode = VegaTableNode | string | number; /** * Factory function for creating DOM elements within table cell renderers. * Supports both Vega components and standard JSX elements. */ export declare type VegaTableCreateElementFunction = (elementType: T, props?: T extends keyof VegaComponents.JSX.IntrinsicElements ? VegaComponents.JSX.IntrinsicElements[T] | { [attrName: string]: unknown; } : T extends keyof JSXBase.IntrinsicElements ? JSXBase.IntrinsicElements[T] : null, children?: VegaTableCellNode | VegaTableCellNode[]) => VegaTableNode; /** * Callback function to render custom content for table cells. * Provides access to the cell value, row data, and rendering utilities. */ export declare type VegaTableCellRenderFunction = (createElement: VegaTableCreateElementFunction, value: unknown, record: VegaTableDataSourceItem, index: number) => VegaTableCellNode; /** * Callback function to render form items in editable table cells. * Provides form context and row information for custom form field rendering. */ export declare type VegaTableCellFormItemRenderFunction = (createElement: VegaTableCreateElementFunction, value: unknown, record: VegaTableDataSourceItem, index: number, rowPayload: { rowForm: HTMLVegaFormElement; isNewRow: boolean; }) => VegaTableCellNode; /** * Comparator function for custom column sorting logic. * Returns negative (a < b), zero (a === b), or positive (a > b) values. */ export declare type VegaTableSortCompareFunction = (a: VegaTableDataSourceItem, b: VegaTableDataSourceItem) => number; /** * Horizontal alignment of table column contents. */ export declare type ColumnAlignType = 'left' | 'right' | 'center'; /** * Row spacing density affecting visual compactness of the table. */ export declare type VegaTableDensityType = 'default' | 'compact' | 'relaxed'; /** * Positioning options for table pagination controls. */ export declare type VegaTablePaginationPosition = 'bottom-left' | 'bottom-center' | 'bottom-right'; /** * Configuration for table pagination behavior and event handling. */ export declare type VegaTablePagination = { /** * Position where pagination controls should be rendered. */ position?: VegaTablePaginationPosition; /** * Event handler fired when current page changes. */ vegaChange?: (e: CustomEvent) => void; /** * Event handler fired when page size selection changes. */ vegaPageSizeChange?: (e: CustomEvent) => void; } & Partial>; /** * Column configuration for table data display and interaction. */ export declare type VegaTableColumnConfig = { /** * Unique identifier for the column. Defaults to prop value if not provided. */ key?: string; /** * Display label shown in column header. */ label: string; /** * Property name of the data object to bind to this column. */ prop?: string; /** * If you need remote sorting from backend, set to 'event' */ sorter?: VegaTableSorterConfig; /** * The default sort order of the column. */ sortOrder?: VegaTableSortOrderType; /** * A function that returns a React component. This is useful if you want to render a custom component in a cell. */ render?: VegaTableCellRenderFunction; /** * The breakpoint at which the column will be hidden. */ breakpoint?: VegaTableColumnBreakpoint; /** * Horizontal alignment of cell content within the column. */ align?: ColumnAlignType; /** * Fixed width dimension for the column (e.g., '200px' or '20%'). */ width?: string; /** * Overflow behavior for content exceeding column boundaries. */ overflow?: 'ellipsis' | 'scroll'; /** * Whether the table cell can be edited */ editable?: boolean; /** * Pin column position (left or right side) for horizontal scrolling. */ pinned?: VegaTablePinnedType; /** * Editable table cell's form item type */ formItemType?: VegaTableFormItemType; /** * Editable table cell's form item props */ formItemProps?: VegaTableFormItemProps; /** * Used for editable cell customize render in editing mode */ renderFormItem?: VegaTableCellFormItemRenderFunction; }; /** * Type alias for composite column configurations (grouping or leaf models). */ export declare type VegaTableGroupColumnConfig = VegaTableColumnGroupingModel | VegaTableColumnGroupingLeafModel; /** * Represents a group header node in `groupColumns`. * Use this type to define hierarchical headers (multi-row groups). */ export declare type VegaTableColumnGroupingModel = { /** * Unique identifier for the group node. */ key: string; /** * Text displayed in the group header. Its presence indicates this node is a non-leaf group. */ label: string; /** * Optional pinning applied to descendant leaf columns. * Note: `pinned` only takes effect if the group node is at the top level of `groupColumns`. */ pinned?: VegaTablePinnedType; /** * Nested group nodes or leaf references. * Leaf references must match a column `key` in `columns`. */ children?: (VegaTableColumnGroupingModel | VegaTableColumnGroupingLeafModel)[]; }; /** * Represents a leaf reference inside `groupColumns`. * Used to link a column from the flat `columns` array into a group. */ export declare type VegaTableColumnGroupingLeafModel = { /** * The `key` of the referenced column in `columns`. * If the key is missing, the renderer outputs an empty header cell. */ key: string; }; /** * Responsive breakpoint values for controlling column visibility. */ export declare type VegaTableColumnBreakpoint = BreakpointsForPrefixType; /** * Supported form component types for editable table cells. */ export declare type VegaTableFormItemType = 'input' | 'input-select' | 'stepper' | 'checkbox' | 'textarea' | 'combo-box' | 'date-picker' | 'time-picker'; /** * Callback function to generate form item properties based on table context. * Provides form instance and row data for dynamic prop configuration. */ export declare type VegaTableFormItemProps = (form: HTMLVegaFormElement, /** * record: current row data record * index: current row index */ payload: { record: VegaTableDataSourceItem; index: number; }) => VegaTableEditComponentProps; /** * Column sorting configuration supporting local comparators or remote sorting. */ export declare type VegaTableSorterConfig = VegaTableSortCompareFunction | 'event'; /** * Individual data record for table rows with flexible property support. */ export declare type VegaTableDataSourceItem = { /** * Use the `key` property to match data items with respective columns with the same `key` value. */ key?: string; } & Record; /** * Configuration for row selection behavior and event handling. */ export declare type VegaTableRowSelectionConfig = { /** * Whether to hide the select all checkbox. */ hideSelectAll?: boolean; /** * deprecated 'checkbox' of type, use 'multiple' instead */ type?: 'multiple' | 'single'; /** * @deprecated Please use event `vegaSelectChange` instead */ onSelectChange?: (selected: boolean, record: VegaTableDataSourceItem, selectedRows: VegaTableDataSourceItem[]) => void; /** * @deprecated Please use event `vegaSelectAllChange` instead */ onSelectAllChange?: (selected: boolean, selectedRows: VegaTableDataSourceItem[]) => void; }; /** * Direction order for table column sorting. */ export declare type VegaTableSortOrderType = 'desc' | 'asc'; /** * Current sorting state of a column. */ export declare type VegaTableSorterType = { prop: string; order: VegaTableSortOrderType; }; /** * Payload containing changed table sorting and filtering state. */ export declare type VegaTableChangePropType = { /** * Array of current sorting configurations for columns. */ sorters?: VegaTableSorterType[]; }; /** * Payload passed when a table row is clicked. */ export declare type VegaTableRowClickPropType = { record: VegaTableDataSourceItem; index: number; }; /** * Event details for row expansion state changes. */ export declare type VegaTableRowExpandEventDetail = { /** * The data record for the expanded/collapsed row. */ record: VegaTableDataSourceItem; /** * Whether the row is now expanded (true) or collapsed (false). */ expanded: boolean; }; /** * Payload for individual row selection state changes. */ export declare type VegaTableRowSelectProp = { /** * Row is selected or deselected */ selected: boolean; /** * Record of selected changed row */ record: VegaTableDataSourceItem; /** * Record array of selected rows */ selectedRows: VegaTableDataSourceItem[]; }; /** * Payload for select-all action state changes. */ export declare type VegaTableSelectAllProp = { /** * Whether all row are selected */ selected: boolean; /** * Record array of selected rows */ selectedRows: VegaTableDataSourceItem[]; }; /** * Internal properties of a table row element for rendering. */ export declare type VegaTableRowProps = { /** * Unique identifier for row tracking and selection. */ rowKey: string; /** * Zero-based index position of the row within visible data. */ index: number; /** * The data record associated with this row. */ record: VegaTableDataSourceItem; /** * Whether this is the last row in the data set. */ isLastRow: boolean; /** * Whether the row is visible in the current paginated view. */ isVisibleInCurrentPage?: boolean; }; /** * Props for editable table edit components. */ export declare type VegaTableEditComponentProps = { /** * Form element identifier for associating form controls. */ dataVegaForm?: string; } & Record; /** * Configuration for table scrolling behavior and fixed header/footer. */ export declare type VegaTableScrollConfig = { /** * Maximum height for the table container (enables vertical scrolling). * e.g. number: 100 -> will be translated to `100px` * e.g. string: '100vh' | 'calc(100vh - 20px)' */ maxHeight?: number | string; /** * The table header will be fixed if the `maxHeight` is existed and `fixedHeader` is not `false` */ fixedHeader?: boolean | undefined; /** * The table footer will be fixed if the `maxHeight` is existed and `fixedFooter` is not `false` */ fixedFooter?: boolean | undefined; }; /** * List of supported form field types for editable table cells. */ export declare const VegaTableEditableFieldTypes: VegaTableFormItemType[]; /** * Observer payload for table row expansion state changes. */ export declare type VegaTableExpandRowObserverPayload = { /** * Reference to the table row element. */ host: HTMLVegaTableRowElement; /** * Unique identifier of the expanded/collapsed row. */ rowKey: string; /** * Whether the row is currently expanded. */ expanded: boolean; }; /** * Observer payload for table row selection state changes. */ export declare type VegaTableRowSelectionObserverPayload = { /** * Reference to the table row element. */ host: HTMLVegaTableRowElement; /** * Unique identifier of the row whose selection changed. */ rowKey: string; /** * Whether the specific row is currently checked. */ checked?: boolean; /** * Whether no rows are currently checked. */ noneChecked?: boolean; }; /** * Observer payload for table row click events. */ export declare type VegaTableRowClickObserverPayload = { /** * Reference to the clicked table row element. */ host: HTMLVegaTableRowElement; /** * Unique identifier of the clicked row. */ rowKey: string; }; /** * Event details emitted when table header cell is clicked. */ export declare type VegaTableHeadCellClickEvent = { /** * The sort order applied after the click event. */ sortOrder: VegaTableSortOrderType; }; /** * Event details emitted when table row is clicked. */ export declare type VegaTableRowClickEvent = { /** * Unique identifier of the clicked row. */ rowKey: string; }; /** * Event details for table row expansion/collapse. */ export declare type VegaTableRowExpandEvent = { /** * Unique identifier of the expanded/collapsed row. */ rowKey: string; /** * Whether the row is now expanded (true) or collapsed (false). */ expanded: boolean; }; /** * Configuration for multi-column or single-column sorting behavior. */ export declare type VegaTableSortConfig = { /** * Table columns sorting support: allow multiple columns or single column sorting. */ type: 'multiple' | 'single'; /** * Specifies whether the unsorted state is disabled in column sorting. * If set to true, only 'asc' and 'desc' sorting directions are allowed, preventing the table from returning to an unsorted state. */ disableUnsorted?: boolean; }; /** * Event details emitted when a single row's selection state changes. */ export declare type VegaTableRowSelectEventDetail = { /** * Row is selected or deselected */ selected: boolean; /** * Record of selected changed row */ record: VegaTableDataSourceItem; /** * Records array of selected rows */ selectedRows: VegaTableDataSourceItem[]; }; /** * Event details emitted when the select-all action changes selection state. */ export declare type VegaTableRowSelectAllEventDetail = { /** * Whether all rows are selected */ selected: boolean; /** * Records array of selected rows */ selectedRows: VegaTableDataSourceItem[]; /** * Changed records array of selected rows */ changedRows: VegaTableDataSourceItem[]; }; /** * Observer payload for table header cell interactions. */ export declare type TableHeadCellObserverPayload = { /** * Reference to the table header cell element. */ host: HTMLVegaTableHeadCellElement; }; /** * Column pinning position for horizontal scrolling layout. */ export declare type VegaTablePinnedType = 'left' | 'right';