fix grouping example

TanStack · Dec 21, 2024 · 25dc0d1 · 25dc0d1
1 parent 14488f5
commit 25dc0d1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 23 deletions.
diff --git a/examples/angular/grouping/src/app/app.component.ts b/examples/angular/grouping/src/app/app.component.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -13,6 +14,7 @@ import {
   createFilteredRowModel,
   createGroupedRowModel,
   createPaginatedRowModel,
+  createTableHelper,
   filterFns,
   injectTable,
   isFunction,
@@ -21,7 +23,7 @@ import {
   tableFeatures,
 } from '@tanstack/angular-table'
 import { columns } from './columns'
-import { makeData } from './makeData'
+import { makeData, Person } from './makeData'
 import type { GroupingState, Updater } from '@tanstack/angular-table'
 
 export const _features = tableFeatures({
@@ -31,10 +33,20 @@ export const _features = tableFeatures({
   rowExpandingFeature,
 })
 
+const tableHelper = createTableHelper<typeof _features, Person>({
+  _features,
+  _rowModels: {
+    groupedRowModel: createGroupedRowModel(aggregationFns),
+    expandedRowModel: createExpandedRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    filteredRowModel: createFilteredRowModel(filterFns),
+  },
+})
+
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [FlexRenderDirective],
+  imports: [FlexRenderDirective, CommonModule],
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -47,18 +59,10 @@ export class AppComponent {
     JSON.stringify(this.grouping(), null, 2),
   )
 
-  readonly table = injectTable(() => ({
-    _features,
-    _rowModels: {
-      groupedRowModel: createGroupedRowModel(aggregationFns),
-      expandedRowModel: createExpandedRowModel(),
-      paginatedRowModel: createPaginatedRowModel(),
-      filteredRowModel: createFilteredRowModel(filterFns),
-    },
+  readonly table = tableHelper.injectTable(() => ({
     enableExperimentalReactivity: true,
     data: this.data(),
-    // @ts-expect-error Fix this type
-    columns,
+    columns: columns,
     initialState: {
       pagination: { pageSize: 20, pageIndex: 0 },
     },

diff --git a/examples/angular/grouping/src/app/columns.ts b/examples/angular/grouping/src/app/columns.ts
@@ -1,16 +1,7 @@
+import type { Person } from './makeData'
 import type { _features } from './app.component'
 import type { ColumnDef } from '@tanstack/angular-table'
 
-export type Person = {
-  firstName: string
-  lastName: string
-  age: number
-  visits: number
-  progress: number
-  status: 'relationship' | 'complicated' | 'single'
-  subRows?: Array<Person>
-}
-
 export const columns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',

diff --git a/examples/angular/grouping/src/app/makeData.ts b/examples/angular/grouping/src/app/makeData.ts
@@ -33,7 +33,7 @@ const newPerson = (): Person => {
   }
 }
 
-export function makeData(...lens: Array<number>) {
+export function makeData(...lens: Array<number>): Array<Person> {
   const makeDataLevel = (depth = 0): Array<Person> => {
     const len = lens[depth]
     return range(len).map((d): Person => {