Column width: localstorage fix + sortable column width #289

MaxiLein · 2024-05-25T16:29:14Z

Summary

When selecting /deselecting a column, changing the width afterwards resets the elected columns → should work now
Sortable column's width wasn't changeable → it is now
added min-width for columns (defaults to 150px)

…n localstorage

OhKai · 2024-06-03T08:56:00Z

This solution is probably not the most react-friendly way to do things. I am also not quite sure, why we need to do it that way. Can we implement the resizing like they do it in the example? https://codesandbox.io/p/sandbox/ant-design-resizable-table-columns-qtbr67?file=%2Fsrc%2FApp.tsx

MaxiLein · 2024-06-27T11:04:10Z

Rewrote resizing of columns as requested

Summary

used react-resizable for resizing the columns
making columns in the ElementList resizeable is still as easy as to use one hook to overwrite the columns, before passing them as prop
added feature: if and only if cells of a resizeable column are truncated, the whole cells content is displayed as a tooltip when hoovering over it

Screencast.from.27.06.2024.13.00.29.webm

Details

react-resizable does not integrate with antdesign as seamlessly as wished (e.g. width='auto' is not supported)
See code comments for more detail
caveat: had to overwrite the components={{ header: { cell: ResizableTitle } }} of the antdesign table => using the hook suffices when using elementlist, however, when using the antdesign table, the overwrite is needed as well

MaxiLein · 2024-06-27T11:15:45Z

src/management-system-v2/lib/useColumnWidth.tsx

+ setTimeout(() => {
+ /* Hydrating */
+ /* Replace 'auto' width with actual px values */
+ const resizeableElements = document.querySelectorAll('.react-resizable');
+ const widthsOfResizeableElements = Array.from(resizeableElements).map(
+ (element: any) => element.getBoundingClientRect().width,
+ );
+ /* Get the widths */
+ const widths = columns.map((column: any, index: number) => {
+ /* Check if not resizeable */
+ if (notResizeabel.includes(column.key)) return column.width || minWidth;
+
+ return widthsOfResizeableElements.shift() || minWidth;
+ });
+
+ /* Replace width */
+ newColumns = newColumns.map((column: any, index: number) => {
+ return {
+ ...column,
+ width: widths[index],
+ };
+ });

- /* Update UI */
- setColumnWidths((old) => ({ ...old, [resizingColumn.current]: newWidth }));
+ setResizeableColumns(newColumns);
+ }, 1_000);


This is a workaround to keep antdesigns 'auto' width. It replaces the auto values with the actual pixel values after everything was rendered.

MaxiLein · 2024-06-27T11:32:16Z

src/management-system-v2/lib/useColumnWidth.tsx

- {column.title as ReactNode}
+ const widths = getWidthsOfInnerElements(containerRef.current);
+
+ if (widths.some((w) => w > width)) {


Maybe this should be adapted in the future, as the total width can be determined by two direct children, that are displayed next to each other (such as the process / folder icon and the title)

yeah, would be good

Changed it to also check for elements that are displayed inline (i.e. use the sum of their width)

OhKai · 2024-06-29T20:57:58Z

src/management-system-v2/components/process-list.tsx

+ // components: {
+ //  body: {
+ //  row: DraggableRow,
+ //  },
+ // },


Should this now be passed as tableProps?

Just forgot to uncomment it again -> removed comments

OhKai · 2024-06-30T12:43:03Z

src/management-system-v2/lib/useColumnWidth.tsx

+ setTimeout(() => {
+ /* Hydrating */
+ /* Replace 'auto' width with actual px values */
+ const resizeableElements = document.querySelectorAll('.react-resizable');
+ const widthsOfResizeableElements = Array.from(resizeableElements).map(
+ (element: any) => element.getBoundingClientRect().width,
+ );
+ /* Get the widths */
+ const widths = columns.map((column: any, index: number) => {
+ /* Check if not resizeable */
+ if (notResizeabel.includes(column.key)) return column.width || minWidth;
+
+ return widthsOfResizeableElements.shift() || minWidth;
+ });
+
+ /* Replace width */
+ newColumns = newColumns.map((column: any, index: number) => {
+ return {
+ ...column,
+ width: widths[index],
+ };
+ });

- const handleMouseMove = useCallback((event: MouseEvent) => {
- if (indicatorRef.current) {
- indicatorRef.current.style.left = `${event.clientX}px`;
+ setResizeableColumns(newColumns);
+ }, 1_000);


Timeouts should always have a cleanup returned in an effect. Otherwise this could cause errors when the component unmounts before the delay. You can still use a ref as a flag to mark the update, if you are unable to calculate that from the given values instead.

Added timeout clear as cleanup

OhKai · 2024-06-30T13:01:12Z

src/management-system-v2/lib/useColumnWidth.tsx

+export const ResizableTitle = (props: any) => {
+ const { onResize, width, ...restProps } = props;


Why no destructuring directly in the function declaration? And is it possible to narrow the type down?

Made suggested changes

OhKai · 2024-06-30T13:03:15Z

src/management-system-v2/lib/useColumnWidth.tsx

+
+type TruncateType = {
+ width: number | string;
+ innerRender: () => JSX.Element | string;


Can it be () => ReactNode?

OhKai · 2024-06-30T13:11:53Z

src/management-system-v2/lib/useColumnWidth.tsx

- {column.title as ReactNode}
+ const widths = getWidthsOfInnerElements(containerRef.current);
+
+ if (widths.some((w) => w > width)) {


yeah, would be good

github-actions · 2024-07-23T17:47:53Z

✅ Successfully created Preview Deployment.

https://pr-289---ms-server-staging-c4f6qdpj7q-ew.a.run.app

Column width for sortable columns + correct update of stored widths i…

e06ca78

…n localstorage

This comment has been minimized.

Sign in to view

Merge branch 'main' into column-width-fixes

fce6cd6

This comment has been minimized.

Sign in to view

Merge branch 'main' into column-width-fixes

82a9488

This comment has been minimized.

Sign in to view

MaxiLein added 3 commits June 26, 2024 17:02

Merge branch 'main' into column-width-fixes

fb536ae

change resizing of columns

0e4ef35

remove duplicate rerender

da3e777

MaxiLein marked this pull request as draft June 26, 2024 19:14

Added Tooltip display of cell content if truncated

c8178fc

This comment has been minimized.

Sign in to view

MaxiLein added 3 commits June 27, 2024 12:48

fix typo

345f599

typo

a35c7c8

reverted, wrong typo fix

f1897ff

MaxiLein marked this pull request as ready for review June 27, 2024 11:04

MaxiLein requested a review from OhKai June 27, 2024 11:04

making components props passable to elementlsit

134d43d

MaxiLein commented Jun 27, 2024

View reviewed changes

This comment has been minimized.

Sign in to view

MaxiLein commented Jun 27, 2024

View reviewed changes

small fix

ed2f469

This comment has been minimized.

Sign in to view

Merge branch 'main' into column-width-fixes

d71e0e1

This comment has been minimized.

Sign in to view

OhKai reviewed Jun 30, 2024

View reviewed changes

MaxiLein added 2 commits July 2, 2024 12:02

Merge branch 'main' into column-width-fixes

ad4eb2c

trivial

0e52f34

MaxiLein added 2 commits July 2, 2024 13:45

address requested changes

389bd02

x-scroll in list

65f8e6c

This comment has been minimized.

Sign in to view

MaxiLein added 2 commits July 7, 2024 14:26

Add Todo

023bf97

Merge branch 'main' into column-width-fixes

cd28200

This comment has been minimized.

Sign in to view

Merge branch 'main' into column-width-fixes

e1f9db6

This comment has been minimized.

Sign in to view

MaxiLein and others added 2 commits July 8, 2024 11:53

Merge branch 'main' into column-width-fixes

24d2873

Merge branch 'main' into column-width-fixes

b856a91

This comment has been minimized.

Sign in to view

click cell rahter than row

3475c3d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Column width: localstorage fix + sortable column width #289

Column width: localstorage fix + sortable column width #289

MaxiLein commented May 25, 2024 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

OhKai commented Jun 3, 2024

This comment has been minimized.

MaxiLein commented Jun 27, 2024

MaxiLein Jun 27, 2024

This comment has been minimized.

MaxiLein Jun 27, 2024 •

edited

Loading

OhKai Jun 30, 2024

MaxiLein Jul 2, 2024

This comment has been minimized.

This comment has been minimized.

OhKai Jun 29, 2024

MaxiLein Jul 2, 2024

OhKai Jun 30, 2024

MaxiLein Jul 2, 2024

OhKai Jun 30, 2024

MaxiLein Jul 2, 2024

OhKai Jun 30, 2024

MaxiLein Jul 2, 2024

OhKai Jun 30, 2024

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

github-actions bot commented Jul 23, 2024

		export const ResizableTitle = (props: any) => {
		const { onResize, width, ...restProps } = props;

Column width: localstorage fix + sortable column width #289

Are you sure you want to change the base?

Column width: localstorage fix + sortable column width #289

Conversation

MaxiLein commented May 25, 2024 • edited Loading

Summary

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

OhKai commented Jun 3, 2024

This comment has been minimized.

MaxiLein commented Jun 27, 2024

Rewrote resizing of columns as requested

Summary

Details

Choose a reason for hiding this comment

This comment has been minimized.

MaxiLein Jun 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

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

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

github-actions bot commented Jul 23, 2024

MaxiLein commented May 25, 2024 •

edited

Loading

MaxiLein Jun 27, 2024 •

edited

Loading