📝 docs: add example img of custom row on table docs #738 (#750)

* docs: add example img of custom row on table docs #738 * feat: add required to chip-group #734 * docs: add example img of custom row on table docs #738 * fix: documentation problem #738 --------- Co-authored-by: Iury Nogueira <[email protected]>
Brisanet · Jul 28, 2023 · 4ab73c5 · 4ab73c5
1 parent 667438f
commit 4ab73c5
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 56 deletions.
diff --git a/stories/SmartTable.stories.ts b/stories/SmartTable.stories.ts
@@ -331,62 +331,6 @@ PopConfirmDynamicDescription.args = returnTableConfig(
   2
 );
 
-export const TableCustomRow = Template.bind({});
-TableCustomRow.args = {
-  config: {
-    columns,
-  },
-};
-
-TableCustomRow.parameters = {
-  docs: {
-    description: {
-      story: `Passos para customizar a linha da tabela.
-    1. No HTML do seu componente, crie um ng-template com a diretiva 'let-row' e realize as customizações desejadas.
-    A diretiva 'let-row' permite acessar os dados da linha através da identificação do objeto passado na configuração
-    da tabela. Veja o exemplo abaixo:
-
-    <ng-template #customTemplate let-row>
-      <td>{{row.id}}</td>
-      <td>{{ row.name }}</td>
-      <td><ion-icon [type]="row.active ? 'check' : 'close'"></ion-icon></td>
-      <td>
-        <ion-icon
-          type="info"
-          (click)="onDetails(row)"
-          style="cursor: pointer"
-        ></ion-icon>
-      </td>
-    </ng-template>
-
-    2. No arquivo .ts do seu componente, utilize o decorator '@ViewChild' para obter a referência do template customizado
-    criado no arquivo HTML.
-
-    export class AppComponent implements OnInit {
-      @ViewChild("customTemplate", { static: true })
-      customTemplate: TemplateRef<HTMLElement>;
-
-      ...
-    }
-
-    3. Passe a referência do template customizado para o atributo customRowTemplate da configuração da tabela.
-
-    export class AppComponent implements OnInit {
-      ...
-
-      ngOnInit(): void {
-        this.config = {
-          data,
-          columns,
-          customRowTemplate:  this.customTemplate,
-        }
-      }
-    }
-      `,
-    },
-  },
-};
-
 export const WithEllipsisOnCell = Template.bind({});
 WithEllipsisOnCell.args = returnTableConfig(
   longData,
@@ -397,3 +341,13 @@ WithEllipsisOnCell.args = returnTableConfig(
   [10, 15, 30, 50, 100],
   true
 );
+
+export const WithTooltipInActions = Template.bind({});
+WithTooltipInActions.args = returnTableConfig(
+  data,
+  columns,
+  actions,
+  2,
+  2000,
+  [10, 15, 30, 50, 100]
+);
diff --git a/stories/TableCustomRow.stories.mdx b/stories/TableCustomRow.stories.mdx
@@ -0,0 +1,61 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import imageExaple from './assets/table-custom-row.png';
+
+<Meta
+  title="Ion/Data Display/Table Custom Row"
+  component={IonSmartTableComponent}
+/>
+
+export const Template = (args) => <IonSmartTableComponent {...args} />;
+
+## Table Custom Row
+
+Passos para customizar a linha da tabela.
+
+1. No HTML do seu componente, crie um ng-template com a diretiva 'let-row' e realize as customizações desejadas. A diretiva 'let-row' permite acessar os dados da linha através da identificação do objeto passado na configuraçãoda tabela. Veja o exemplo abaixo:
+
+```html
+<ng-template #customTemplate let-row>
+  <td>{{row.id}}</td>
+  <td>{{ row.name }}</td>
+  <td><ion-icon [type]="row.active ? 'check' : 'close'"></ion-icon></td>
+  <td>
+    <ion-icon
+      type="info"
+      (click)="onDetails(row)"
+      style="cursor: pointer"
+    ></ion-icon>
+  </td>
+</ng-template>
+```
+
+2. No arquivo .ts do seu componente, utilize o decorator '@ViewChild' para obter a referência do template customizado criado no arquivo HTML:
+
+```ts
+export class AppComponent implements OnInit {
+  @ViewChild("customTemplate", { static: true })
+  customTemplate: TemplateRef<HTMLElement>;
+
+  ...
+}
+```
+
+3. Passe a referência do template customizado para o atributo customRowTemplate da configuração da tabela:
+
+```ts
+export class AppComponent implements OnInit {
+  ...
+
+  ngOnInit(): void {
+    this.config = {
+      data,
+      columns,
+      customRowTemplate:  this.customTemplate,
+    }
+  }
+}
+```
+
+4. Pronto! A linha da tabela será customizada de acordo com o template criado. Veja o exemplo abaixo:
+
+<img src={imageExaple} alt="grid 1" />
diff --git a/stories/assets/table-custom-row.png b/stories/assets/table-custom-row.png