Skip to content

v2.1.2 - MDataTable + MCardGrid: loading scrim and scrollOffset for sticky topbars

Choose a tag to compare

@Banzamel Banzamel released this 05 Jul 21:07
· 17 commits to main since this release

Patch release. Two additions that make MDataTable and MCardGrid painless to wire to a backend list endpoint: a loading overlay for async fetches, and a scroll offset that respects a fixed/sticky app topbar. Purely additive — pull 2.1.2 and nothing changes until you opt in. No API breaks.

What changed

  • New loading prop on both components. Set it true during a fetch and a translucent scrim with a centered spinner covers the table/grid body — while the toolbar and pagination stay clickable. The previous rows/cards stay visible underneath, so paging, sorting or filtering against a server no longer flashes an empty state. loadingLabel sets the spinner's accessible label (default "Loading").
  • New scrollOffset prop on both components. When pagination scrolls the list back to its top after a page change, it now stops the given distance below the top (px or any CSS length), so a fixed/sticky app topbar no longer hides the first row. Pass your topbar height, e.g. scrollOffset={64}.
  • The manual-mode hooks are wired end to end: useMTable and useMCardGrid now return loading inside tableProps / gridProps. Spread them onto the component and the scrim appears on every fetch automatically — no extra prop to pass.

Action required for consumers

  • None. Purely additive, patch bump under SemVer. All three props (loading, loadingLabel, scrollOffset) are optional and default to the previous behaviour; existing tables and grids render exactly as before. Anyone on ^2.1.0 picks this up on the next npm install.

Where to look

  • Live docs + interactive playground: /docs/data-table and /docs/card-grid (props tables + manual-mode adapter examples)
  • Source: mineralui/src/components/data/MDataTable/, mineralui/src/components/cards/MCardGrid/, and the adapters mineralui/src/components/data/useMTable.ts + useMCardGrid.ts
  • Ships in both Basic (@banzamel/mineralui) and Pro (@banzamel/mineralui-pro) — MDataTable and MCardGrid are shared surface.