Skip to content

Commit 229c226

Browse files
riccardoperrariccardoperra
committed
feat: angular, solid, vue adapters with notifier reactivity feature
- Table will expose a optionsStore which is a store storing the table options. This remove the necessity to call table.baseStore.setOptions(prev => ({...prev})) on every setOptions in our adapters. Since options will be reactive and patched with the notifier given by the adapter through thetableReactivityFeature, solid/vue table will update even if an option change after table construction (properties given as a getter) - Add table solid devtools - Improve solid reactivity to automatically react to changes when options change while using signals
1 parent e90baf5 commit 229c226

57 files changed

Lines changed: 796 additions & 1140 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎examples/angular/row-selection/src/app/app.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<div class="p-2">
2+
<button class="border rounded px-2" (click)="toggleEnableRowSelection()">
3+
{{ enableRowSelection() ? 'Disable' : 'Enable' }} Row selection
4+
</button>
5+
26
<div class="h-2"></div>
37

48
<table [tanStackTable]="table">

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export class App {
3232
private readonly rowSelection = signal<RowSelectionState>({})
3333
readonly globalFilter = signal<string>('')
3434
readonly data = signal(makeData(10_000))
35+
readonly enableRowSelection = signal(true)
3536

3637
readonly columns = columnHelper.columns([
3738
columnHelper.display({
@@ -93,7 +94,8 @@ export class App {
9394
state: {
9495
rowSelection: this.rowSelection(),
9596
},
96-
enableRowSelection: true, // enable row selection for all rows
97+
98+
enableRowSelection: this.enableRowSelection(), // enable row selection for all rows
9799
// enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
98100
onRowSelectionChange: (updaterOrValue) => {
99101
this.rowSelection.set(
@@ -136,4 +138,8 @@ export class App {
136138
refreshData(): void {
137139
this.data.set(makeData(10_000))
138140
}
141+
142+
toggleEnableRowSelection() {
143+
this.enableRowSelection.update((value) => !value)
144+
}
139145
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export class TableHeaderSelection {
2929
<input
3030
type="checkbox"
3131
[checked]="context.row.getIsSelected()"
32+
[disabled]="!context.row.getCanSelect()"
3233
(change)="context.row.getToggleSelectedHandler()($event)"
3334
/>
3435
`,

‎examples/react/basic-external-state/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"dependencies": {
1414
"@faker-js/faker": "^10.2.0",
15-
"@tanstack/react-store": "^0.9.1",
15+
"@tanstack/react-store": "^0.9.2",
1616
"@tanstack/react-table": "^9.0.0-alpha.15",
1717
"react": "^19.2.4",
1818
"react-dom": "^19.2.4"

‎examples/react/basic-external-store/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"dependencies": {
1414
"@faker-js/faker": "^10.2.0",
15-
"@tanstack/react-store": "^0.9.1",
15+
"@tanstack/react-store": "^0.9.2",
1616
"@tanstack/react-table": "^9.0.0-alpha.15",
1717
"react": "^19.2.4",
1818
"react-dom": "^19.2.4"

‎examples/react/composable-tables/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"dependencies": {
1414
"@faker-js/faker": "^10.2.0",
15-
"@tanstack/react-store": "^0.9.1",
15+
"@tanstack/react-store": "^0.9.2",
1616
"@tanstack/react-table": "^9.0.0-alpha.15",
1717
"react": "^19.2.4",
1818
"react-dom": "^19.2.4"

‎examples/react/pagination/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"dependencies": {
1414
"@faker-js/faker": "^10.2.0",
15-
"@tanstack/react-store": "^0.9.1",
15+
"@tanstack/react-store": "^0.9.2",
1616
"@tanstack/react-table": "^9.0.0-alpha.15",
1717
"react": "^19.2.4",
1818
"react-dom": "^19.2.4"

‎examples/react/row-selection/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"dependencies": {
1414
"@faker-js/faker": "^10.2.0",
15-
"@tanstack/react-store": "^0.9.1",
15+
"@tanstack/react-store": "^0.9.2",
1616
"@tanstack/react-table": "^9.0.0-alpha.15",
1717
"react": "^19.2.4",
1818
"react-dom": "^19.2.4"

‎examples/react/sub-components/src/main.tsx‎

Lines changed: 50 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -103,56 +103,60 @@ function Table({
103103
})
104104

105105
return (
106-
<div className="p-2">
107-
<div className="h-2" />
108-
<table>
109-
<thead>
110-
{table.getHeaderGroups().map((headerGroup) => (
111-
<tr key={headerGroup.id}>
112-
{headerGroup.headers.map((header) => {
113-
return (
114-
<th key={header.id} colSpan={header.colSpan}>
115-
{header.isPlaceholder ? null : (
116-
<div>
117-
<table.FlexRender header={header} />
118-
</div>
119-
)}
120-
</th>
121-
)
122-
})}
123-
</tr>
124-
))}
125-
</thead>
126-
<tbody>
127-
{table.getRowModel().rows.map((row) => {
128-
return (
129-
<Fragment key={row.id}>
130-
<tr>
131-
{/* first row is a normal row */}
132-
{row.getAllCells().map((cell) => {
106+
<table.Subscribe selector={(state) => state}>
107+
{() => (
108+
<div className="p-2">
109+
<div className="h-2" />
110+
<table>
111+
<thead>
112+
{table.getHeaderGroups().map((headerGroup) => (
113+
<tr key={headerGroup.id}>
114+
{headerGroup.headers.map((header) => {
133115
return (
134-
<td key={cell.id}>
135-
<table.FlexRender cell={cell} />
136-
</td>
116+
<th key={header.id} colSpan={header.colSpan}>
117+
{header.isPlaceholder ? null : (
118+
<div>
119+
<table.FlexRender header={header} />
120+
</div>
121+
)}
122+
</th>
137123
)
138124
})}
139125
</tr>
140-
{row.getIsExpanded() && (
141-
<tr>
142-
{/* 2nd row is a custom 1 cell row */}
143-
<td colSpan={row.getAllCells().length}>
144-
{renderSubComponent({ row })}
145-
</td>
146-
</tr>
147-
)}
148-
</Fragment>
149-
)
150-
})}
151-
</tbody>
152-
</table>
153-
<div className="h-2" />
154-
<div>{table.getRowModel().rows.length} Rows</div>
155-
</div>
126+
))}
127+
</thead>
128+
<tbody>
129+
{table.getRowModel().rows.map((row) => {
130+
return (
131+
<Fragment key={row.id}>
132+
<tr>
133+
{/* first row is a normal row */}
134+
{row.getAllCells().map((cell) => {
135+
return (
136+
<td key={cell.id}>
137+
<table.FlexRender cell={cell} />
138+
</td>
139+
)
140+
})}
141+
</tr>
142+
{row.getIsExpanded() && (
143+
<tr>
144+
{/* 2nd row is a custom 1 cell row */}
145+
<td colSpan={row.getAllCells().length}>
146+
{renderSubComponent({ row })}
147+
</td>
148+
</tr>
149+
)}
150+
</Fragment>
151+
)
152+
})}
153+
</tbody>
154+
</table>
155+
<div className="h-2" />
156+
<div>{table.getRowModel().rows.length} Rows</div>
157+
</div>
158+
)}
159+
</table.Subscribe>
156160
)
157161
}
158162

‎examples/react/with-tanstack-query/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"dependencies": {
1414
"@faker-js/faker": "^10.2.0",
1515
"@tanstack/react-query": "^5.90.20",
16-
"@tanstack/react-store": "^0.9.1",
16+
"@tanstack/react-store": "^0.9.2",
1717
"@tanstack/react-table": "^9.0.0-alpha.15",
1818
"react": "^19.2.4",
1919
"react-dom": "^19.2.4"

0 commit comments

Comments
 (0)