gridstack - v12.3.3
    Preparing search index...

    Interface GridStackOptions

    Defines the options for a Grid

    interface GridStackOptions {
        acceptWidgets?: string | boolean | ((element: Element) => boolean);
        alwaysShowResizeHandle?: boolean | "mobile";
        animate?: boolean;
        auto?: boolean;
        cellHeight?: numberOrString;
        cellHeightThrottle?: number;
        cellHeightUnit?: string;
        children?: GridStackWidget[];
        class?: string;
        column?: number | "auto";
        columnOpts?: Responsive;
        disableDrag?: boolean;
        disableResize?: boolean;
        draggable?: DDDragOpt;
        engineClass?: typeof GridStackEngine;
        float?: boolean;
        handle?: string;
        handleClass?: string;
        itemClass?: string;
        layout?: ColumnOptions;
        lazyLoad?: boolean;
        margin?: numberOrString;
        marginBottom?: numberOrString;
        marginLeft?: numberOrString;
        marginRight?: numberOrString;
        marginTop?: numberOrString;
        marginUnit?: string;
        maxRow?: number;
        minRow?: number;
        nonce?: string;
        placeholderClass?: string;
        placeholderText?: string;
        removable?: string | boolean;
        removableOptions?: DDRemoveOpt;
        resizable?: DDResizeOpt;
        row?: number;
        rtl?: boolean | "auto";
        sizeToContent?: boolean;
        staticGrid?: boolean;
        styleInHead?: boolean;
        subGridDynamic?: boolean;
        subGridOpts?: GridStackOptions;
    }
    Index

    Properties

    acceptWidgets? alwaysShowResizeHandle? animate? auto? cellHeight? cellHeightThrottle? cellHeightUnit? children? class? column? columnOpts? disableDrag? disableResize? draggable? engineClass? float? handle? handleClass? itemClass? layout? lazyLoad? margin? marginBottom? marginLeft? marginRight? marginTop? marginUnit? maxRow? minRow? nonce? placeholderClass? placeholderText? removable? removableOptions? resizable? row? rtl? sizeToContent? staticGrid? styleInHead? subGridDynamic? subGridOpts?

    Properties

    acceptWidgets?: string | boolean | ((element: Element) => boolean)

    Accept widgets dragged from other grids or from outside (default: false). Can be:

    • true: will accept HTML elements having 'grid-stack-item' as class attribute
    • false: will not accept any external widgets
    • string: explicit class name to accept instead of default
    • function: callback called before an item will be accepted when entering a grid
    // Accept all grid items
    acceptWidgets: true

    // Accept only items with specific class
    acceptWidgets: 'my-draggable-item'

    // Custom validation function
    acceptWidgets: (el) => {
      return el.getAttribute('data-accept') === 'true';
    }

    http://gridstack.github.io/gridstack.js/demo/two.html for complete example

    alwaysShowResizeHandle?: boolean | "mobile"

    possible values (default: mobile) - does not apply to non-resizable widgets false the resizing handles are only shown while hovering over a widget true the resizing handles are always shown 'mobile' if running on a mobile device, default to true (since there is no hovering per say), else false. See example

    animate?: boolean

    turns animation on (default?: true)

    auto?: boolean

    if false gridstack will not initialize existing items (default?: true)

    cellHeight?: numberOrString

    One cell height (default: 'auto'). Can be:

    • an integer (px): fixed pixel height
    • a string (ex: '100px', '10em', '10rem'): CSS length value
    • 0: library will not generate styles for rows (define your own CSS)
    • 'auto': height calculated for square cells (width / column) and updated live on window resize
    • 'initial': similar to 'auto' but stays fixed size during window resizing

    Note: % values don't work correctly - see demo/cell-height.html

    // Fixed 100px height
    cellHeight: 100

    // CSS units
    cellHeight: '5rem'
    cellHeight: '100px'

    // Auto-sizing for square cells
    cellHeight: 'auto'

    // No CSS generation (custom styles)
    cellHeight: 0
    cellHeightThrottle?: number

    throttle time delay (in ms) used when cellHeight='auto' to improve performance vs usability (default?: 100). A value of 0 will make it instant at a cost of re-creating the CSS file at ever window resize event!

    cellHeightUnit?: string

    (internal) unit for cellHeight (default? 'px') which is set when a string cellHeight with a unit is passed (ex: '10rem')

    children?: GridStackWidget[]

    list of children item to create when calling load() or addGrid()

    class?: string

    additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance. Note: only used by addGrid(), else your element should have the needed class

    column?: number | "auto"

    number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns. Note: for nested grids, it is recommended to use 'auto' which will always match the container grid-item current width (in column) to keep inside and outside items always the same. flag is NOT supported for regular non-nested grids.

    columnOpts?: Responsive

    responsive column layout for width:column behavior

    disableDrag?: boolean

    disallows dragging of widgets (default?: false)

    disableResize?: boolean

    disallows resizing of widgets (default?: false).

    draggable?: DDDragOpt

    allows to override UI draggable options. (default?: { handle?: '.grid-stack-item-content', appendTo?: 'body' })

    engineClass?: typeof GridStackEngine

    the type of engine to create (so you can subclass) default to GridStackEngine

    float?: boolean

    enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html)

    handle?: string

    draggable handle selector (default?: '.grid-stack-item-content')

    handleClass?: string

    draggable handle class (e.g. 'grid-stack-item-content'). If set 'handle' is ignored (default?: null)

    itemClass?: string

    additional widget class (default?: 'grid-stack-item')

    layout?: ColumnOptions

    re-layout mode when we're a subgrid and we are being resized. default to 'list'

    lazyLoad?: boolean

    true when widgets are only created when they scroll into view (visible)

    margin?: numberOrString

    gap between grid item and content (default?: 10). This will set all 4 sides and support the CSS formats below an integer (px) a string with possible units (ex: '2em', '20px', '2rem') string with space separated values (ex: '5px 10px 0 20px' for all 4 sides, or '5em 10em' for top/bottom and left/right pairs like CSS). Note: all sides must have same units (last one wins, default px)

    marginBottom?: numberOrString
    marginLeft?: numberOrString
    marginRight?: numberOrString
    marginTop?: numberOrString

    OLD way to optionally set each side - use margin: '5px 10px 0 20px' instead. Used internally to store each side.

    marginUnit?: string

    (internal) unit for margin (default? 'px') set when margin is set as string with unit (ex: 2rem')

    maxRow?: number

    maximum rows amount. Default? is 0 which means no maximum rows

    minRow?: number

    minimum rows amount which is handy to prevent grid from collapsing when empty. Default is 0. When no set the min-height CSS attribute on the grid div (in pixels) can be used, which will round to the closest row.

    nonce?: string

    If you are using a nonce-based Content Security Policy, pass your nonce here and GridStack will add it to the