Table resizing docs #3840

LFDanLu · 2022-12-13T01:46:13Z

Closes

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Look at the docs here: https://reactspectrum.blob.core.windows.net/reactspectrum/43562aa419ee35d11e0bec0f881f0039661718b7/docs/react-spectrum/TableView.html#column-resizing

🧢 Your Project:

RSP

snowystinger

We need an example that shows how to control the widths as well. It's not trivial since you have to create new column objects for the virtualizer to pick them up. See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/table/stories/ControllingResize.tsx#L58 and https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/table/stories/ControllingResize.tsx#L67

Would it be easy to setup some code that uses onResizeEnd to store the column widths locally, then when they refresh the page, we could set the table to its previously resized column widths? Otherwise, maybe we can do that in a codesandbox

packages/@react-spectrum/table/docs/TableView.mdx

snowystinger · 2022-12-13T23:09:05Z

packages/@react-spectrum/table/docs/TableView.mdx

+an `onResizeEnd` prop as well, triggered when the user finishes a column resize operation. Both events receive a Map object containing the widths of every column in the TableView.
+
+The example below illustrates how each of the aforementioned column width properties affects their respective column's resize behavior. It also demonstrates when `onResize` and `onResizeEnd` fire when resizing and the prints the values provided to each.
+


we should mention somewhere in here that a resize event locks all columns to the left of the resizing column to a pixel width, so it's not just one column that changes at a time

Hm, IMO this feels a bit specific and potentially confusing the reader. Do you feel that this might be a common question a user of column resize might ask?

packages/@react-spectrum/table/docs/TableView.mdx

LFDanLu · 2022-12-14T17:53:17Z

@snowystinger

We need an example that shows how to control the widths as well. It's not trivial since you have to create new column objects for the virtualizer to pick them up. See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/table/stories/ControllingResize.tsx#L58 and https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/table/stories/ControllingResize.tsx#L67
Would it be easy to setup some code that uses onResizeEnd to store the column widths locally, then when they refresh the page, we could set the table to its previously resized column widths? Otherwise, maybe we can do that in a codesandbox

Sounds good, thanks for bringing it up. Can you expand on store the column widths locally?

packages/@react-spectrum/table/docs/TableView.mdx

snowystinger · 2022-12-14T20:43:12Z

Sounds good, thanks for bringing it up. Can you expand on store the column widths locally?

I just mean in localStorage or something equivalent https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

snowystinger

Ah, that's so cool!

dannify · 2022-12-15T01:14:59Z

DanniBot docs: https://reactspectrum.blob.core.windows.net/reactspectrum/43562aa419ee35d11e0bec0f881f0039661718b7/docs/react-spectrum/TableView.html#column-resizing

devongovett · 2022-12-15T18:18:16Z

packages/@react-spectrum/table/docs/TableView.mdx

+    localStorage.setItem('RSPWidths', finalWidths);
+  };
+
+  // Create new columns object when tracked widths change so Virtualizer rerenders the new column widths


Not sure anyone will know what Virtualizer is since it is internal, so probably shouldn't highlight that.

I think we could potentially refactor this to store the widths in the column object itself rather than a separate map.

Untested, but possible solution:

let [columns, setColumns] = React.useState(() => { let localStorageWidths = localStorage.getItem('RSPWidths'); if (localStorageWidths) { let widths = JSON.parse(localStorageWidths); return columnsData.map(col => ({...col, width: widths[col.id]})); } else { return columnsData; } }); let onResize = (widths) => { setColumns(columns => columns.map(col => ({...col, width: widths.get(col.id)}))); }; let onResizeEnd = (widths) => { localStorage.setItem('RSPWidths', JSON.stringify(Object.fromEntries(widths))); };

devongovett · 2022-12-15T18:20:23Z

packages/@react-spectrum/table/docs/TableView.mdx

+}
+
+<ResizableTable />
+```


These examples are too wide on mobile and mess up scrolling

Updated. Also got rid of one of the columns since the table's columns were almost all the same due to the width restraint, I think the three columns should show how the widths work a bit better without immediately making the TableView scrollable right away

devongovett · 2022-12-15T18:53:26Z

packages/@react-spectrum/table/docs/TableView.mdx

+resizer handle that becomes visible on hover. Keyboard, touch, and screen reader users can start resizing by interacting with the target column's header and selecting the "Resize column" option
+from the dropdown.
+
+### Width values


I guess the width configuration isn't really specific to column resizing. Wonder if people will miss it because it is a sub-heading?

I'll keep this section here and restore the old width values section we had down in visual options then

Not sure, it was more of a question for everyone

I'd worry about people missing how to define widths if it was under resizing only. Can we invert it and have resizing be a sub header?

IMO, it would be good to preserve the old section and keep the resizing as the main header. I feel like most people who are looking for column resizing will look specifically for "Resizing" as a header and keeping the old section as will also keep the page layout familiar to old users (no confusion as to if that visual option has disappeared and old links will still work)

I agree, I would like width to be it's own heading/sub-heading and it could be referenced from the resizing section that seems ok

devongovett · 2022-12-15T21:55:29Z

packages/@react-spectrum/table/docs/TableView.mdx

+TableView accepts an `onResize` prop which is triggered whenever a column resizer is moved by the user. This can be used in combination with the `width` prop to update a Column's width in a controlled fashion. TableView also accepts
+an `onResizeEnd` prop as well, triggered when the user finishes a column resize operation. Both events receive a Map object containing the widths of every column in the TableView.


also...as well

Suggested change

TableView accepts an `onResize` prop which is triggered whenever a column resizer is moved by the user. This can be used in combination with the `width` prop to update a Column's width in a controlled fashion. TableView also accepts

an `onResizeEnd` prop as well, triggered when the user finishes a column resize operation. Both events receive a Map object containing the widths of every column in the TableView.

TableView accepts an `onResize` prop which is triggered whenever a column resizer is moved by the user. This can be used in combination with the `width` prop to update a Column's width in a controlled fashion. TableView also accepts

an `onResizeEnd` prop, which is triggered when the user finishes a column resize operation. Both events receive a Map object containing the widths of every column in the TableView.

devongovett · 2022-12-15T21:56:14Z

packages/@react-spectrum/table/docs/TableView.mdx

+
+### Width values
+
+Columns support four different width props: `defaultWidth`, `width`, `minWidth`, and `maxWidth`. Each of these props accepts fixed values or percentages, with `width` and `defaultWidth` accepting fractional (`fr`) units as well.


We might need to explain what an fr is somewhere.

dannify · 2022-12-15T22:02:55Z

packages/@react-spectrum/table/docs/TableView.mdx

+
+Columns support four different width props: `defaultWidth`, `width`, `minWidth`, and `maxWidth`. Each of these props accepts fixed values or percentages, with `width` and `defaultWidth` accepting fractional (`fr`) units as well.
+An initial, uncontrolled width can be provided to a Column using the `defaultWidth` prop. This allows the column width to freely shrink and grow in relation to other column widths. Alternatively, a controlled value can be provided
+by the `width` prop. Providing a non-fractional value `width` to a Column sets its width to the value provided to it, making it unaffected by other columns' widths. `minWidth` and `maxWidth` allows you to restrict a Column's


Suggested change

by the `width` prop. Providing a non-fractional value `width` to a Column sets its width to the value provided to it, making it unaffected by other columns' widths. `minWidth` and `maxWidth` allows you to restrict a Column's

by the `width` prop. Providing a non-fractional value `width` to a Column will make it unaffected by other columns' widths upon resize. `minWidth` and `maxWidth` allows you to restrict a Column's

… into table_resizing_docs

devongovett · 2022-12-15T23:33:11Z

DevonBot docs: https://reactspectrum.blob.core.windows.net/reactspectrum/fe58f6b89a7d282ac11b15b0e3d68d1401151e09/docs/react-spectrum/TableView.html#column-resizing

devongovett · 2022-12-15T23:36:15Z

packages/@react-spectrum/table/docs/TableView.mdx

+  let onResizeEnd = (widths) => {
+    localStorage.setItem('RSPWidths', JSON.stringify(Object.fromEntries(widths)));
+  };
+  /*- end highlight -*/


Suggested change

/*- end highlight -*/

/*- end highlight -*/

devongovett · 2022-12-15T23:36:30Z

packages/@react-spectrum/table/docs/TableView.mdx

+  };
+  /*- end highlight -*/
+  return (
+    <Flex direction="column">


What's the extra flex for?

Ah derp, hold over from when the example had pre elements to show what widths were being provided to the event handlers, thanks for catching

devongovett · 2022-12-15T23:38:12Z

packages/@react-spectrum/table/docs/TableView.mdx

+### Resize events
+
+TableView accepts an `onResize` prop which is triggered whenever a column resizer is moved by the user. This can be used in combination with the `width` prop to update a Column's width in a controlled fashion. TableView also accepts
+an `onResizeEnd` props, which is triggered when the user finishes a column resize operation. Both events receive a Map object containing the widths of every column in the TableView.


Suggested change

an `onResizeEnd` props, which is triggered when the user finishes a column resize operation. Both events receive a Map object containing the widths of every column in the TableView.

an `onResizeEnd` prop, which is triggered when the user finishes a column resize operation. Both events receive a Map object containing the widths of every column in the TableView.

… into table_resizing_docs

devongovett · 2022-12-16T16:28:55Z

I thought maybe it would be better to move the Column widths section above column resizing and put the description of those props there since they are not specific to resizing. Then the resizing section can be shortened and reference it. Pushed an attempt at this - lmk what you think.

snowystinger · 2022-12-16T16:46:09Z

Robot docs:
https://reactspectrum.blob.core.windows.net/reactspectrum/618e9ed939e6d6f5aa1f041169c1a27437bc96c2/docs/react-spectrum/TableView.html#column-resizing

LFDanLu changed the base branch from main to refactor-column-resizing December 13, 2022 01:46

Base automatically changed from refactor-column-resizing to main December 13, 2022 22:01

LFDanLu added 2 commits December 13, 2022 14:09

Rough draft of TableView resizing docs

a8dbe75

Adding highlights and adjusting copy

25433e0

LFDanLu force-pushed the table_resizing_docs branch from 440ea93 to 25433e0 Compare December 13, 2022 22:30

forgot to remove last todo

e1a7524

LFDanLu changed the title ~~(WIP) Table resizing docs~~ Table resizing docs Dec 13, 2022

snowystinger reviewed Dec 13, 2022

View reviewed changes

reidbarber reviewed Dec 14, 2022

View reviewed changes

packages/@react-spectrum/table/docs/TableView.mdx Outdated Show resolved Hide resolved

packages/@react-spectrum/table/docs/TableView.mdx Outdated Show resolved Hide resolved

packages/@react-spectrum/table/docs/TableView.mdx Outdated Show resolved Hide resolved

LFDanLu added 2 commits December 14, 2022 14:55

review updates

7db052b

Merge branch 'main' into table_resizing_docs

43562aa

snowystinger previously approved these changes Dec 15, 2022

View reviewed changes

devongovett reviewed Dec 15, 2022

View reviewed changes

dannify reviewed Dec 15, 2022

View reviewed changes

devongovett and others added 3 commits December 15, 2022 17:22

Merge branch 'main' into table_resizing_docs

f54965c

review updates

7549e58

Merge branch 'table_resizing_docs' of github.com:adobe/react-spectrum…

5a58576

… into table_resizing_docs

LFDanLu dismissed snowystinger’s stale review via 5a58576 December 15, 2022 22:49

fixing prop table grouping and adjusting examples

fe58f6b

snowystinger previously approved these changes Dec 15, 2022

View reviewed changes

reidbarber previously approved these changes Dec 15, 2022

View reviewed changes

Merge branch 'main' into table_resizing_docs

e558a5d

devongovett reviewed Dec 15, 2022

View reviewed changes

LFDanLu added 2 commits December 15, 2022 15:44

addressing review

fd475a4

Merge branch 'table_resizing_docs' of github.com:adobe/react-spectrum…

0ae0ac7

… into table_resizing_docs

LFDanLu dismissed stale reviews from reidbarber and snowystinger via 0ae0ac7 December 15, 2022 23:45

snowystinger previously approved these changes Dec 15, 2022

View reviewed changes

reidbarber previously approved these changes Dec 16, 2022

View reviewed changes

Reword column widths section and reference from resizing

618e9ed

devongovett dismissed stale reviews from reidbarber and snowystinger via 618e9ed December 16, 2022 16:27

snowystinger approved these changes Dec 16, 2022

View reviewed changes

reidbarber approved these changes Dec 16, 2022

View reviewed changes

snowystinger mentioned this pull request Dec 16, 2022

Column Resizing Epic #3007

Closed

61 tasks

devongovett merged commit 9704b0e into main Dec 16, 2022

devongovett deleted the table_resizing_docs branch December 16, 2022 21:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Table resizing docs #3840

Table resizing docs #3840

LFDanLu commented Dec 13, 2022 •

edited by snowystinger

Loading

snowystinger left a comment •

edited

Loading

snowystinger Dec 13, 2022

LFDanLu Dec 14, 2022

LFDanLu commented Dec 14, 2022 •

edited

Loading

snowystinger commented Dec 14, 2022

snowystinger left a comment

dannify commented Dec 15, 2022

devongovett Dec 15, 2022 •

edited

Loading

devongovett Dec 15, 2022

LFDanLu Dec 15, 2022

devongovett Dec 15, 2022

LFDanLu Dec 15, 2022

devongovett Dec 15, 2022

snowystinger Dec 15, 2022

LFDanLu Dec 15, 2022

dannify Dec 15, 2022

devongovett Dec 15, 2022

devongovett Dec 15, 2022

dannify Dec 15, 2022

devongovett commented Dec 15, 2022

devongovett Dec 15, 2022

devongovett Dec 15, 2022

LFDanLu Dec 15, 2022

devongovett Dec 15, 2022

devongovett commented Dec 16, 2022

snowystinger commented Dec 16, 2022

		an `onResizeEnd` prop as well, triggered when the user finishes a column resize operation. Both events receive a Map object containing the widths of every column in the TableView.

		The example below illustrates how each of the aforementioned column width properties affects their respective column's resize behavior. It also demonstrates when `onResize` and `onResizeEnd` fire when resizing and the prints the values provided to each.

		TableView accepts an `onResize` prop which is triggered whenever a column resizer is moved by the user. This can be used in combination with the `width` prop to update a Column's width in a controlled fashion. TableView also accepts
		an `onResizeEnd` prop as well, triggered when the user finishes a column resize operation. Both events receive a Map object containing the widths of every column in the TableView.


		### Width values

		Columns support four different width props: `defaultWidth`, `width`, `minWidth`, and `maxWidth`. Each of these props accepts fixed values or percentages, with `width` and `defaultWidth` accepting fractional (`fr`) units as well.

	by the `width` prop. Providing a non-fractional value `width` to a Column sets its width to the value provided to it, making it unaffected by other columns' widths. `minWidth` and `maxWidth` allows you to restrict a Column's
	by the `width` prop. Providing a non-fractional value `width` to a Column will make it unaffected by other columns' widths upon resize. `minWidth` and `maxWidth` allows you to restrict a Column's

	an `onResizeEnd` props, which is triggered when the user finishes a column resize operation. Both events receive a Map object containing the widths of every column in the TableView.
	an `onResizeEnd` prop, which is triggered when the user finishes a column resize operation. Both events receive a Map object containing the widths of every column in the TableView.

Table resizing docs #3840

Table resizing docs #3840

Conversation

LFDanLu commented Dec 13, 2022 • edited by snowystinger Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

snowystinger left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LFDanLu commented Dec 14, 2022 • edited Loading

snowystinger commented Dec 14, 2022

snowystinger left a comment

Choose a reason for hiding this comment

dannify commented Dec 15, 2022

devongovett Dec 15, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devongovett commented Dec 15, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devongovett commented Dec 16, 2022

snowystinger commented Dec 16, 2022

LFDanLu commented Dec 13, 2022 •

edited by snowystinger

Loading

snowystinger left a comment •

edited

Loading

LFDanLu commented Dec 14, 2022 •

edited

Loading

devongovett Dec 15, 2022 •

edited

Loading