TanStack表格 v8
自动
框架
版本
菜单
开始使用
核心指南
功能指南
核心 API
功能 API
企业版
示例

Angular 表格

@tanstack/angular-table 适配器是核心表格逻辑的包装器。它的大部分工作与以“Angular 信号”方式管理状态、提供类型以及单元格/表头/表尾模板的渲染实现有关。

导出

@tanstack/angular-table 重新导出 @tanstack/table-core 的所有 API 以及以下内容

createAngularTable

接受一个选项函数或计算值，该函数或计算值返回表格选项，并返回一个表格。

ts
import {createAngularTable} from '@tanstack/angular-table'

export class AppComponent {
  data = signal<Person[]>([])

  table = createAngularTable(() => ({
    data: this.data(),
    columns: defaultColumns,
    getCoreRowModel: getCoreRowModel(),
  }))
}

// ...render your table in template

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

export class AppComponent {
  data = signal<Person[]>([])

  table = createAngularTable(() => ({
    data: this.data(),
    columns: defaultColumns,
    getCoreRowModel: getCoreRowModel(),
  }))
}

// ...render your table in template

FlexRender

一个 Angular 结构指令，用于使用动态值渲染单元格/表头/表尾模板。

FlexRender 支持 Angular 支持的任何类型的内容

  • 字符串，或通过 innerHTML 的 html 字符串
  • TemplateRef
  • 包裹在 FlexRenderComponent 中的 Component

您可以直接使用 cell.renderValue 或 cell.getValue API 来渲染表格的单元格。但是，这些 API 仅会输出原始单元格值（来自访问器函数）。如果您正在使用 cell: () => any 列定义选项，您将需要使用来自适配器的 FlexRenderDirective。

单元格列定义是响应式的，并运行到注入上下文中，然后您可以注入服务或使用信号来自动修改渲染的内容。

示例
ts
@Component({
  imports: [FlexRenderDirective],
  //...
})
class YourComponent {}

@Component({
  imports: [FlexRenderDirective],
  //...
})
class YourComponent {}
angular-html

<tbody>
@for (row of table.getRowModel().rows; track row.id) {
  <tr>
    @for (cell of row.getVisibleCells(); track cell.id) {
      <td>
        <ng-container
          *flexRender="
              cell.column.columnDef.cell;
              props: cell.getContext();
              let cell
            "
        >
          <!-- if you want to render a simple string -->
          {{ cell }}
          <!-- if you want to render an html string -->
          <div [innerHTML]="cell"></div>
        </ng-container>
      </td>
    }
  </tr>
}
</tbody>


<tbody>
@for (row of table.getRowModel().rows; track row.id) {
  <tr>
    @for (cell of row.getVisibleCells(); track cell.id) {
      <td>
        <ng-container
          *flexRender="
              cell.column.columnDef.cell;
              props: cell.getContext();
              let cell
            "
        >
          <!-- if you want to render a simple string -->
          {{ cell }}
          <!-- if you want to render an html string -->
          <div [innerHTML]="cell"></div>
        </ng-container>
      </td>
    }
  </tr>
}
</tbody>

渲染组件

要将 Component 渲染到特定的列表头/单元格/表尾中，您可以传递使用您的 `ComponentType` 实例化的 FlexRenderComponent，并能够包含诸如输入、输出和自定义注入器之类的参数。

ts
import {flexRenderComponent} from "./flex-render-component";
import {ChangeDetectionStrategy, input, output} from "@angular/core";

@Component({
  template: `
    ...
  `,
  standalone: true,
  changeDetectionStrategy: ChangeDetectionStrategy.OnPush,
  host: {
    '(click)': 'clickEvent.emit($event)'
  }
})
class CustomCell {
  readonly content = input.required<string>();
  readonly cellType = input<MyType>();

  // An output that will emit for every cell click
  readonly clickEvent = output<Event>();
}

class AppComponent {
  columns: ColumnDef<unknown>[] = [
    {
      id: 'custom-cell',
      header: () => {
        const translateService = inject(TranslateService);
        return translateService.translate('...');
      },
      cell: (context) => {
        return flexRenderComponent(
          MyCustomComponent,
          {
            injector, // Optional injector
            inputs: {
              // Mandatory input since we are using `input.required()
              content: context.row.original.rowProperty,
              // cellType? - Optional input
            },
            outputs: {
              clickEvent: () => {
                // Do something
              }
            }
          }
        )
      },
    },
  ]
}

import {flexRenderComponent} from "./flex-render-component";
import {ChangeDetectionStrategy, input, output} from "@angular/core";

@Component({
  template: `
    ...
  `,
  standalone: true,
  changeDetectionStrategy: ChangeDetectionStrategy.OnPush,
  host: {
    '(click)': 'clickEvent.emit($event)'
  }
})
class CustomCell {
  readonly content = input.required<string>();
  readonly cellType = input<MyType>();

  // An output that will emit for every cell click
  readonly clickEvent = output<Event>();
}

class AppComponent {
  columns: ColumnDef<unknown>[] = [
    {
      id: 'custom-cell',
      header: () => {
        const translateService = inject(TranslateService);
        return translateService.translate('...');
      },
      cell: (context) => {
        return flexRenderComponent(
          MyCustomComponent,
          {
            injector, // Optional injector
            inputs: {
              // Mandatory input since we are using `input.required()
              content: context.row.original.rowProperty,
              // cellType? - Optional input
            },
            outputs: {
              clickEvent: () => {
                // Do something
              }
            }
          }
        )
      },
    },
  ]
}

在底层，这利用了 ViewContainerRef#createComponent api。因此，您应该使用 @Input 装饰器或 input/model 信号来声明您的自定义输入。

您仍然可以通过 injectFlexRenderContext 函数访问表格单元格上下文，该函数根据您传递给 FlexRenderDirective 的 props 返回上下文值。

ts

@Component({
  // ...
})
class CustomCellComponent {
  // context of a cell component
  readonly context = injectFlexRenderContext<CellContext<TData, TValue>>();
  // context of a header/footer component
  readonly context = injectFlexRenderContext<HeaderContext<TData, TValue>>();
}


@Component({
  // ...
})
class CustomCellComponent {
  // context of a cell component
  readonly context = injectFlexRenderContext<CellContext<TData, TValue>>();
  // context of a header/footer component
  readonly context = injectFlexRenderContext<HeaderContext<TData, TValue>>();
}

或者，您可以通过将组件类型传递给相应的列定义，将组件渲染到特定的列表头、单元格或表尾中。这些列定义将与 context 一起提供给 flexRender 指令。

ts
class AppComponent {
  columns: ColumnDef<Person>[] = [
    {
      id: 'select',
      header: () => TableHeadSelectionComponent<Person>,
      cell: () => TableRowSelectionComponent<Person>,
    },
  ]
}

class AppComponent {
  columns: ColumnDef<Person>[] = [
    {
      id: 'select',
      header: () => TableHeadSelectionComponent<Person>,
      cell: () => TableRowSelectionComponent<Person>,
    },
  ]
}
angular-html
<ng-container
  *flexRender="
    header.column.columnDef.header;
    props: header.getContext();
    let headerCell
  "
>
  {{ headerCell }}
</ng-container>

<ng-container
  *flexRender="
    header.column.columnDef.header;
    props: header.getContext();
    let headerCell
  "
>
  {{ headerCell }}
</ng-container>

在 flexRender 指令中提供的 context 的属性将可供您的组件访问。您可以显式定义组件所需的上下文属性。在此示例中，提供给 flexRender 的上下文类型为 HeaderContext。输入信号 table，它是 HeaderContext 的属性，以及 column 和 header 属性，然后被定义为在组件中使用。如果您的组件中需要任何上下文属性，请随时使用它们。请注意，使用此方法定义对上下文属性的访问时，仅支持输入信号。

angular-ts
@Component({
  template: `
    <input
      type="checkbox"
      [checked]="table().getIsAllRowsSelected()"
      [indeterminate]="table().getIsSomeRowsSelected()"
      (change)="table().toggleAllRowsSelected()"
    />
  `,
  // ...
})
export class TableHeadSelectionComponent<T> {
  //column = input.required<Column<T, unknown>>()
  //header = input.required<Header<T, unknown>>()
  table = input.required<Table<T>>()
}

@Component({
  template: `
    <input
      type="checkbox"
      [checked]="table().getIsAllRowsSelected()"
      [indeterminate]="table().getIsSomeRowsSelected()"
      (change)="table().toggleAllRowsSelected()"
    />
  `,
  // ...
})
export class TableHeadSelectionComponent<T> {
  //column = input.required<Column<T, unknown>>()
  //header = input.required<Header<T, unknown>>()
  table = input.required<Table<T>>()
}

渲染 TemplateRef

为了将 TemplateRef 渲染到特定的列表头/单元格/表尾中，您可以将 TemplateRef 传递到列定义中。

您可以通过 $implicit 属性访问 TemplateRef 数据，该属性的值基于在 flexRender 的 props 字段中传递的内容。

在大多数情况下，每个 TemplateRef 将使用基于单元格类型的 $implicit 上下文进行渲染，方式如下

  • 表头: HeaderContext<T, ?>
  • 单元格: CellContext<T, ?>,
  • 表尾: HeaderContext<T, ?>
angular-html

<ng-container
  *flexRender="
              cell.column.columnDef.cell;
              props: cell.getContext();
              let cell
            "
>
  <!-- if you want to render a simple string -->
  {{ cell }}
  <!-- if you want to render an html string -->
  <div [innerHTML]="cell"></div>
</ng-container>

<ng-template #myCell let-context>
  <!-- render something with context -->
</ng-template>


<ng-container
  *flexRender="
              cell.column.columnDef.cell;
              props: cell.getContext();
              let cell
            "
>
  <!-- if you want to render a simple string -->
  {{ cell }}
  <!-- if you want to render an html string -->
  <div [innerHTML]="cell"></div>
</ng-container>

<ng-template #myCell let-context>
  <!-- render something with context -->
</ng-template>

完整示例

angular-ts
import type {
  CellContext,
  ColumnDef,
  HeaderContext,
} from '@tanstack/angular-table'
import {Component, TemplateRef, viewChild} from '@angular/core'

@Component({
  template: `
    <tbody>
      @for (row of table.getRowModel().rows; track row.id) {
        <tr>
          @for (cell of row.getVisibleCells(); track cell.id) {
            <td>
              <ng-container
                *flexRender="
                  cell.column.columnDef.cell;
                  props: cell.getContext(); // Data given to the TemplateRef
                  let cell
                "
              >
                <!-- if you want to render a simple string -->
                {{ cell }}
                <!-- if you want to render an html string -->
                <div [innerHTML]="cell"></div>
              </ng-container>
            </td>
          }
        </tr>
      }
    </tbody>

    <ng-template #customHeader let-context>
      {{ context.getValue() }}
    </ng-template>
    <ng-template #customCell let-context>
      {{ context.getValue() }}
    </ng-template>
  `,
})
class AppComponent {
  customHeader =
    viewChild.required<TemplateRef<{ $implicit: HeaderContext<any, any> }>>(
      'customHeader'
    )
  customCell =
    viewChild.required<TemplateRef<{ $implicit: CellContext<any, any> }>>(
      'customCell'
    )

  columns: ColumnDef<unknown>[] = [
    {
      id: 'customCell',
      header: () => this.customHeader(),
      cell: () => this.customCell(),
    },
  ]
}

import type {
  CellContext,
  ColumnDef,
  HeaderContext,
} from '@tanstack/angular-table'
import {Component, TemplateRef, viewChild} from '@angular/core'

@Component({
  template: `
    <tbody>
      @for (row of table.getRowModel().rows; track row.id) {
        <tr>
          @for (cell of row.getVisibleCells(); track cell.id) {
            <td>
              <ng-container
                *flexRender="
                  cell.column.columnDef.cell;
                  props: cell.getContext(); // Data given to the TemplateRef
                  let cell
                "
              >
                <!-- if you want to render a simple string -->
                {{ cell }}
                <!-- if you want to render an html string -->
                <div [innerHTML]="cell"></div>
              </ng-container>
            </td>
          }
        </tr>
      }
    </tbody>

    <ng-template #customHeader let-context>
      {{ context.getValue() }}
    </ng-template>
    <ng-template #customCell let-context>
      {{ context.getValue() }}
    </ng-template>
  `,
})
class AppComponent {
  customHeader =
    viewChild.required<TemplateRef<{ $implicit: HeaderContext<any, any> }>>(
      'customHeader'
    )
  customCell =
    viewChild.required<TemplateRef<{ $implicit: CellContext<any, any> }>>(
      'customCell'
    )

  columns: ColumnDef<unknown>[] = [
    {
      id: 'customCell',
      header: () => this.customHeader(),
      cell: () => this.customCell(),
    },
  ]
}
在 GitHub 上编辑
常见问题解答
数据
订阅 Bytes

您的每周 JavaScript 新闻。每周一免费发送给超过 100,000 名开发者。

Bytes

无垃圾邮件。随时取消订阅。