ng-fusion-ui 0.6.27 → 0.6.30

package/README.md

@@ -21,27 +21,54 @@ For full documentation, visit [Fusion Ui](https://fusion-ui.up.railway.app).
 ## Basic Usage/Examples
 
 ```javascript
-<fu-data-grid 
-  [dataSource]="data" 
-  [expandable]="true" 
-  [paginator]="true"
->
-  <ng-container *fuHeaderTemplate>
-    <fu-head-row-cell cellDef="Id" />
-    <fu-head-row-cell cellDef="Name" />
-    <fu-head-row-cell cellDef="Email" />
-    <fu-head-row-cell cellDef="Phone" />
-  </ng-container>
-
-  <ng-container *fuBodyTemplate="data; let row">
-    <fu-body-row-cell [cellValue]="row.id" />
-    <fu-body-row-cell [cellValue]="row.name" />
-    <fu-body-row-cell [cellValue]="row.email" />
-    <fu-body-row-cell [cellValue]="row.phone" />
-  </ng-container>
-
-  <ng-container *fuExpandTemplate="data; let row">
-    expand content goes here...
-  </ng-container>
-</fu-data-grid>
+  <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>
 ```