ng-fusion-ui/README.md

Angular data table library!

# Ng-Fusion-Ui

Angular - responsive and type safe data table!

## Documentation

For full documentation, visit [Fusion Ui](https://fusion-ui.up.railway.app).

## Installation

```bash
  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:**

```html
<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`).
- **pageSizeOptions:** `number[]` — options for page size selection in the paginator (default: `[5,10,15,20]`).
- **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**

```html
<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`:

```ts
@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`.