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: + +grid 1 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