Angular Data Grid Headless Table

The Data Grid is a thin, styled layer over a headless table engine. When the built-in chrome isn’t enough, turn it off and drive the grid from your own UI through the component’s table property — the same instance the grid renders from.

import { Component, viewChild } from '@angular/core'
import { DataGridComponent } from '@coreui/angular-data-grid'

@Component({
  selector: 'app-users',
  imports: [DataGridComponent],
  template: `
    <!-- turn off built-in chrome you want to replace -->
    <c-data-grid [columns]="columns" [items]="items" [pagination]="false" />
  `
})
export class UsersComponent {
  private readonly grid = viewChild.required(DataGridComponent)

  // Drive state imperatively through the underlying table instance:
  example() {
    this.grid().table.setPageIndex(3)
    this.grid().table.getFilteredRowModel()
    this.grid().table.setColumnPinning({ left: ['name'] })
    this.grid().table.getState().sorting
  }
}

When to reach for it

• Custom chrome. Build your own toolbar, pager or column chooser and wire it to grid.table.*. The slot templates hand you the same table in their template context — prefer a slot when you only need to replace one module.
• Reading state. grid.table.getState() exposes sorting, filters, selection, pagination, pinning, order and visibility as structured state.
• Imperative actions. Set the page, toggle a column, change pinning or apply a filter without waiting for user interaction.

Notes

Everything the built-in UI does routes through this same table, so your imperative calls and the built-in controls stay in sync. Grid outputs fire for headless-driven changes too.