DiamondLightSource / DiamondLightSource/sci-react-ui
Change Proposal: Apply `DiamondDSIntegrations` MRT styling automatically to all tables, not just opted-in ones
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 8
- Forks
- 3
- Avg merge
- 3d 15h
- Merged PRs (30d)
- 5
Description
What is being proposed?
A wrapper or a component that pre-merges DiamondDSIntegrations.mrtTheme / mrtOptions() so every Material React Table instance in a consuming app picks up DiamondDS styling by default, instead of requiring each call site to use it individually.
Why is this needed?
#249 added DiamondDSIntegrations.mrtTheme / mrtOptions(), but they only apply if a developer remembers to use them into a given useMaterialReactTable call. If they don't, the table silently falls back to MRT's unstyled defaults, with no error or warning, so styling drifts table-by-table across an app instead of being guaranteed by the design system. This was flagged as a follow-up TODO directly in src/themes/DiamondDSIntegrations.ts.
What will change?
- Behaviour: DiamondDS table styling becomes the default for MRT tables rather than opt-in per instance.
- Component props or usage: likely a new hook/wrapper is introduced; existing manual
mrtOptions()/mrtThemespreading should keep working for anyone not yet migrated. - New component: possibly a thin wrapper around
useMaterialReactTableorMaterialReactTable.
Interface changes (if any)
// wraps useMaterialReactTable and merges DiamondDS defaults automatically
const table = useDiamondMaterialReactTable({
columns,
data,
// any options here still override the DiamondDS defaults
});
Breaking change?
- Yes
- No
Additive: existing code that manually uses mrtOptions()/mrtTheme continues to work; the new hook/wrapper is the recommended path going forward.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the TODO in src/themes/DiamondDSIntegrations.ts and inspect how useMaterialReactTable and MaterialReactTable are used. Compare the proposed hook or wrapper options, preserving manual mrtOptions()/mrtTheme usage and ensuring caller options override the DiamondDS defaults; done means MRT tables can consistently receive the styling through the new recommended path.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100