Sutil

  <tabela-aninhada
    [colunas]="colunas"
    [linhas]="linhas"
    [extratorDeFilhos]="extratorDeLinhasFilhas"
    [extratorDeClasseCss]="extratorDeCssClassCustomizadaParaLinha" ></tabela-aninhada>

Sutil

import { TemplateRef } from '@angular/core';

export interface ColunaTabelaAninhada {

  /**
   * Texto que aparece no cabeçalho da coluna
   */
  cabecalho: string;

  /**

Sutil

<table>
  <thead>
    <tr>
      <!-- percorrer cada coluna -->
      <th *ngFor="let coluna of colunas" class="{{ coluna.classeCssCabecalho }}" >
        {{ coluna.cabecalho }}
      </th>
    </tr>
  </thead>
  <tbody>

Sutil

<ng-template #conteudoDaLinha >
  <tr class="{{ classeCss }}" >

    <!-- percorrer cada coluna -->
    <td *ngFor="let coluna of colunas; let i = index" class="{{ coluna.classeCss }}" >
      <div class="conteudo-celula" >

        <!-- Deve existir um recuo na linha dependendo de cada nível na tabela -->
        <div *ngIf="i === 0" class="recuo-linha-filha-nivel-{{ nivel }}" ></div>

Sutil

@OneToMany unidirectional examplo usint Spring JPA.

Sutil

"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import MoneyInput from "src/components/custom/money-input";
import { Button } from "src/components/ui/button";
import { Form } from "src/components/ui/form";
import * as z from "zod";


const schema = z.object({

Sutil

import { Meta, StoryFn } from "@storybook/react";
import { QueryClientProvider } from "@tanstack/react-query";
import {
  mockQuery,
  mockQueryError,
  mockQueryLoading,
} from "@/lib/mocks/mock-query";
import { Component } from "./Component";