Skip to content

fix: AppTable remounting children on table state updates #6331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KevinVandy merged 4 commits into from
Jun 17, 2026
Merged

fix: AppTable remounting children on table state updates #6331

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6bc8c9b
fix: AppTable remounting children on table state updates (#6323)
Abyanzhafran Jun 17, 2026
214695c
also apply fix to preact
KevinVandy Jun 17, 2026
9b6daf1
modify composable table examples to make this easier to test
KevinVandy Jun 17, 2026
b02f793
update other composable table examples
KevinVandy Jun 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion examples/angular/composable-tables/src/app/components/cell-components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, computed } from '@angular/core'
import { ChangeDetectionStrategy, Component, computed } from '@angular/core'
import { injectFlexRenderContext } from '@tanstack/angular-table'
import { CurrencyPipe } from '@angular/common'
import { injectTableCellContext } from '../table'
Expand All @@ -20,6 +20,27 @@ export class TextCell {
injectFlexRenderContext<CellContext<TableFeatures, any, string>>()
}

@Component({
selector: 'table-select-cell',
host: {
class: 'selection-cell',
},
template: `
<input
type="checkbox"
[checked]="row().getIsSelected()"
[disabled]="!row().getCanSelect()"
[indeterminate]="row().getIsSomeSelected()"
(change)="row().getToggleSelectedHandler()($event)"
/>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SelectCell {
readonly cell = injectTableCellContext()
readonly row = computed(() => this.cell().row)
}

@Component({
selector: 'span',
host: {
Expand Down
22 changes: 21 additions & 1 deletion examples/angular/composable-tables/src/app/components/header-components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
// )
// }

import { Component, computed } from '@angular/core'
import { ChangeDetectionStrategy, Component, computed } from '@angular/core'
import { flexRenderComponent } from '@tanstack/angular-table'
import { FormsModule } from '@angular/forms'
import { injectTableHeaderContext } from '../table'
Expand All @@ -24,6 +24,26 @@ export function SortIndicator(): string | null {
return `<span class="sort-indicator">${sorted === 'asc' ? '🔼' : '🔽'}</span>`
}

@Component({
selector: 'table-select-header',
host: {
class: 'selection-cell',
},
template: `
<input
type="checkbox"
[checked]="table().getIsAllRowsSelected()"
[indeterminate]="table().getIsSomeRowsSelected()"
(change)="table().getToggleAllRowsSelectedHandler()($event)"
/>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SelectHeader {
readonly header = injectTableHeaderContext()
readonly table = computed(() => this.header().getContext().table)
}

export function ColumnFilter(): FlexRenderComponent | null {
const header = injectTableHeaderContext()
if (!header().column.getCanFilter()) return null
Expand Down
110 changes: 56 additions & 54 deletions examples/angular/composable-tables/src/app/components/products-table/products-table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,65 +6,67 @@
"
/>

<table>
<thead>
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
<tr>
@for (_header of headerGroup.headers; track _header.id) {
@let header = table.appHeader(_header);
@if (!header.isPlaceholder) {
<th [tanStackTableHeader]="header" (click)="header.column.toggleSorting()">
<ng-container *flexRenderHeader="header; let header">
{{ header }}
</ng-container>
<div class="table-scroll">
<table>
<thead>
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
<tr>
@for (_header of headerGroup.headers; track _header.id) {
@let header = table.appHeader(_header);
@if (!header.isPlaceholder) {
<th [tanStackTableHeader]="header" (click)="header.column.toggleSorting()">
<ng-container *flexRenderHeader="header; let header">
{{ header }}
</ng-container>

<ng-container
*flexRender="header.SortIndicator; props: header.getContext(); let value"
>
<div [innerHTML]="value"></div>
</ng-container>
<ng-container
*flexRender="header.SortIndicator; props: header.getContext(); let value"
>
<div [innerHTML]="value"></div>
</ng-container>

<ng-container
*flexRender="header.ColumnFilter; props: header.getContext(); let value"
>
<div [innerHTML]="value"></div>
<ng-container
*flexRender="header.ColumnFilter; props: header.getContext(); let value"
>
<div [innerHTML]="value"></div>
</ng-container>
</th>
}
}
</tr>
}
</thead>
<tbody>
@for (row of table.getRowModel().rows; track row.id) {
<tr>
@for (cell of row.getAllCells(); track cell.id) {
<td [tanStackTableCell]="cell">
<ng-container *flexRenderCell="cell; let cell">
{{ cell }}
</ng-container>
</th>
</td>
}
}
</tr>
}
</thead>
<tbody>
@for (row of table.getRowModel().rows; track row.id) {
<tr>
@for (cell of row.getAllCells(); track cell.id) {
<td [tanStackTableCell]="cell">
<ng-container *flexRenderCell="cell; let cell">
{{ cell }}
</ng-container>
</td>
}
</tr>
}
</tbody>
</tr>
}
</tbody>

<tfoot>
@for (footerGroup of table.getFooterGroups(); track footerGroup.id) {
<tr>
@for (footer of footerGroup.headers; track footer.id) {
<th [colSpan]="footer.colSpan" [tanStackTableHeader]="footer">
@if (!footer.isPlaceholder) {
<ng-container *flexRenderFooter="footer; let footer">
{{ footer }}
</ng-container>
}
</th>
}
</tr>
}
</tfoot>
</table>
<tfoot>
@for (footerGroup of table.getFooterGroups(); track footerGroup.id) {
<tr>
@for (footer of footerGroup.headers; track footer.id) {
<th [colSpan]="footer.colSpan" [tanStackTableHeader]="footer">
@if (!footer.isPlaceholder) {
<ng-container *flexRenderFooter="footer; let footer">
{{ footer }}
</ng-container>
}
</th>
}
</tr>
}
</tfoot>
</table>
</div>

<ng-container *ngComponentOutlet="table.PaginationControls" />

Expand Down
7 changes: 7 additions & 0 deletions examples/angular/composable-tables/src/app/components/products-table/products-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
TanStackTable,
TanStackTableCell,
TanStackTableHeader,
flexRenderComponent,
} from '@tanstack/angular-table'
import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
import { makeProductData } from '../../makeData'
Expand Down Expand Up @@ -34,6 +35,11 @@ export class ProductsTable {
readonly data = signal(makeProductData(1_000))

readonly columns = productColumnHelper.columns([
productColumnHelper.display({
id: 'select',
header: ({ header }) => flexRenderComponent(header.SelectHeader),
cell: ({ cell }) => flexRenderComponent(cell.SelectCell),
}),
productColumnHelper.accessor('name', {
header: 'Product Name',
footer: (props) => props.column.id,
Expand Down Expand Up @@ -66,6 +72,7 @@ export class ProductsTable {
columns: this.columns,
data: this.data(),
getRowId: (row) => row.id,
enableRowSelection: true,
// more table options
}))

Expand Down
110 changes: 56 additions & 54 deletions examples/angular/composable-tables/src/app/components/users-table/users-table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,65 +6,67 @@
"
/>

<table>
<thead>
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
<tr>
@for (_header of headerGroup.headers; track _header.id) {
@let header = table.appHeader(_header);
@if (!header.isPlaceholder) {
<th [tanStackTableHeader]="header" (click)="header.column.toggleSorting()">
<ng-container *flexRenderHeader="header; let header">
{{ header }}
</ng-container>
<div class="table-scroll">
<table>
<thead>
@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
<tr>
@for (_header of headerGroup.headers; track _header.id) {
@let header = table.appHeader(_header);
@if (!header.isPlaceholder) {
<th [tanStackTableHeader]="header" (click)="header.column.toggleSorting()">
<ng-container *flexRenderHeader="header; let header">
{{ header }}
</ng-container>

<ng-container
*flexRender="header.SortIndicator; props: header.getContext(); let value"
>
<div [innerHTML]="value"></div>
</ng-container>
<ng-container
*flexRender="header.SortIndicator; props: header.getContext(); let value"
>
<div [innerHTML]="value"></div>
</ng-container>

<ng-container
*flexRender="header.ColumnFilter; props: header.getContext(); let value"
>
<div [innerHTML]="value"></div>
<ng-container
*flexRender="header.ColumnFilter; props: header.getContext(); let value"
>
<div [innerHTML]="value"></div>
</ng-container>
</th>
}
}
</tr>
}
</thead>
<tbody>
@for (row of table.getRowModel().rows; track row.id) {
<tr>
@for (cell of row.getAllCells(); track cell.id) {
<td [tanStackTableCell]="cell">
<ng-container *flexRenderCell="cell; let cell">
{{ cell }}
</ng-container>
</th>
</td>
}
}
</tr>
}
</thead>
<tbody>
@for (row of table.getRowModel().rows; track row.id) {
<tr>
@for (cell of row.getAllCells(); track cell.id) {
<td [tanStackTableCell]="cell">
<ng-container *flexRenderCell="cell; let cell">
{{ cell }}
</ng-container>
</td>
}
</tr>
}
</tbody>
</tr>
}
</tbody>

<tfoot>
@for (footerGroup of table.getFooterGroups(); track footerGroup.id) {
<tr>
@for (footer of footerGroup.headers; track footer.id) {
<th [colSpan]="footer.colSpan" [tanStackTableHeader]="footer">
@if (!footer.isPlaceholder) {
<ng-container *flexRenderFooter="footer; let footer">
{{ footer }}
</ng-container>
}
</th>
}
</tr>
}
</tfoot>
</table>
<tfoot>
@for (footerGroup of table.getFooterGroups(); track footerGroup.id) {
<tr>
@for (footer of footerGroup.headers; track footer.id) {
<th [colSpan]="footer.colSpan" [tanStackTableHeader]="footer">
@if (!footer.isPlaceholder) {
<ng-container *flexRenderFooter="footer; let footer">
{{ footer }}
</ng-container>
}
</th>
}
</tr>
}
</tfoot>
</table>
</div>

<ng-container *ngComponentOutlet="table.PaginationControls" />

Expand Down
6 changes: 6 additions & 0 deletions examples/angular/composable-tables/src/app/components/users-table/users-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ export class UsersTable {
readonly data = signal(makeData(1_000))

readonly columns = personColumnHelper.columns([
personColumnHelper.display({
id: 'select',
header: ({ header }) => flexRenderComponent(header.SelectHeader),
cell: ({ cell }) => flexRenderComponent(cell.SelectCell),
}),
personColumnHelper.accessor('firstName', {
header: 'First Name',
footer: ({ header }) => flexRenderComponent(header.FooterColumnId),
Expand Down Expand Up @@ -77,6 +82,7 @@ export class UsersTable {
columns: this.columns,
data: this.data(),
debugTable: true,
enableRowSelection: true,
// more table options
}))

Expand Down
Loading
Loading