Skip to main content

选项和参数

网格选项#

export interface GridOptions {    // grid width, default is 100%    width?: string;    // grid height, default is 100%    height?: string;    // array of Column Definitions.    columns: ColumnsDef;    // a default column definition.    defaultColumnOption?: BaseColumnOptions;    // callback called when a column menu icon is clicked.    getColumnMenuItems?: (params: GetColumnMenuItemsParams) => MenuItem[] | undefined;    // default grid data    rows: RowData[];    // default column height, default is 30    headerHeight?: number;    // default row height, default is 28    rowHeight?: number | ((id: string) => number);    // min row height, default is 20    minRowHeight?: number;    // can a row height be adjusted by dragging    rowResizable?: boolean | ((id: string) => boolean);    // providing a CSS style for the rows.    rowStyle?: JSXInternal.CSSProperties;    // callback version of property rowStyle to set style for each row individually.    // function should return an object of CSS values.    getRowStyle?: (params: RowParams) => JSXInternal.CSSProperties;    // CSS class(es) for all rows. provide an array of strings (array of class names).    rowClass?: string[];    // callback version of property rowClass to set class(es) for each row individually.    // function should return an array of strings (array of class names).    getRowClass?: (params: RowParams) => string[];    // virtual grid overscan    overscanRowCount?: number; // default is 5    overscanColumnCount?: number; // default is 2    // virtual grid scroll     scrollThrottleRate?: number; // 100 (ms)    // whether to enable the grid drop-down to fill data, 'x' | 'y' | 'xy' | undefined    fillable?: Fillable;    // callback called when a cell is right clicked.    getContextMenuItems?: (params: GetContextMenuItemsParams) => MenuItem[];}

列定义#

export type ColumnDef = (ColumnGroupOptions | ColumnOptions);export type ColumnsDef = ColumnDef[];

列分组选项#

// definition of column grouping export interface ColumnGroupOptions {    // group id    id?: string;    // group name    headerName?: string;    // this is a padding    isPadding?: boolean;    // whether column grouping is collapsed by default, default is false    collapsed?: boolean;    // whether the column group can be collapsed, default is false    collapsible?: boolean;    // a subset of groups, can be multiple groups or columns    children: (ColumnGroupOptions | ColumnOptions)[];}

列选项#

// for column options overridden by columnOptionsSelectorexport interface OverridableColumnOptions {    // when a cell is read-only, the cellEditor will be invalid,    // and the value of the cell cannot be modified even if the drop-down fill is    readonly?: boolean;    // set to true to allow column dragging.    sortable?: boolean;    // format the reading and writing of cell data    transformer?: CellTransformer;    // cellRenderer to use for this column    cellRender?: ICellRenderer;    // cellEditor to use for this column    cellEditor?: ICellEditor;    // params to be passed to cell renderer and cell editor component    cellParams?: any;    // an object of css values for a particular cell.    cellStyle?: JSXInternal.CSSProperties;    // callback version of property cellStyle to set style for a particular cell.    // function should return an object of CSS values.    getCellStyle?: (params: CellParams) => JSXInternal.CSSProperties;    // class to use for the cell. can be an array of strings.    cellClass?: string[];    // callback version of property cellClass to set class(es) for a particular cell.    // function should return an array of strings (array of class names).    getCellClass?: (params: CellParams) => string[];    // an object of css values for a particular column title.    headerStyle?: JSXInternal.CSSProperties;    // callback version of property headerStyle to set style for a particular column title.    // function should return an object of CSS values.    getHeaderStyle?: (params: ColumnParams) => JSXInternal.CSSProperties;    // class to use for the column title. can be an array of strings.    headerClass?: string[];    // function should return an array of strings (array of class names).    getHeaderClass?: (params: ColumnParams) => string[];}
// BaseColumnOptions can be overridden by default column optionsexport interface BaseColumnOptions extends OverridableColumnOptions {    // column width, default is 200    width?: number;    // the minimum width supported when adjusting the column width, default is 100    minWidth?: number;    // use flex layout, let the column fill the remaining space by default    flex?: number;    // can the column width be adjusted by dragging    resizable?: boolean;    // whether the column is visible, default is true    visible?: boolean;    // 'left' | 'right' | undefined    pinned?: Pinned;    // set to true (or return true from function) to allow row dragging.    rowDragable?: boolean | ((param: CellParams) => boolean);    // columnOptionsSelector is a callback to apply different options to the same column of cells in different rows    columnOptionsSelector?: (params: ColumnSelectorParams) => OverridableColumnOptions;}
// column definitionexport interface ColumnOptions extends BaseColumnOptions {    // column id    field: string;    // column name    headerName?: string;}

RowData#

export interface RowData {    // row id    id: string;    [key: string]: any;}

GetColumnMenuItemsParams#

export interface GetColumnMenuItemsParams {    // the column that was clicked    column: string;    grid: Grid;}

GetContextMenuItemsParams#

export interface GetContextMenuItemsParams {    // the column that was clicked    column: string;    // the row that was clicked    row: string;    grid: Grid;}

MenuItem#

export interface MenuItem {    // is it a dividing line    separator?: boolean;    // disabled menu items    disabled?: boolean;    // display name    name?: string;    // icon    icon?: string;    // callback after the menu item is clicked    action?: () => void;    subMenus?: MenuItem[];}