import TerraElement from '../../internal/terra-element.js'; import TerraLoader from '../loader/loader.component.js'; import type { CSSResultGroup } from 'lit'; import { type GridApi, type GridOptions, type IDatasource, type ColDef, type CsvExportParams, type ExcelExportParams } from 'ag-grid-community'; /** * @summary A flexible data grid component built on AG Grid with support for various data sources and row models. * @documentation https://terra-ui.netlify.app/components/data-grid * @status experimental * @since 1.0 * * @dependency ag-grid-community * @dependency terra-loader * * @csspart base - The component's base wrapper. * @csspart grid - The AG Grid container element. * @csspart loading - The loading overlay container. * * @cssproperty --terra-data-grid-height - The height of the grid (default: 400px). * @cssproperty --terra-data-grid-border-color - Border color using HDS tokens. * @cssproperty --terra-data-grid-header-background - Header background color. * * @event terra-grid-ready - Emitted when the grid is initialized and ready. * @event terra-selection-changed - Emitted when row selection changes. * @event terra-sort-changed - Emitted when column sorting changes. * @event terra-filter-changed - Emitted when column filters change. * @event terra-row-clicked - Emitted when a row is clicked. * @event terra-row-double-clicked - Emitted when a row is double-clicked. * @event terra-cell-clicked - Emitted when a cell is clicked. * @event terra-cell-value-changed - Emitted when a cell value is edited. */ export default class TerraDataGrid extends TerraElement { #private; static styles: CSSResultGroup; static dependencies: { 'terra-loader': typeof TerraLoader; }; /** * AG Grid options configuration object. * This is the primary way to configure the grid. * Must be set via JavaScript (not as an attribute). */ gridOptions?: GridOptions; /** * Column definitions for the grid. * Alternative to setting columnDefs in gridOptions. * Must be set via JavaScript (not as an attribute). */ columnDefs?: ColDef[]; /** * Row data for client-side row model. * Must be set via JavaScript (not as an attribute). */ rowData?: T[]; /** * Datasource for infinite scroll row model. * Must be set via JavaScript (not as an attribute). */ datasource?: IDatasource; /** * Height of the grid in pixels or CSS units. * Default: 400px */ height: string; /** * Row model type: 'clientSide', 'infinite', or 'serverSide'. * Default: 'clientSide' */ rowModelType: 'clientSide' | 'infinite' | 'serverSide'; /** * Theme for AG Grid: 'alpine', 'alpine-dark', 'balham', 'balham-dark', 'material', 'quartz'. * Default: 'alpine' */ theme: string; /** * Whether to show loading overlay when data is being fetched. * Default: false */ showLoading: boolean; isLoading: boolean; connectedCallback(): void; disconnectedCallback(): void; firstVisible(): void; updated(changedProperties: Map): void; /** * Get the AG Grid API instance. * Useful for programmatic control of the grid. */ getGridApi(): GridApi | undefined; /** * Refresh the grid data. * For infinite scroll, purges cache and refetches. */ refresh(): void; /** * Export grid data to CSV. */ exportToCsv(options?: CsvExportParams): void; /** * Export grid data to Excel. * Note: Requires AG Grid Enterprise license. */ exportToExcel(options?: ExcelExportParams): void; render(): import("lit-html").TemplateResult<1>; }