@dmytrokhylko/tb-cdu-ui

ThingsBoard Custom Development Unit shared UI components library — base table, loading overlay, action button, and data source utilities.

Installation

yarn add @dmytrokhylko/tb-cdu-ui

Package structure

The library is published as a single npm package with multiple entry points:

| Entry point | Import path | Description | |---|---|---| | Primary | @dmytrokhylko/tb-cdu-ui | Re-exports everything from core and widgets | | Core | @dmytrokhylko/tb-cdu-ui/core | UI components, models, and data source utilities | | Widgets | @dmytrokhylko/tb-cdu-ui/widgets | Ready-made widgets built on top of core |

import { BaseTableComponent } from '@dmytrokhylko/tb-cdu-ui/core';

Components

| Component | Selector | Docs | |---|---|---| | BaseTableComponent | <tb-cd-base-table> | core/base-table | | LoadingOverlayComponent | <tb-cd-loading-overlay> | — | | ActionButtonComponent | <tb-cd-action-button> | — |

Widgets

| Widget | Selector | Docs | |---|---|---| | TbCdEntitiesTableComponent | <tb-cd-entities-table> | widgets/entities-table |

Adapters

| Adapter | Description | |---|---| | TbSubscriptionDatasource | Drives a table from a ThingsBoard widget subscription (non-paginated) | | TbSubscriptionDatasourcePaginated | Drives a table from a ThingsBoard widget subscription with server-side pagination | | collectSubscriptionData | Maps raw IWidgetSubscription data to a typed entity array |

Project layout

tb-cdu-ui/
  package.json             # npm package manifest + dev dependencies
  ng-package.json          # ng-packagr primary entry point
  public-api.ts            # primary barrel (re-exports core + widgets)
  core/                    # @dmytrokhylko/tb-cdu-ui/core
    ng-package.json
    public-api.ts
    action-button/
    adapters/              # ThingsBoard subscription adapters
    base-table/
    loading-overlay/
    models/
    styles/
  widgets/                 # @dmytrokhylko/tb-cdu-ui/widgets
    ng-package.json
    public-api.ts

Secondary entry points are discovered automatically by ng-packagr from directories containing ng-package.json. The directory name relative to the library root determines the import path suffix (e.g. core/ → @dmytrokhylko/tb-cdu-ui/core).

Peer dependencies

• @angular/common, @angular/core, @angular/forms ^20.0.0
• @angular/cdk, @angular/material ^20.0.0
• @ngx-translate/core ^17.0.0
• thingsboard ^4.0.0
• rxjs ^7.8.0

Development

yarn install            # install dependencies
yarn build              # production build → dist/tb-cdu-ui/
yarn watch              # development build with watch
yarn format             # format source files with Prettier
yarn format:check       # check formatting without writing
yarn test               # run unit tests
yarn lint               # lint source files

Publishing

Bump the version and publish in one step — CI handles the rest:

yarn version --patch    # or --minor / --major
git push origin master --tags

Pushing a v* tag triggers the GitHub Actions workflow which builds and publishes to npm automatically.