Docs
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
Neon
WorkOS
Clerk
Convex
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
Neon
WorkOS
Clerk
Convex
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
Table API Reference
Column API Reference
Row API Reference
Cell API Reference
Header API Reference
Features API Reference
Enterprise
Table API Reference

FlexRenderDirective

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