import { LitElement, html } from 'lit';
import '../pagination/pagination.js';
/**
* Column definition for the data grid
*/
export interface DataGridColumn {
/** Unique identifier for the column */
id: string;
/** Column header text */
header: string;
/** Property path in the data object */
field?: keyof T | string;
/** Column width (px, %, auto, flex) */
width?: string | number;
/** Minimum column width */
minWidth?: number;
/** Maximum column width */
maxWidth?: number;
/** Column alignment */
align?: 'left' | 'center' | 'right';
/** Whether column is sortable */
sortable?: boolean;
/** Whether column is filterable */
filterable?: boolean;
/** Whether column is resizable */
resizable?: boolean;
/** Whether column is visible */
visible?: boolean;
/** Whether column is frozen/pinned */
frozen?: 'left' | 'right' | false;
/** Data type for sorting/filtering */
type?: 'string' | 'number' | 'date' | 'boolean' | 'custom';
/** Custom cell renderer */
cellRenderer?: (value: any, row: T, column: DataGridColumn) => string | ReturnType;
/** Custom header renderer */
headerRenderer?: (column: DataGridColumn) => string | ReturnType;
/** Custom sort function */
sortFn?: (a: T, b: T, direction: 'asc' | 'desc') => number;
/** Custom filter function */
filterFn?: (value: any, filterValue: any, row: T) => boolean;
/** Format function for display */
format?: (value: any, row: T) => string;
/** Whether cell is editable inline */
editable?: boolean;
/** Editor type for inline editing */
editorType?: 'text' | 'number' | 'select' | 'date' | 'boolean';
/** Options for select editor type */
editorOptions?: {
label: string;
value: any;
}[];
/** Validate edited value */
validate?: (value: any, row: T) => string | null;
}
/**
* Sort configuration
*/
export interface SortConfig {
field: string;
direction: 'asc' | 'desc';
}
/**
* Filter configuration
*/
export interface FilterConfig {
field: string;
operator: 'equals' | 'contains' | 'startsWith' | 'endsWith' | 'gt' | 'gte' | 'lt' | 'lte' | 'between';
value: any;
value2?: any;
}
/**
* Selection configuration
*/
export interface SelectionConfig {
mode: 'single' | 'multiple' | 'none';
selectedIds: Set;
}
/**
* Pagination configuration
*/
export interface PaginationConfig {
enabled: boolean;
page: number;
pageSize: number;
totalItems: number;
pageSizeOptions: number[];
}
/**
* Row group configuration
*/
export interface GroupConfig {
field: string;
label?: string;
collapsed?: boolean;
}
/**
* Inline edit state
*/
export interface EditState {
rowIndex: number;
columnId: string;
value: any;
originalValue: any;
error?: string;
}
/**
* @element ui-data-grid
*
* Advanced data grid component with sorting, filtering, pagination, and more.
*
* @fires row-select - Dispatched when row selection changes
* @fires sort-change - Dispatched when sort configuration changes
* @fires filter-change - Dispatched when filters change
* @fires page-change - Dispatched when page changes
* @fires column-resize - Dispatched when column is resized
* @fires column-reorder - Dispatched when columns are reordered
*
* @cssprop --grid-background - Background color of the grid
* @cssprop --grid-border-color - Border color
* @cssprop --grid-header-background - Header background color
* @cssprop --grid-header-text - Header text color
* @cssprop --grid-row-hover - Row hover background
* @cssprop --grid-row-selected - Selected row background
* @cssprop --grid-cell-padding - Cell padding
* @cssprop --grid-border-radius - Border radius
* @cssprop --grid-font-size - Base font size
* @cssprop --grid-row-height - Default row height
*/
export declare class NADataGrid extends LitElement {
static styles: import("lit").CSSResult;
/** Array of column definitions */
columns: DataGridColumn[];
/** Array of data rows */
data: any[];
/** Unique key property for each row */
rowKey: string;
/** Selection mode */
selectionMode: 'none' | 'single' | 'multiple';
/** Enable sorting */
sortable: boolean;
/** Enable filtering */
filterable: boolean;
/** Enable pagination */
paginated: boolean;
/** Page size */
pageSize: number;
/** Page size options */
pageSizeOptions: number[];
/** Current page (1-indexed) */
page: number;
/** Loading state */
loading: boolean;
/** Empty state message */
emptyMessage: string;
/** Enable virtual scrolling */
virtual: boolean;
/** Virtual scroll buffer size */
virtualBuffer: number;
/** Enable row hover effect */
hoverable: boolean;
/** Enable row click */
rowClickable: boolean;
/** Stripe odd/even rows */
striped: boolean;
/** Enable column reordering via drag and drop */
reorderable: boolean;
/** Enable column visibility toggle */
columnToggle: boolean;
/** Group rows by a field */
groupBy: string;
/** Accessible label for the grid */
ariaLabel: string;
/** ID of element describing the grid */
ariaDescribedby: string;
/** Current sort configuration */
private sortConfig;
/** Current filter configuration */
private filterConfig;
/** Selected row IDs */
private selectedIds;
/** Column widths (for resizing) */
private columnWidths;
/** Column order (for reordering) */
private columnOrder;
/** Drag state for column reorder */
private _dragColumnId;
private _dragOverColumnId;
/** Inline edit state */
private _editState;
/** Collapsed groups */
private _collapsedGroups;
/** Column visibility menu open */
private _columnMenuOpen;
connectedCallback(): void;
disconnectedCallback(): void;
private handleKeyDown;
/** Filter values */
private filterValues;
/** Current focused cell position */
private focusedCell;
/** Grid ID for ARIA */
private gridId;
private descriptionId;
/** Get visible columns */
private get visibleColumns();
/** Get filtered and sorted data */
private get processedData();
/** Get paginated data */
private get paginatedData();
/** Get total pages */
private get totalPages();
/** Get field value from row */
private getFieldValue;
/** Default sort function */
private defaultSort;
/** Default filter function */
private defaultFilter;
/** Handle header click for sorting */
private handleHeaderClick;
/** Handle row selection */
private handleRowSelect;
/** Handle select all */
private handleSelectAll;
/** Handle page change */
private handlePageChange;
/** Handle filter input */
private handleFilterInput;
private handleRowClick;
private _handleDragStart;
private _handleDragOver;
private _handleDragLeave;
private _handleDrop;
private _handleDragEnd;
private _getColumnOrder;
/** Get columns in the current order */
private get orderedVisibleColumns();
private _toggleColumnVisibility;
private _toggleColumnMenu;
private _startEdit;
private _handleEditInput;
private _handleEditKeydown;
private _commitEdit;
private _cancelEdit;
private _renderEditor;
private get _groupedData();
private _toggleGroup;
/** Render table header */
private renderHeader;
/** Render table body */
private renderBody;
/** Render a single data row */
private _renderDataRow;
/** Render footer with pagination */
private renderFooter;
render(): import("lit-html").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'ui-data-grid': NADataGrid;
}
}
//# sourceMappingURL=data-grid.d.ts.map