React-data-grid: Flexbox sizing support

[NullVoxPopuli]

Which version of React JS are you using?

✅ Officially supported ✅

• [ ] v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

• [ ] v15.5.x
• [ ] v15.6.x

☣️ Not officially supported, expect warnings and errors ☣️

• [x] v16.x.x

---

Which browser are you using?

✅ Officially supported ✅

• [ ] IE 9 / IE 10 / IE 11
• [ ] Edge
• [x] Chrome

⚠️ Not officially supported, but "should work" ⚠️

• [ ] Firefox
• [ ] Safari

---

I'm submitting a ...

• [ ] 🐛 Bug Report
• [x] 💡 Feature Request

---

Issue Details

Please include:
- What the current behavior is
- What the desired behvaior is
- (If Bug) Steps to reproduce the issue
- (If Feature) The motivation / use case for the feature

We especially love screenshots / videos of problems, and remember
The Best Issue Is A Pull Request™

it would be super cool to have react-data-grid to support flexible sizing / the ability to to grow to the available space, rather than (currently), only rely on minimum width.

[NullVoxPopuli]

Here is some CSS I came up with to make the existing react-data-grid flexible:

.dwkit-form-container {
  display: flex;
  // FormContent renders an uncustomizable div
  > div {
    display: flex;
    flex-grow: 1;
  }

  // FormContent does not expose a way to customize this
  .dwkit-form {
    flex-direction: column;
    display: flex;
    flex-grow: 1;
  }
}

.dwkit-gridview-autoHeight {
  display: flex;
  // default is 100vh, which if your form
  // is nested under any elements, will
  // force scrolling, because 100vh is 
  // the full height of the viewport, and 
  // not the available space.
  height: auto !important;
  flex-grow: 1;
}

.react-grid-Container {
  display: flex;
  flex-grow: 1;

  .react-grid-Main {
    display: flex;
    flex-grow: 1;
    height: auto;

    .react-grid-Grid {
      height: auto;
      flex-grow: 1;

      .react-grid-Header {
        position: static;
      }

      .react-grid-Header + div {
        overflow: auto;
        position: absolute;
        top: 35px;
        bottom: 0;
        right: 0;
        left: 0;

        .react-grid-Viewport {
          position: static !important;
          overflow: initial;

          .react-grid-Canvas {
            height: auto !important;

            // some containing div hack
            > div {
              overflow: initial !important;

              // note: each row is wrapped in a useless div
              .react-grid-Row {
                contain: inherit !important;
              }
            }
          }
        }
      }
    }
  }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[NullVoxPopuli]

booo

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[piehouserat]

the stale bot gives the false impression that this plugin is in good shape as there are only a few open issues but the reality is that the bot sweeps serious voids in functionality under the rug without resolution...