import {FlexRender} from '@tanstack/angular-table';

@Component({
  imports: [FlexRender],
  template: `
     <td
       *flexRender="
         cell.column.columnDef.cell;
         props: cell.getContext();
         let cell"
     >
       {{cell}}
     </td>

     <th
       *flexRender="
         header.column.columnDef.header;
         props: header.getContext();
         let header"
       >
       {{header}}
     </td>

     <td
       *flexRender="
         footer.column.columnDef.footer;
         props: footer.getContext();
         let footer"
     >
       {{footer}}
     </td>
  `,
})
class App {
}

import {FlexRender} from '@tanstack/angular-table';

@Component({
  imports: [FlexRender],
  template: `
     <td
       *flexRender="
         cell.column.columnDef.cell;
         props: cell.getContext();
         let cell"
     >
       {{cell}}
     </td>

     <th
       *flexRender="
         header.column.columnDef.header;
         props: header.getContext();
         let header"
       >
       {{header}}
     </td>

     <td
       *flexRender="
         footer.column.columnDef.footer;
         props: footer.getContext();
         let footer"
     >
       {{footer}}
     </td>
  `,
})
class App {
}

new FlexRenderDirective<TFeatures, TRowData, TValue, TProps>(): FlexRenderDirective<TFeatures, TRowData, TValue, TProps>;

new FlexRenderDirective<TFeatures, TRowData, TValue, TProps>(): FlexRenderDirective<TFeatures, TRowData, TValue, TProps>;

readonly content: InputSignal<FlexRenderInputContent<TProps>>;

readonly content: InputSignal<FlexRenderInputContent<TProps>>;

readonly injector: InputSignal<Injector>;

readonly injector: InputSignal<Injector>;

readonly props: InputSignal<TProps>;

readonly props: InputSignal<TProps>;