Skip to content

Commit c85943a

Browse files
riccardoperrariccardoperra
committed
fix examples
1 parent 260f4d5 commit c85943a

File tree

5 files changed

+84
-223
lines changed

5 files changed

+84
-223
lines changed

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

Lines changed: 73 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
columnFilteringFeature,
1212
createFilteredRowModel,
1313
createPaginatedRowModel,
14-
injectTable,
14+
createTableHelper,
1515
rowPaginationFeature,
1616
rowSelectionFeature,
1717
tableFeatures,
@@ -27,10 +27,17 @@ import type { Person } from './makeData'
2727
import type { ColumnDef, RowSelectionState } from '@tanstack/angular-table'
2828
import type { TemplateRef } from '@angular/core'
2929

30-
const features = tableFeatures({
31-
rowPaginationFeature,
32-
rowSelectionFeature,
33-
columnFilteringFeature,
30+
const tableHelper = createTableHelper({
31+
_features: {
32+
rowPaginationFeature,
33+
rowSelectionFeature,
34+
columnFilteringFeature,
35+
},
36+
_rowModels: {
37+
filteredRowModel: createFilteredRowModel(),
38+
paginatedRowModel: createPaginatedRowModel(),
39+
},
40+
debugTable: true,
3441
})
3542

3643
@Component({
@@ -48,85 +55,72 @@ export class AppComponent {
4855
readonly ageHeaderCell =
4956
viewChild.required<TemplateRef<unknown>>('ageHeaderCell')
5057

51-
readonly columns: Array<ColumnDef<typeof features, Person>> = [
52-
{
53-
id: 'select',
54-
header: () => {
55-
return new FlexRenderComponent(TableHeadSelectionComponent)
56-
},
57-
cell: () => {
58-
return new FlexRenderComponent(TableRowSelectionComponent)
59-
},
60-
},
61-
{
62-
header: 'Name',
63-
footer: (props) => props.column.id,
64-
columns: [
65-
{
66-
accessorKey: 'firstName',
67-
cell: (info) => info.getValue(),
68-
footer: (props) => props.column.id,
69-
header: 'First name',
58+
readonly columns: Array<ColumnDef<(typeof tableHelper)['features'], Person>> =
59+
[
60+
{
61+
id: 'select',
62+
header: () => {
63+
return new FlexRenderComponent(TableHeadSelectionComponent)
7064
},
71-
{
72-
accessorFn: (row) => row.lastName,
73-
id: 'lastName',
74-
cell: (info) => info.getValue(),
75-
header: () => 'Last Name',
76-
footer: (props) => props.column.id,
77-
},
78-
],
79-
},
80-
{
81-
header: 'Info',
82-
footer: (props) => props.column.id,
83-
columns: [
84-
{
85-
accessorKey: 'age',
86-
header: () => this.ageHeaderCell(),
87-
footer: (props) => props.column.id,
65+
cell: () => {
66+
return new FlexRenderComponent(TableRowSelectionComponent)
8867
},
89-
{
90-
header: 'More Info',
91-
columns: [
92-
{
93-
accessorKey: 'visits',
94-
header: () => 'Visits',
95-
footer: (props) => props.column.id,
96-
},
97-
{
98-
accessorKey: 'status',
99-
header: 'Status',
100-
footer: (props) => props.column.id,
101-
},
102-
{
103-
accessorKey: 'progress',
104-
header: 'Profile Progress',
105-
footer: (props) => props.column.id,
106-
},
107-
],
108-
},
109-
],
110-
},
111-
]
112-
113-
readonly tableFeatures = tableFeatures({
114-
rowPaginationFeature,
115-
rowSelectionFeature,
116-
columnFilteringFeature,
117-
})
68+
},
69+
{
70+
header: 'Name',
71+
footer: (props) => props.column.id,
72+
columns: [
73+
{
74+
accessorKey: 'firstName',
75+
cell: (info) => info.getValue(),
76+
footer: (props) => props.column.id,
77+
header: 'First name',
78+
},
79+
{
80+
accessorFn: (row) => row.lastName,
81+
id: 'lastName',
82+
cell: (info) => info.getValue(),
83+
header: () => 'Last Name',
84+
footer: (props) => props.column.id,
85+
},
86+
],
87+
},
88+
{
89+
header: 'Info',
90+
footer: (props) => props.column.id,
91+
columns: [
92+
{
93+
accessorKey: 'age',
94+
header: () => this.ageHeaderCell(),
95+
footer: (props) => props.column.id,
96+
},
97+
{
98+
header: 'More Info',
99+
columns: [
100+
{
101+
accessorKey: 'visits',
102+
header: () => 'Visits',
103+
footer: (props) => props.column.id,
104+
},
105+
{
106+
accessorKey: 'status',
107+
header: 'Status',
108+
footer: (props) => props.column.id,
109+
},
110+
{
111+
accessorKey: 'progress',
112+
header: 'Profile Progress',
113+
footer: (props) => props.column.id,
114+
},
115+
],
116+
},
117+
],
118+
},
119+
]
118120

119-
table = injectTable(() => ({
121+
table = tableHelper.injectTable(() => ({
120122
data: this.data(),
121-
_features: features,
122-
// @ts-expect-error Fix types
123123
columns: this.columns,
124-
_rowModels: {
125-
// @ts-expect-error Fix types
126-
filteredRowModel: createFilteredRowModel(),
127-
// @ts-expect-error Fix types
128-
paginatedRowModel: createPaginatedRowModel(),
129-
},
130124
state: {
131125
rowSelection: this.rowSelection(),
132126
},
@@ -139,7 +133,6 @@ export class AppComponent {
139133
: updaterOrValue,
140134
)
141135
},
142-
debugTable: true,
143136
}))
144137

145138
readonly stringifiedRowSelection = computed(() =>

‎packages/angular-table/src/createTableHelper.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ export type TableHelper<
1313
TFeatures extends TableFeatures,
1414
TData extends RowData = any,
1515
> = Omit<TableHelper_Core<TFeatures, TData>, 'tableCreator'> & {
16-
injectTable: (
16+
injectTable: <TInferData extends TData>(
1717
tableOptions: () => Omit<
18-
TableOptions<TFeatures, TData>,
18+
TableOptions<TFeatures, TInferData>,
1919
'_features' | '_rowModels' | '_rowModelFns'
2020
>,
21-
) => Table<TFeatures, TData>
21+
) => Table<TFeatures, TInferData>
2222
}
2323

2424
export function createTableHelper<

‎packages/angular-table/src/createTableHelperCore.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export type TableHelper_Core<
3838
features: TFeatures
3939
options: Omit<TableOptions<TFeatures, TData>, 'columns' | 'data' | 'state'>
4040
tableCreator: <TData extends RowData>(
41-
tableOptions: Omit<
41+
tableOptions: () => Omit<
4242
TableOptions<TFeatures, TData>,
4343
'_features' | '_rowModels' | '_rowModelFns'
4444
>,
@@ -64,8 +64,11 @@ export function constructTableHelper<
6464
features: tableHelperOptions._features,
6565
options: _tableHelperOptions as any,
6666
tableCreator: (tableOptions) =>
67-
// @ts-expect-error - TODO: fix this
68-
tableCreator({ ..._tableHelperOptions, ...tableOptions }),
67+
// @ts-expect-error Fix this
68+
tableCreator(() => ({
69+
...tableHelperOptions,
70+
...tableOptions(),
71+
})),
6972
}
7073
}
7174

‎packages/angular-table/src/injectTable.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
} from '@tanstack/table-core'
88
import { lazyInit } from './lazy-signal-initializer'
99
import { proxifyTable } from './proxy'
10-
import { reactivityFeature } from './reactivityFeature'
10+
import { reactivityFeature } from './reactivity'
1111
import type {
1212
RowData,
1313
Table,
@@ -78,7 +78,7 @@ export function injectTable<
7878
},
7979
)
8080

81-
table._setNotifier(tableSignal as unknown as Signal<Table<any, any>>)
81+
table._setRootNotifier?.(tableSignal as unknown as Signal<Table<any, any>>)
8282

8383
// proxify Table instance to provide ability for consumer to listen to any table state changes
8484
return proxifyTable(tableSignal)

‎packages/angular-table/src/reactivityFeature.ts‎

Lines changed: 0 additions & 135 deletions
This file was deleted.

0 commit comments

Comments
 (0)