Simplify aria table resizing docs example

[devongovett]

Based on #3982.

This is a slightly simpler implementation of the column resizing example that doesn't require overriding the CSS table layout to use flex. This way we can simply reuse the TableRowGroup, TableHeaderRow, TableRow, and TableCell components from before instead of reimplementing them with minor styling changes.

It works by adding an additional div wrapper around the table element that scrolls. The table itself is set to width: fit-content and table-layout: fixed to ensure it always takes the widths defined on the column headers. Then the browser automatically handles setting the widths of the cells in the body based on the header widths, and the entire table grows when the widths get bigger (overflowing in the parent wrapper).

You do lose the sticky headers, but in this example there is no vertical scrolling anyway so I'd rather keep the example simpler to focus on the concepts related to resizing itself. The styled example goes into more detail there as well.

Edit: sticky headers can actually be achieved as well. If you add position: sticky; top: 0 to the tr element in the header and a max-height on the wrapper div it does stick as expected. But anyway it wouldn't be shown in the example because it doesn't vertically scroll.

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[LFDanLu]

Just one small nit, I'll push an update

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the storybook-16
• View the documentation

[rspbot]

## API Changes

unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
undefined already in set
undefined already in set
undefined already in set
undefined already in set
undefined already in set
undefined already in set
undefined already in set
undefined already in set
undefined already in set
undefined already in set
undefined already in set
undefined already in set

@react-aria/dnd

isVirtualDragging

-isDirectoryDropItem {
-  dropItem: DropItem
-  returnVal: undefined
-}
+

isDirectoryDropItem

-isFileDropItem {
-  dropItem: DropItem
-  returnVal: undefined
-}
+

isFileDropItem

-isTextDropItem {
-  dropItem: DropItem
-  returnVal: undefined
-}
+

---

@react-aria/interactions

useFocus

changed by:

• FocusProps
• FocusResult

-useFocus<Target = FocusableElement> {
-  props: FocusProps<Target>
-  returnVal: undefined
-}
+

FocusProps

-FocusProps<Target = FocusableElement> {
-  isDisabled?: boolean
-}
+

it changed:

• useFocus

FocusResult

-FocusResult<Target = FocusableElement> {
-  focusProps: DOMAttributes<Target>
-}
+

it changed:

• useFocus

undefined

-
+useFocus {
+  props: FocusProps
+  returnVal: undefined
+}

undefined

-
+FocusProps {
+  isDisabled?: boolean
+}

undefined

-
+FocusResult {
+  focusProps: DOMAttributes
+}

---

@react-aria/tabs

useTabList

changed by:

• AriaTabListOptions

 useTabList<T> {
-  props: AriaTabListOptions<T>
+  props: AriaTabListProps<T>
   state: TabListState<T>
   ref: RefObject<HTMLElement>
   returnVal: undefined
 }

AriaTabListOptions

-AriaTabListOptions<T> {
 
-}

it changed:

• useTabList

---

@react-aria/utils

mergeProps

-mergeProps<T extends Array<PropsArg>> {
-  args: T
-  returnVal: undefined
-}
+

isVirtualPointerEvent

-
+mergeProps<T extends Array<Props>> {
+  args: T
+  returnVal: undefined
+}

---

@react-stately/calendar

useCalendarState

changed by:

• CalendarStateOptions

-useCalendarState<T extends DateValue = DateValue> {
-  props: CalendarStateOptions<T>
-  returnVal: undefined
-}
+

useRangeCalendarState

changed by:

• RangeCalendarStateOptions

-useRangeCalendarState<T extends DateValue = DateValue> {
-  props: RangeCalendarStateOptions<T>
-  returnVal: undefined
-}
+

CalendarStateOptions

-CalendarStateOptions<T extends DateValue = DateValue> {
-  createCalendar: (string) => Calendar
-  locale: string
-  selectionAlignment?: 'start' | 'center' | 'end'
-  visibleDuration?: DateDuration = {months: 1}
-}
+

it changed:

• useCalendarState

RangeCalendarStateOptions

-RangeCalendarStateOptions<T extends DateValue = DateValue> {
-  createCalendar: (string) => Calendar
-  locale: string
-  visibleDuration?: DateDuration = {months: 1}
-}
+

it changed:

• useRangeCalendarState

undefined

-
+useCalendarState {
+  props: CalendarStateOptions
+  returnVal: undefined
+}

undefined

-
+useRangeCalendarState {
+  props: RangeCalendarStateOptions
+  returnVal: undefined
+}

undefined

-
+CalendarStateOptions {
+  createCalendar: (string) => Calendar
+  locale: string
+  selectionAlignment?: 'start' | 'center' | 'end'
+  visibleDuration?: DateDuration = {months: 1}
+}

undefined

-
+RangeCalendarStateOptions {
+  createCalendar: (string) => Calendar
+  locale: string
+  visibleDuration?: DateDuration = {months: 1}
+}

---

@react-stately/datepicker

useDateFieldState

changed by:

• DateFieldStateOptions

-useDateFieldState<T extends DateValue = DateValue> {
-  props: DateFieldStateOptions<T>
-  returnVal: undefined
-}
+

useDateRangePickerState

changed by:

• DateRangePickerStateOptions

-useDateRangePickerState<T extends DateValue = DateValue> {
-  props: DateRangePickerStateOptions<T>
-  returnVal: undefined
-}
+

useTimeFieldState

changed by:

• TimeFieldStateOptions

-useTimeFieldState<T extends TimeValue = TimeValue> {
-  props: TimeFieldStateOptions<T>
-  returnVal: undefined
-}
+

DateFieldStateOptions

-DateFieldStateOptions<T extends DateValue = DateValue> {
-  createCalendar: (string) => Calendar
-  locale: string
-  maxGranularity?: 'year' | 'month' | Granularity = 'year'
-}
+

it changed:

• useDateFieldState

DateRangePickerStateOptions

-DateRangePickerStateOptions<T extends DateValue = DateValue> {
-  shouldCloseOnSelect?: boolean | () => boolean = true
-}
+

it changed:

• useDateRangePickerState

TimeFieldStateOptions

-TimeFieldStateOptions<T extends TimeValue = TimeValue> {
-  locale: string
-}
+

it changed:

• useTimeFieldState

undefined

-
+useDateFieldState {
+  props: DateFieldStateOptions
+  returnVal: undefined
+}

undefined

-
+useDateRangePickerState {
+  props: DateRangePickerStateOptions
+  returnVal: undefined
+}

undefined

-
+useTimeFieldState {
+  props: TimeFieldStateOptions
+  returnVal: undefined
+}

undefined

-
+DateFieldStateOptions {
+  createCalendar: (string) => Calendar
+  locale: string
+  maxGranularity?: 'year' | 'month' | Granularity = 'year'
+}

undefined

-
+DateRangePickerStateOptions {
+  shouldCloseOnSelect?: boolean | () => boolean = true
+}

undefined

-
+TimeFieldStateOptions {
+  locale: string
+}

---

[devongovett]

Oh hmm I was wondering why it was so small. Kinda annoying on large screens but oh well