Skip to content

Commit a04e39e

Browse files
riccardoperrariccardoperra
committed
docs(angular): fix examples
1 parent fdfca13 commit a04e39e

File tree

16 files changed

+182
-125
lines changed

16 files changed

+182
-125
lines changed

‎examples/angular/column-resizing-performant/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@angular/platform-browser-dynamic": "^19.1.4",
2020
"@angular/router": "^19.1.4",
2121
"@faker-js/faker": "^8.4.1",
22-
"@tanstack/angular-table": "^8.21.0",
22+
"@tanstack/angular-table": "^9.0.0-alpha.10",
2323
"rxjs": "~7.8.1",
2424
"zone.js": "~0.15.0"
2525
},

‎examples/angular/column-resizing-performant/src/app/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<div class="tbody">
4646
@for (row of table.getRowModel().rows; track row.id) {
4747
<tr class="tr">
48-
@for (cell of row.getVisibleCells(); track cell.id) {
48+
@for (cell of row.getAllCells(); track cell.id) {
4949
<td class="td" [tableResizableCell]="cell.column.id">
5050
<ng-container
5151
*flexRender="

‎examples/angular/column-resizing-performant/src/app/app.component.ts‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,28 @@ import {
66
untracked,
77
} from '@angular/core'
88
import {
9-
ColumnDef,
10-
createAngularTable,
119
FlexRenderDirective,
12-
getCoreRowModel,
10+
columnResizingFeature,
11+
columnSizingFeature,
12+
injectTable,
13+
tableFeatures,
1314
} from '@tanstack/angular-table'
14-
import { makeData, type Person } from './makeData'
15+
import { makeData } from './makeData'
1516
import { TableResizableCell, TableResizableHeader } from './resizable-cell'
17+
import type {Person} from './makeData';
18+
import type { ColumnDef, ColumnResizeMode } from '@tanstack/angular-table'
1619

17-
const defaultColumns: ColumnDef<Person>[] = [
20+
const _features = tableFeatures({
21+
columnSizingFeature,
22+
columnResizingFeature
23+
})
24+
25+
const defaultColumns: Array<
26+
ColumnDef<
27+
typeof _features,
28+
Person
29+
>
30+
> = [
1831
{
1932
header: 'Name',
2033
footer: (props) => props.column.id,
@@ -68,11 +81,8 @@ const defaultColumns: ColumnDef<Person>[] = [
6881
changeDetection: ChangeDetectionStrategy.OnPush,
6982
})
7083
export class AppComponent {
71-
readonly data = signal<Person[]>(makeData(200))
84+
readonly data = signal<Array<Person>>(makeData(200))
7285

73-
readonly columnSizingInfo = computed(
74-
() => this.table.getState().columnSizingInfo,
75-
)
7686
readonly columnSizing = computed(() => this.table.getState().columnSizing)
7787

7888
/**
@@ -83,23 +93,22 @@ export class AppComponent {
8393
*/
8494
readonly columnSizeVars = computed(() => {
8595
void this.columnSizing()
86-
void this.columnSizingInfo()
8796
const headers = untracked(() => this.table.getFlatHeaders())
8897
const colSizes: { [key: string]: number } = {}
8998
let i = headers.length
9099
while (--i >= 0) {
91-
const header = headers[i]!
100+
const header = headers[i]
92101
colSizes[`--header-${header.id}-size`] = header.getSize()
93102
colSizes[`--col-${header.column.id}-size`] = header.column.getSize()
94103
}
95104
return colSizes
96105
})
97106

98-
readonly table = createAngularTable(() => ({
107+
readonly table = injectTable(() => ({
99108
data: this.data(),
109+
_features,
100110
columns: defaultColumns,
101-
columnResizeMode: 'onChange',
102-
getCoreRowModel: getCoreRowModel(),
111+
columnResizeMode: 'onChange' as ColumnResizeMode,
103112
defaultColumn: {
104113
minSize: 60,
105114
maxSize: 800,

‎examples/angular/editable/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@angular/platform-browser-dynamic": "^19.1.4",
2020
"@angular/router": "^19.1.4",
2121
"@faker-js/faker": "^8.4.1",
22-
"@tanstack/angular-table": "^8.21.0",
22+
"@tanstack/angular-table": "^9.0.0-alpha.10",
2323
"rxjs": "~7.8.1",
2424
"zone.js": "~0.15.0"
2525
},

‎examples/angular/editable/src/app/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<tbody>
2525
@for (row of table.getRowModel().rows; track row.id) {
2626
<tr>
27-
@for (cell of row.getVisibleCells(); track cell.id) {
27+
@for (cell of row.getAllCells(); track cell.id) {
2828
<td>
2929
<ng-container
3030
*flexRender="

‎examples/angular/editable/src/app/app.component.ts‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,35 @@
11
import {
2-
afterNextRender,
32
ChangeDetectionStrategy,
43
Component,
5-
inject,
64
Injector,
5+
afterNextRender,
6+
inject,
77
signal,
88
} from '@angular/core'
99
import {
10-
ColumnDef,
11-
createAngularTable,
12-
flexRenderComponent,
1310
FlexRenderDirective,
14-
getCoreRowModel,
15-
getFilteredRowModel,
16-
getPaginationRowModel,
17-
type RowData,
11+
createPaginatedRowModel,
12+
flexRenderComponent,
13+
injectTable,
14+
rowPaginationFeature,
15+
tableFeatures,
1816
} from '@tanstack/angular-table'
1917
import { EditableCell } from './editable-cell'
20-
import { makeData, type Person } from './makeData'
18+
import { makeData } from './makeData'
19+
import type { Person } from './makeData'
20+
import type { ColumnDef, RowData, TableFeatures } from '@tanstack/angular-table'
2121

2222
declare module '@tanstack/angular-table' {
23-
interface TableMeta<TData extends RowData> {
23+
interface TableMeta<TFeatures extends TableFeatures, TData extends RowData> {
2424
updateData: (rowIndex: number, columnId: string, value: unknown) => void
2525
}
2626
}
2727

28-
const defaultColumn: Partial<ColumnDef<Person>> = {
28+
const _features = tableFeatures({
29+
rowPaginationFeature,
30+
})
31+
32+
const defaultColumn: Partial<ColumnDef<typeof _features, Person>> = {
2933
cell: ({ getValue, row, column, table }) => {
3034
const initialValue = getValue()
3135

@@ -44,7 +48,7 @@ const defaultColumn: Partial<ColumnDef<Person>> = {
4448
},
4549
}
4650

47-
const defaultColumns: ColumnDef<Person>[] = [
51+
const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
4852
{
4953
accessorKey: 'firstName',
5054
footer: (info) => info.column.id,
@@ -84,18 +88,19 @@ const defaultColumns: ColumnDef<Person>[] = [
8488
changeDetection: ChangeDetectionStrategy.OnPush,
8589
})
8690
export class AppComponent {
87-
readonly data = signal<Person[]>(makeData(10_000))
91+
readonly data = signal<Array<Person>>(makeData(10_000))
8892
readonly injector = inject(Injector)
8993

9094
readonly autoResetPageIndex = signal(true)
9195

92-
readonly table = createAngularTable(() => ({
96+
readonly table = injectTable(() => ({
9397
data: this.data(),
9498
columns: defaultColumns,
99+
_features,
100+
_rowModels: {
101+
paginatedRowModel: createPaginatedRowModel() as any,
102+
},
95103
defaultColumn: defaultColumn,
96-
getCoreRowModel: getCoreRowModel(),
97-
getFilteredRowModel: getFilteredRowModel(),
98-
getPaginationRowModel: getPaginationRowModel(),
99104
debugTable: true,
100105
autoResetPageIndex: this.autoResetPageIndex(),
101106
// Provide our updateData function to our table meta

‎examples/angular/expanding/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@angular/platform-browser-dynamic": "^19.1.4",
2020
"@angular/router": "^19.1.4",
2121
"@faker-js/faker": "^8.4.1",
22-
"@tanstack/angular-table": "^8.21.0",
22+
"@tanstack/angular-table": "^9.0.0-alpha.10",
2323
"rxjs": "~7.8.1",
2424
"zone.js": "~0.15.0"
2525
},

‎examples/angular/expanding/src/app/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<tbody>
2828
@for (row of table.getRowModel().rows; track row.id) {
2929
<tr>
30-
@for (cell of row.getVisibleCells(); track cell.id) {
30+
@for (cell of row.getAllCells(); track cell.id) {
3131
<td>
3232
<ng-container
3333
*flexRender="

‎examples/angular/expanding/src/app/app.component.ts‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,29 @@ import {
55
signal,
66
} from '@angular/core'
77
import {
8-
ColumnDef,
9-
createAngularTable,
10-
ExpandedState,
11-
flexRenderComponent,
128
FlexRenderDirective,
13-
getCoreRowModel,
14-
getExpandedRowModel,
15-
getFilteredRowModel,
16-
getPaginationRowModel,
9+
createExpandedRowModel,
10+
createPaginatedRowModel,
11+
createTableHelper,
12+
flexRenderComponent,
13+
rowExpandingFeature,
14+
rowPaginationFeature,
15+
rowSelectionFeature,
16+
tableFeatures,
1717
} from '@tanstack/angular-table'
18-
import { makeData, type Person } from './makeData'
1918
import { ReactiveFormsModule } from '@angular/forms'
19+
import { makeData } from './makeData'
2020
import { ExpandableCell, ExpandableHeaderCell } from './expandable-cell'
21+
import type { Person } from './makeData'
22+
import type { ColumnDef, ExpandedState } from '@tanstack/angular-table'
23+
24+
const _features = tableFeatures({
25+
rowExpandingFeature: rowExpandingFeature,
26+
rowPaginationFeature: rowPaginationFeature,
27+
rowSelectionFeature: rowSelectionFeature,
28+
})
2129

22-
const defaultColumns: ColumnDef<Person>[] = [
30+
const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
2331
{
2432
accessorKey: 'firstName',
2533
header: () =>
@@ -66,10 +74,18 @@ const defaultColumns: ColumnDef<Person>[] = [
6674
changeDetection: ChangeDetectionStrategy.OnPush,
6775
})
6876
export class AppComponent {
69-
readonly data = signal<Person[]>(makeData(100, 5, 3))
77+
readonly data = signal<Array<Person>>(makeData(100, 5, 3))
7078
readonly expanded = signal<ExpandedState>({})
7179

72-
readonly table = createAngularTable(() => ({
80+
readonly tableHelper = createTableHelper({
81+
_features,
82+
_rowModels: {
83+
paginatedRowModel: createPaginatedRowModel(),
84+
expandedRowModel: createExpandedRowModel(),
85+
},
86+
})
87+
88+
readonly table = this.tableHelper.injectTable(() => ({
7389
data: this.data(),
7490
columns: defaultColumns,
7591
state: {
@@ -80,10 +96,6 @@ export class AppComponent {
8096
? this.expanded.update(updater)
8197
: this.expanded.set(updater),
8298
getSubRows: (row) => row.subRows,
83-
getCoreRowModel: getCoreRowModel(),
84-
getPaginationRowModel: getPaginationRowModel(),
85-
getFilteredRowModel: getFilteredRowModel(),
86-
getExpandedRowModel: getExpandedRowModel(),
8799
// filterFromLeafRows: true,
88100
// maxLeafRowFilterDepth: 0,
89101
debugTable: true,

‎examples/angular/expanding/src/app/expandable-cell.ts‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import {
44
injectFlexRenderContext,
55
type Table,
66
CellContext,
7+
rowExpandingFeature,
8+
RowData,
9+
rowSelectionFeature,
710
} from '@tanstack/angular-table'
811

912
@Component({
@@ -25,13 +28,22 @@ import {
2528
`,
2629
changeDetection: ChangeDetectionStrategy.OnPush,
2730
})
28-
export class ExpandableHeaderCell<T> {
29-
readonly context = injectFlexRenderContext<HeaderContext<T, unknown>>()
31+
export class ExpandableHeaderCell<T extends RowData> {
32+
readonly context = injectFlexRenderContext<
33+
HeaderContext<
34+
{
35+
rowExpandingFeature: typeof rowExpandingFeature,
36+
rowSelectionFeature: typeof rowSelectionFeature
37+
},
38+
T,
39+
unknown
40+
>
41+
>()
3042

3143
readonly label = input.required<string>()
3244

3345
get table() {
34-
return this.context.table as Table<T>
46+
return this.context.table;
3547
}
3648
}
3749

@@ -70,8 +82,11 @@ export class ExpandableHeaderCell<T> {
7082
}
7183
`,
7284
})
73-
export class ExpandableCell<T> {
74-
readonly context = injectFlexRenderContext<CellContext<T, unknown>>()
85+
export class ExpandableCell<T extends RowData> {
86+
readonly context = injectFlexRenderContext<CellContext<{
87+
rowExpandingFeature: typeof rowExpandingFeature,
88+
rowSelectionFeature: typeof rowSelectionFeature
89+
}, T, unknown>>()
7590

7691
get row() {
7792
return this.context.row

0 commit comments

Comments
 (0)