Defined in: flexRender.ts:84
Use this utility directive to render headers, cells, or footers with custom markup.
Note: If you are rendering cell, header, or footer without custom context or other props, you can use the FlexRenderCell directive as shorthand instead .
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 {
}
Can be imported through FlexRenderDirective or FlexRender import, which the latter is preferred.
TFeatures extends TableFeatures
TRowData extends RowData
TValue extends CellData
TProps extends | NonNullable<unknown> | CellContext<TFeatures, TRowData, TValue> | HeaderContext<TFeatures, TRowData, TValue>
new FlexRenderDirective<TFeatures, TRowData, TValue, TProps>(): FlexRenderDirective<TFeatures, TRowData, TValue, TProps>;
Defined in: flexRender.ts:109
FlexRenderDirective<TFeatures, TRowData, TValue, TProps>
readonly content: InputSignal<FlexRenderInputContent<TProps>>;
Defined in: flexRender.ts:93
readonly injector: InputSignal<Injector>;
Defined in: flexRender.ts:102
readonly props: InputSignal<TProps>;
Defined in: flexRender.ts:98