search

soccerloway / quill-better-table

Module for better table in Quill, more useful features are supported.
MIT License
313 stars 119 forks source link

Alignment for table #4

Open soccerloway opened 5 years ago

soccerloway commented 5 years ago

First, I wrapped table with a scrollable div to show intact table, and the width of scrollable div was 100 percent. Second, to achieve that, it must change the layout styles and change the algorithm for table operations. The complexity will increase. I think alignment for table is hard to achieve in this repo, but is possible.

MuhammedAlkhudiry commented 4 years ago

The main problem I see with the alignment is with column-width-tool when I center the table the tool breaks.

soccerloway commented 4 years ago

@MuhammedAlkhudiry Yes. Since the column-width calculation depend on locations of domNode.getBoundingClientRect(), the alignment changes will make calculation errors.

MuhammedAlkhudiry commented 4 years ago

do you know any other API (to change the size of an element by dragging)?, I believe It's worth rebuilding the tool just to make it like Word and Google Docs,

MuhammedAlkhudiry commented 4 years ago

see this https://www.brainbell.com/javascript/making-resizable-table-js.html this is perfect. also, this may help https://www.brainbell.com/javascript/download/demo-resizable.html this is good article https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d

this is for an editor https://www.froala.com/wysiwyg-editor/v2.0/examples/resize-table Sorry, if you are already searched and saw these.

soccerloway commented 4 years ago

@MuhammedAlkhudiry thanks for your detailed reply~ quill-better-table uses colgroup and col html5 tags to control the width of columns, these tags are specialized for managing attributes of table columns. Actually, I mean the calculations of most operations(like: merge, unmerge, select, insert, delelte) depend on the locations(got by domNode.getBoundingClientRect()) of DOM. The alignment changes will change the locations of DOM. I think that it need to modify the location calculations for support alignment.

MuhammedAlkhudiry commented 4 years ago

see this https://www.brainbell.com/javascript/making-resizable-table-js.html this is perfect. also, this may help https://www.brainbell.com/javascript/download/demo-resizable.html this is good article https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d

this is for an editor https://www.froala.com/wysiwyg-editor/v2.0/examples/resize-table Sorry, if you are already searched and saw these.

I replaced your tool (sorry :() with this method https://www.brainbell.com/javascript/making-resizable-table-js.html and removed the colgroup, and It's working even if the table is centered or in the right. but col-tool is used in the operations menu so I need to deal with this

soccerloway commented 4 years ago

You are welcome:) That's cool. It looks like you have made the table module more powerful~ I will seriously consider your suggests.

unzld commented 2 years ago

see this https://www.brainbell.com/javascript/making-resizable-table-js.html this is perfect. also, this may help https://www.brainbell.com/javascript/download/demo-resizable.html this is good article https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d this is for an editor https://www.froala.com/wysiwyg-editor/v2.0/examples/resize-table Sorry, if you are already searched and saw these.

I replaced your tool (sorry :() with this method https://www.brainbell.com/javascript/making-resizable-table-js.html and removed the colgroup, and It's working even if the table is centered or in the right. but col-tool is used in the operations menu so I need to deal with this

@KMLX28 can you share your code sir on how you implemented it?