Ng-Fusion-Ui

Angular - responsive and type safe data table!

Documentation

For full documentation, visit Fusion Ui.

Installation

  npm install ng-fusion-ui

  scss
  @use 'ng-fusion-ui/styles';

  css
  @import 'ng-fusion-ui/styles';

FuTable

• Selector: fu-table
• Module: Import FuTableModule into your NgModule.

Overview: A flexible data table component with client/server pagination, sorting, column visibility/reordering, inline editing, row expansion, search, and optional persistence to localStorage.

Basic usage:

<fu-table
  [dataSource]="users"
  [paginator]="true"
  (onQueryChanged)="load($event)"
>
  <fu-column field="name" header="Name" sortable editable />
  <fu-column field="email" header="Email" />
  <fu-column field="age" header="Age" type="number" />
</fu-table>

Important Inputs

• dataSource: (required) T[] — array of row objects to display.
• totalItems: number — total items for server-side pagination (default: 0).
• stateKey: string — key to persist table state (optional).
• columnsConfig: FuColumnConfig[] — override column visibility/order (optional).
• configPanel: boolean — show configuration sidebar (default: false).
• filterPanel: boolean — enable search panel (default: false).
• paginator: boolean — show pagination controls (default: true).
• loading: boolean — show loading skeletons (default: false).
• disablePaginator: boolean — disable paginator interaction (default: false).
• resetQuery: any — change to reset pagination to first page.
• resetQueryOnInit: boolean — resets page index to 0 on component initialization (default: false).
• responsive: boolean — responsive layout (default: true).
• scrollable: boolean — enable fixed-height scrolling (default: false).
• scrollHeight: number — height in vh when scrollable is true.
• stickyHeader / stickyFirstColumn / stickyLastColumn: boolean — sticky layout toggles.
• expandIndex: number — model signal to expand/collapse a row programmatically..
• rowState: 'idle' | 'pending' | 'success' | 'error' — model signal manage row visual state on actions.
• rowClass: string | (row, index) => string | null — string or function to set row CSS class.
• rowStyle: Record<string, string> | (row, index) => string | null — record or function to set row inline styles.

Outputs / Events

• onQueryChanged: FuTableQuery — emitted for server-side requests (page, size, sort).
• onCellEdited: Record<string, unknown> — column field -> new value when a cell is edited.
• onColReorder: FuColumnConfig[] — emitted when column order/visibility changes.
• onRowEditComplete: T — emitted when an edited row is submitted.
• onRowDelete: T — emitted when row is deleted.
• onRowSelect: T — emitted when a row is clicked.

Column definition Use fu-column inside fu-table to declare columns. Key inputs on fu-column:

• field (path in row object, dot-notation supported)
• header (display text)
• sortable, editable, hideable, reorderable
• type (control type for editors)
• visible (initial visibility)

You can provide templates inside fu-column:

• ng-template with fuColumnCell — custom cell content (let-value)
• fuColumnHeader — custom header
• fuColumnHeaderAddon — small addon in header
• fuColumnActions — action buttons for the column

Content templates for fu-table

• <ng-template fuTableToolbar> — custom toolbar template above table content.
• <ng-template fuTableNoData> — custom no-data template.
• <ng-template fuTableExpandRow let-row> — expanded row content.
• <ng-template fuTableSidebar> — custom sidebar content for the config panel.
• <ng-template fuTableCellContextMenu> — context menu template for cells.

Notes & tips

• If totalItems > dataSource.length, the table assumes server-side mode and will emit queryChanged for paging and sorting.
• Provide stateKey to persist UI state (columns, page, search, ui toggles).
• Use columnsConfig to programmatically control visible columns/order from outside the table.

Example with server-side loading

<fu-table
  [dataSource]="pageRows"
  [totalItems]="total"
  [paginator]="true"
  (onQueryChanged)="onQuery($event)"
>
  <fu-column field="id" header="#" hideable="false" />
  <fu-column field="name" header="Name" sortable editable />
  <fu-column field="email" header="Email" />
</fu-table>

🌍 Internationalization (i18n)

ng-fusion-ui includes built-in internationalization support via FuTableIntlService. All table labels are reactive and update automatically when the language changes.

You can extend FuTableIntlService to provide translations from your app i18n library. Example using @ngx-translate/core:

@Injectable()
export class FuCustomTableIntlService extends FuTableIntlService {
  constructor(private translate: TranslateService) {
    super();

    this.translate.onLangChange.subscribe(() => {
      this.loadTranslations();
    });

    this.loadTranslations();
  }

  private loadTranslations(): void {
    this.translate
      .get([
        'TABLE_INTL.SEARCH_TEXT',
        /* ... other keys ... */
      ])
      .subscribe(t => {
        this.searchPlaceholder.set(t['TABLE_INTL.SEARCH_TEXT']);
        // set other labels similarly
      });
  }
}

Register your custom service in the module providers to override the default FuTableIntlService.