The <revo-grid> component is the main grid component that orchestrates all grid functionality. It serves as the primary interface for configuring and interacting with the data grid.
The revo-grid web component with comprehensive configuration options.
interface HTMLRevoGridElement extends StencilComponent {
// Data properties
columns: (ColumnRegular | ColumnGrouping)[];
source: DataType[];
pinnedTopSource: DataType[];
pinnedBottomSource: DataType[];
rowDefinitions: RowDefinition[];
// Row headers configuration
rowHeaders: RowHeaders | boolean;
// Configuration properties
readonly: boolean;
range: boolean;
resize: boolean;
canFocus: boolean;
useClipboard: boolean;
canMoveColumns: boolean;
canDrag: boolean;
applyOnClose: boolean;
// Display properties
theme: Theme;
rowSize: number;
colSize: number;
frameSize: number;
// Feature properties
autoSizeColumn: boolean | AutoSizeColumnConfig;
filter: boolean | ColumnFilterConfig;
sorting: SortingConfig;
grouping: GroupingOptions;
stretch: boolean | string;
// Advanced properties
editors: Editors;
plugins: GridPlugin[];
columnTypes: {[name: string]: ColumnType};
trimmedRows: Record<number, boolean>;
additionalData: AdditionalData;
// Virtualization control
disableVirtualX: boolean;
disableVirtualY: boolean;
// Accessibility and RTL
accessible: boolean;
rtl: boolean;
// Custom templates
focusTemplate: FocusTemplateFunc;
// Export functionality
exporting: boolean;
}Usage Example:
import { ColumnRegular, DataType } from '@revolist/revogrid';
const grid = document.querySelector('revo-grid') as HTMLRevoGridElement;
// Configure columns
grid.columns = [
{ prop: 'name', name: 'Name', autoSize: true },
{ prop: 'age', name: 'Age', columnType: 'numeric' },
{ prop: 'email', name: 'Email', filter: true }
];
// Set data
grid.source = [
{ name: 'John', age: 30, email: 'john@example.com' },
{ name: 'Jane', age: 25, email: 'jane@example.com' }
];
// Enable features
grid.range = true;
grid.resize = true;
grid.filter = true;
grid.theme = 'material';Methods for managing grid data and content.
/**
* Refresh data viewport for specific dimension type
* @param type - Dimension type to refresh or 'all' for all dimensions
*/
refresh(type?: DimensionRows | 'all'): Promise<void>;
/**
* Update specific cell data
* @param params - Cell update parameters
*/
setDataAt(params: SetDataAtDetails): Promise<void>;
/**
* Update column definitions
* @param cols - New column definitions
*/
updateColumns(cols: ColumnRegular[]): Promise<void>;
/**
* Add trimmed/hidden rows
* @param trimmed - Trimmed row configuration
* @param trimmedType - Type of trimmed operation
* @param type - Dimension type
*/
addTrimmed(
trimmed: Record<number, boolean>,
trimmedType?: string,
type?: DimensionRows
): Promise<CustomEvent>;
/**
* Get data source for specific dimension
* @param type - Dimension type (rgRow, rowPinStart, rowPinEnd)
*/
getSource(type?: DimensionRows): Promise<DataType[]>;
/**
* Get visible data source (excludes trimmed rows)
* @param type - Dimension type
*/
getVisibleSource(type?: DimensionRows): Promise<DataType[]>;Usage Example:
// Update cell data
await grid.setDataAt({
row: 0,
col: 'name',
val: 'Updated Name'
});
// Refresh grid
await grid.refresh();
// Get current data
const currentData = await grid.getSource();
console.log(currentData);Methods for programmatic navigation and scrolling.
/**
* Scroll to specific row index
* @param coordinate - Row coordinate
*/
scrollToRow(coordinate: number): Promise<void>;
/**
* Scroll to column by index
* @param coordinate - Column coordinate
*/
scrollToColumnIndex(coordinate: number): Promise<void>;
/**
* Scroll to column by property name
* @param prop - Column property
* @param dimension - Dimension type
*/
scrollToColumnProp(prop: ColumnProp, dimension?: DimensionCols): Promise<void>;
/**
* Scroll to specific cell coordinate
* @param cell - Cell coordinate
*/
scrollToCoordinate(cell: Cell): Promise<void>;
/**
* Get content size information
*/
getContentSize(): Promise<Cell>;Usage Example:
// Scroll to row 100
await grid.scrollToRow(100);
// Scroll to column by property
await grid.scrollToColumnProp('email');
// Scroll to specific cell
await grid.scrollToCoordinate({ x: 2, y: 50 });Methods for managing cell selection and focus.
/**
* Open cell editor for specific cell
* @param rgRow - Row index
* @param prop - Column property
* @param rowSource - Row source type
*/
setCellEdit(rgRow: number, prop: ColumnProp, rowSource?: DimensionRows): Promise<void>;
/**
* Set focus range for cells
* @param cellStart - Start cell coordinate
* @param cellEnd - End cell coordinate (optional for single cell)
* @param colType - Column dimension type
* @param rowType - Row dimension type
*/
setCellsFocus(
cellStart?: Cell,
cellEnd?: Cell,
colType?: DimensionCols,
rowType?: DimensionRows
): Promise<void>;
/**
* Clear grid focus
*/
clearFocus(): Promise<void>;
/**
* Get currently focused cell
*/
getFocused(): Promise<FocusedData | null>;
/**
* Get selected range information
*/
getSelectedRange(): Promise<RangeArea & AllDimensionType | null>;Usage Example:
// Set cell focus
await grid.setCellsFocus({ x: 0, y: 0 });
// Open editor for cell
await grid.setCellEdit(0, 'name');
// Get focused cell
const focused = await grid.getFocused();
console.log('Focused cell:', focused);
// Clear focus
await grid.clearFocus();Methods for working with columns.
/**
* Update column sorting
* @param column - Column to sort
* @param order - Sort order
* @param additive - Add to existing sort
*/
updateColumnSorting(
column: ColumnRegular,
order: 'asc' | 'desc',
additive: boolean
): Promise<void>;
/**
* Clear all sorting
*/
clearSorting(): Promise<void>;
/**
* Get all columns
*/
getColumns(): Promise<ColumnRegular[]>;
/**
* Get column store observer
* @param type - Dimension type
*/
getColumnStore(type?: DimensionCols): Promise<Observable<any>>;
/**
* Get source store observer
* @param type - Dimension type
*/
getSourceStore(type?: DimensionRows): Promise<Observable<any>>;Usage Example:
// Sort by column
const nameColumn = { prop: 'name', name: 'Name' };
await grid.updateColumnSorting(nameColumn, 'asc', false);
// Clear sorting
await grid.clearSorting();
// Get all columns
const columns = await grid.getColumns();
console.log('Current columns:', columns);Methods for accessing plugins and providers.
/**
* Get active plugins
*/
getPlugins(): Promise<PluginBaseComponent[]>;
/**
* Get all providers (data, column, dimension, etc.)
*/
getProviders(): Promise<PluginProviders>;
/**
* Refresh extra elements (plugins, overlays)
*/
refreshExtraElements(): Promise<void>;Usage Example:
// Get active plugins
const plugins = await grid.getPlugins();
console.log('Active plugins:', plugins);
// Get providers for custom operations
const providers = await grid.getProviders();
const dataProvider = providers.data;interface SetDataAtDetails {
row: number;
col: ColumnProp;
val: any;
rowSource?: DimensionRows;
}
interface Cell {
x: ColIndex; // Column index
y: RowIndex; // Row index
}
interface FocusedData {
cell: Cell;
val: any;
rowType: DimensionRows;
colType: DimensionCols;
}
interface RangeArea {
x: ColIndex; // Start column
y: RowIndex; // Start row
x1: ColIndex; // End column
y1: RowIndex; // End row
}
interface AllDimensionType {
rowType: DimensionRows;
colType: DimensionCols;
}interface AutoSizeColumnConfig {
mode: 'content' | 'header' | 'headerContent';
allColumns?: boolean;
letterBlockSize?: number;
maxSize?: number;
}
interface ColumnFilterConfig {
collection?: FilterCollection;
filterTypes?: FilterTypes;
}
interface SortingConfig {
sortBy?: ColumnProp[];
multiColumn?: boolean;
}
interface GroupingOptions {
expandedAll?: boolean;
groupBy?: ColumnProp;
sortingMode?: 'asc' | 'desc';
}
interface AdditionalData {
[key: string]: any;
}
interface Editors {
[key: string]: EditorCtr;
}type DimensionRows = 'rgRow' | 'rowPinStart' | 'rowPinEnd';
type DimensionCols = 'rgCol' | 'colPinStart' | 'colPinEnd';
type Theme = 'default' | 'material' | 'compact' | 'darkMaterial' | 'darkCompact' | string;// Row headers can be boolean or custom configuration
interface RowHeaders {
size?: number;
template?: RowHeaderTemplate;
}
type RowHeaderTemplate = (
createElement: HyperFunc<VNode>,
props: RowHeaderTemplateProps
) => VNode | VNode[] | string | void;
interface RowHeaderTemplateProps {
rowIndex: number;
model: DataType;
dimensionRow: DimensionRows;
}Usage Example:
// Enable simple row headers (numbers)
grid.rowHeaders = true;
// Custom row header template
grid.rowHeaders = {
size: 50,
template: (createElement, { rowIndex, model }) => {
return createElement('span', {
class: 'custom-row-header'
}, `Row ${rowIndex + 1}`);
}
};