feat(ui,dashboard): Add DataTable block

[kasperkristensen]

What

• Adds opinionated DataTable block to @medusajs/ui
• Adds new DataTable to @medusajs/dashboard that uses the above mentioned block as the primitive.

The PR also replaces the table on /customer-groups with the new DataTable, to provide an example of it's usage. The previous DataTable component has been renamed to _DataTable and has been deprecated.

Resolves CMRC-333

[changeset-bot]

🦋 Changeset detected

Latest commit: 508ea18

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

This PR includes changesets to release 66 packages

Name	Type
@medusajs/ui	Patch
@medusajs/dashboard	Patch
@medusajs/admin-bundler	Patch
@medusajs/medusa	Patch
@medusajs/test-utils	Patch
@medusajs/api-key	Patch
@medusajs/auth	Patch
@medusajs/cache-inmemory	Patch
@medusajs/cache-redis	Patch
@medusajs/cart	Patch
@medusajs/currency	Patch
@medusajs/customer	Patch
@medusajs/event-bus-local	Patch
@medusajs/event-bus-redis	Patch
@medusajs/file	Patch
@medusajs/fulfillment	Patch
@medusajs/index	Patch
@medusajs/inventory	Patch
@medusajs/link-modules	Patch
@medusajs/locking	Patch
@medusajs/notification	Patch
@medusajs/order	Patch
@medusajs/payment	Patch
@medusajs/pricing	Patch
@medusajs/product	Patch
@medusajs/promotion	Patch
@medusajs/region	Patch
@medusajs/sales-channel	Patch
@medusajs/stock-location	Patch
@medusajs/store	Patch
@medusajs/tax	Patch
@medusajs/user	Patch
@medusajs/workflow-engine-inmemory	Patch
@medusajs/workflow-engine-redis	Patch
@medusajs/auth-emailpass	Patch
@medusajs/auth-github	Patch
@medusajs/auth-google	Patch
@medusajs/file-local	Patch
@medusajs/file-s3	Patch
@medusajs/fulfillment-manual	Patch
@medusajs/locking-postgres	Patch
@medusajs/locking-redis	Patch
@medusajs/notification-local	Patch
@medusajs/notification-sendgrid	Patch
@medusajs/payment-stripe	Patch
@medusajs/core-flows	Patch
@medusajs/framework	Patch
@medusajs/js-sdk	Patch
@medusajs/modules-sdk	Patch
@medusajs/orchestration	Patch
@medusajs/types	Patch
@medusajs/utils	Patch
@medusajs/workflows-sdk	Patch
@medusajs/cli	Patch
@medusajs/medusa-oas-cli	Patch
@medusajs/oas-github-ci	Patch
@medusajs/telemetry	Patch
@medusajs/admin-sdk	Patch
@medusajs/admin-shared	Patch
@medusajs/admin-vite-plugin	Patch
@medusajs/icons	Patch
@medusajs/toolbox	Patch
@medusajs/ui-preset	Patch
create-medusa-app	Patch
medusa-dev-cli	Patch
integration-tests-http	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

[vercel]

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	Jan 10, 2025 10:47am

6 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
api-reference	⬜️ Ignored (Inspect)			Jan 10, 2025 10:47am
api-reference-v2	⬜️ Ignored (Inspect)	Visit Preview		Jan 10, 2025 10:47am
docs-ui	⬜️ Ignored (Inspect)	Visit Preview		Jan 10, 2025 10:47am
docs-v2	⬜️ Ignored (Inspect)	Visit Preview		Jan 10, 2025 10:47am
medusa-docs	⬜️ Ignored (Inspect)	Visit Preview		Jan 10, 2025 10:47am
resources-docs	⬜️ Ignored (Inspect)	Visit Preview		Jan 10, 2025 10:47am

[kasperkristensen]

/snapshot-this

[github-actions]

🚀 A snapshot release has been made for this PR

Test the snapshots by updating your package.json with the newly published versions:

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add [email protected]

yarn add @medusajs/[email protected]

yarn add [email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

Latest commit: f541e21

[Alexnortung]

Hi, I have tried out the datatable, I am not sure if it is intenden. But it seems like when the data for the datatable is empty and it is loading, the <DataTable.Search> input gets hidden.
This is a bit annoying if you are typing something and the input disappears.

A workaround is to use the previous data, such that the data is not empty, but is this the intended way to use it?

[Alexnortung]

Hello @kasperkristensen,
I would like to be able to make a row a link, I can see that the other datatable has a navigateTo prop, which the new data table does not have. Could this be added to the new datatable? Or is there another way to make this work?

[kasperkristensen]

Hello @kasperkristensen, I would like to be able to make a row a link, I can see that the other datatable has a navigateTo prop, which the new data table does not have. Could this be added to the new datatable? Or is there another way to make this work?

You can pass an onRowClick callback to the hook, you can see how we use it in the dashboard project for navigation:

medusa/packages/admin/dashboard/src/components/data-table/data-table.tsx

Line 201 in ed003e9

const onRowClick = useCallback(

[kasperkristensen]

Hi, I have tried out the datatable, I am not sure if it is intenden. But it seems like when the data for the datatable is empty and it is loading, the <DataTable.Search> input gets hidden. This is a bit annoying if you are typing something and the input disappears.

A workaround is to use the previous data, such that the data is not empty, but is this the intended way to use it?

Hi @Alexnortung, it is intended according the design spec for the component, but I can see why it might be a bit annoying. I'll ping our designer if we should change it so the search bar is never hidden.

But generally I would always avoid having no data while loading, as it will cause layout shifts when the table goes from data -> no data -> data. The way we handle this internally is that we keep the old data until the new data is ready. If you are using @tanstack/react-query that can be done by using keepPreviousData for the placeholderData:

import { keepPreviousData } from "@tanstack/react-query"

const Component = () => {
  const data = useQuery({
    queryKey: [...],
    queryFn: () => {...},
    placeholderData: keepPreviousData
  })
}

[vercel]

Deployment failed with the following error:

The provided GitHub repository does not contain the requested branch or commit reference. Please ensure the repository is not empty.

[Alexnortung]

Thanks for the feedback @kasperkristensen, it was helpful!
I have tried using the datatable a bit more and I have another note:
The toolbar seems to have some kind of z index where it will be on top of tooltips and modals. In the following screenshot you can notice that the first line in the tooltip is missing, but the tooltip looks right on the other rows.

The following shows how it looks with a modal, where the table is behind it:

[kasperkristensen]

Thanks for the feedback @kasperkristensen, it was helpful! I have tried using the datatable a bit more and I have another note: The toolbar seems to have some kind of z index where it will be on top of tooltips and modals. In the following screenshot you can notice that the first line in the tooltip is missing, but the tooltip looks right on the other rows.

The following shows how it looks with a modal, where the table is behind it:

Yes the header has a z-index of 1, but this should not cause any issues as the wrapping table has isolation: isolate which creates a new stacking context. Here is how it looks on my end:

Could you maybe share small reproduction of how you are using the component, and which browser you are using. Also it looks like your CSS is incorrect, if you haven't already make sure to also add a resolution for @medusajs/ui-preset with the snapshot version above, and see if that helps.