import {flexRenderComponent} from '@tanstack/angular-table'

// Usage in cell/header/footer definition
const columns = [
  {
    cell: ({ row }) => {
       return flexRenderComponent(MyComponent, {
         inputs: { value: mySignalValue() },
         outputs: { valueChange: (val) => {} }
         // or using angular createComponent#bindings api
         bindings: [
           inputBinding('value', mySignalValue),
           outputBinding('valueChange', value => {
             console.log("my value changed to", value)
           })
         ]
       })
    },
  },
]

import {input, output} from '@angular/core';

@Component({
 selector: 'my-component',
})
class MyComponent {
   readonly value = input(0);
   readonly valueChange = output<number>();
}

readonly allowedInputNames: string[];

readonly allowedOutputNames: string[];

optional bindings: Binding[];

readonly component: Type<TComponent>;

optional directives: (Type<unknown> | DirectiveWithBindings<unknown>)[];

readonly optional injector: Injector;

readonly optional inputs: Inputs<TComponent>;

readonly mirror: ComponentMirror<TComponent>;

readonly optional outputs: Outputs<TComponent>;