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 and the variants table on /products/:id 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.

Note
This PR has a lot of LOC. 5,346 of these changes are the fr.json file, which wasn't formatted correctly before. When adding the new translations needed for this PR the file was formatted which caused each line to change to have the proper indentation.

Resolves CMRC-333

[changeset-bot]

🦋 Changeset detected

Latest commit: 2bf3396

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 ↗︎

7 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
api-reference	⬜️ Ignored (Inspect)			Jan 20, 2025 1:18pm
api-reference-v2	⬜️ Ignored (Inspect)	Visit Preview		Jan 20, 2025 1:18pm
docs-ui	⬜️ Ignored (Inspect)	Visit Preview		Jan 20, 2025 1:18pm
docs-v2	⬜️ Ignored (Inspect)	Visit Preview		Jan 20, 2025 1:18pm
medusa-dashboard	⬜️ Ignored (Inspect)	Visit Preview		Jan 20, 2025 1:18pm
medusa-docs	⬜️ Ignored (Inspect)	Visit Preview		Jan 20, 2025 1:18pm
resources-docs	⬜️ Ignored (Inspect)	Visit Preview		Jan 20, 2025 1:18pm

[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.