Class AppComponent

examples/angular/editable/src/app/app.component.ts:87–130

  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  readonly data = signal<Person[]>(makeData(10_000))
  readonly injector = inject(Injector)

  readonly autoResetPageIndex = signal(true)

  readonly table = createAngularTable(() => ({
    data: this.data(),
    columns: defaultColumns,
    defaultColumn: defaultColumn,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    debugTable: true,
    autoResetPageIndex: this.autoResetPageIndex(),
    // Provide our updateData function to our table meta
    meta: {
      updateData: (rowIndex, columnId, value) => {
        // Skip page index reset until after next rerender
        this.autoResetPageIndex.set(false)

        this.data.update(old =>
          old.map((row, index) => {
            if (index === rowIndex) {
              return {
                ...old[rowIndex],
                [columnId]: value,
              }
            }
            return row
          })
        )

        afterNextRender(() => this.autoResetPageIndex.set(true), {
          injector: this.injector,
        })
      },
    },
  }))

  refresh() {
    this.data.set(makeData(10_000))
  }
}