feat(table): 3715-Resize-Table-Column-header #835
Conversation
|
Deploy preview for carbon-addons-iot-react ready! Built with commit b97002e https://deploy-preview-835--carbon-addons-iot-react.netlify.com |
|
@davidicus please review this PR |
@davidicus 2nd image issue fixed and delivered, 1st image issue not reproducible. |
|
|
@davidicus This behavior is due to Filter text, which is stopping resize process. |
@davidicus we will look into this first image issue when height of header is increased and resize |
|
@JordanWSmith15 @davidicus we have fixed the resizing issue in first image, for filter scenario we need to finalize the behavior (here we can disable the filter if user resize, filter boxes have its own width so it resize the column when it is active again. ) Please review |
|
@sunilkotiyaibm I am not sure if that interaction works. Resizing these filter inputs seems like a prime use case for this feature. @JordanWSmith15 please feel free to weigh in. I am going to have Bjorn, whose been assigned to this issue, look into possible work arounds. |
@davidicus Agree that it is likely a use case, but given the length of time this story has gone on, I think it's time to draw the line and handle further capabilities as an add-on enhancement story, weighed against other priorities. I would be fine disabling resizing while the filters are active if it meant this story taking more than a few more days. |
|
@davidicus @sunilkotiyaibm @JordanWSmith15 Since we are talking able the filters... I also think that these filter components need to be customizable (like cell renderers and cell editors) since right now, if we have a date filter or a time filter, etc, we have no control over the user input component. I'm also not a fan of the fact that the filters when enabled causes the table to grow quite considerably. I think the expectation should be that the when a filter row is enabled the space that it gets is current column width. I always find it disconcerting when I enable the filters and I feel like Iv'e lost columns, but then I realize it's because the table is now horizontal scrolling. |
I agree. This is the behavior we are going with. Removing the min width and have these inputs be 100% of their cell size. Bjorn is pushing up some changes this morning with his fixes. @stuckless , custom sort filters are now a thing! Unfortunately, it seems to be a feature for Stateful table which i know you do not use. I wonder if that can be moved over to the base Table. We will have to look into. |
…into 3715-Resize-Table-Column-header
| // When transitioning, we know that the sequence of states is as follows: | ||
| // NONE -> ASC -> DESC -> NONE | ||
| if (sortDirection === sortStates.NONE) { | ||
| return 'Sort rows by this header in ascending order'; |
There was a problem hiding this comment.
this needs to be translated, right?
There was a problem hiding this comment.
I don't know, I think that @sunilkotiyaibm copied this file from carbon to temporarily add a forwarding ref.
There was a problem hiding this comment.
These ref changes need to be put into a PR on the Carbon repo still. I will open an issue to track.
There was a problem hiding this comment.
These ref changes need to be put into a PR on the Carbon repo still. I will open an issue to track.
Issue created
| columnVar.index = index; | ||
| columnVar.startX = columnVar.element.offsetLeft - e.clientX; | ||
| columnVar.move = e.clientX; | ||
| document.onmouseup = mouseupCallback; |
There was a problem hiding this comment.
Can we scope these to the component?
| // When transitioning, we know that the sequence of states is as follows: | ||
| // NONE -> ASC -> DESC -> NONE | ||
| if (sortDirection === sortStates.NONE) { | ||
| return 'Sort rows by this header in ascending order'; |
There was a problem hiding this comment.
These ref changes need to be put into a PR on the Carbon repo still. I will open an issue to track.
|
going to close in favor of #867 |
#135
Closes #
Summary
Allow resizing Table columns using mouse dragging
Change List (commits, features, bugs, etc)
src/components/DataTable/_data-table.scss
src/components/Table/TableHead/TableHead.jsx
src/components/Table/TableHead/TableHeader.js
src/components/Table/TableHead/state/sorting.js
src/components/Table/TableHead/tools/cells.js
src/components/Table/TableHead/tools/sorting.js
src/components/Table/Table.test.jsx
src/components/Table/TableHead/TableHead.test.jsx
src/components/Dashboard/snapshots/Dashboard.story.storyshot
src/components/TableCard/snapshots/TableCard.story.storyshot
src/components/Table/snapshots/Table.story.storyshot
jest.config.js
Acceptance Test (how to verify the PR)
Allow resizing table column, on mouse hover resizing icon should be displayed
On resizing column using resizing icon should be dragged towards left or right direction using mouse down event
on releasing the mouse column should be resized where mouse was released and this should reflect in all rows.