diff --git a/stories/SmartTable.stories.ts b/stories/SmartTable.stories.ts
index f80e20eef..f7e40c573 100644
--- 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:
-
-
- {{row.id}} |
- {{ row.name }} |
- |
-
-
- |
-
-
- 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;
-
- ...
- }
-
- 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
new file mode 100644
index 000000000..0ff7b4272
--- /dev/null
+++ 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';
+
+
+
+export const Template = (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
+
+ {{row.id}} |
+ {{ row.name }} |
+ |
+
+
+ |
+
+```
+
+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;
+
+ ...
+}
+```
+
+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:
+
+
diff --git a/stories/assets/table-custom-row.png b/stories/assets/table-custom-row.png
new file mode 100644
index 000000000..b24bbb662
Binary files /dev/null and b/stories/assets/table-custom-row.png differ