From a8dbe759b077ec633bcdccb14c64591a1b8a239d Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Tue, 13 Dec 2022 14:09:01 -0800 Subject: [PATCH 1/8] Rough draft of TableView resizing docs --- .../@react-spectrum/table/docs/TableView.mdx | 96 ++++++++++++------- 1 file changed, 60 insertions(+), 36 deletions(-) diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index 53d62f70a56..c1ec167cd6a 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -12,7 +12,7 @@ export default Layout; import docs from 'docs:@react-spectrum/table'; import tableTypes from 'docs:@react-types/table/src/index.d.ts'; -import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs'; +import {HeaderInfo, PropTable, PageDescription, VersionBadge} from '@react-spectrum/docs'; import {Keyboard} from '@react-spectrum/text'; import packageData from '@react-spectrum/table/package.json'; @@ -560,6 +560,65 @@ function AsyncSortTable() { } ``` +## Column Resizing + +TableView supports resizable columns, allowing users to dynamically adjust the width of a column. To designate that a Column is resizable, provide it with the `allowsResizing` prop. This will render a draggable +resizer handle for each resizable column that becomes visible on hover. Keyboard, touch, and screen reader users can enter "resize" mode by interacting with the target column's header and selecting the "Resize column" option +from the dropdown. + +### 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. +Providing a `width` to a Column sets its width to the value provided to it, making it unaffected by any changes to other columns' widths unless a fractional value is provided. Providing a `defaultWidth` allows you +to specify a Column's initial width, but allows the column width to freely shrink and grow in response to changes in other columns' widths. `minWidth` and `maxWidth` allows you to restrict a Column's width to a minimum and +maximum value respectively. In general, TableView prioritizes columns with defined widths and divides the remaining space evenly amongst the other columns. + +### 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 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. + +The example below illustrates how each of the applied column width properties affects their resize behavior. It also demonstrates the difference between when `onResize` and `onResizeEnd` fires and the values +provided to both. + +TODO: fix types for width props +```tsx example +function ResizableTable() { + let [widths, setWidths] = React.useState(new Map()); + let [finalWidths, setFinalWidths] = React.useState(new Map()); + // TODO: fix bug where null is returned when just clicking the column header + + return ( + + + + File Name + Type + Size + Date Modified + + + + 2022-Roadmap-Proposal-Revision-012822-Copy(2) + PDF + 214 KB + November 27, 2022 at 4:56PM + + + 62259692_p0_master1200 + PNG + 120 KB + January 27, 2021 at 1:56AM + + + + 
Column widths during resize: {widths ? JSON.stringify(Object.fromEntries(widths)) : widths}
+ 
Final column widths: {finalWidths ? JSON.stringify(Object.fromEntries(finalWidths)) : finalWidths}
+ + ); +} +``` + ## Props ### TableView props @@ -642,41 +701,6 @@ function AsyncSortTable() { ``` -### Column widths -Columns support three different width props: `minWidth`, `width`, and `maxWidth`. Each of these props accepts fixed values or percentages. TableView prioritizes columns with defined widths and divides the remaining space evenly amongst the other columns. - -```tsx example - - - Name - Type - Size - - - - 2021406_Proposal - PDF - 86 KB - - - Budget Template - XLS - 120 KB - - - Onboarding - PPT - 472 KB - - - Welcome - TXT - 24 KB - - - -``` - ### Column dividers [View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers) From 25433e087a43749c6661afd2591f48dded67b1c6 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Tue, 13 Dec 2022 14:30:11 -0800 Subject: [PATCH 2/8] Adding highlights and adjusting copy --- .../@react-spectrum/table/docs/TableView.mdx | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index c1ec167cd6a..be5cfc3982d 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -569,33 +569,42 @@ from the dropdown. ### 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. -Providing a `width` to a Column sets its width to the value provided to it, making it unaffected by any changes to other columns' widths unless a fractional value is provided. Providing a `defaultWidth` allows you -to specify a Column's initial width, but allows the column width to freely shrink and grow in response to changes in other columns' widths. `minWidth` and `maxWidth` allows you to restrict a Column's width to a minimum and +Providing a non-fractional value `width` to a Column sets its width to the value provided to it, making it unaffected by any changes to other columns' widths. Providing a `defaultWidth` allows you +to specify a Column's initial width, but allows the column width to freely shrink and grow in response to changes in other column widths. `minWidth` and `maxWidth` allows you to restrict a Column's width to a minimum and maximum value respectively. In general, TableView prioritizes columns with defined widths and divides the remaining space evenly amongst the other columns. ### 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 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. +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 applied column width properties affects their resize behavior. It also demonstrates the difference between when `onResize` and `onResizeEnd` fires and the values -provided to both. +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. -TODO: fix types for width props +TODO: highlight code ```tsx example function ResizableTable() { + /*- begin highlight -*/ let [widths, setWidths] = React.useState(new Map()); let [finalWidths, setFinalWidths] = React.useState(new Map()); - // TODO: fix bug where null is returned when just clicking the column header + /*- end highlight -*/ return ( - + + {/*- begin highlight -*/} File Name Type - Size + Size Date Modified + {/*- end highlight -*/} From e1a752461fcedc7d9d87fa7012e0c731932b9cf6 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Tue, 13 Dec 2022 14:32:29 -0800 Subject: [PATCH 3/8] forgot to remove last todo --- packages/@react-spectrum/table/docs/TableView.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index be5cfc3982d..6bdf0341d5b 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -580,7 +580,6 @@ an `onResizeEnd` prop as well, triggered when the user finishes a column resize 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. -TODO: highlight code ```tsx example function ResizableTable() { /*- begin highlight -*/ From 7db052b7c019666e257f085d0d86c8c523f9066f Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Wed, 14 Dec 2022 14:55:51 -0800 Subject: [PATCH 4/8] review updates --- .../@react-spectrum/table/docs/TableView.mdx | 113 +++++++++++++----- 1 file changed, 80 insertions(+), 33 deletions(-) diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index 6bdf0341d5b..c7e6c921e6a 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -563,70 +563,117 @@ function AsyncSortTable() { ## Column Resizing TableView supports resizable columns, allowing users to dynamically adjust the width of a column. To designate that a Column is resizable, provide it with the `allowsResizing` prop. This will render a draggable -resizer handle for each resizable column that becomes visible on hover. Keyboard, touch, and screen reader users can enter "resize" mode by interacting with the target column's header and selecting the "Resize column" option +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 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. -Providing a non-fractional value `width` to a Column sets its width to the value provided to it, making it unaffected by any changes to other columns' widths. Providing a `defaultWidth` allows you -to specify a Column's initial width, but allows the column width to freely shrink and grow in response to changes in other column widths. `minWidth` and `maxWidth` allows you to restrict a Column's width to a minimum and -maximum value respectively. In general, TableView prioritizes columns with defined widths and divides the remaining space evenly amongst the other columns. +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 +width to a minimum and maximum value respectively. TableView prioritizes columns with defined widths and divides the remaining space evenly amongst the other columns. + +The example below illustrates how each of the aforementioned column width properties affects their respective column's resize behavior. + +```tsx example + + + {/*- begin highlight -*/} + File Name + Type + Size + Date Modified + {/*- end highlight -*/} + + + + 2022-Roadmap-Proposal-Revision-012822-Copy(2) + PDF + 214 KB + November 27, 2022 at 4:56PM + + + 62259692_p0_master1200 + PNG + 120 KB + January 27, 2021 at 1:56AM + + + +``` ### 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 in a controlled fashion. TableView also accepts +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. -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. +The example below uses `onResize` to update each of the TableView's controlled column widths. It also saves the finalized column widths to `localStorage` in `onResizeEnd`, allowing the TableView's state to be preserved between +page loads and refreshes. ```tsx example +let items = [ + {id: '1', file: '2022-Roadmap-Proposal-Revision-012822-Copy(2)', type: 'PDF', size: '214 KB', date: 'November 27, 2022 at 4:56PM'}, + {id: '2', file: '62259692_p0_master1200', type: 'PNG', size: '120 KB', date: 'January 27, 2021 at 1:56AM'} +]; + +let columnsData = [ + {name: 'File Name', id: 'file', width: 500}, + {name: 'Type', id: 'type', width: '1fr'}, + {name: 'Size', id: 'size', width: 80}, + {name: 'Date', id: 'date', width: 100} +]; + function ResizableTable() { /*- begin highlight -*/ - let [widths, setWidths] = React.useState(new Map()); - let [finalWidths, setFinalWidths] = React.useState(new Map()); - /*- end highlight -*/ + let [widths, setWidths] = React.useState(() => { + let localStorageWidths = localStorage.getItem('RSPWidths'); + return localStorageWidths ? + new Map(JSON.parse(localStorageWidths)) : + new Map(columnsData.filter(col => col.width).map((col) => [col.id, col.width])); + }); + + let saveFinalWidths = (e) => { + let finalWidths = JSON.stringify([...e]); + localStorage.setItem('RSPWidths', finalWidths); + }; + // Create new columns object when tracked widths change so Virtualizer rerenders the new column widths + let columns = React.useMemo(() => columnsData.map(col => ({...col})), [widths]); + /*- end highlight -*/ return ( - - {/*- begin highlight -*/} - File Name - Type - Size - Date Modified - {/*- end highlight -*/} + + {(column) => { + const {name, id} = column; + let width = widths.get(id); + return {name}; + }} - - - 2022-Roadmap-Proposal-Revision-012822-Copy(2) - PDF - 214 KB - November 27, 2022 at 4:56PM - - - 62259692_p0_master1200 - PNG - 120 KB - January 27, 2021 at 1:56AM - + + {(item) => ( + {(key) => {item[key]}} + )} - 
Column widths during resize: {widths ? JSON.stringify(Object.fromEntries(widths)) : widths}
- 
Final column widths: {finalWidths ? JSON.stringify(Object.fromEntries(finalWidths)) : finalWidths}
 ); } + + ``` + ## Props ### TableView props From 7549e58161f1e7be8da4dc4df4baa54a8165074b Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Thu, 15 Dec 2022 14:37:33 -0800 Subject: [PATCH 5/8] review updates --- .../@react-spectrum/table/docs/TableView.mdx | 86 ++++++++++++++----- 1 file changed, 64 insertions(+), 22 deletions(-) diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index c7e6c921e6a..b5b54ab30e1 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -568,9 +568,9 @@ from the dropdown. ### 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. -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 +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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_fr_unit) +(`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 will make it unaffected by other columns' widths on resize. `minWidth` and `maxWidth` allows you to restrict a Column's width to a minimum and maximum value respectively. TableView prioritizes columns with defined widths and divides the remaining space evenly amongst the other columns. The example below illustrates how each of the aforementioned column width properties affects their respective column's resize behavior. @@ -578,12 +578,12 @@ The example below illustrates how each of the aforementioned column width proper ```tsx example {/*- begin highlight -*/} File Name - Type + Type Size Date Modified {/*- end highlight -*/} @@ -608,7 +608,7 @@ The example below illustrates how each of the aforementioned column width proper ### 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` 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. +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. The example below uses `onResize` to update each of the TableView's controlled column widths. It also saves the finalized column widths to `localStorage` in `onResizeEnd`, allowing the TableView's state to be preserved between page loads and refreshes. @@ -620,43 +620,45 @@ let items = [ ]; let columnsData = [ - {name: 'File Name', id: 'file', width: 500}, - {name: 'Type', id: 'type', width: '1fr'}, + {name: 'File Name', id: 'file', width: '1fr'}, + {name: 'Type', id: 'type', width: 70}, {name: 'Size', id: 'size', width: 80}, {name: 'Date', id: 'date', width: 100} ]; function ResizableTable() { /*- begin highlight -*/ - let [widths, setWidths] = React.useState(() => { + let [columns, setColumns] = React.useState(() => { let localStorageWidths = localStorage.getItem('RSPWidths'); - return localStorageWidths ? - new Map(JSON.parse(localStorageWidths)) : - new Map(columnsData.filter(col => col.width).map((col) => [col.id, col.width])); + if (localStorageWidths) { + let widths = JSON.parse(localStorageWidths); + return columnsData.map(col => ({...col, width: widths[col.id]})); + } else { + return columnsData; + } }); - let saveFinalWidths = (e) => { - let finalWidths = JSON.stringify([...e]); - localStorage.setItem('RSPWidths', finalWidths); + let onResize = (widths) => { + setColumns(columns => columns.map(col => ({...col, width: widths.get(col.id)}))); }; - // Create new columns object when tracked widths change so Virtualizer rerenders the new column widths - let columns = React.useMemo(() => columnsData.map(col => ({...col})), [widths]); + let onResizeEnd = (widths) => { + localStorage.setItem('RSPWidths', JSON.stringify(Object.fromEntries(widths))); + }; /*- end highlight -*/ return ( {(column) => { - const {name, id} = column; - let width = widths.get(id); + const {name, id, width} = column; return {name}; }} @@ -756,6 +758,46 @@ function ResizableTable() { ``` +### Column widths +See [above](#width-values) for additional details on the width props and the values they support. + +```tsx example + + + Name + Type + Size + Date Modified + + + + 2021406_Proposal + PDF + 86 KB + April 12 + + + Budget Template + XLS + 120 KB + November 27 + + + Onboarding + PPT + 472 KB + January 7 + + + Welcome + TXT + 24 KB + February 11 + + + +``` + ### Column dividers [View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers) From fe58f6b89a7d282ac11b15b0e3d68d1401151e09 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Thu, 15 Dec 2022 15:05:09 -0800 Subject: [PATCH 6/8] fixing prop table grouping and adjusting examples --- packages/@react-spectrum/table/docs/TableView.mdx | 8 ++------ packages/dev/docs/src/PropTable.js | 2 +- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index b5b54ab30e1..8ded40016d5 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -583,7 +583,6 @@ The example below illustrates how each of the aforementioned column width proper {/*- begin highlight -*/} File Name - Type Size Date Modified {/*- end highlight -*/} @@ -591,13 +590,11 @@ The example below illustrates how each of the aforementioned column width proper 2022-Roadmap-Proposal-Revision-012822-Copy(2) - PDF 214 KB November 27, 2022 at 4:56PM 62259692_p0_master1200 - PNG 120 KB January 27, 2021 at 1:56AM @@ -615,13 +612,12 @@ page loads and refreshes. ```tsx example let items = [ - {id: '1', file: '2022-Roadmap-Proposal-Revision-012822-Copy(2)', type: 'PDF', size: '214 KB', date: 'November 27, 2022 at 4:56PM'}, - {id: '2', file: '62259692_p0_master1200', type: 'PNG', size: '120 KB', date: 'January 27, 2021 at 1:56AM'} + {id: '1', file: '2022-Roadmap-Proposal-Revision-012822-Copy(2)', size: '214 KB', date: 'November 27, 2022 at 4:56PM'}, + {id: '2', file: '62259692_p0_master1200', size: '120 KB', date: 'January 27, 2021 at 1:56AM'} ]; let columnsData = [ {name: 'File Name', id: 'file', width: '1fr'}, - {name: 'Type', id: 'type', width: 70}, {name: 'Size', id: 'size', width: 80}, {name: 'Date', id: 'date', width: 100} ]; diff --git a/packages/dev/docs/src/PropTable.js b/packages/dev/docs/src/PropTable.js index 6f95a09bade..6d93e0a7d4e 100644 --- a/packages/dev/docs/src/PropTable.js +++ b/packages/dev/docs/src/PropTable.js @@ -29,7 +29,7 @@ const GROUPS = { 'padding', 'paddingTop', 'paddingLeft', 'paddingRight', 'paddingBottom', 'paddingStart', 'paddingEnd', 'paddingX', 'paddingY' ], Sizing: [ - 'width', 'minWidth', 'maxWidth', 'height', 'minHeight', 'maxHeight' + 'width', 'minWidth', 'maxWidth', 'height', 'minHeight', 'maxHeight', 'defaultWidth' ], Background: [ 'background', 'backgroundColor', 'backgroundImage', 'backgroundSize', 'backgroundPosition', 'backgroundRepeat', From fd475a4d53406cc46718c6b47a8ba15c22e90f37 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Thu, 15 Dec 2022 15:44:17 -0800 Subject: [PATCH 7/8] addressing review --- .../@react-spectrum/table/docs/TableView.mdx | 45 +++++++++---------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index 8ded40016d5..1c44818f7b5 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -605,7 +605,7 @@ The example below illustrates how each of the aforementioned column width proper ### 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. +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. The example below uses `onResize` to update each of the TableView's controlled column widths. It also saves the finalized column widths to `localStorage` in `onResizeEnd`, allowing the TableView's state to be preserved between page loads and refreshes. @@ -642,29 +642,28 @@ function ResizableTable() { localStorage.setItem('RSPWidths', JSON.stringify(Object.fromEntries(widths))); }; /*- end highlight -*/ + return ( - - - - {(column) => { - const {name, id, width} = column; - return {name}; - }} - - - {(item) => ( - {(key) => {item[key]}} - )} - - - + + + {(column) => { + const {name, id, width} = column; + return {name}; + }} + + + {(item) => ( + {(key) => {item[key]}} + )} + + ); } From 618e9ed939e6d6f5aa1f041169c1a27437bc96c2 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 16 Dec 2022 08:27:50 -0800 Subject: [PATCH 8/8] Reword column widths section and reference from resizing --- .../@react-spectrum/table/docs/TableView.mdx | 92 ++++++++++--------- 1 file changed, 47 insertions(+), 45 deletions(-) diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx index 1c44818f7b5..ad2591b2064 100644 --- a/packages/@react-spectrum/table/docs/TableView.mdx +++ b/packages/@react-spectrum/table/docs/TableView.mdx @@ -560,6 +560,51 @@ function AsyncSortTable() { } ``` +## Column widths + +By default, TableView divides the available space evenly among the columns. The `Column` component also supports four different width props that allow you to control column sizing behavior: `defaultWidth`, `width`, `minWidth`, and `maxWidth`. + +The `width` and `defaultWidth` props define the width of a column. The former defines a controlled width, and the latter defines an uncontrolled width when the column is [resizable](#column-resizing). These props accept fixed pixel values, percentages of the total table width, or [fractional](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_fr_unit) values (the `fr` unit), which represent a fraction of the available space. Columns without a defined width are equivalent to `1fr`. + +The `minWidth` and `maxWidth` props define constraints on the size of a column, which may be defined either as fixed pixel values or as percentages of the total table width. These are respected when calculating the size of a column, and also provide limits for column resizing. + +```tsx example + + + Name + Type + Size + Date Modified + + + + 2021406_Proposal + PDF + 86 KB + April 12 + + + Budget Template + XLS + 120 KB + November 27 + + + Onboarding + PPT + 472 KB + January 7 + + + Welcome + TXT + 24 KB + February 11 + + + +``` + ## Column Resizing TableView supports resizable columns, allowing users to dynamically adjust the width of a column. To designate that a Column is resizable, provide it with the `allowsResizing` prop. This will render a draggable @@ -568,12 +613,9 @@ from the dropdown. ### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_fr_unit) -(`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 will make it unaffected by other columns' widths on resize. `minWidth` and `maxWidth` allows you to restrict a Column's -width to a minimum and maximum value respectively. TableView prioritizes columns with defined widths and divides the remaining space evenly amongst the other columns. +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. The `minWidth` and `maxWidth` props allow you to restrict a Column's size. See [column widths](#column-widths) above for more details. -The example below illustrates how each of the aforementioned column width properties affects their respective column's resize behavior. +The example below illustrates how each of the column width props affects their respective column's resize behavior. ```tsx example ``` -### Column widths -See [above](#width-values) for additional details on the width props and the values they support. - -```tsx example - - - Name - Type - Size - Date Modified - - - - 2021406_Proposal - PDF - 86 KB - April 12 - - - Budget Template - XLS - 120 KB - November 27 - - - Onboarding - PPT - 472 KB - January 7 - - - Welcome - TXT - 24 KB - February 11 - - - -``` - ### Column dividers [View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers)