Overview

The Smart Data Table is a reusable Mendix Native widget designed to display structured data with enhanced UI and interactive features. It supports flexible column configuration, dynamic data rendering, sorting, filtering, and row selection mechanisms.

This widget improves usability by allowing users to interact with tabular data efficiently on mobile devices.

Key Features

• • Dynamic column configuration 
  • Column width customization 
  • Attribute & expression-based data binding 
  • Sorting functionality 
  • Filtering with search 
  • Filtering with multi-select & single-select (radio) options
  • Custom header styling 
  • Row click(Single selection)

1. Column Configuration

Description

Each column in the table is dynamically configurable using:

• • Attributes (direct entity fields) 
  • Expressions (calculated values) 

Implementation

• • If a column has an expression, it evaluates dynamically using Mendix expression logic. 
  • If not, it falls back to the attribute value. 

2. Column Width Types

Description

The widget supports flexible column widths using styling options.

Supported Types

• • Fixed Width (e.g., 100px) 
  • Auto Width (based on content) 
  • Flexible Width (percentage-based) 

Implementation Approach

• • Width styles are applied dynamically per column 
  • Uses style props or inline styling in React Native 

Benefits

• • Responsive layout 
  • Better readability on mobile screens 

3. Sorting Functionality

Description

Users can sort table data by clicking on column headers.

Features

• • Ascending order (A → Z / Low → High) 
  • Descending order (Z → A / High → Low) 
  • Toggle sorting on repeated clicks 

Benefits

• • Improves data analysis 
  • User-friendly navigation 

4. Filtering Functionality

Description

Allows users to filter data using a search input.

Features

• • Basic keyword search 
  • Multiselect and single select search based on the datatype
  • Filters across one or multiple columns 

Benefits

• • Quick data lookup 
  • Reduces scrolling effort 

5. Selection Options

Single Select

Description

Allows selecting only one row at a time.

Use Cases

• • Choosing one option 
  • Detail view selection 

6. Header Styling

Description

Customizable header appearance for better UI.

Options

• • Header background color 
  • Text color 

Benefits

• • Improves visual hierarchy 
  • Matches app theme 

7. Pagination Functionality

 Description

Pagination divides large datasets into smaller chunks (pages), improving performance and user experience by avoiding rendering all records at once.

Features

• • Page-based data navigation 
  • Configurable items per page 
  • Next / Previous navigation 
  • Page number indication 
  • Works seamlessly with: 
  • Sorting 
  • Filtering 
  • Selection 

Pagination Flow

• • Filter Data
  • Sort Data
  • Apply Pagination (final step) 

👉 Important: Pagination should always be applied after filtering and sorting.

UI Implementation

🔸 Pagination Controls

• • Previous Button
  • Next Button
  • Page Indicator

8. UI & UX Considerations

Mobile Optimization

• • Responsive layout 
  • Touch-friendly interactions 

Performance

• • Efficient rendering using: 
  • FlatList (React Native) 
  • Memoization where needed 

Accessibility

• • Clear selection indicators 
  • Readable text and spacing 

9. Reusability & Extensibility

Designed For

• • Reuse across multiple pages 
  • Configurable via widget properties 

Future Enhancements

• • Advanced filters (dropdown/date) 
  • Expandable rows 

10. Conclusion

The Smart Data Table Widget provides a robust, flexible, and user-friendly solution for displaying tabular data in Mendix Native applications. Its modular design allows easy customization and scalability for future enhancements.

Documentation

The Smart Data Table is a reusable Mendix Native widget designed to display structured data with enhanced UI and interactive features. It supports flexible column configuration, dynamic data rendering, sorting, filtering, and row selection mechanisms.

This widget improves usability by allowing users to interact with tabular data efficiently on mobile devices.

Key Features

• • Dynamic column configuration 
  • Column width customization 
  • Attribute & expression-based data binding 
  • Sorting functionality 
  • Filtering with search 
  • Filtering with multi-select & single-select (radio) options
  • Custom header styling 
  • Row click(Single selection)

1. Column Configuration

Description

Each column in the table is dynamically configurable using:

• • Attributes (direct entity fields) 
  • Expressions (calculated values) 

Implementation

• • If a column has an expression, it evaluates dynamically using Mendix expression logic. 
  • If not, it falls back to the attribute value. 

2. Column Width Types

Description

The widget supports flexible column widths using styling options.

Supported Types

• • Fixed Width (e.g., 100px) 
  • Auto Width (based on content) 
  • Flexible Width (percentage-based) 

Implementation Approach

• • Width styles are applied dynamically per column 
  • Uses style props or inline styling in React Native 

Benefits

• • Responsive layout 
  • Better readability on mobile screens 

3. Sorting Functionality

Description

Users can sort table data by clicking on column headers.

Features

• • Ascending order (A → Z / Low → High) 
  • Descending order (Z → A / High → Low) 
  • Toggle sorting on repeated clicks 

Benefits

• • Improves data analysis 
  • User-friendly navigation 

4. Filtering Functionality

Description

Allows users to filter data using a search input.

Features

• • Basic keyword search 
  • Multiselect and single select search based on the datatype
  • Filters across one or multiple columns 

Benefits

• • Quick data lookup 
  • Reduces scrolling effort 

5. Selection Options

Single Select

Description

Allows selecting only one row at a time.

Use Cases

• • Choosing one option 
  • Detail view selection 

6. Header Styling

Description

Customizable header appearance for better UI.

Options

• • Header background color 
  • Text color 

Benefits

• • Improves visual hierarchy 
  • Matches app theme 

7. Pagination Functionality

 Description

Pagination divides large datasets into smaller chunks (pages), improving performance and user experience by avoiding rendering all records at once.

Features

• • Page-based data navigation 
  • Configurable items per page 
  • Next / Previous navigation 
  • Page number indication 
  • Works seamlessly with: 
  • Sorting 
  • Filtering 
  • Selection 

Pagination Flow

1. 1. Filter Data
   2. Sort Data
   3. Apply Pagination (final step) 

👉 Important: Pagination should always be applied after filtering and sorting.

UI Implementation

🔸 Pagination Controls

• • Previous Button
  • Next Button
  • Page Indicator

8. UI & UX Considerations

Mobile Optimization

• • Responsive layout 
  • Touch-friendly interactions 

Performance

• • Efficient rendering using: 
  • FlatList (React Native) 
  • Memoization where needed 

Accessibility

• • Clear selection indicators 
  • Readable text and spacing 

9. Reusability & Extensibility

Designed For

• • Reuse across multiple pages 
  • Configurable via widget properties 

Future Enhancements

• • Advanced filters (dropdown/date) 
  • Expandable rows 

10. Conclusion

The Smart Data Table Widget provides a robust, flexible, and user-friendly solution for displaying tabular data in Mendix Native applications. Its modular design allows easy customization and scalability for future enhancements.