Cell

The Cell class in Vizzly role in the layout and structure of dashboards. It serves as a modular container for dashboard elements, providing a flexible approach to organizing content and visualizations.

Initialization

A Cell can be initialized with or without properties. Initializing a Cell without properties creates an empty space on the dashboard, which can be later filled with a user-defined component. This feature is particularly useful for customizing dashboard layouts or reserving space for future updates. When properties are provided, they define the cell's initial content and layout.

Basic Example

To create a new Cell instance in Vizzly, use the following TypeScript example:

import { Vizzly } from "@vizzly/services;
 
new Vizzly.Cell();

API

/**
* Constructs a new Cell instance.
*
* @param attributes The attributes of the cell.
*/
constructor(attributes?: CellAttributes)
 
/**
* Sets or updates the cell's component and column span.
*
* @param attributes The attributes to be set in the cell.
*/
set(attributes: CellAttributes)
 
 /**
* Sets the column span of the cell.
*
* @param colSpan The new column span for the cell.
*/
setColSpan(colSpan: number)
 
/**
* Sets the component of the cell.
*
* @param component The component to be set in the cell.
*/
setComponent(component: ViewServices.View)
 
/**
* Clears the component from the cell and optionally sets a new column span.
* Marks the cell as empty.
*
* @param colSpan The new column span for the cell. If not provided, defaults to 12.
*/
emptyCell(colSpan?: number)

Types

/**
 * Represents a CellAttributes type.
 * @param component - The component contained within the cell. Optional.
 * @param colSpan - The span of the cell in terms of columns. Defaults to 12.
 * @param localFilters - The local filters of the cell. Optional.
 */
export type CellAttributes = {
  component?: ViewServices.View;
  colSpan?: number;
  localFilters?: AdditionalFilter[];
};