Module Extensions
AdditionalData
(Extended from @revolist/revogrid
)
Add autoSizeColumnConfig property to AdditionalData interface
ts
interface AdditionalData {
autoSizeColumnConfig?: AutoSizeColumnConfig
}
ColumnRegular
(Extended from @revolist/revogrid
)
Add autoSize property to ColumnRegular interface
ts
interface ColumnRegular {
autoSize?: boolean
}
Plugin API
AutoSizeColumnConfig
ts
export type AutoSizeColumnConfig = {
// ui behavior mode
mode?: ColumnAutoSizeMode;
/**
* autoSize for all columns
* if allColumnes true all columns treated as autoSize, worse for performance
* false by default
*/
allColumns?: boolean;
/**
* assumption per characted size
* by default defined as 8, can be changed in this config
*/
letterBlockSize?: number;
/** make size calculation exact
* by default it based on assumption each character takes some space defined in letterBlockSize */
preciseSize?: boolean;
};
ColumnAutoSizeMode
ts
enum ColumnAutoSizeMode {
// increases column width on header click according the largest text value
headerClickAutosize = 'headerClickAutoSize',
// increases column width on data set and text edit, decreases performance
autoSizeOnTextOverlap = 'autoSizeOnTextOverlap',
// increases and decreases column width based on all items sizes, worst for performance
autoSizeAll = 'autoSizeAll'
}
AutoSizeColumnPlugin
The AutoSizeColumnPlugin
is a plugin for the RevoGrid framework that provides automatic column resizing functionality. It allows users to resize columns based on the content of the cells, providing a flexible and user-friendly interface for data presentation.
Features:
- Automatically resizes columns based on the content of the cells.
- Supports different modes of automatic resizing:
- Header click autosize: Resizes columns when the header is clicked.
- Text overlap autosize: Resizes columns when text is edited.
- All columns autosize: Resizes all columns based on the content of the cells.
Usage:
- Add the
AutoSizeColumnPlugin
to the grid's plugins array. - Configure the plugin using the
additionalData
property with theautoSizeColumnConfig
key.
Example
typescript
import { AutoSizeColumnPlugin } from '@revolist/revogrid-pro';
const grid = document.createElement('revo-grid');
grid.plugins = [AutoSizeColumnPlugin]; // Add the plugin to the grid
grid.additionalData = {
autoSizeColumnConfig: {
mode: ColumnAutoSizeMode.autoSizeOnTextOverlap,
},
};
ts
class AutoSizeColumnPlugin {
async setSource(source: DataType[]): Promise<void>;
getLength(len?: any): number;
afteredit(e: EditEvent);
afterEditAll(e: EditEvent);
getColumnSize(index: number, type: DimensionCols): number;
columnSet(columns: Record<DimensionCols, ColumnRegular[]>);
clearPromise();
isRangeEdit(e: EditEvent): e is BeforeRangeSaveDataDetails;
initiatePresizeElement(): HTMLElement;
destroy();
}