Data Grid

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

Data Grid

The Data Grid widget provides a powerful grid for displaying and editing tabular data. It includes features like pagination, sorting, filtering, and selection.

Features

Data Binding: Easily bind to various data sources
Column Configuration: Customize columns with different rendering options
Pagination: Built-in client and server-side pagination
Sorting: Multi-column sorting capabilities
Filtering: Advanced filtering options
Selection: Single or multiple row selection
Inline Editing: Edit data directly in the grid
Row Grouping: Group rows by column values
Expandable Rows: Show additional details for each row
Virtualization: Efficiently render large datasets
Accessibility: Full keyboard navigation and ARIA support

Usage

<data-grid
  [data]="gridData"
  [columns]="gridColumns"
  [pageSize]="10"
  [sortable]="true"
  [filterable]="true"
  [selectable]="true"
  (rowClick)="handleRowClick($event)"
  (selectionChange)="handleSelectionChange($event)"
>
</data-grid>

Properties

Name	Type	Default	Description
data	any[]	[]	The data to display in the grid
columns	Column[]	[]	Column definitions
pageSize	number	10	Number of rows per page
sortable	boolean	true	Whether columns can be sorted
filterable	boolean	true	Whether columns can be filtered
selectable	boolean	false	Whether rows can be selected

Events

Name	Description
rowClick	Emitted when a row is clicked
selectionChange	Emitted when the selection changes

Column Configuration

Columns can be configured with various options:

import { Component } from '@angular/core';
import { DataGridComponent, ColumnDefinition } from '@widgets';

@Component({
  selector: 'app-grid-example',
  standalone: true,
  imports: [DataGridComponent],
  template: `
    <data-grid
      [data]="users"
      [columns]="columns"
      [pageSize]="25"
      (selectionChange)="onSelectionChange($event)">
    </data-grid>
  `
})
export class GridExampleComponent {
  users = [
    { id: 1, name: 'John Smith', email: '[email protected]', role: 'Admin', active: true },
    { id: 2, name: 'Jane Doe', email: '[email protected]', role: 'Editor', active: true },
    // More data...
  ];
  
  columns: ColumnDefinition[] = [
    { 
      field: 'id', 
      headerName: 'ID', 
      width: 70 
    },
    { 
      field: 'name', 
      headerName: 'Name', 
      width: 200, 
      filter: true, 
      sortable: true 
    },
    { 
      field: 'email', 
      headerName: 'Email', 
      width: 230 
    },
    { 
      field: 'role', 
      headerName: 'Role', 
      width: 120,
      cellRenderer: (params) => {
        const role = params.value;
        return `<span class="role-tag role-${role.toLowerCase()}">${role}</span>`;
      }
    },
    { 
      field: 'active', 
      headerName: 'Status', 
      width: 100,
      cellRenderer: (params) => {
        return params.value ? 
          '<span class="status-active">Active</span>' : 
          '<span class="status-inactive">Inactive</span>';
      }
    }
  ];
  
  onSelectionChange(selectedRows: any[]) {
    console.log('Selected rows:', selectedRows);
  }
}

Server-side Data

The Data Grid supports server-side pagination, sorting, and filtering:

import { Component } from '@angular/core';
import { DataGridComponent, ServerSideEvent } from '@widgets';
import { UserService } from './user.service';

@Component({
  selector: 'app-server-grid',
  standalone: true,
  imports: [DataGridComponent],
  template: `
    <data-grid
      [serverSide]="true"
      [columns]="columns"
      [totalRowCount]="totalUsers"
      (dataRequest)="onDataRequest($event)">
    </data-grid>
  `
})
export class ServerGridComponent {
  columns = [ /* column definitions */ ];
  totalUsers = 0;
  
  constructor(private userService: UserService) {}
  
  onDataRequest(event: ServerSideEvent) {
    const { page, pageSize, sortModel, filterModel } = event;
    
    this.userService.getUsers(page, pageSize, sortModel, filterModel)
      .subscribe(response => {
        event.success(response.data);
        this.totalUsers = response.total;
      });
  }
}