Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Grid

Grid is a static 12-column dashboard and widget renderer for layouts defined by the application. It receives configs that map widget types to components, and items that define each widget id, type, column span, height, content, skeleton, and nested children.

Use it when the dashboard structure is predefined and users do not need to change tile order or customize the dashboard. If users can rearrange or change the dashboard, use Tiles as the dashboard layout host instead. Do not use it as a normal CSS layout helper for forms, pages, cards, or repeated elements; use Tailwind grid/flex classes for that.

PropTypeDefault
configs
Configuration for grid items
GridItemConfig[][]
items
Data items for the grid
GridItem[][]
plain
Whether to use plain style
booleanfalse
waitWhenAllItemsLoaded
Whether to wait until all items are loaded before displaying
booleanfalse
MethodDescription
markItemAsLoaded(id: any)Marks an item as loaded