@genesislcap/grid-pro 14.275.2 → 14.275.3-alpha-74bf9e5.0

package/README.md

@@ -268,7 +268,7 @@ export class ConnectedGridServerSideExample extends GenesisElement {}
 
 This folder contains implementations of Genesis `datasource` components, responsible for fetching data for Genesis [Grid Pro](../../README.md) components.
 
-This document outlines the available features of our two “Grid Pro” datasources: `<grid-pro-client-side-datasource>` and `<grid-pro-server-side-datasource>`.
+This document outlines the available features of our two "Grid Pro" datasources: `<grid-pro-client-side-datasource>` and `<grid-pro-server-side-datasource>`.
 
 ## \<grid-pro-client-side-datasource\>
 
@@ -276,7 +276,7 @@ This document outlines the available features of our two “Grid Pro” datasour
 
 - **Sorting**: Order by any column, ASC or DESC.
 - **Filtering**:
-  - Filtering options are automatically generated, based on the resource’s metadata.
+  - Filtering options are automatically generated, based on the resource's metadata.
   - String Filters:
     - contains
     - not contains
@@ -308,11 +308,11 @@ This document outlines the available features of our two “Grid Pro” datasour
 ### Server-Side Features
 
 - **Sorting**: Order by any INDEX column/field, ASC or DESC.
-  - This is a server limitation. For each column that needs to have “sorting” the developer will need to have an INDEX for it. See more about indexes [here](https://learn.genesis.global/docs/database/data-types/index-entities/).
-  - By default, sorting is disabled on ALL columns… BUT if we detect valid ‘` indexes” from the metadata those column/fields will be setup to have sorting.
-  - If the user attempts to force `sortable` we’ll check if it’s really ok to do that + warn in the logs about it + try to mention other available indexes.. if any at all.
+  - This is a server limitation. For each column that needs to have "sorting" the developer will need to have an INDEX for it. See more about indexes [here](https://learn.genesis.global/docs/database/data-types/index-entities/).
+  - By default, sorting is disabled on ALL columns… BUT if we detect valid '` indexes" from the metadata those column/fields will be setup to have sorting.
+  - If the user attempts to force `sortable` we'll check if it's really ok to do that + warn in the logs about it + try to mention other available indexes.. if any at all.
 - **Filtering**:
-  - Filtering options are automatically generated, based on the resource’s metadata.
+  - Filtering options are automatically generated, based on the resource's metadata.
   - String filters
     - blank
     - contains
@@ -344,21 +344,21 @@ This document outlines the available features of our two “Grid Pro” datasour
 - Operations like sorting and filtering are pushed to the backend.
   - Filtering uses `CRITERIA_MATCH` param
   - Sorting uses `ORDERY_BY` param
-  - Both work the same way, once filtering/sorting is applied the datasource component “resets itself”, basically starting a new stream with the updated params.
+  - Both work the same way, once filtering/sorting is applied the datasource component "resets itself", basically starting a new stream with the updated params.
 - **LIMITATIONS**
-  - Sorting can only be applied to “index” fields/columns. Also mentioned [here](https://www.notion.so/Grid-Pro-Datasource-Inventory-d11ca7570ee94847bbcb3e7362025b0a?pvs=21). More details [here](https://genesisglobal.atlassian.net/jira/polaris/projects/GPR/ideas/view/4721227?selectedIssue=GPR-171&focusedCommentId=143757) and [here](https://genesis-global-talk.slack.com/archives/C0416MFG360/p1696456988606789).
-  - ROWS_COUNT doesn’t reflect the correct amount when a CRITERIA_MATCH (filtering) is applied. Example: X resource has 100 records. A criteria is specified so it returns only 50 records… the rows count sent from the server is still 100. Because of that we have to manually/locally calculate that.
+  - Sorting can only be applied to "index" fields/columns. Also mentioned [here](https://www.notion.so/Grid-Pro-Datasource-Inventory-d11ca7570ee94847bbcb3e7362025b0a?pvs=21). More details [here](https://genesisglobal.atlassian.net/jira/polaris/projects/GPR/ideas/view/4721227?selectedIssue=GPR-171&focusedCommentId=143757) and [here](https://genesis-global-talk.slack.com/archives/C0416MFG360/p1696456988606789).
+  - ROWS_COUNT doesn't reflect the correct amount when a CRITERIA_MATCH (filtering) is applied. Example: X resource has 100 records. A criteria is specified so it returns only 50 records… the rows count sent from the server is still 100. Because of that we have to manually/locally calculate that.
 - Suitable for large datasets where only a subset of data is loaded into the client based on user interactions.
 
 ---
 
 ## Supported Row Models
 
-We support all of the AG’s Row Models.  More on [JavaScript Grid: Row Models | AG Grid (ag-grid.com)](https://www.ag-grid.com/javascript-data-grid/row-models/).
+We support all of the AG's Row Models.  More on [JavaScript Grid: Row Models | AG Grid (ag-grid.com)](https://www.ag-grid.com/javascript-data-grid/row-models/).
 
-In the table below you can find a complete “feature list” of all the possibilities of client/server-side row models (and others too.. that can be manually enabled/integrated but we don’t expose any components for those yet).
+In the table below you can find a complete "feature list" of all the possibilities of client/server-side row models (and others too.. that can be manually enabled/integrated but we don't expose any components for those yet).
 
-It’s important to note that any client app can implement the other Row Models to their own needs. Our Grid Pro component is not tied to the datasource, it’s the opossite.. so datasources can be as specialized/customized as possible.
+It's important to note that any client app can implement the other Row Models to their own needs. Our Grid Pro component is not tied to the datasource, it's the opossite.. so datasources can be as specialized/customized as possible.
 
 `Infinite` and `Viewport` row models are also supported but not offered "out of the box" (devs will have to create their own component).
 
@@ -406,7 +406,7 @@ It’s important to note that any client app can implement the other Row Models
 
 ### DOM Virtualisation
 
-DOM Virtualisation is a powerful technique that enhances the performance of grid components by only rendering the rows and columns that are currently visible in the viewport. This approach significantly reduces the memory footprint and improves the rendering speed, enabling all of our “grid components” to handle larger datasets more efficiently.
+DOM Virtualisation is a powerful technique that enhances the performance of grid components by only rendering the rows and columns that are currently visible in the viewport. This approach significantly reduces the memory footprint and improves the rendering speed, enabling all of our "grid components" to handle larger datasets more efficiently.
 
 - **How It Works**: Instead of rendering all rows and columns, the grid dynamically generates the DOM elements for only the visible part of the dataset. As the user scrolls, rows and columns are created or destroyed on the fly, ensuring a smooth scrolling experience.
 - **Benefits**:
@@ -428,12 +428,180 @@ Pagination is another effective technique to improve performance in AG Grid by b
 
 ### Combined Approach
 
-By leveraging both DOM Virtualisation and Pagination, our “grid components” can efficiently manage and display larger datasets on the client-side. Here’s how these techniques work together:
+By leveraging both DOM Virtualisation and Pagination, our "grid components" can efficiently manage and display larger datasets on the client-side. Here's how these techniques work together:
 
 - **Initial Load**: Only the data for the first page is loaded, minimizing the initial load time.
 - **Scrolling**: As users scroll, DOM Virtualisation ensures only the visible rows and columns are rendered, maintaining performance.
 - **Page Navigation**: Users can navigate through pages to access the full dataset without overwhelming the client.
 
+## Status Bar
+
+The Grid Pro component supports a status bar at the bottom of the grid. The status bar can be configured with various panels to display information like row counts, custom content, and action buttons.
+
+### Basic Usage
+
+The status bar can be enabled using the datasource attributes and configured through the `status-bar-config` attribute:
+
+```html
+<rapid-grid-pro>
+  <grid-pro-client-side-datasource
+    resource-name="ALL_TRADES"
+    with-status-bar="true"
+    status-bar-config='{"rows": true, "reload": true, "loadMore": true}'
+  ></grid-pro-client-side-datasource>
+</rapid-grid-pro>
+```
+
+### Status Bar Configuration
+
+The status bar can be configured using the `GridProStatusBarConfig` interface:
+
+```typescript
+interface GridProStatusBarConfig {
+  rows?: boolean;      // Enable row count component (default: true)
+  maxRows?: boolean;   // Enable max rows label-value component (default: false)
+  loadMore?: boolean;  // Enable load more button component (default: false)
+  reload?: boolean;    // Enable reload button component (default: true)
+}
+```
+
+### Built-in AG Grid Status Bar Panels
+
+Grid Pro supports all standard AG Grid status bar panels:
+
+- `agTotalRowCountComponent`: Displays the total row count
+- `agTotalAndFilteredRowCountComponent`: Displays the total and filtered row count
+- `agFilteredRowCountComponent`: Displays the filtered row count
+- `agSelectedRowCountComponent`: Displays the selected row count
+- `agAggregationComponent`: Displays aggregations for the selected range
+
+### Custom Status Bar Components
+
+Grid Pro provides several custom status bar components accessible through the `GridProStatusBarTypes` enum:
+
+#### LabelValueStatusBarComponent
+
+A flexible component that displays a label and value pair:
+
+```typescript
+import { GridProStatusBarTypes } from '@genesislcap/grid-pro';
+
+// In your grid options:
+statusBar: {
+  statusPanels: [
+    { 
+      statusPanel: GridProStatusBarTypes.labelValue,
+      statusPanelParams: { 
+        label: 'Max Rows', 
+        value: 250,
+        hide: false 
+      },
+      align: 'left',
+    },
+  ],
+},
+```
+
+#### LoadMoreStatusBarComponent
+
+A button component that allows users to load additional rows:
+
+```typescript
+import { GridProStatusBarTypes } from '@genesislcap/grid-pro';
+
+// In your grid options:
+statusBar: {
+  statusPanels: [
+    { 
+      statusPanel: GridProStatusBarTypes.loadMore,
+      align: 'right',
+    },
+  ],
+},
+```
+
+#### ReloadStatusBarComponent
+
+A refresh button component that allows users to reload the grid data:
+
+```typescript
+import { GridProStatusBarTypes } from '@genesislcap/grid-pro';
+
+// In your grid options:
+statusBar: {
+  statusPanels: [
+    { 
+      statusPanel: GridProStatusBarTypes.reload,
+      statusPanelParams: {
+        onReload: () => console.log('Reloading data...')
+      },
+      align: 'right',
+    },
+  ],
+},
+```
+
+#### PaginationStatusBarComponent
+
+A pagination control component that provides navigation buttons and page information:
+
+```typescript
+import { GridProStatusBarTypes } from '@genesislcap/grid-pro';
+
+// In your grid options:
+statusBar: {
+  statusPanels: [
+    { statusPanel: 'agTotalAndFilteredRowCountComponent', align: 'left' },
+    { statusPanel: GridProStatusBarTypes.pagination, align: 'right' },
+  ],
+},
+```
+
+### Using Status Bar with Pagination
+
+When pagination is enabled, Grid Pro automatically configures the status bar with the pagination component and suppresses the default pagination panel:
+
+```html
+<rapid-grid-pro>
+  <grid-pro-client-side-datasource
+    resource-name="ALL_TRADES"
+    pagination="true"
+    with-status-bar="true"
+    suppress-pagination-panel="true"
+  ></grid-pro-client-side-datasource>
+</rapid-grid-pro>
+```
+
+The default status bar configuration with pagination includes:
+- `agTotalAndFilteredRowCountComponent` on the left
+- `PaginationStatusBarComponent` on the right
+
+### Custom Status Bar Configuration
+
+You can also manually configure the status bar using direct grid options:
+
+```typescript
+import { GridProStatusBarTypes } from '@genesislcap/grid-pro';
+
+const gridOptions = {
+  statusBar: {
+    statusPanels: [
+      { statusPanel: 'agTotalAndFilteredRowCountComponent', align: 'left' },
+      { 
+        statusPanel: GridProStatusBarTypes.labelValue,
+        statusPanelParams: { label: 'Active Records', value: 1250 },
+        align: 'center'
+      },
+      { statusPanel: GridProStatusBarTypes.reload, align: 'right' },
+    ],
+  },
+};
+```
+
+### Enterprise License Requirement
+
+**Note**: Status bar functionality requires the AG Grid Enterprise module to be available. Status bar components will only be displayed if the Enterprise module is properly licensed and configured.
+
 ## License
 
 Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.