Paging Grid
The Paging Data Grid component is used to represent data in tabular form with pagination. Unlike a standard Data Grid, this component allows users to view data in manageable pages and apply filters, comparisons, and search operations directly within the grid.
This makes it highly effective when working with large datasets where scrolling becomes impractical.
Best Situations to Use Paging Data Grid
Use a Paging Data Grid when you need to:
Display numerical or text-based data across multiple pages.
Show alerts within a tabular structure.
Allow end-users to filter, search, and compare data directly in the grid.
Improve performance when rendering large datasets.
Provide a paginated navigation experience for users.
Variations
The Paging Data Grid supports multiple variations:
Add-up Filters: Filter data by selecting one or more columns.
Compare Operation: Compare column values using comparison operators.
Search: Search for specific values across grid data.
Properties of the Paging Data Grid
General
Component Name: Unique identifier for the component.
Left / Top: Defines horizontal and vertical placement on the canvas.
Height / Width: Sets component dimensions.
Initial Visibility: Determines if the grid is visible when the page loads.
Max Button: Expand the grid to full screen.
Fit Columns: Auto-fit column widths to content.
💡 Note: If Fit Columns is enabled, horizontal scrolling is disabled. Disable this option to enable scrolling.
Background
Gradient / Gradient Rotation / Opacity: Customize background effects.
Border / Border Color / Border Radius: Configure border style and rounded corners.
Shadow / Shadow Color / Shadow Transparency: Apply depth effects.
Title
Show Title, Title Box, Title Box Color: Manage title visibility and styling.
Title Bar Height: Adjust height for design fit.
Description: Add context or supporting text.
Font (Color, Size, Style, Weight, Family): Customize typography.
Align / Text Decoration: Control title alignment and formatting.
Show Dataset Description: Optionally display dataset details in the title.
Subtitle
Show Sub Title: Toggle subtitle visibility.
Description: Add descriptive text below the subtitle.
Font (Color, Size, Style, Weight, Family): Format subtitle.
Align / Text Decoration: Configure alignment and emphasis.
Header Style
Header Text Color / Background Color: Style the header section.
Font (Size, Style, Weight, Family): Customize typography for headers.
Use Field Color: Apply field-specific colors to header background.
Text Decoration: Add underline or other styling.
Row Style
Font (Color, Size, Style, Weight, Family): Customize row text.
Text Decoration: Apply underline, overline, or strikethrough.
Text Wrap: Enable wrapping for long values.
Row Height: Adjust row spacing.
Styles
Roll Over Color: Highlight rows on hover.
Selection Color: Indicate selected rows.
Horizontal Grid Lines / Vertical Grid Lines: Enable or disable grid lines.
Grid Colors: Customize horizontal and vertical grid line colors.
Pagination Bar Color: Match pagination with theme.
Pagination Font Color: Ensure pagination labels are readable.
Row Count: Set number of rows displayed per page.
Export Options
Enable Context Menu: Right-click to access export menu.
Supported Formats: Excel (.xlsx), CSV (.csv), JPEG (.jpg), PNG (.png), PPT (.pptx), PDF (.pdf).
Show Print: Enable printing of grid data.
Export File Name / Heading / Sub Heading: Add metadata to exported files.
Global Export Type: Define default (Screenshot or Tabular).
Advanced Usage
Fit Columns Behavior
If enabled → horizontal scroll is disabled.
If disabled → horizontal scroll is enabled.
Alerts in Paging Grid Refer to the Alerts in Grids configuration page for inserting alerts into Paging Data Grids.
Dataset Configuration Ensure the Column Type is set to Numeric in the Dataset Properties tab if you want the field to respond to Indicator tab settings.