clean up extra noinfer, angular examples

Author: KevinVandy

examples/angular/column-ordering/src/app/app.component.ts

@@ -8,8 +8,8 @@ import {
   FlexRenderDirective,
   columnOrderingFeature,
   columnVisibilityFeature,
-  createCoreRowModel,
   injectTable,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import { faker } from '@faker-js/faker'
 import { makeData } from './makeData'
@@ -20,7 +20,12 @@ import type {
   ColumnVisibilityState,
 } from '@tanstack/angular-table'
 
-const defaultColumns: Array<ColumnDef<any, Person>> = [
+const _features = tableFeatures({
+  columnVisibilityFeature,
+  columnOrderingFeature,
+})
+
+const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     footer: (props) => props.column.id,
@@ -85,12 +90,9 @@ export class AppComponent {
   readonly columnOrder = signal<ColumnOrderState>([])
 
   readonly table = injectTable(() => ({
-    data: this.data(),
-    _features: {
-      columnVisibilityFeature,
-      columnOrderingFeature,
-    },
+    _features,
     columns: defaultColumns,
+    data: this.data(),
     state: {
       columnOrder: this.columnOrder(),
       columnVisibility: this.columnVisibility(),

examples/angular/column-pinning-sticky/src/app/app.component.ts

@@ -6,11 +6,10 @@ import {
   columnResizingFeature,
   columnSizingFeature,
   columnVisibilityFeature,
-  createCoreRowModel,
   injectTable,
 } from '@tanstack/angular-table'
 import { faker } from '@faker-js/faker'
-import { NgStyle, NgTemplateOutlet, SlicePipe } from '@angular/common'
+import { NgStyle } from '@angular/common'
 import { makeData } from './makeData'
 import type {
   Column,
@@ -94,15 +93,15 @@ export class AppComponent {
   readonly split = signal(false)
 
   table = injectTable(() => ({
-    data: this.data(),
     _features: {
-      columnPinningFeature,
-      columnVisibilityFeature,
-      columnSizingFeature,
       columnOrderingFeature,
+      columnPinningFeature,
       columnResizingFeature,
+      columnSizingFeature,
+      columnVisibilityFeature,
     },
     columns: this.columns(),
+    data: this.data(),
     debugTable: true,
     debugHeaders: true,
     debugColumns: true,

examples/angular/column-pinning/src/app/app.component.ts

@@ -9,9 +9,8 @@ import {
   columnOrderingFeature,
   columnPinningFeature,
   columnVisibilityFeature,
-  createCoreRowModel,
   injectTable,
-  rowPinningFeature,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import { faker } from '@faker-js/faker'
 import { NgTemplateOutlet, SlicePipe } from '@angular/common'
@@ -32,7 +31,13 @@ type Person = {
   progress: number
 }
 
-const defaultColumns: Array<ColumnDef<any, Person>> = [
+const _features = tableFeatures({
+  columnPinningFeature,
+  columnOrderingFeature,
+  columnVisibilityFeature,
+})
+
+const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     footer: (props) => props.column.id,
@@ -102,13 +107,9 @@ export class AppComponent {
   readonly split = signal(false)
 
   table = injectTable(() => ({
-    data: this.data(),
-    _features: {
-      columnPinningFeature,
-      columnOrderingFeature,
-      columnVisibilityFeature,
-    },
+    _features,
     columns: defaultColumns,
+    data: this.data(),
     state: {
       columnVisibility: this.columnVisibility(),
       columnOrder: this.columnOrder(),

examples/angular/column-visibility/src/app/app.component.ts

@@ -6,8 +6,10 @@ import {
 } from '@angular/core'
 import {
   FlexRenderDirective,
+  columnVisibilityFeature,
   createCoreRowModel,
   injectTable,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import type { OnInit } from '@angular/core'
 import type { ColumnDef, ColumnVisibilityState } from '@tanstack/angular-table'
@@ -21,6 +23,10 @@ type Person = {
   progress: number
 }
 
+const _features = tableFeatures({
+  columnVisibilityFeature,
+})
+
 const defaultData: Array<Person> = [
   {
     firstName: 'tanner',
@@ -48,7 +54,7 @@ const defaultData: Array<Person> = [
   },
 ]
 
-const defaultColumns: Array<ColumnDef<any, Person>> = [
+const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     footer: (props) => props.column.id,
@@ -112,8 +118,9 @@ export class AppComponent implements OnInit {
   readonly columnVisibility = signal<ColumnVisibilityState>({})
 
   table = injectTable(() => ({
-    data: this.data(),
+    _features,
     columns: defaultColumns,
+    data: this.data(),
     state: {
       columnVisibility: this.columnVisibility(),
     },

examples/angular/filters/src/app/app.component.html

@@ -48,7 +48,7 @@
     <tbody>
       @for (row of table.getRowModel().rows; track row.id) {
         <tr>
-          @for (cell of row.getVisibleCells(); track cell.id) {
+          @for (cell of row.getAllCells(); track cell.id) {
             <td>
               <ng-container
                 *flexRender="

examples/angular/filters/src/app/app.component.ts

@@ -6,6 +6,8 @@ import {
 } from '@angular/core'
 import {
   FlexRenderDirective,
+  columnFacetingFeature,
+  columnFilteringFeature,
   createCoreRowModel,
   createFacetedMinMaxValues,
   createFacetedRowModel,
@@ -15,6 +17,9 @@ import {
   createSortedRowModel,
   injectTable,
   isFunction,
+  rowPaginationFeature,
+  rowSortingFeature,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import { FormsModule } from '@angular/forms'
 import { NgClass } from '@angular/common'
@@ -27,6 +32,13 @@ import type {
 } from '@tanstack/angular-table'
 import type { Person } from './makeData'
 
+export const _features = tableFeatures({
+  columnFilteringFeature,
+  columnFacetingFeature,
+  rowPaginationFeature,
+  rowSortingFeature,
+})
+
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -38,7 +50,7 @@ export class AppComponent {
   readonly columnFilters = signal<ColumnFiltersState>([])
   readonly data = signal(makeData(5000))
 
-  readonly columns: Array<ColumnDef<any, Person>> = [
+  readonly columns: Array<ColumnDef<typeof _features, Person>> = [
     {
       accessorKey: 'firstName',
       cell: (info) => info.getValue(),
@@ -79,7 +91,8 @@ export class AppComponent {
     },
   ]
 
-  table = injectTable<any, Person>(() => ({
+  table = injectTable<typeof _features, Person>(() => ({
+    _features,
     columns: this.columns,
     data: this.data(),
     state: {

examples/angular/filters/src/app/table-filter.component.ts

@@ -1,6 +1,8 @@
 import { CommonModule } from '@angular/common'
 import { Component, computed, input } from '@angular/core'
 import { DebouncedInputDirective } from './debounced-input.directive'
+import type { _features } from './app.component'
+import type { Person } from './makeData'
 import type {
   CellData,
   Column,
@@ -90,13 +92,10 @@ declare module '@tanstack/angular-table' {
   standalone: true,
   imports: [CommonModule, DebouncedInputDirective],
 })
-export class FilterComponent<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-> {
-  column = input.required<Column<any, any>>()
+export class FilterComponent {
+  column = input.required<Column<typeof _features, Person>>()
 
-  table = input.required<Table<TFeatures, TData>>()
+  table = input.required<Table<typeof _features, Person>>()
 
   readonly filterVariant = computed(() => {
     return (this.column().columnDef.meta ?? {}).filterVariant

examples/angular/grouping/src/app/app.component.ts

@@ -9,20 +9,27 @@ import {
   FlexRenderDirective,
   columnFilteringFeature,
   columnGroupingFeature,
-  createCoreRowModel,
   createExpandedRowModel,
   createFilteredRowModel,
   createGroupedRowModel,
   createPaginatedRowModel,
   injectTable,
+  isFunction,
   rowExpandingFeature,
   rowPaginationFeature,
-  tableOptions,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import { columns } from './columns'
 import { makeData } from './makeData'
 import type { GroupingState, Updater } from '@tanstack/angular-table'
 
+export const _features = tableFeatures({
+  columnGroupingFeature,
+  rowPaginationFeature,
+  columnFilteringFeature,
+  rowExpandingFeature,
+})
+
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -40,31 +47,25 @@ export class AppComponent {
   )
 
   readonly table = injectTable(() => ({
+    _features,
+    _rowModels: {
+      groupedRowModel: createGroupedRowModel(),
+      expandedRowModel: createExpandedRowModel(),
+      paginatedRowModel: createPaginatedRowModel(),
+      filteredRowModel: createFilteredRowModel(),
+    },
     data: this.data(),
-    columns: columns,
+    columns,
     initialState: {
       pagination: { pageSize: 20, pageIndex: 0 },
     },
     state: {
       grouping: this.grouping(),
     },
-    _features: {
-      columnGroupingFeature,
-      rowPaginationFeature,
-      columnFilteringFeature,
-      rowExpandingFeature,
-    },
-    _rowModels: {
-      groupedRowModel: createGroupedRowModel(),
-      expandedRowModel: createExpandedRowModel(),
-      paginatedRowModel: createPaginatedRowModel(),
-      filteredRowModel: createFilteredRowModel(),
-    },
     onGroupingChange: (updaterOrValue: Updater<GroupingState>) => {
-      const groupingState =
-        typeof updaterOrValue === 'function'
-          ? updaterOrValue([...this.grouping()])
-          : updaterOrValue
+      const groupingState = isFunction(updaterOrValue)
+        ? updaterOrValue([...this.grouping()])
+        : updaterOrValue
       this.grouping.set(groupingState)
     },
   }))

examples/angular/grouping/src/app/columns.ts

@@ -1,3 +1,4 @@
+import type { _features } from './app.component'
 import type { ColumnDef } from '@tanstack/angular-table'
 
 export type Person = {
@@ -10,7 +11,7 @@ export type Person = {
   subRows?: Array<Person>
 }
 
-export const columns: Array<ColumnDef<any, Person>> = [
+export const columns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
     columns: [

examples/angular/row-selection-signal/src/app/app.component.ts

@@ -14,6 +14,7 @@ import {
   injectTable,
   rowPaginationFeature,
   rowSelectionFeature,
+  tableFeatures,
 } from '@tanstack/angular-table'
 import { FilterComponent } from './filter'
 import { makeData } from './makeData'
@@ -25,6 +26,13 @@ import type { Person } from './makeData'
 import type { ColumnDef, RowSelectionState } from '@tanstack/angular-table'
 import type { TemplateRef } from '@angular/core'
 
+const _features = tableFeatures({
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+})
+
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -40,7 +48,7 @@ export class AppComponent {
   readonly ageHeaderCell =
     viewChild.required<TemplateRef<unknown>>('ageHeaderCell')
 
-  readonly columns: Array<ColumnDef<any, Person>> = [
+  readonly columns: Array<ColumnDef<typeof _features, Person>> = [
     {
       id: 'select',
       header: () => TableHeadSelectionComponent<Person>,
@@ -99,17 +107,12 @@ export class AppComponent {
   ]
 
   table = injectTable(() => ({
-    data: this.data(),
-    _features: {
-      rowSelectionFeature,
-      rowPaginationFeature,
-      columnFilteringFeature,
-      columnVisibilityFeature,
-    },
+    _features,
     _rowModels: {
       filteredRowModel: createFilteredRowModel(),
       paginatedRowModel: createPaginatedRowModel(),
     },
+    data: this.data(),
     columns: this.columns,
     state: {
       rowSelection: this.rowSelection(),