Class AppComponent

examples/angular/column-ordering/src/app/app.component.ts:77–118

  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  readonly data = signal<Person[]>(makeData(20))
  readonly columnVisibility = signal<VisibilityState>({})
  readonly columnOrder = signal<ColumnOrderState>([])

  readonly table = createAngularTable(() => ({
    data: this.data(),
    columns: defaultColumns,
    state: {
      columnOrder: this.columnOrder(),
      columnVisibility: this.columnVisibility(),
    },
    getCoreRowModel: getCoreRowModel(),
    onColumnVisibilityChange: updaterOrValue => {
      typeof updaterOrValue === 'function'
        ? this.columnVisibility.update(updaterOrValue)
        : this.columnVisibility.set(updaterOrValue)
    },
    onColumnOrderChange: updaterOrValue => {
      typeof updaterOrValue === 'function'
        ? this.columnOrder.update(updaterOrValue)
        : this.columnOrder.set(updaterOrValue)
    },
    debugTable: true,
    debugHeaders: true,
    debugColumns: true,
  }))

  readonly stringifiedColumnOrdering = computed(() => {
    return JSON.stringify(this.table.getState().columnOrder)
  })

  randomizeColumns() {
    this.table.setColumnOrder(
      faker.helpers.shuffle(this.table.getAllLeafColumns().map(d => d.id))
    )
  }

  rerender() {
    this.data.set([...makeData(20)])
  }
}