import { ColumnDef, PaginationState, Row, RowData, RowSelectionState, SortingState } from '@tanstack/lit-table'; import { PropertyValueMap } from 'lit'; import { DdsElement } from '../../internal/dds-hu-element'; import { IconSize } from '../icon/icon.component'; import { SpinnerVariant } from '../spinner/spinner.component'; export type ExtendedColumnDef = ColumnDef & { textAlign?: string; headerTextAlign?: string; disableDefaultSorting?: boolean; }; type LoadingType = 'spinner' | 'skeleton'; /** * `dap-ds-datatable` * @summary A data table is a component that displays data in a tabular format. * @element dap-ds-datatable * @title - Data table * @generic T * * @event {{ sorting: SortingState }} dds-sorting-change - Fired when the sorting of the table changes. * @event {{ selection: RowSelectionState }} dds-selection-change - Fired when the selection of the table changes. * @event {{ pagination: PaginationState }} dds-pagination-change - Fired when the pagination of the table changes. * @event {{ row: Row }} dds-row-click - Fired when a row is clicked. * * @slot loading - The loading content of the table. * @slot empty - The empty content of the table. * * @csspart base - The main table container. * @csspart header - The header of the table. * @csspart header-row - The header row of the table. * @csspart header-cell - All cells of the header. * @csspart body - The body of the table. * @csspart empty - The empty content of the table. * @csspart loading - The loading content of the table. * @csspart row - All rows of the table. * @csspart cell - All cells of the table. * @csspart pager - The pager of the table. * @csspart pager-base - The base of the pager. * @csspart pager-first - The first button of the pager. * @csspart pager-previous - The previous button of the pager. * @csspart pager-next - The next button of the pager. * @csspart pager-last - The last button of the pager. * @csspart pager-page-size-select - The page size select of the pager. * * @cssproperty --dds-datatable-bg-color - Background color of the table. (default: var(--dds-background-neutral-subtle)). * @cssproperty --dds-datatable-border-color - Border color of the table cells. (default: var(--dds-border-neutral-divider)) * @cssproperty --dds-datatable-header-bg-color - Background color of the table header. (default: var(--dds-background-neutral-subtle)) * @cssproperty --dds-datatable-header-text-color - Text color of the table header. (default: var(--dds-text-neutral-strong)) * @cssproperty --dds-datatable-row-hover-bg-color - Background color of hovered rows. (default: var(--dds-background-brand-strong)) * @cssproperty --dds-datatable-row-selected-bg-color - Background color of selected rows. (default: var(--dds-background-brand-strong)) * @cssproperty --dds-datatable-cell-padding - Padding of table cells. (default: var(--dds-spacing-200)) * @cssproperty --dds-datatable-header-padding - Padding of header cells. (default: var(--dds-spacing-200)) * @cssproperty --dds-datatable-last-column-padding - Padding of the last column. (default: var(--dds-spacing-500)) * @cssproperty --dds-datatable-first-column-padding - Padding of the first column. (default: var(--dds-spacing-500)) * @cssproperty --dds-datatable-border-width - Width of table borders. (default: var(--dds-border-width-base)) * @cssproperty --dds-datatable-stripe-color - Background color for striped rows. (default: var(--dds-background-neutral-base)) * @cssproperty --dds-datatable-border-radius - Border radius of the table. (default: var(--dds-radius-base)) * @cssproperty --dds-datatable-shadow - Box shadow of the table. (default: none) * @cssproperty --dds-datatable-transition-duration - Duration of hover/selection transitions. (default: 0.2s) * @cssproperty --dds-datatable-z-index - Z-index of the table. (default: 1) * @cssproperty --dds-datatable-min-height - Minimum height of the table. (default: auto) * @cssproperty --dds-datatable-max-height - Maximum height of the table. (default: none) * @cssproperty --dds-datatable-overflow-x - Horizontal overflow behavior. (default: auto) * @cssproperty --dds-datatable-overflow-y - Vertical overflow behavior. (default: auto) */ export default class DapDSDataTable extends DdsElement { static readonly styles: import('lit').CSSResult; private readonly tableController; /** Data to display in the table */ data: RowData[]; /** Columns to display in the table */ columns: ExtendedColumnDef[]; /** Row key to use for row selection, this should be a unique key for each row */ rowKey: string; /** Enable row selection on the table, can be a boolean or a function that returns a boolean * @type {boolean | ((row: Row) => boolean)} */ enableRowSelection: boolean | ((row: Row) => boolean); /** Enable sorting on the table */ enableSorting: boolean; /** Enable manual sorting on the table */ manualSorting: boolean; /** Enables manual pagination. If this option is set to true, the table will not automatically paginate rows and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation. */ manualPagination: boolean; /** If set to true, pagination will be reset to the first page when page-altering state changes eg. data is updated, filters change, grouping changes, etc. This behavior is automatically disabled when manualPagination is true but it can be overridden by explicitly assigning a boolean value to the autoResetPageIndex table option. */ autoResetPageIndex: boolean; /** Enable row click on the table */ enableRowClick: boolean; /** Loading state of the table */ loading: boolean; /** Whether to enable striped rows */ enableStripedRows: boolean; /** Number of rows in the table */ rowCount?: number; /** Caption text for the table */ caption?: string; /** The type of loading to use * @type {'spinner' | 'skeleton'} */ loadingType: LoadingType; /** * The variant of the spinner. Only used if loadingType is 'spinner'. * @type {"neutral" | "brand" | "negative" | "positive" | "inverted"} */ loadingVariant: SpinnerVariant; /** * The size of the spinner. Only used if loadingType is 'spinner'. * @type {"xxl" | "xl" | "lg" | "md" | "sm" | "xs"} */ loadingSize: IconSize; /** The size of the spinner in pixels. This overrides the size attribute. Only used if loadingType is 'spinner'. */ loadingStaticSize?: number; /** The loading text. Only used if loadingType is 'spinner'. */ loadingText: string; /** The text to display when the table is empty. */ emptyText: string; /** Whether to disable the header when the table is empty. * @type {'true' | 'false'} */ disableHeaderOnEmpty: string; /** Whether to show the pager component when the table is empty. */ showPagerOnEmpty: boolean; /** Whether to show the pager component */ pager: boolean; /** Show the page size options. */ showPageSizeOptions: string; /** Show the page index. */ showPageIndex: string; /** Show the page count. */ showPageCount: string; /** Show the first button. */ showFirstButton: string; /** Show the previous button. */ showPreviousButton: string; /** Show the next button. */ showNextButton: string; /** Show the last button. */ showLastButton: string; /** The label of the first button */ firstButtonLabel: string; /** The label of the previous button */ previousButtonLabel: string; /** The label of the next button */ nextButtonLabel: string; /** The label of the last button */ lastButtonLabel: string; /** The function to determine the pager text * @type {(pageIndex: number, pageSize: number, totalRows: number) => string} */ pageStateText: (pageIndex: number, pageSize: number, totalRows: number) => string; /** Available page size options for the pager * @type {number[]} */ pageSizeOptions: number[]; /** Sorting state of the table */ sorting: SortingState; /** @ignore */ private _sorting; /** Selection state of the table */ rowSelection: RowSelectionState; /** @ignore */ private _rowSelection; /** Pagination state of the table */ pagination: PaginationState; /** @ignore */ private _pagination; /** Column sizing state of the table */ columnSizing?: Record; /** @ignore */ private _columnSizing; /** ID of element labeling the table */ ariaLabel: string | null; /** @ignore */ private resizeObserver?; /** @ignore */ private get isTableEmpty(); /** @ignore */ private get shouldDisableHeaderActions(); /** @ignore */ private readonly _statusMessage; /** @ignore */ debug: boolean; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; protected updated(_changedProperties: PropertyValueMap | Map): void; /** * Cleanup resize observer */ disconnectedCallback(): void; private readonly columnsMemo; private renderHeaderCell; private renderHeaderCellContent; private getHeaderCellStyle; private getSortIcon; private getSortTitle; private getAriaSortValue; /** * Render cell content with support for multiple formats * Supports: primitives, styled objects, HTMLElements, HTML strings, * render callbacks, and Lit templates */ private renderCell; private handleRowClick; private handleRowKeydown; private readonly renderColgroup; private readonly renderHeader; private readonly renderSkeletonRows; private readonly renderBody; protected render(): import('lit-html').TemplateResult; } export {};