Back to Table

FlexRenderDirective

docs/framework/angular/reference/classes/FlexRenderDirective.md

8.21.32.5 KB
Original Source

Class: FlexRenderDirective<TFeatures, TRowData, TValue, TProps>

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 .

Example

ts
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.

Type Parameters

TFeatures

TFeatures extends TableFeatures

TRowData

TRowData extends RowData

TValue

TValue extends CellData

TProps

TProps extends | NonNullable<unknown> | CellContext<TFeatures, TRowData, TValue> | HeaderContext<TFeatures, TRowData, TValue>

Constructors

Constructor

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

Defined in: flexRender.ts:109

Returns

FlexRenderDirective<TFeatures, TRowData, TValue, TProps>

Properties

content

ts
readonly content: InputSignal<FlexRenderInputContent<TProps>>;

Defined in: flexRender.ts:93


injector

ts
readonly injector: InputSignal<Injector>;

Defined in: flexRender.ts:102


props

ts
readonly props: InputSignal<TProps>;

Defined in: flexRender.ts:98