Skip to content
This repository has been archived by the owner on Jan 5, 2023. It is now read-only.

feat(Table): Added column resizing #448

Merged
merged 17 commits into from
Dec 10, 2021
Merged

Conversation

bentleyvk
Copy link
Contributor

@bentleyvk bentleyvk commented Nov 30, 2021

column-resize-done

Closes #84

  • In order to resize columns, we need to know their widths and make every column static width therefore I am saving widths inside column.resizeWidth that I got from ref.
  • When one column width is increasing another one is decreasing in the same amount. If next column has disabled resize then it is looking for the next one that is resizable.
  • It is favoring minWidth and maxWidth therefore you can't resize past those.
  • Because columns widths are static, I need to handle table resize too. For this I am temporally making columns kind of dynamic width again by setting flex-grow and flex-shrink, then getting new widths and making columns static again.
  • useResizeColumns hook is taken from react-table and I make it work with ownerDocument also cleaned up code a bit and made it to resize sibling columns.

Checklist

  • Add meaningful unit tests for your component (verify that all lines are covered)
  • Verify that all existing tests pass
  • Add component features demo in Storybook (different stories)
  • Approve test images for new stories
  • Add screenshots of the key elements of the component

{...args}
/>
<Tooltip
reference={rowRefMap.current[hoveredRowIndex]}
content={`Hovered over ${data[hoveredRowIndex].name}.`}
placement='bottom'
followCursor
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slipped in story update from the discussion.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So are you going to undo it? 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Too much work, I'll just leave it here and hope nobody sees it 😁

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

at least add initial. It is considered outdated UX practice for tooltip to follow cursor.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you have a link for this guideline?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check our standards.

The guideline was updated in BWC standards first:

The tooltip should be anchored to the item that is being hovered and should not follow the cursor as it moves.

And then refined in iTwinUI standards:

It is anchored to the hovered item and fades out when the cursor moves away from the item.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed for now.

@bentleyvk bentleyvk marked this pull request as ready for review November 30, 2021 15:22
@bentleyvk bentleyvk requested a review from a team as a code owner November 30, 2021 15:22
@bentleyvk bentleyvk requested review from a team, veekeys and saaaaaally and removed request for a team November 30, 2021 15:22
src/core/Table/utils.ts Outdated Show resolved Hide resolved
src/core/Table/hooks/useResizeColumns.tsx Outdated Show resolved Hide resolved
src/core/Table/hooks/useResizeColumns.tsx Outdated Show resolved Hide resolved
src/core/Table/hooks/useResizeColumns.tsx Show resolved Hide resolved
src/core/Table/hooks/useResizeColumns.tsx Outdated Show resolved Hide resolved
src/core/Table/hooks/useResizeColumns.tsx Show resolved Hide resolved
src/core/Table/hooks/useResizeColumns.tsx Show resolved Hide resolved
src/core/Table/hooks/useResizeColumns.tsx Show resolved Hide resolved
src/core/Table/utils.ts Show resolved Hide resolved
@bentleyvk bentleyvk merged commit 4c25fe1 into main Dec 10, 2021
@bentleyvk bentleyvk deleted the vilius/table-column-resize branch December 10, 2021 07:11
mayank99 pushed a commit to iTwin/iTwinUI that referenced this pull request Dec 21, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Table: Resizable Columns
4 participants