@if (config().data){
<div class="overflow-x-auto" [ngClass]="config().styleClass">
  <table class="table w-full table-zebra">
    <tbody>
      @for (row of config().rows; track row.attribute) {
        <tr [ngClass]="row.getDetailClass ? row.getDetailClass(config().data) : ''">
          <th [ngClass]="row.getTitleStyleClass ? row.getTitleStyleClass(config().data) : ''">
            @if (row.titleComponent) {
              <ng-container *ngComponentOutlet="row.titleComponent; inputs: row.titleComponentInputs ? row.titleComponentInputs(config().data) : {}"></ng-container>
            } @else {
              {{ getTitle(row, config().data) }}
            }
          </th>
          <td [ngClass]="row.getValueStyleClass ? row.getValueStyleClass(config().data) : ''">
            @if (row.component) {
              <ng-container *ngComponentOutlet="row.component; inputs: row.componentInputs ? row.componentInputs(config().data) : {}"></ng-container>
            } @else {
              {{ getFormattedValue(row, config().data) }}
            }
          </td>
        </tr>
      }
    </tbody>
  </table>
</div>

}