label

The name a screen reader says when the focus comes into the grid.

Type	string
Default	the bundle’s grid.label
Live update (update())	Yes
Angular	the [label] input
<dz-grid>	the label attribute
Declared in	packages/dom/src/settings.ts

What it does

A text in the reader’s language, given as is: the grid does not translate it. Left out, the grid takes its bundle’s grid.label (« Data grid »), which says nothing about the rows — name every grid that shares a page with another.

The name goes on the grid’s scrolling area, and into the names of what belongs to it: the pager (« Pagination, Invoices »), the status bar. Changing it with update() renames them at once.

Example

TypeScript

import { createGrid } from '@dzgrid/dom';
import { EN } from '@dzgrid/dom/locales/en';

type Invoice = { id: string; client: string; total: number };

const grid = createGrid<Invoice>(document.getElementById('invoices')!, {
  rows: [{ id: 'i1', client: 'Blue Mill', total: 1250 }],
  columns: [{ id: 'client', header: 'Client' }, { id: 'total', header: 'Total', type: 'number' }],
  getRowId: (i) => i.id,
  messages: EN,
  label: 'Invoices',
});

grid.update({ label: 'Invoices, March' });

Angular

import { Component } from '@angular/core';
import { DzGrid, type DzgColumnOrGroup } from '@dzgrid/angular';
import { EN } from '@dzgrid/dom/locales/en';

type Invoice = { id: string; client: string; total: number };

@Component({
  selector: 'app-invoices',
  imports: [DzGrid],
  template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="rowId" [messages]="messages" label="Invoices" />`,
})
export class Invoices {
  readonly rows: Invoice[] = [{ id: 'i1', client: 'Blue Mill', total: 1250 }];
  readonly columns: DzgColumnOrGroup<Invoice>[] = [{ id: 'client', header: 'Client' }, { id: 'total', header: 'Total', type: 'number' }];
  readonly rowId = (i: Invoice) => i.id;
  readonly messages = EN;
}

Web Component

<dz-grid label="Invoices"></dz-grid>

import '@dzgrid/element/define';
import type { DzGridElement } from '@dzgrid/element';
import { EN } from '@dzgrid/dom/locales/en';

type Invoice = { id: string; client: string; total: number };

const grid = document.querySelector<DzGridElement<Invoice>>('dz-grid')!;
grid.columns = [{ id: 'client', header: 'Client' }, { id: 'total', header: 'Total', type: 'number' }];
grid.getRowId = (i) => i.id;
grid.messages = EN;
grid.rows = [{ id: 'i1', client: 'Blue Mill', total: 1250 }];

See also

• messages — the bundle grid.label comes from.
• Accessibility.