Custom Datagrid2 Stlying

Content Type: Module
Categories: Utility,User Interface,Data

Overview

Objective

This module provides a custom design for Mendix Data Grid 2 with modern styling, sticky headers, and theme-based customization.

  • Sticky Headers: Column headers remain visible while scrolling.

  • Row Hover Effect for improved readability.

  • Scrollbar Styling with a slim, modern gradient look.

  • Light & Dark Theme Support out of the box.

Useful for scenarios where Mendix apps need polished, user-friendly data tables without extensive custom CSS.

Dependencies

  • Studio Pro Version: 10.12.10 (or above recommended)

Configurations

  1. Import the Custom Data Grid 2 Styling module into your Mendix project.

  2. Add the CSS class customDatagrid2Β to your Data Grid 2 widget.

  3. Run the app your Data Grid 2 will display with the new design.

  4. (Optional) Customize colors via CSS variables in your theme:

Documentation

πŸ“Š Custom Data Grid 2 Styling

A custom design module for Mendix Data Grid 2 that provides modern styling, sticky headers, hover effects, and theme-based customization.
This module is designed to give your Data Grid 2 a professional look with minimal setup.

✨ Features

  • 🎨 Custom Theme Colors – Violet header background with configurable CSS variables.
  • πŸ“Œ Sticky Column Headers – Always visible when scrolling.
  • πŸ” Enhanced Filter Styling – Clean input fields with consistent borders.
  • πŸ–± Row Hover Effect – Improves readability by highlighting hovered rows.
  • πŸ–Ό Scrollbar Styling – Slim gradient-styled scrollbars.
  • πŸŒ™ Light & Dark Mode Support – Auto-adapts colors based on theme.

πŸ“¦ Installation

  1. Import the module into your Mendix project.
  2. Add the class customDatagrid2 to your Data Grid 2 widget.
  3. Run the app and enjoy the new design!

Releases