ng-fusion-ui 0.7.0 → 0.7.2

package/README.md

@@ -1,6 +1,6 @@
 # Ng-Fusion-Ui
 
-Angular - mobile friendly and type safe data-grid system and more..!
+Angular - responsive and type safe data table!
 
 ## Documentation
 
@@ -18,57 +18,85 @@ For full documentation, visit [Fusion Ui](https://fusion-ui.up.railway.app).
  
 ```
 
-## Basic Usage/Examples
-
-```javascript
-  <fu-table
-    [tableLayout]="'auto'"
-    [dataSource]="data"
-    [totalCount]="totalCount"
-    [expandable]="false"
-    [expanded]="true"
-    [isLoading]="loading"
-    localStorageKey="fake"
-    [firstPageOnInit]="false"
-    [serverPagination]="true"
-    [showFilter]="true"
-    [showPaginator]="true"
-    [quickPageJump]="true"
-    (tableActions)="tableActions($event)"
-    (selectRowAction)="selectRowAction($event)"
-    variant="outlined"
-  >
-    <ng-container *fuHeaderTemplate="data; let key">
-      <fu-thead-cell headerText="id" width="70px" />
-      <fu-thead-cell headerText="name" />
-      <fu-thead-cell headerText="image" />
-      <fu-thead-cell headerText="phone" />
-      <fu-thead-cell headerText="email" />
-      <fu-thead-cell width="100px" />
-    </ng-container>
-
-    <ng-container *fuBodyTemplate="data; let row; keys as key">
-      <fu-tbody-cell [cellValue]="row.id" />
-      <fu-tbody-cell [cellValue]="row.name" />
-      <fu-tbody-cell>
-        <img [src]="row.image" />
-      </fu-tbody-cell>
-      <fu-tbody-cell [cellValue]="row.phone" [editKey]="key.phone" />
-      <fu-tbody-cell [cellValue]="row.email" />
-
-      <fu-tbody-actions
-        [editRowData]="row"
-        (editSaveAction)="editSaveAction($event)"
-      />
-    </ng-container>
-
-    <ng-container *fuPopupTemplate>
-      <button fuButton>Hello</button>
-      <button fuButton>Hello world</button>
-    </ng-container>
-
-    <ng-container *fuExpandTemplate="data; let row">
-      <div>expand content: {{ row.name }}</div>
-    </ng-container>
-  </fu-table>
+**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" (queryChanged)="load($event)">
+  <fu-column field="name" header="Name" sortable editable></fu-column>
+  <fu-column field="email" header="Email"></fu-column>
+  <fu-column field="age" header="Age" type="number"></fu-column>
+</fu-table>
 ```
+
+**Important Inputs**
+- **dataSource:** (required) `T[]` — array of row objects to display.
+- **totalItems:** `number` — total items for server-side pagination (default: `0`).
+- **localStorageKey:** `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.
+- **responsive:** `boolean` — responsive layout (default: `true`).
+- **scrollable:** `boolean` — enable fixed-height scrolling (default: `false`).
+- **scrollHeight:** `number` — height in px when `scrollable` is true.
+- **stickyHeader / stickyFirstColumn / stickyLastColumn:** `boolean` — sticky layout toggles.
+- **rowState:** `'idle' | 'pending' | 'success' | 'error'` — reflect row save state.
+- **rowClass:** `(row, index) => string | null` — function to set row CSS class.
+
+**Outputs / Events**
+- **queryChanged:** `FuTableQuery` — emitted for server-side requests (page, size, sort).
+- **cellValueEdited:** `Record<string, unknown>` — column field -> new value when a cell is edited.
+- **columnsChanged:** `FuColumnConfig[]` — emitted when column order/visibility changes.
+- **rowEditSubmit:** `T` — emitted when an edited row is submitted.
+- **rowClicked:** `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 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 fuRowContextMenu>` — context menu template for rows.
+
+**Notes & tips**
+- If `totalItems > dataSource.length`, the table assumes server-side mode and will emit `queryChanged` for paging and sorting.
+- Provide `localStorageKey` 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"
+  (queryChanged)="onQuery($event)">
+
+  <fu-column field="id" header="#" hideable="false"></fu-column>
+  <fu-column field="name" header="Name" sortable editable></fu-column>
+  <fu-column field="email" header="Email"></fu-column>
+</fu-table>
+```