@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
208 lines (207 loc) • 8.63 kB
TypeScript
import { TypographyVariantProps } from '@sixbell-telco/sdk/directives/typography';
import { TableHeaderCheckboxComponent } from '../table-header-checkbox/table-header-checkbox.component';
import { TableRowCheckboxComponent } from '../table-row-checkbox/table-row-checkbox.component';
import * as i0 from "@angular/core";
/** Type definition for pagination display variants */
export type PaginationType = 'default' | 'dots';
/**
* @internal
* Generates base table classes with size variants
*/
export declare const tableContent: (props?: ({
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/** Possible table size variants */
export type TableContentSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;
/**
* @internal
* Generates table container classes with height variants
*/
export declare const tableContainer: (props?: ({
containerHeight?: "sm" | "md" | "lg" | "xl" | "auto" | "full" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/** Possible table container height values */
export type TableContainerHeightProps = 'auto' | 'full' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;
/** Configuration object for table styling variants */
export type TableVariantProps = {
size?: TableContentSizeProps;
containerHeight?: TableContainerHeightProps;
};
/**
* @internal
* Combines table content and container classes
*/
export declare const tableComponent: ({ size, containerHeight }?: TableVariantProps) => string;
/** Pagination configuration structure */
export type TablePagination = {
id: string;
currentPage: number;
itemsPerPage: number;
search: string;
};
/**
* A feature-rich data table component with sorting, pagination, and row selection
*
* @remarks
* Integrates with Tailwind CSS for styling and supports responsive layouts.
* Includes built-in pagination controls and checkbox selection functionality.
*
* @example
* ```html
* <st-table
* [data]="users"
* [totalItems]="100"
* [pagination]="{ currentPage: 1, itemsPerPage: 10 }"
* (pageChanged)="handlePageChange($event)"
* size="md"
* height="lg"
* zebra
* >
* <!-- Table columns and content -->
* </st-table>
* ```
*/
export declare class TableComponent {
/**
* Table size variant
* @defaultValue 'sm'
*/
size: import("@angular/core").InputSignal<TableContentSizeProps>;
/**
* Table container height preset
* @defaultValue 'auto'
*/
height: import("@angular/core").InputSignal<TableContainerHeightProps>;
/**
* Enable sticky header row
* @defaultValue false
*/
pinRows: import("@angular/core").InputSignal<boolean>;
/**
* Enable sticky first column
* @defaultValue false
*/
pinColumns: import("@angular/core").InputSignal<boolean>;
/**
* Apply zebra-striping to rows
* @defaultValue false
*/
zebra: import("@angular/core").InputSignal<boolean>;
/**
* Pagination control display variant
* @defaultValue 'default'
*/
paginatorType: import("@angular/core").InputSignal<PaginationType>;
/** @internal Info icon reference */
infoIcon: string;
/**
* Array of data items to display
* @defaultValue []
*/
data: import("@angular/core").InputSignal<unknown[]>;
/**
* Total number of items across all pages
* @defaultValue 0
*/
totalItems: import("@angular/core").InputSignal<number>;
/**
* Pagination configuration
* @defaultValue { id: 'paginator', currentPage: 1, itemsPerPage: 10, search: '' }
*/
pagination: import("@angular/core").InputSignal<TablePagination>;
/**
* Maximum number of pagination buttons to display
* @defaultValue 7
*/
maxSize: import("@angular/core").InputSignal<number>;
/** Event emitted when page changes */
pageChanged: import("@angular/core").OutputEmitterRef<number>;
/** Event emitted when page size changes */
pageSizeChanged: import("@angular/core").OutputEmitterRef<number>;
/**
* Show items per page selector
* @defaultValue true
*/
showItemsPerPage: import("@angular/core").InputSignal<boolean>;
/**
* Show entries count display
* @defaultValue true
*/
showEntries: import("@angular/core").InputSignal<boolean>;
/**
* Show pagination controls
* @defaultValue true
*/
showPagination: import("@angular/core").InputSignal<boolean>;
/**
* Show footer with additional information
* @defaultValue true
*/
showFooter: import("@angular/core").InputSignal<boolean>;
/**
* Controls whether table headers should overflow with horizontal scrolling (true)
* or wrap text normally (false)
* @defaultValue false
*/
allowHeaderOverflow: import("@angular/core").InputSignal<boolean>;
/**
* Computed display range for current page entries
* @example "1-10" of 100 entries
*/
paginationRange: import("@angular/core").Signal<string>;
/**
* Handles page navigation events
* @param page - New page number
*/
handlePageChange(page: number): void;
/**
* Handles page size changes
* @param size - New items per page value
*/
handlePageSizeChange(size: number): void;
/**
* @internal
* Computes table element classes based on current configuration
*/
tableClass: import("@angular/core").Signal<string>;
/**
* @internal
* Computes table container classes based on height input
*/
tableContainerClass: import("@angular/core").Signal<string>;
/**
* @internal
* Computes outer container classes based on size
*/
containerClass: import("@angular/core").Signal<string>;
/**
* @internal
* Computes typography variant for paginator text based on table size
*/
paginatorTextSize: import("@angular/core").Signal<TypographyVariantProps>;
/** @internal Reference to header checkbox component */
header: import("@angular/core").Signal<TableHeaderCheckboxComponent | undefined>;
/** @internal List of row checkbox components */
rows: import("@angular/core").Signal<readonly TableRowCheckboxComponent[]>;
/** @internal Track selected row identifiers */
identifiers: import("@angular/core").WritableSignal<Set<unknown>>;
/** Event emitted with array of selected item identifiers */
checkedItems: import("@angular/core").OutputEmitterRef<unknown[]>;
/** @internal Sync checkbox state with output */
checkEffect: import("@angular/core").EffectRef;
/**
* Toggle all row checkboxes
* @param value - Whether to check or uncheck all rows
*/
handleToggleAll(value: boolean): void;
/**
* Handle individual checkbox toggle
* @param value - Checkbox state
* @param identifier - Unique row identifier
*/
handleToggleCheckbox(value: boolean, identifier: unknown): void;
/** @internal Clear all selections */
private clearList;
static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "st-table", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "pinRows": { "alias": "pinRows"; "required": false; "isSignal": true; }; "pinColumns": { "alias": "pinColumns"; "required": false; "isSignal": true; }; "zebra": { "alias": "zebra"; "required": false; "isSignal": true; }; "paginatorType": { "alias": "paginatorType"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "showItemsPerPage": { "alias": "showItemsPerPage"; "required": false; "isSignal": true; }; "showEntries": { "alias": "showEntries"; "required": false; "isSignal": true; }; "showPagination": { "alias": "showPagination"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "allowHeaderOverflow": { "alias": "allowHeaderOverflow"; "required": false; "isSignal": true; }; }, { "pageChanged": "pageChanged"; "pageSizeChanged": "pageSizeChanged"; "checkedItems": "checkedItems"; }, ["header", "rows"], ["thead", "tbody"], true, never>;
}