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(dashboard): DataTable component #6297

Merged
merged 15 commits into from
Feb 2, 2024
Merged

Conversation

kasperkristensen
Copy link
Contributor

@kasperkristensen kasperkristensen commented Feb 1, 2024

What

  • Adds DataTable component.
  • Updates to latest version of TW to gain access to new selectors and classes.

Why

  • The DataTable component contains all logic for adding a new Table component to the admin. It allows for free text search, filtering, ordering and pagination. While this PR introduces a lot of new code for the component it will allow us to reduce the bundle size of the Admin, as we can replace all existing tables, and missing tables with this single component. It is also meant to help prevent us from running into the same problem we had in the previous version of Admin were each developer would have their own way of implementing a Table, resulting in code that was hard to maintain, and was using multiple versions of dependencies.
  • The components query state is all handled via search params in the URL, making it possible to share links with for specific views of a table. If there are multiple tables on a page, a prefix can be passed to the component to differentiate the params for each table.
  • The component also introduces a more responsive Table component, that allows users to scroll horizontally. When scrolling horizontally the first columns will be fixed, making it easier for users to keep track of which row they are looking at. If the row has a Select column (Checkbox) then the checkbox + the next columns will be fixed.

Note

  • This PR only adds the DataTable component on the Order list page, and Customer details page, for demonstration. The rest of admin will be updated in subsequent PRs.

Copy link

changeset-bot bot commented Feb 1, 2024

🦋 Changeset detected

Latest commit: 6c51535

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@medusajs/ui-preset Patch
@medusajs/ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Feb 1, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
medusa-dashboard ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 1, 2024 3:20pm
3 Ignored Deployments
Name Status Preview Comments Updated (UTC)
api-reference ⬜️ Ignored (Inspect) Feb 1, 2024 3:20pm
docs-ui ⬜️ Ignored (Inspect) Visit Preview Feb 1, 2024 3:20pm
medusa-docs ⬜️ Ignored (Inspect) Visit Preview Feb 1, 2024 3:20pm

Comment on lines 50 to 59
/**
* TODO
*
* Add a sticky header to the table that shows the column name when scrolling through the table vertically.
*
* This is a bit tricky as we can't support horizontal scrolling and sticky headers at the same time, natively
* with CSS. We need to implement a custom solution for this. One solution is to render a duplicate table header
* using a DIV that, but it will require rerendeing the duplicate header every time the window is resized, to keep
* the columns aligned.
*/
Copy link
Contributor Author

Choose a reason for hiding this comment

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

comment: This will be implemented in a follow up PR, most likely after the first iteration of Admin 3.0.

@kasperkristensen kasperkristensen marked this pull request as ready for review February 1, 2024 14:37
@kasperkristensen kasperkristensen requested review from a team as code owners February 1, 2024 14:37
Comment on lines +9 to +11
/**
* TODO: Enable `order` query param when staging is updated
*/
Copy link
Contributor Author

Choose a reason for hiding this comment

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

comment: Currently the Order menu does nothing for the Order tables. Will enable it once staging has been updated, as it would currently crash the page.

Copy link
Contributor

@olivermrbl olivermrbl left a comment

Choose a reason for hiding this comment

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

Really, really awesome work. Should we reduce the pagesize to 20, now that we know it doesn't look silly on larger screens? Think it makes for a better "whole" product experience.

@srindom
Copy link
Collaborator

srindom commented Feb 2, 2024

This is really pretty!

We should re-add the customer information in the order overview though

@olivermrbl olivermrbl merged commit 8cbf6c6 into develop Feb 2, 2024
17 checks passed
@olivermrbl olivermrbl deleted the feat/3.0-data-table branch February 2, 2024 20:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants