Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/resize columns #350

Draft
wants to merge 48 commits into
base: master
Choose a base branch
from
Draft

Conversation

mir4a
Copy link

@mir4a mir4a commented Apr 29, 2024

This PR adds possibility to resize columns with with two callbacks: for tracking resize (dragging) and resize end useful for storing which columns were resized. Stored values then can be passed as a property so that after reloading the page the table will restore touched column widths.

What is done:

  • columns are resizable
  • callback for dragging
  • callback for resize end
  • accept initial values for columns
  • re-calculate table's height when horizontal scroll appears
  • prevent column collapsing when resized. Partially done by setting min (resizable) width to 40px
  • adjust the rest column widths to fit available space so that the right border of the table doesn't look broken

If you would like to test it out right away, you can try my fork published on npm: npm i @mir4a/[email protected] --save-exact.

Copy link

netlify bot commented Apr 29, 2024

Deploy Preview for react-datasheet-grid canceled.

Name Link
🔨 Latest commit ede1a05
🔍 Latest deploy log https://app.netlify.com/sites/react-datasheet-grid/deploys/664a0f293e64900008787685

src/style.css Outdated

.dsg-resize-handle:hover {
cursor: col-resize;
background: rgba(0, 0, 250, 0.75);
Copy link

@maxkuzmin maxkuzmin May 16, 2024

Choose a reason for hiding this comment

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

it should use --dsg-selection-border-color var instead of hardcoded color

> Type: `({ widths: Array<number | undefined>) => void`<br />
> Default: `void`

If provided, the grid will became resizable. This callback is called when the user resizes a column.

Choose a reason for hiding this comment

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

I think we need to have additional boolean flag which enables resizing. One would use resizing without need for handling it.

@@ -277,3 +277,10 @@ Called when the active / highlighted cell changes. Called with null when the gri
> Default: `void`

Called when the selection changes. Called with null when the grid is blurred.

### onColumnsResize
> Type: `({ widths: Array<number | undefined>) => void`<br />

Choose a reason for hiding this comment

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

closing } bracer is missed here

@tdonkena
Copy link

@nick-keller Can this get reviewed and merged please, this has been open for 2 months

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants