Skip to content
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

Update column-sizing.md #5963

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update column-sizing.md #5963

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
8 changes: 4 additions & 4 deletions docs/guide/column-sizing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ title: Column Sizing Guide

Want to skip to the implementation? Check out these examples:

- [column-sizing](../../framework/react/examples/column-sizing)
- [column-resizing-performant](../../framework/react/examples/column-resizing-performant)
- [column-sizing](../framework/react/examples/column-sizing)
- [column-resizing-performant](../framework/react/examples/column-resizing-performant)

## API

[Column Sizing API](../../api/features/column-sizing)
[Column Sizing API](../api/features/column-sizing)

## Column Sizing Guide

Expand Down Expand Up @@ -166,7 +166,7 @@ TanStack Table keeps track of an state object called `columnSizingInfo` that you

If you are creating large or complex tables (and using React 😉), you may find that if you do not add proper memoization to your render logic, your users may experience degraded performance while resizing columns.

We have created a [performant column resizing example](../../framework/react/examples/column-resizing-performant) that demonstrates how to achieve 60 fps column resizing renders with a complex table that may otherwise have slow renders. It is recommended that you just look at that example to see how it is done, but these are the basic things to keep in mind:
We have created a [performant column resizing example](../framework/react/examples/column-resizing-performant) that demonstrates how to achieve 60 fps column resizing renders with a complex table that may otherwise have slow renders. It is recommended that you just look at that example to see how it is done, but these are the basic things to keep in mind:

1. Don't use `column.getSize()` on every header and every data cell. Instead, calculate all column widths once upfront, **memoized**!
2. Memoize your Table Body while resizing is in progress.
Expand Down