Skip to content

feat: much better resizing performance #6367

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
Jul 2, 2026
+4,339 −1,280
Merged

feat: much better resizing performance #6367

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
f3e5037
feat: much better resizing performance
KevinVandy Jul 2, 2026
396bb64
ci: apply automated fixes
autofix-ci[bot] Jul 2, 2026
dfc82c0
fix alpine adapter performance
KevinVandy Jul 2, 2026
97e4e47
clean up lit example
KevinVandy Jul 2, 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
72 changes: 47 additions & 25 deletions examples/alpine/column-resizing-performant/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,61 +8,83 @@
<body>
<div id="root" class="demo-root" x-data="table">
<div class="button-row">
<button @click="refreshData()">Regenerate Data</button>
<button @click="stressTest()">Stress Test (2k rows)</button>
<button @click="refreshData()" class="demo-button">
Regenerate Data
</button>
<button @click="stressTest()" class="demo-button">
Stress Test (5k rows)
</button>
</div>
<div class="spacer-md"></div>
<pre
style="min-height: 10rem"
x-text="JSON.stringify(table.store.get(), null, 2)"
></pre>
<!-- Written imperatively per resize tick by the store subscription in
init(); an x-text binding here would freeze under the () => ({})
selector -->
<pre x-ref="stateDump" style="height: 10rem; overflow: auto"></pre>
<div class="spacer-md"></div>
<span x-text="'(' + local.data.length.toLocaleString() + ' rows)'"></span>
<div class="scroll-container">
<div class="divTable" :style="columnSizeVars()">
<div class="thead">
<!-- This example is using semantic table tags, but also CSS Grid/Flexbox
layout for more absolute column widths. All column widths flow
through CSS variables written imperatively onto this element (see
init() in main.ts), so a resize tick does zero Alpine work -->
<table x-ref="tableEl" style="display: grid">
<thead style="display: grid">
<template
x-for="headerGroup in table.getHeaderGroups()"
:key="headerGroup.id"
>
<div class="tr">
<tr style="display: flex; width: 100%; height: 30px">
<template
x-for="header in headerGroup.headers"
:key="header.id"
>
<div
class="th"
:style="'width:calc(var(--header-' + header.id + '-size) * 1px)'"
<!-- use CSS variables for widths so cells never update -->
<th
:colspan="header.colSpan"
:style="'display:flex;flex-shrink:0;width:calc(var(--header-' + header.id + '-size) * 1px)'"
>
<template x-if="!header.isPlaceholder">
<span x-html="FlexRender({ header })"></span>
</template>
<!-- The isResizing highlight is toggled imperatively by
the columnResizing subscription in init(), keyed off
this data attribute -->
<div
class="resizer"
:class="header.column.getIsResizing() ? 'is-resizing' : ''"
:data-col-id="header.column.id"
@dblclick="header.column.resetSize()"
@mousedown="header.getResizeHandler()($event)"
@touchstart="header.getResizeHandler()($event)"
></div>
</div>
</th>
</template>
</div>
</tr>
</template>
</div>
<div class="tbody">
</thead>
<!-- No memoization needed: nothing in the body reads resize state -->
<tbody style="display: grid">
<template x-for="row in table.getRowModel().rows" :key="row.id">
<div class="tr">
<!-- content-visibility lets offscreen rows skip style recalc and
layout, so a live resize only lays out the rows on screen -->
<tr
style="
display: flex;
width: 100%;
height: 30px;
content-visibility: auto;
contain-intrinsic-height: auto 30px;
"
>
<template x-for="cell in row.getAllCells()" :key="cell.id">
<div
class="td"
:style="'width:calc(var(--col-' + cell.column.id + '-size) * 1px)'"
<td
:style="'display:flex;flex-shrink:0;width:calc(var(--col-' + cell.column.id + '-size) * 1px)'"
x-text="cell.renderValue()"
></div>
></td>
</template>
</div>
</tr>
</template>
</div>
</div>
</tbody>
</table>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
Expand Down
Loading
Loading