feat(angular-table): improve adapter implementation

[riccardoperra]

A little summary about the latest PR that got merged (hope with a new branch name there are no issue 😥 )

• [X] Add support for required signal inputs (add ed an example too)
• [X] Basic example
• [X] Grouping example
• [X] Row selection example

• [X] Column visibility example

  Examples to add:

• [x] Column ordering example
• [x] Column pinning example
• [x] Column pinning sticky example
• [x] Filters

With this PR i'm updating the flexRender implementation which has improved typings and now supports all types of renderable content (strings, components and templateRefs) directly through the columns header/cell definition.

The implementation seems a little clunky than other frameworks in order to avoid changeDetection issues and support the OnPush ChangeDetection in all components (i'm using the RowSelection example as a base).

@Component({
  template: `
    <input
      type="checkbox"
      [checked]="context.row.getIsSelected()"
      (change)="context.row.getToggleSelectedHandler()($event)"
    />
  `,
  host: {
    class: 'px-1 block',
  },
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableRowSelectionComponent<T> {
  context = injectFlexRenderContext<CellContext<T, unknown>>()
}

@Component({
  template: `
       ...

      @for (cell of row.getVisibleCells(); track cell.id) {
        <td>
          <ng-container *flexRender="cell.column.columnDef.cell; props: cell.getContext(); let renderCell">
              {{renderCell}}
          </ng-container>
        </td>
     }
  `
})
class MyComponent { 
  private readonly otherCellRef = viewChild.required<TemplateRef<unknown>>('otherCellTemplateRef');

  readonly columns = [
    { 
       id: "select",
       cell: () => new FlexRenderComponent(TableRowSelectionComponent)
    },
    {
      id: "otherCell",
      cell: () => this.otherCellRef()
    }
  ]
}

As the example above, you can now define a new component for the header/cell. The component can access to the given props (e.g. CellContext or HeaderContext value) via *flexRender directive through the injectFlexRenderContext function.

[nx-cloud[bot]]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 4c765c3764798b1519f63bdd0d00d78e36357790. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

- [`nx affected --targets=test:format,test:sherif,test:knip,test:lib,test:types,build --parallel=3`](https://cloud.nx.app/runs/eqTFz39sI2?utm_source=pull-request&utm_medium=comment)

---

Sent with 💌 from NxCloud.

[KevinVandy]

Thanks for your continued work on this. And you can mark as ready to review at any point you think new changes can go into the feat branch in this repo.

[riccardoperra]

@KevinVandy I've added the last examples that I was planning to add in this PR:

• Column ordering
• Column pinning
• Column pinning
• Filters

I think all changes are ready to be merged into the feat branch 😄