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

Replace reactable with DataTable from superset-ui in QueryTable #10981

Merged
merged 4 commits into from
Sep 22, 2020

Conversation

kgabryje
Copy link
Member

SUMMARY

The goal is to replace all uses of reactable-arc library with DataTable from superset-ui (which uses react-table under the hood) and keep the UI/UX mostly unchanged. The reason for that is that reactable-arc has been unsupported for 2 years now, uses deprecated lifecycle methods and is incompatible with Typescript.
This PR replaces reactable-arc in QueryTable component

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

image

After:

image

As you can see, there's an additional field where we can change the items per page param. Currently DataTable doesn't support not showing this field.

TEST PLAN

ADDITIONAL INFORMATION

  • Has associated issue:
  • Changes UI
  • Requires DB Migration.
  • Confirm DB Migration upgrade and downgrade tested.
  • Introduces new feature or API
  • Removes existing feature or API

@kgabryje
Copy link
Member Author

@rusackas Would you mind taking a look?


describe('QueryTable', () => {
// hack for mocking hook that implements sticky behaviour of DataTable
jest
Copy link
Member Author

Choose a reason for hiding this comment

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

@rusackas This was needed because sticky DataTable uses useLayoutEffect under the hood and that caused enzyme not to render the component properly. If you have a better idea how to solve it I'll be happy to try it!

Copy link
Member

@ktmud ktmud left a comment

Choose a reason for hiding this comment

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

Thanks for doing this! I've been wanting to move DataTable to a standalone package, too, so it doesn't feel weird to import things from a plugin in the core UI.

But I think current approach is good. We can always come back and refactor once someone finds time to do the extraction.

@rusackas rusackas merged commit e93d92e into apache:master Sep 22, 2020
nytai added a commit to preset-io/superset that referenced this pull request Oct 1, 2020
nytai added a commit that referenced this pull request Oct 1, 2020
auxten pushed a commit to auxten/incubator-superset that referenced this pull request Nov 20, 2020
…he#10981)

* Replace reactable with DataTable from superset-ui in QueryTable

* Fix tests

* Fix pagination

* Fix tests
auxten pushed a commit to auxten/incubator-superset that referenced this pull request Nov 20, 2020
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.38.0 labels Mar 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/M 🚢 0.38.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants