Getting Started

MS Data Grid

Enterprise-grade Angular data grid component with advanced features like virtual scrolling, column pinning, filtering, and more.

Virtual Scrolling Column Pinning Advanced Filtering Row Grouping

Get Started View Demo

Installation

Install Package

npm install ms-data-grid

Dependencies

Angular CDK
ng-inline-svg
Bootstrap

Basic Usage

1. Import Module

import { DataGridModule } from 'ms-data-grid';

@NgModule({
  imports: [
    BrowserModule,
    DataGridModule,
    HttpClientModule
  ]
})

2. Use Component

<data-grid 
  [columns]="columns" 
  [dataSet]="dataSet"
  [rowHeight]="44"
  [showFilterRow]="true">
</data-grid>

API Properties

Property	Type	Default	Description
`dataSet`	any[]	-	Array of data objects to display
`columns`	any[]	-	Column definitions with field, header, type
`loading`	boolean	false	Show loading spinner overlay
`rowHeight`	number	44	Height of each row in pixels
`headerRowHeight`	number	50	Height of header row in pixels

Property	Type	Description
`headerBackgroundColor`	string	Background color for header row
`oddRowsBackgroundColor`	string	Background color for odd rows
`rowHoverColor`	string	Background color when hovering over rows
`bodyBackgroundColor`	string	Background color for table body

Property	Type	Default	Description
`dateFormat`	string	'MM/dd/yyyy'	Date format pattern for date columns (MM/dd/yyyy, dd/MM/yyyy, yyyy-MM-dd, etc.)
`currencySymbol`	string	'$'	Currency symbol to display for currency type columns
`horizintalScrollbarWidth`	string	'thin'	Width of horizontal scrollbar (thin, auto, none)
`verticalScrollbarWidth`	string	'thin'	Width of vertical scrollbar (thin, auto, none)

Property	Type	Default	Description
`showFilterRow`	boolean	false	Show filter inputs in header row
`showSerialNumber`	boolean	false	Show serial number column
`showRowsGrouping`	boolean	false	Enable row grouping functionality
`showColumnsGrouping`	boolean	false	Enable column grouping functionality
`showTaskbar`	boolean	true	Show taskbar with action buttons above the grid
`taskbarActions`	string[]	['verify', 'unverify', 'Google Translator', 'ChatGPT']	Array of action buttons to display in taskbar
`closeDropdown`	object	{ preset: { closed: true, loading: false } }	Control dropdown state for various grid components
`checkboxState`	object	{ reset: false }	Control checkbox reset state for grid selections

Events

Grid Events

Event	Type	Description
`genericEvent`	EventEmitter<any>	Emitted for various grid actions (row selection, pagination, cell edit, etc.)
`filterOptions`	EventEmitter<any>	Emitted when filters are applied or changed
`sortingOrderOptions`	EventEmitter<any>	Emitted when column sorting is changed
`changeLayout`	EventEmitter<any>	Emitted when table layout is changed (small, medium, large)
`tablePresetConfig`	EventEmitter<any>	Emitted when changing table preset configuration
`createUpdateConfigListing`	EventEmitter<any>	Emitted on each action for state management (resizing, drag-drop, etc.)

Event Usage Example

<data-grid 
  [columns]="columns" 
  [dataSet]="dataSet"
  (genericEvent)="onGridEvent($event)"
  (filterOptions)="onFilter($event)"
  (sortingOrderOptions)="onSort($event)">
</data-grid>

onGridEvent(event: any) {
  console.log('Event Type:', event.eventType);
  console.log('Data:', event.data);
  
  switch(event.eventType) {
    case 'ROW_SELECTED':
      this.handleRowSelection(event.data);
      break;
    case 'CELL_EDITED':
      this.handleCellEdit(event.data);
      break;
    case 'PAGE_CHANGED':
      this.handlePageChange(event.data);
      break;
  }
}

Examples

Basic Grid

<data-grid 
  [columns]="columns" 
  [dataSet]="employees">
</data-grid>

With Filtering

<data-grid 
  [columns]="columns" 
  [dataSet]="employees"
  [showFilterRow]="true">
</data-grid>

Custom Styling

<data-grid 
  [columns]="columns" 
  [dataSet]="employees"
  [headerBackgroundColor]="'#007bff'"
  [headerTextColor]="'#ffffff'"
  [oddRowsBackgroundColor]="'#f8f9fa'">
</data-grid>

Event Handling

<data-grid 
  [columns]="columns" 
  [dataSet]="employees"
  (genericEvent)="onGridEvent($event)"
  (filterOptions)="onFilter($event)">
</data-grid>

Custom Cell Renderer

Custom Cell Renderer allows you to create custom components for rendering cell content with complete control over appearance and behavior.

Basic Cell Renderer Setup

1. Column Configuration

Column with cellRenderer

{
  field: 'status',
  header: 'Status',
  type: 'string',
  width: 120,
  is_visible: true,
  cellRenderer: StatusCellComponent
}

2. Custom Component

StatusCellComponent

@Component({
  selector: 'app-status-cell',
  template: `
    
      {{ value }}
    
  `
})
export class StatusCellComponent {
  @Input() value: any;
  @Input() rowData: any;
  
  get badgeClass() {
    return {
      'bg-success': this.value === 'Active',
      'bg-danger': this.value === 'Inactive',
      'bg-warning': this.value === 'Pending'
    };
  }
}

Button Cell Renderer

Render action buttons in cells

Preview of button cell renderer

Progress Bar Cell

Display progress bars in cells

75%

Preview of progress cell renderer

Image Cell Renderer

Display images with fallback

Preview of image cell renderer

Rating Cell Renderer

Interactive star ratings

Preview of rating cell renderer

Complete Implementation Example

Component Setup

// app.component.ts
export class AppComponent {
  columns = [
    {
      field: 'name',
      header: 'Employee Name',
      type: 'string',
      width: 200
    },
    {
      field: 'avatar',
      header: 'Avatar',
      type: 'string',
      width: 80,
      cellRenderer: AvatarCellComponent
    },
    {
      field: 'status',
      header: 'Status',
      type: 'string',
      width: 120,
      cellRenderer: StatusCellComponent
    },
    {
      field: 'progress',
      header: 'Progress',
      type: 'number',
      width: 150,
      cellRenderer: ProgressCellComponent
    },
    {
      field: 'actions',
      header: 'Actions',
      type: 'string',
      width: 120,
      cellRenderer: ActionsCellComponent
    }
  ];
  
  dataSet = [
    {
      id: 1,
      name: 'John Doe',
      avatar: 'https://example.com/avatar1.jpg',
      status: 'Active',
      progress: 75,
      actions: null
    }
  ];
}

Cell Renderer Interface

// cell-renderer.interface.ts
export interface ICellRenderer {
  value: any;
  rowData: any;
  columnDef: any;
  rowIndex: number;
}

// Base implementation
@Component({
  template: ''
})
export abstract class BaseCellRenderer implements ICellRenderer {
  @Input() value: any;
  @Input() rowData: any;
  @Input() columnDef: any;
  @Input() rowIndex: number;
  
  @Output() cellEvent = new EventEmitter();
  
  protected emitEvent(eventType: string, data: any) {
    this.cellEvent.emit({
      eventType,
      data,
      rowData: this.rowData,
      columnDef: this.columnDef,
      rowIndex: this.rowIndex
    });
  }
}

Live Demo

Interactive Data Grid

Row Height

Header Background

Body Background

Even Row Color

Show Filter

Loading

Odd Row Color

Hover Color

Body Text Color

Header Text Color

Vertical Border

Serial #

Body Font Size

Header Font Size

Header Height

Pin First

Pin Last

Currency Symbol

Date Format

Left Pin Color

Right Pin Color

Show Checkbox

Animation Type

Row Animation

Hover Animation

Loading Animation

Global Text Ellipsis

Ellipsis Character Limit

Show Footer

Footer Height

Footer Background

Footer Text Color

Column Visibility

Column Properties

Generated Code (Updates Live)

Events Log

12:00:00 GRID_INITIALIZED Grid loaded with 8 rows

Features

High Performance

Virtual scrolling and optimized rendering for large datasets

Column Management

Drag & drop reordering, resizing, pinning, and grouping

Advanced Filtering

Built-in filters with custom operators and global search

Multi-Column Sorting

Sort by multiple columns with custom comparators

Inline Editing

Edit cells directly with validation support

Responsive Design

Optimized for all screen sizes with touch support