Configuration
Overview

Beast Configuration

Configure your grid with a simple BeastGridConfig object. check the example for a complete example.

Parameters

theme

The theme name to use. The default theme is default.

onSortChange

(data: T[], columns: Column[]) => Promise<T[]

A callback function that is called when the sort changes. The function receives the sorted data and the sorted columns.

onSwapChange

(columns: ColumnStore, sortedColumns: Column[]) => void

A callback function that is called when a column is swapped.

onPivotChange

(pivot: Partial<PivotState>) => void

A callback function that is called when the pivot changes.

locale

The locale to use. The default locale is en.

Properties

export interface SortConfig {
    enabled: boolean;
    multiple: boolean;
}
export interface StyleConfig {
    maxHeight: number;
    border: boolean;
}
export interface RowConfig {
    height: number;
    border: boolean;
    events: Partial<RowEvents>;
}
export interface HeaderConfig {
    height: number;
    border: boolean;
    events: Partial<HeaderEvents>;
}
export interface dragOptions {
    autoScrollSpeed: number;
    autoScrollMargin: number;
}
export interface TreeConstructor {
    name: string;
    showOriginal: boolean;
    field: string;
    width: number;
    menu: Partial<MenuProps>;
}
 
export interface ToolBar {
    download: boolean;
    downloadExcel: boolean;
    grid: boolean;
    filter: boolean;
    mode: boolean;
    restore: boolean;
}
 
export interface Chart {
    defaultValues: Partial<{
        dataColumns: string[];
        categoryColumns: string[];
        chartType: 'line' | 'bar';
    }>;
    groupData: boolean;
    config: Partial<EChartsCoreOption>;
}
 
export interface PivotValue {
    field: string;
    operation: AggregationType;
}
 
export interface Pivot {
    enabled: boolean;
    pivotConfig?: {
        rows: string[];
        columns: string[];
        values: PivotValue[];
    };
}
export interface BeastGridConfig<T> extends Partial<TableStyles> {
    columnDefs: ColumnDef[];
    defaultColumnDef?: Partial<ColumnDef>;
    data: T;
    sort?: Partial<SortConfig>;
    row?: Partial<RowConfig>;
    header?: Partial<HeaderConfig>;
    style?: Partial<StyleConfig>;
    dragOptions?: Partial<dragOptions>;
    tree?: Partial<TreeConstructor>;
    topToolbar?: Partial<ToolBar>;
    bottomToolbar?: Partial<ToolBar>;
    chart?: Partial<Chart>;
    contextualMenu?: Partial<ContextualMenuProps>;
    appendModalToBoy?: boolean;
}

columnDefs

Array of column definitions. Check the column definitions for more information.

defaultColumnDef

Default column definition. Applied to all columns.

data

Array of data.

sort

Sort options. Check the sort config for more information.

row

Row options. Check the row config for more information.

header

Header options. Check the header config for more information.

style

Style options. Check the style config for more information.

dragOptions

Drag options. Check the drag options for more information.

tree

Tree options. If active all row groups will be represented as a tree drilldown. Check the tree constructor for more information.

topToolbar

Top toolbar options. Check the toolbar for more information.

bottomToolbar

Bottom toolbar options. Check the toolbar for more information.

chart

Chart options. Check the chart for more information.

contextualMenu

Contextual menu options. Check the contextual menu for more information.

appendModalToBody

Append the configuration modals to the body. Default is false.

ThemingColumnDef