remove old kitchen sink example

Author: KevinVandy

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

@@ -16,31 +16,29 @@ import {
   createPaginatedRowModel,
   createTableHelper,
   filterFns,
-  injectTable,
   isFunction,
   rowExpandingFeature,
   rowPaginationFeature,
-  tableFeatures,
 } from '@tanstack/angular-table'
 import { columns } from './columns'
-import { makeData, Person } from './makeData'
+import { makeData } from './makeData'
+import type { Person } from './makeData'
 import type { GroupingState, Updater } from '@tanstack/angular-table'
 
-export const _features = tableFeatures({
-  columnGroupingFeature,
-  rowPaginationFeature,
-  columnFilteringFeature,
-  rowExpandingFeature,
-})
-
-const tableHelper = createTableHelper<typeof _features, Person>({
-  _features,
+export const tableHelper = createTableHelper({
+  _features: {
+    columnGroupingFeature,
+    rowPaginationFeature,
+    columnFilteringFeature,
+    rowExpandingFeature,
+  },
   _rowModels: {
     groupedRowModel: createGroupedRowModel(aggregationFns),
     expandedRowModel: createExpandedRowModel(),
     paginatedRowModel: createPaginatedRowModel(),
     filteredRowModel: createFilteredRowModel(filterFns),
   },
+  TData: {} as Person,
 })
 
 @Component({

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

@@ -1,63 +1,53 @@
-import type { Person } from './makeData'
-import type { _features } from './app.component'
-import type { ColumnDef } from '@tanstack/angular-table'
+import { tableHelper } from './app.component'
 
-export const columns: Array<ColumnDef<typeof _features, Person>> = [
-  {
+const { columnHelper } = tableHelper
+
+export const columns = columnHelper.columns([
+  columnHelper.group({
     header: 'Name',
-    columns: [
-      {
-        accessorKey: 'firstName',
-        header: 'First Name',
+    columns: columnHelper.columns([
+      columnHelper.accessor('firstName', {
+        header: () => 'First Name',
         cell: (info) => info.getValue(),
-        /**
-         * override the value used for row grouping
-         * (otherwise, defaults to the value derived from accessorKey / accessorFn)
-         */
         getGroupingValue: (row) => `${row.firstName} ${row.lastName}`,
-      },
-      {
-        accessorFn: (row) => row.lastName,
+      }),
+      columnHelper.accessor((row) => row.lastName, {
         id: 'lastName',
-        header: () => `Last Name`,
+        header: () => 'Last Name',
         cell: (info) => info.getValue(),
-      },
-    ],
-  },
-  {
+      }),
+    ]),
+  }),
+  columnHelper.group({
     header: 'Info',
-    columns: [
-      {
-        accessorKey: 'age',
+    columns: columnHelper.columns([
+      columnHelper.accessor('age', {
         header: () => 'Age',
         aggregatedCell: ({ getValue }) =>
           Math.round(getValue<number>() * 100) / 100,
         aggregationFn: 'median',
-      },
-      {
+      }),
+      columnHelper.group({
         header: 'More Info',
-        columns: [
-          {
-            accessorKey: 'visits',
+        columns: columnHelper.columns([
+          columnHelper.accessor('visits', {
             header: () => `Visits`,
             aggregationFn: 'sum',
-            // aggregatedCell: ({ getValue }) => getValue().toLocaleString(),
-          },
-          {
-            accessorKey: 'status',
+            aggregatedCell: ({ getValue }) => getValue().toLocaleString(),
+          }),
+          columnHelper.accessor('status', {
             header: 'Status',
-          },
-          {
-            accessorKey: 'progress',
+          }),
+          columnHelper.accessor('progress', {
             header: 'Profile Progress',
             cell: ({ getValue }) =>
               Math.round(getValue<number>() * 100) / 100 + '%',
             aggregationFn: 'mean',
             aggregatedCell: ({ getValue }) =>
               Math.round(getValue<number>() * 100) / 100 + '%',
-          },
-        ],
-      },
-    ],
-  },
-]
+          }),
+        ]),
+      }),
+    ]),
+  }),
+])

examples/react/grouping/src/main.tsx

@@ -37,7 +37,7 @@ const tableHelper = createTableHelper({
     groupedRowModel: createGroupedRowModel(aggregationFns),
     expandedRowModel: createExpandedRowModel(),
   },
-  TData: {} as Person,
+  TData: [] as Array<Person>,
 })
 
 function App() {