GitHubGet started
v1.2.0

Angular data table

Table, Bro has its own package for Angular, @table-bro/angular: the component ‹table-bro-ng› renders the Custom Element ‹table-bro›, gives it the signal inputs cols, rows and conf, and turns its bro-action events into the outputs action and query. It works with the three skins: Angular Material, Vanilla Bootstrap and Vanilla HTML. The page below is the working page of the sample project samples/angular-material of the repository, with Angular 22 and Angular Material; StackBlitz opens it in the browser.

Loading
Items per page:
0 of 0

How do I install Table, Bro in Angular?

The steps of each skin; the component of the table is the same in all three.

Angular Material

  1. Install the packages

    The table and the parts it needs; a project without Angular Material adds it first with ng add @angular/material.

    npm install @table-bro/core @table-bro/angular @table-bro/angular-material @angular/elements

  2. Add the CSS

    To "styles" of angular.json:

    "styles": [
  "node_modules/@table-bro/core/dist/table-bro.min.css",
  "node_modules/@table-bro/angular-material/dist/table-bro.material.min.css"
]

  3. Register the skin and its elements

    In the providers of app.config.ts. The elements that only some tables use come with their functions: withTags() for tags, withSwitch() for switches, withToolbarMenu() for the menu of the toolbar; a project that registers the skin already adds the ones of a new table to the call.

    import type {ApplicationConfig} from '@angular/core';

import {provideTableBroMatSkin} from '@table-bro/angular-material';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTableBroMatSkin()
  ]
};

  4. Keep the theme of Angular Material

    The mat skin takes the theme of the application, as the components of Angular Material do: the table looks as a mat-table of the project, and a table in the dark theme takes the dark scheme of the theme. ng add @angular/material writes the theme into styles.scss; a project without it adds it:

    @use '@angular/material' as mat;

html {
  @include mat.theme((
    color: (
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: Roboto,
    density: 0,
  ));
}

  5. Load the fonts of the icons

    The mat skin shows the ligature icons of Material, as Angular Material asks; the cells and the dialogs of the page take the newer Material Symbols. In index.html:

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,300,0,0" rel="stylesheet">
Vanilla Bootstrap

  1. Install the packages

    The table and the parts it needs:

    npm install @table-bro/core @table-bro/angular @table-bro/bootstrap bootstrap @types/bootstrap

  2. Add the CSS

    To "styles" of angular.json:

    "styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@table-bro/core/dist/table-bro.min.css",
  "node_modules/@table-bro/bootstrap/dist/table-bro.bootstrap.min.css"
]

  3. Register the skin

    Once, in main.ts: the import registers the skin, which takes the classes of Bootstrap. The elements that only some tables use come with their functions: withTags() for tags, withSwitch() for switches; a project that registers the skin already adds the ones of a new table. A page may define them itself, as customElements.define('bro-bs-tags', BroBootstrapTagsComponent). With Angular server-side rendering, app.config.ts imports the package as well, import '@table-bro/bootstrap';, so that the server renders the skin too: Prerendering.

    import {useBootstrap}      from '@table-bro/bootstrap';
import {Dropdown, Tooltip} from 'bootstrap';

useBootstrap({Dropdown, Tooltip});
Vanilla HTML

  1. Install the packages

    The table and the parts it needs:

    npm install @table-bro/core @table-bro/angular @table-bro/native

  2. Add the CSS

    To "styles" of angular.json:

    "styles": [
  "node_modules/@table-bro/core/dist/table-bro.min.css",
  "node_modules/@table-bro/native/dist/table-bro.native.min.css"
]

  3. Register the skin

    Once, in main.ts: the import registers the skin. The elements that only some tables use come with their functions: withTags() for tags, withSwitch() for switches; a project that registers the skin already adds the ones of a new table. A page may define them itself, as customElements.define('bro-nv-tags', BroNativeTagsComponent). With Angular server-side rendering, app.config.ts imports the package as well, import '@table-bro/native';, so that the server renders the skin too: Prerendering.

    import '@table-bro/native';

How do I pass cols, rows and conf?

‹table-bro-ng› takes them as inputs, here from signals of the component (Angular, Accepting data with input properties). A new value of rows replaces the rows of the table, and conf.skin names the registered skin. src/app/orders.component.ts:

import {ChangeDetectionStrategy, Component, signal} from '@angular/core';

import {TableBroNg}                     from '@table-bro/angular';
import type {BroCol, BroConfig, BroRow} from '@table-bro/core';

interface Order extends BroRow {
  description: string;
  price: number;
}

@Component({
  selector: 'app-orders',
  template: `
    <table-bro-ng class="bro-table-shadow-container" tableId="orders"
                  [cols]="cols()" [rows]="rows()" [conf]="conf()"></table-bro-ng>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    TableBroNg
  ]
})
export class OrdersComponent {
  cols = signal<BroCol<Order>[]>([
    {
      title: 'Description',
      name: 'description'
    }, {
      title: 'Price',
      name: 'price',
      dataType: 'number',
      className: 'bro-col_text-right'
    }
  ]);

  rows = signal<Order[]>([
    {
      description: 'Modern Cotton Chair',
      price: 100
    }, {
      description: 'Awesome Concrete Ball',
      price: 200
    }
  ]);

  conf = signal<BroConfig>({
    skin: 'mat',
    toolbarTitle: 'Orders'
  });
}

How do I listen to bro-action?

The output action emits the detail of every bro-action event of the table, a BroActionDetail: custom cells, the toolbar, the paginator. The output query emits the queries of a table with server-side data instead (Angular, Custom events with outputs). In the template: (action)="onAction($event)".

How do I switch the theme?

The input theme of ‹table-bro-ng› is 'light', 'dark' or 'auto', which follows the color scheme of the system; without it the table takes config.theme, 'auto' by default. The table puts the class bro-dark-theme or bro-light-theme on itself. More in Dark/Light mode.

Questions

Does the template need CUSTOM_ELEMENTS_SCHEMA?

Not for ‹table-bro-ng›: it is a component of Angular in imports of the component. A template that renders ‹table-bro› itself needs CUSTOM_ELEMENTS_SCHEMA. Angular also turns its own components into Custom Elements (Angular, Custom Elements).

Does it work with server-side rendering?

Yes: ‹table-bro-ng› prerenders the table in its loading state during the server-side rendering of Angular, as Prerendering shows.

Related

Getting started, Custom content in tables using Custom Elements, MCP server for AI coding agents, Preact data table, React data table, Solid data table, Svelte data table, Vue 3 data table.

DJ