v3 Table - toggle transitions on/off

[eduardn]

🙋 Feature Request

A way for the table component transitions to be disabled/enabled.

🤔 Expected Behavior

Table should have a prop that can be used to toggle transitions on/off.

😯 Current Behavior

There is no way to do that currently.

💁 Possible Solution

Had a look through the code and it seems that the Table renders a TableVirtualizer that accepts a transitionDuration

react-spectrum/packages/@react-spectrum/table/src/Table.tsx

Line 292 in 6521a98

transitionDuration: collection.body.props.isLoading && collection.size > 0 ? 0 : 500

and this is used in the Virtualizer to decide if the data should be animated when set

react-spectrum/packages/@react-stately/virtualizer/src/Virtualizer.ts

Lines 208 to 211 in 6521a98

	if (this._collection) {
	this._runTransaction(() => {
	this._collection = data;
	}, this.transitionDuration > 0);

Setting that to 0 seems to disable the animations.

🧢 Your Company/Team

Adobe/Identity Mars

[dannify]

Hey @eduardn
We will be working on Table in the next few months and updating the transitions will be one of the changes we will be tackling. Currently we are revising this with the Spectrum design team.

[eduardn]

Hey @dannify, thanks for the details. I'll patiently await updates 😄

[viswesh]

V3 looks great, thanks to all the contributors. About transitions, when there are many rows, animations stagger and look janky. With transitions turned off, interactions are snappier (sort, search).

.table * {
  transition: none !important;
}