Skip to content

Added an Integrations page for global MRT theme overrides - #249

Open
zoharma wants to merge 2 commits into
mainfrom
zma/ds-mta-overrides
Open

Added an Integrations page for global MRT theme overrides#249
zoharma wants to merge 2 commits into
mainfrom
zma/ds-mta-overrides

Conversation

@zoharma

@zoharma zoharma commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

Added an Integrations page for global MRT theme overrides.

Use as follows:

For app intergation:
Use

import {
  ThemeProvider,
  DiamondDSIntegrations,
  DiamondDSTheme,
} from "@diamondlightsource/sci-react-ui"

and inside const table = useMaterialReactTable({

    ...DiamondDSIntegrations.mrtOptions(),
    mrtTheme: DiamondDSIntegrations.mrt(),

p.s.
Have not updated ?path=/docs/installation--docs with the guidance as not sure of the best way to do that. It's only when using MRT. Also guidance to pull artefacts of DiamondDSIntegrations may update as we progress...

@zoharma zoharma added the v0.6.3 label Jul 17, 2026
@zoharma
zoharma marked this pull request as ready for review August 4, 2026 14:04

@VictoriaBeilsten-Edmands VictoriaBeilsten-Edmands left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

It would be useful to have a mrt story and something in the dev app using the integration.

Comment thread src/themes/DiamondDSIntegrations.ts Outdated
Comment thread src/themes/DiamondDSIntegrations.ts Outdated
elevation: 0,
sx: {
boxShadow: "none",
borderRadius: 1,

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Does this want hardcoding?

@zoharma zoharma Aug 4, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

What do you mean?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Do we want this to be set to 1 like this or linked to a token in the theme instead?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This was changed in the new update to be more rounded actually. We haven't done tokens for radius yet (beyond the default MUI) and we should do as a separate strand, spacing too.

Comment thread src/themes/DiamondDSIntegrations.ts Outdated
Comment thread src/themes/DiamondDSIntegrations.ts Outdated
Added an Integrations page for global MRT theme overrides
@zoharma
zoharma force-pushed the zma/ds-mta-overrides branch 2 times, most recently from 2e1b9df to 0276250 Compare August 4, 2026 18:08
- `mrtTheme` is now a plain object instead of a zero-arg function
- DiamondDSIntegrations.mrtOptions() now matches MUI Table's hover/selected colours, fixes header checkbox alignment, and avoids a crash from MRT's alpha() running on a var(...) colour
- MuiTableContainer theme override gets a shared order/radius, with the last-row divider fix so it doesn't double up
- Add fullWidth option to drop border/radius on full-bleed tables
- Add MRT demo (selection, hover) to dev app; document usage in MDX guide
- Add test coverage for both
@zoharma
zoharma force-pushed the zma/ds-mta-overrides branch from 28e0b32 to d0031e8 Compare August 4, 2026 18:15
@zoharma

zoharma commented Aug 4, 2026

Copy link
Copy Markdown
Contributor Author

@VictoriaBeilsten-Edmands Quite a few updates:

  • mrtTheme is now a plain object instead of a zero-arg function
  • DiamondDSIntegrations.mrtOptions() now matches MUI Table's hover/selected colours, fixes header checkbox alignment, and avoids a crash from MRT's alpha() running on a var(...) colour
  • MuiTableContainer theme override gets a shared border/radius, with the last-row divider fix so it doesn't double up
  • Add fullWidth option to drop border/radius on full-bleed tables
  • Add MRT demo (selection, hover) to dev app;
  • Document usage in MDX guide
  • Add test coverage for both

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants