Skip to content

fix(examples): Pass octane e2e on octane 0.12 #6630

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 1 commit into from
Oct 10, 2026
+69 −63
Merged

fix(examples): Pass octane e2e on octane 0.12 #6630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions docs/framework/octane/guide/cell-spanning.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,12 @@ A covered cell reports a span of `0`, and the renderer skips it. This is the sam
const colSpan = cell.getColSpan()

// A span of 0 means the cell is covered by a cell above or to its left.
// Skip it. Do not render `rowSpan={0}`: in HTML that means "span to the
// Skip it. Do not render `rowspan={0}`: in HTML that means "span to the
// end of the row group", which merges the cell down the entire tbody.
if (rowSpan === 0 || colSpan === 0) return null

return (
<td key={cell.id} rowSpan={rowSpan} colSpan={colSpan}>
<td key={cell.id} rowspan={rowSpan} colspan={colSpan}>
<table.FlexRender cell={cell} />
</td>
)
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/octane/guide/column-resizing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ How you apply these size styles to your markup is up to you, but it is pretty co
```tsx
<th
key={header.id}
colSpan={header.colSpan}
colspan={header.colSpan}
style={{ width: `${header.getSize()}px` }}
>
```
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/octane/guide/expanding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ const table = useTable({
{row.getIsExpanded() && (
<tr>
{/* span however many columns the expanded data needs if it does not share the parent row's columns */}
<td colSpan={row.getAllCells().length}>
<td colspan={row.getAllCells().length}>
{/* Your custom UI goes here */}
</td>
</tr>
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/aggregation/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ function App() @{
{table.getFooterGroups().map((group) => (
<tr key={group.id}>
{group.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
{header.isPlaceholder ? null : (
<table.FlexRender footer={header} />
)}
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/basic-dynamic-columns/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ function App() @{
@for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) {
<tr>
@for (const header of headerGroup.headers; key header.id) {
<th colSpan={header.colSpan}>
<th colspan={header.colSpan}>
{header.isPlaceholder ? null : <>
<div
className={header.column.getCanSort() ? 'sortable-header' : ''}
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/basic-external-atoms/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ function App() @{
@for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) {
<tr>
@for (const header of headerGroup.headers; key header.id) {
<th colSpan={header.colSpan}>
<th colspan={header.colSpan}>
{header.isPlaceholder ? null : <div
className={header.column.getCanSort() ? 'sortable-header' : ''}
onClick={header.column.getToggleSortingHandler()}
Expand Down
7 changes: 5 additions & 2 deletions examples/octane/basic-external-atoms/tests/e2e/smoke.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,11 @@ test('updates pagination atom and row model without errors', async ({
await expect(status).toContainText('1 of 100')
const timing = await page
.getByRole('button', { name: '>', exact: true })
.evaluate((button) => {
.evaluate(async (button) => {
const started = performance.now()
;(button as HTMLButtonElement).click()
// Octane commits a click's updates in the next microtask.
await Promise.resolve()
return {
elapsed: performance.now() - started,
status: document.querySelector('.controls strong')?.textContent,
Expand All @@ -48,9 +50,10 @@ test('updates pagination atom and row model without errors', async ({
const sortTiming = await page
.locator('.sortable-header')
.first()
.evaluate((header) => {
.evaluate(async (header) => {
const started = performance.now()
;(header as HTMLElement).click()
await Promise.resolve()
return {
elapsed: performance.now() - started,
text: header.textContent,
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/basic-external-state/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function App() @{
@for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) {
<tr>
@for (const header of headerGroup.headers; key header.id) {
<th colSpan={header.colSpan}>
<th colspan={header.colSpan}>
{header.isPlaceholder ? null : <div
className={header.column.getCanSort() ? 'sortable-header' : ''}
onClick={header.column.getToggleSortingHandler()}
Expand Down
7 changes: 5 additions & 2 deletions examples/octane/basic-external-state/tests/e2e/smoke.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,11 @@ test('advances controlled pagination repeatedly without render-phase errors', as
const status = page.getByText(/^Page$/).locator('..')
await expect(status).toContainText('1 of 100')
const first = await firstRow(page)
const timing = await next.evaluate((button) => {
const timing = await next.evaluate(async (button) => {
const started = performance.now()
;(button as HTMLButtonElement).click()
// Octane commits a click's updates in the next microtask.
await Promise.resolve()
return {
elapsed: performance.now() - started,
status: document.querySelector('.controls strong')?.textContent,
Expand All @@ -56,9 +58,10 @@ test('advances controlled pagination repeatedly without render-phase errors', as
const sortTiming = await page
.locator('.sortable-header')
.first()
.evaluate((header) => {
.evaluate(async (header) => {
const started = performance.now()
;(header as HTMLElement).click()
await Promise.resolve()
return {
elapsed: performance.now() - started,
text: header.textContent,
Expand Down
4 changes: 2 additions & 2 deletions examples/octane/basic-subscribe/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ function App() @{
@for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) {
<tr>
@for (const header of headerGroup.headers; key header.id) {
<th colSpan={header.colSpan}>
<th colspan={header.colSpan}>
{header.isPlaceholder ? null : <>
<table.FlexRender header={header} />
{header.column.getCanFilter()
Expand Down Expand Up @@ -175,7 +175,7 @@ function App() @{
/>}
</table.Subscribe>
</td>
<td colSpan={20}>
<td colspan={20}>
Page Rows ({String(table.getRowModel().rows.length)})
</td>
</tr>
Expand Down
12 changes: 6 additions & 6 deletions examples/octane/cell-spanning/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ function App() @{
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
<button
type="button"
className="sortable-header header-sort-button"
Expand Down Expand Up @@ -315,7 +315,7 @@ function App() @{
const colSpan = cell.getColSpan()

// A span of 0 means this cell is covered by a cell above
// or to its left. Skip it. Do NOT render `rowSpan={0}`:
// or to its left. Skip it. Do NOT render `rowspan={0}`:
// in HTML that means "span to the end of the row group",
// so forgetting this check merges the cell down the whole
// tbody instead of rendering nothing.
Expand All @@ -324,8 +324,8 @@ function App() @{
return (
<td
key={cell.id}
rowSpan={rowSpan}
colSpan={colSpan}
rowspan={rowSpan}
colspan={colSpan}
className={getCellClassName(cell)}
onMouseDown={cell.getSelectionStartHandler()}
onMouseEnter={cell.getSelectionExtendHandler()}
Expand Down Expand Up @@ -368,7 +368,7 @@ function App() @{
{summaryTable.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
<summaryTable.FlexRender header={header} />
</th>
))}
Expand All @@ -392,7 +392,7 @@ function App() @{
if (rowSpan === 0 || colSpan === 0) return null

return (
<td key={cell.id} rowSpan={rowSpan} colSpan={colSpan}>
<td key={cell.id} rowspan={rowSpan} colspan={colSpan}>
<summaryTable.FlexRender cell={cell} />
</td>
)
Expand Down
4 changes: 2 additions & 2 deletions examples/octane/column-ordering/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ function App() @{
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
{header.isPlaceholder ? null : (
<table.FlexRender header={header} />
)}
Expand All @@ -172,7 +172,7 @@ function App() @{
{table.getFooterGroups().map((footerGroup) => (
<tr key={footerGroup.id}>
{footerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
{header.isPlaceholder ? null : (
<table.FlexRender footer={header} />
)}
Expand Down
6 changes: 3 additions & 3 deletions examples/octane/column-pinning-split/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ function App() @{
{table.getStartHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
<div className="nowrap">
{header.isPlaceholder ? null : (
<table.FlexRender header={header} />
Expand Down Expand Up @@ -224,7 +224,7 @@ function App() @{
{table.getCenterHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
<div className="nowrap">
{header.isPlaceholder ? null : (
<table.FlexRender header={header} />
Expand Down Expand Up @@ -293,7 +293,7 @@ function App() @{
{table.getEndHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
<div className="nowrap">
{header.isPlaceholder ? null : (
<table.FlexRender header={header} />
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/column-pinning-sticky/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ function App() @{
return (
<th
key={header.id}
colSpan={header.colSpan}
colspan={header.colSpan}
// IMPORTANT: This is where the magic happens!
style={{ ...getCommonPinningStyles(column) }}
>
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/column-pinning/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ function App() @{
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
<div className="nowrap">
{header.isPlaceholder ? null : (
<table.FlexRender header={header} />
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/column-resizing-performant/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ function App() @{
{headerGroup.headers.map((header) => (
<th
key={header.id}
colSpan={header.colSpan}
colspan={header.colSpan}
style={{
display: 'flex',
flexShrink: 0,
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/column-resizing/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ function App() @{
{headerGroup.headers.map((header) => (
<th
key={header.id}
colSpan={header.colSpan}
colspan={header.colSpan}
style={{
width: header.getSize(),
}}
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/column-sizing/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ function App() @{
{headerGroup.headers.map((header) => (
<th
key={header.id}
colSpan={header.colSpan}
colspan={header.colSpan}
style={{
width: header.getSize(),
}}
Expand Down
4 changes: 2 additions & 2 deletions examples/octane/column-visibility/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ function App() @{
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
{header.isPlaceholder ? null : (
<table.FlexRender header={header} />
)}
Expand All @@ -144,7 +144,7 @@ function App() @{
{table.getFooterGroups().map((footerGroup) => (
<tr key={footerGroup.id}>
{footerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
{header.isPlaceholder ? null : (
<table.FlexRender footer={header} />
)}
Expand Down
8 changes: 4 additions & 4 deletions examples/octane/composable-tables/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ function UsersTable() @{
<table.AppHeader header={h} key={h.id}>
{(header) => (
<th
colSpan={header.colSpan}
colspan={header.colSpan}
className={
header.column.getCanSort() ? 'sortable-header' : ''
}
Expand Down Expand Up @@ -173,7 +173,7 @@ function UsersTable() @{
)

return (
<td colSpan={footer.colSpan}>
<td colspan={footer.colSpan}>
{footer.isPlaceholder ? null : (
<>
{/* Use FooterSum for numeric columns, FooterColumnId for others */}
Expand Down Expand Up @@ -314,7 +314,7 @@ function ProductsTable() @{
<table.AppHeader header={h} key={h.id}>
{(header) => (
<th
colSpan={header.colSpan}
colspan={header.colSpan}
className={
header.column.getCanSort() ? 'sortable-header' : ''
}
Expand Down Expand Up @@ -372,7 +372,7 @@ function ProductsTable() @{
)

return (
<td colSpan={footer.colSpan}>
<td colspan={footer.colSpan}>
{footer.isPlaceholder ? null : (
<>
{/* Use FooterSum for numeric columns, FooterColumnId for others */}
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/custom-plugin/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ function App() @{
return (
<th
key={header.id}
colSpan={header.colSpan}
colspan={header.colSpan}
style={{
// using our new feature
padding:
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/expanding/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ function App() @{
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
{header.isPlaceholder ? null : (
<div>
<table.FlexRender header={header} />
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/filters-faceted-bucketed/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ function App() @{
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
{header.isPlaceholder ? null : (
<>
<div className="header-label">
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/filters-faceted/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ function App() @{
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
{header.isPlaceholder ? null : (
<>
<div>
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/filters-fuzzy/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ function App() @{
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
{header.isPlaceholder ? null : (
<>
<div
Expand Down
2 changes: 1 addition & 1 deletion examples/octane/filters/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ function App() @{
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
{header.isPlaceholder ? null : (
<>
<div>
Expand Down
4 changes: 2 additions & 2 deletions examples/octane/grouped-aggregation/src/main.tsrx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ function App() @{
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
{header.isPlaceholder ? null : (
<div>
{header.column.getCanGroup() ? (
Expand Down Expand Up @@ -220,7 +220,7 @@ function App() @{
{table.getFooterGroups().map((footerGroup) => (
<tr key={footerGroup.id}>
{footerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
<th key={header.id} colspan={header.colSpan}>
{header.isPlaceholder ? null : (
<table.FlexRender footer={header} />
)}
Expand Down
Loading
Loading