Merge pull request #1818 from lowdefy/aggrid-getrowid

Add getRowId to AgGrid and AgGridInput to preserve selection.
2025-04-12 15:40:30 +08:00 · 2024-05-24 19:43:08 +00:00 · 2024-05-24 19:43:08 +00:00 · a2bf785c98
commit a2bf785c98
parent e7ed97439a 51e45333b9
13 changed files with 140 additions and 15 deletions
--- a/packages/docs/blocks/display/AgGrid.yaml
+++ b/packages/docs/blocks/display/AgGrid.yaml
@ -109,7 +109,6 @@ _ref:
              - headerName: Viewer Reviews
                field: viewerReviews
                width: 160
-                type: numericColumn
      - title: 'Format dates with cellRenderer'
        block:
          id: my_table
@ -138,7 +137,6 @@ _ref:
              - headerName: Date
                field: date
                width: 160
-                type: dateColumn
                cellRenderer:
                  _function:
                    __moment.format:
@ -171,7 +169,6 @@ _ref:
              - headerName: Total
                field: total
                width: 160
-                type: numericColumn
                valueFormatter:
                  _function:
                    __intl.numberFormat:
@ -206,7 +203,6 @@ _ref:
              - headerName: Viewer Reviews
                field: viewerReviews
                width: 160
-                type: numericColumn
          events:
            onRowClick:
              - id: set_selected
@ -254,7 +250,6 @@ _ref:
              - headerName: Viewer Reviews
                field: viewerReviews
                width: 160
-                type: numericColumn
          events:
            onCellClick:
              - id: set_selected
@ -276,6 +271,76 @@ _ref:
                  selection:
                    _yaml.stringify:
                      - _state: selected_cell
+      - title: 'Using rowId to preserve selection'
+        description: |
+          This example shows a table switching between two sets of data. Some rows are common between the data sets and the data rows have a unique identifier field `uniqueId` which we can use as the `rowId` field to ensure selection is preserved when switching the data sets. If no `rowId` is set and the row data does not contain an `id` or `_id` field, and the row data JSON stringified is used as the row id. This still works but may slightly impact performance.
+        block:
+          id: my_table
+          type: AgGridAlpine
+          properties:
+            height: 200
+            rowId: uniqueId
+            rowData:
+              _state: table_data
+            columnDefs:
+              - headerName: Unique ID
+                field: uniqueId
+                checkboxSelection: true
+              - headerName: Title
+                field: title
+              - headerName: Year
+                field: year
+        extra:
+          id: table_data_box
+          type: Box
+          events:
+            onMount:
+              - id: init_value
+                type: SetState
+                params:
+                  table_data:
+                    - title: One
+                      year: 2010
+                      uniqueId: 2010-1
+                    - title: Two
+                      year: 2011
+                      uniqueId: 2011-1
+          blocks:
+            - id: table_data
+              type: ButtonSelector
+              properties:
+                label:
+                  disabled: true
+                options:
+                  - label: Data Set 1
+                    value:
+                      - title: One
+                        year: 2010
+                        uniqueId: 2010-1
+                      - title: Two
+                        year: 2011
+                        uniqueId: 2011-1
+                  - label: Data Set 2
+                    value:
+                      - title: Three
+                        year: 2011
+                        uniqueId: 2011-2
+                      - title: One
+                        year: 2010
+                        uniqueId: 2010-1
+            - id: table_data_display
+              type: MarkdownWithCode
+              properties:
+                content:
+                  _nunjucks:
+                    template: |
+                      ```yaml
+                        {{ table_data | safe | indent(2) }}
+                      ```
+                    on:
+                      table_data:
+                        _yaml.stringify:
+                          - _state: table_data
      - title: 'Server-side filter and sort'
        description: |
          This example shows how you can filter your table data server-side by making use of AgGrid's built in filter and sort functionality and calling the `onFilterChanged` and `onSortChanged` events. In this example we use dummy data, but you would pass in `_request: table_request` to `properties.rowData`.
@ -311,7 +376,6 @@ _ref:
              - headerName: Viewer Reviews
                field: viewerReviews
                width: 160
-                type: numericColumn
          events:
            onSortChanged:
              - id: set_table_sort
@ -342,13 +406,6 @@ _ref:
          properties:
            content:
              _nunjucks:
-                on:
-                  sort:
-                    _yaml.stringify:
-                      - _state: table.sort
-                  filter:
-                    _yaml.stringify:
-                      - _state: table.filter
                template: |
                  onSortChanged response (only `sort`, not `rows`):
                  ```yaml
@ -425,3 +482,11 @@ _ref:
                                          then: 1
                                          else: -1
                  ```
+
+                on:
+                  sort:
+                    _yaml.stringify:
+                      - _state: table.sort
+                  filter:
+                    _yaml.stringify:
+                      - _state: table.filter
--- a/packages/plugins/blocks/blocks-aggrid/src/AgGrid.js
+++ b/packages/plugins/blocks/blocks-aggrid/src/AgGrid.js
@ -35,6 +35,15 @@ const AgGrid = ({ properties, methods, loading, events }) => {

  const memoDefaultColDef = useMemo(() => defaultColDef);

+  const getRowId = useCallback(
+    (params) =>
+      params.data[properties.rowId] ??
+      params.data.id ??
+      params.data._id ??
+      JSON.stringify(params.data),
+    []
+  );
+
  const onRowClick = useCallback((event) => {
    if (events.onRowClick) {
      methods.triggerEvent({
@ -92,7 +101,7 @@ const AgGrid = ({ properties, methods, loading, events }) => {
        name: 'onFilterChanged',
        event: {
          rows: event.api.rowModel.rowsToDisplay.map((row) => row.data),
-          filter: this.gridApi.getFilterModel(),
+          filter: gridRef.current.api.getFilterModel(),
        },
      });
    }
@ -159,6 +168,7 @@ const AgGrid = ({ properties, methods, loading, events }) => {
      modules={[ClientSideRowModelModule, CsvExportModule]}
      columnDefs={processColDefs(columnDefs, methods)}
      ref={gridRef}
+      getRowId={getRowId}
    />
  );
 };
--- a/packages/plugins/blocks/blocks-aggrid/src/AgGridInput.js
+++ b/packages/plugins/blocks/blocks-aggrid/src/AgGridInput.js
@ -29,6 +29,15 @@ const AgGridInput = ({ properties, methods, loading, events, value }) => {

  const memoDefaultColDef = useMemo(() => defaultColDef);

+  const getRowId = useCallback(
+    (params) =>
+      params.data[properties.rowId] ??
+      params.data.id ??
+      params.data._id ??
+      JSON.stringify(params.data),
+    []
+  );
+
  const onRowClick = useCallback((event) => {
    if (events.onRowClick) {
      methods.triggerEvent({
@ -86,7 +95,7 @@ const AgGridInput = ({ properties, methods, loading, events, value }) => {
        name: 'onFilterChanged',
        event: {
          rows: event.api.rowModel.rowsToDisplay.map((row) => row.data),
-          filter: this.gridApi.getFilterModel(),
+          filter: gridRef.current.api.getFilterModel(),
        },
      });
    }
@ -208,6 +217,7 @@ const AgGridInput = ({ properties, methods, loading, events, value }) => {
      modules={[ClientSideRowModelModule, CsvExportModule]}
      columnDefs={processColDefs(columnDefs, methods)}
      ref={gridRef}
+      getRowId={getRowId}
    />
  );
 };
--- a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpine/schema.json
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpine/schema.json
@ -14,6 +14,10 @@
          "type": "array",
          "description": "The list of data to display on the table."
        },
+        "rowId": {
+          "type": "string",
+          "description": "The data field to use in `getRowId` which results in Row Selection being maintained across Row Data changes (assuming the Row exists in both sets). See Ag Grid docs for more details (https://www.ag-grid.com/react-data-grid/data-update-row-data/)."
+        },
        "defaultColDef": {
          "type": "object",
          "description": "Column properties which get applied to all columns. See all (https://www.ag-grid.com/javascript-data-grid/column-properties/)."
--- a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpineDark/schema.json
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridAlpineDark/schema.json
@ -14,6 +14,10 @@
          "type": "array",
          "description": "The list of data to display on the table."
        },
+        "rowId": {
+          "type": "string",
+          "description": "The data field to use in `getRowId` which results in Row Selection being maintained across Row Data changes (assuming the Row exists in both sets). See Ag Grid docs for more details (https://www.ag-grid.com/react-data-grid/data-update-row-data/)."
+        },
        "defaultColDef": {
          "type": "object",
          "description": "Column properties which get applied to all columns. See all (https://www.ag-grid.com/javascript-data-grid/column-properties/)."
--- a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalham/schema.json
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalham/schema.json
@ -14,6 +14,10 @@
          "type": "array",
          "description": "The list of data to display on the table."
        },
+        "rowId": {
+          "type": "string",
+          "description": "The data field to use in `getRowId` which results in Row Selection being maintained across Row Data changes (assuming the Row exists in both sets). See Ag Grid docs for more details (https://www.ag-grid.com/react-data-grid/data-update-row-data/)."
+        },
        "defaultColDef": {
          "type": "object",
          "description": "Column properties which get applied to all columns. See all (https://www.ag-grid.com/javascript-data-grid/column-properties/)."
--- a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalhamDark/schema.json
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridBalhamDark/schema.json
@ -14,6 +14,10 @@
          "type": "array",
          "description": "The list of data to display on the table."
        },
+        "rowId": {
+          "type": "string",
+          "description": "The data field to use in `getRowId` which results in Row Selection being maintained across Row Data changes (assuming the Row exists in both sets). See Ag Grid docs for more details (https://www.ag-grid.com/react-data-grid/data-update-row-data/)."
+        },
        "defaultColDef": {
          "type": "object",
          "description": "Column properties which get applied to all columns. See all (https://www.ag-grid.com/javascript-data-grid/column-properties/)."
--- a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpine/schema.json
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpine/schema.json
@ -14,6 +14,10 @@
          "type": "array",
          "description": "The list of data to display on the table."
        },
+        "rowId": {
+          "type": "string",
+          "description": "The data field to use in `getRowId` which results in Row Selection being maintained across Row Data changes (assuming the Row exists in both sets). See Ag Grid docs for more details (https://www.ag-grid.com/react-data-grid/data-update-row-data/)."
+        },
        "defaultColDef": {
          "type": "object",
          "description": "Column properties which get applied to all columns. See all (https://www.ag-grid.com/javascript-data-grid/column-properties/)."
--- a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpineDark/schema.json
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputAlpineDark/schema.json
@ -14,6 +14,10 @@
          "type": "array",
          "description": "The list of data to display on the table."
        },
+        "rowId": {
+          "type": "string",
+          "description": "The data field to use in `getRowId` which results in Row Selection being maintained across Row Data changes (assuming the Row exists in both sets). See Ag Grid docs for more details (https://www.ag-grid.com/react-data-grid/data-update-row-data/)."
+        },
        "defaultColDef": {
          "type": "object",
          "description": "Column properties which get applied to all columns. See all (https://www.ag-grid.com/javascript-data-grid/column-properties/)."
--- a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalham/schema.json
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalham/schema.json
@ -14,6 +14,10 @@
          "type": "array",
          "description": "The list of data to display on the table."
        },
+        "rowId": {
+          "type": "string",
+          "description": "The data field to use in `getRowId` which results in Row Selection being maintained across Row Data changes (assuming the Row exists in both sets). See Ag Grid docs for more details (https://www.ag-grid.com/react-data-grid/data-update-row-data/)."
+        },
        "defaultColDef": {
          "type": "object",
          "description": "Column properties which get applied to all columns. See all (https://www.ag-grid.com/javascript-data-grid/column-properties/)."
--- a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalhamDark/schema.json
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputBalhamDark/schema.json
@ -14,6 +14,10 @@
          "type": "array",
          "description": "The list of data to display on the table."
        },
+        "rowId": {
+          "type": "string",
+          "description": "The data field to use in `getRowId` which results in Row Selection being maintained across Row Data changes (assuming the Row exists in both sets). See Ag Grid docs for more details (https://www.ag-grid.com/react-data-grid/data-update-row-data/)."
+        },
        "defaultColDef": {
          "type": "object",
          "description": "Column properties which get applied to all columns. See all (https://www.ag-grid.com/javascript-data-grid/column-properties/)."
--- a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputMaterial/schema.json
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridInputMaterial/schema.json
@ -14,6 +14,10 @@
          "type": "array",
          "description": "The list of data to display on the table."
        },
+        "rowId": {
+          "type": "string",
+          "description": "The data field to use in `getRowId` which results in Row Selection being maintained across Row Data changes (assuming the Row exists in both sets). See Ag Grid docs for more details (https://www.ag-grid.com/react-data-grid/data-update-row-data/)."
+        },
        "defaultColDef": {
          "type": "object",
          "description": "Column properties which get applied to all columns. See all (https://www.ag-grid.com/javascript-data-grid/column-properties/)."
--- a/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridMaterial/schema.json
+++ b/packages/plugins/blocks/blocks-aggrid/src/blocks/AgGridMaterial/schema.json
@ -14,6 +14,10 @@
          "type": "array",
          "description": "The list of data to display on the table."
        },
+        "rowId": {
+          "type": "string",
+          "description": "The data field to use in `getRowId` which results in Row Selection being maintained across Row Data changes (assuming the Row exists in both sets). See Ag Grid docs for more details (https://www.ag-grid.com/react-data-grid/data-update-row-data/)."
+        },
        "defaultColDef": {
          "type": "object",
          "description": "Column properties which get applied to all columns. See all (https://www.ag-grid.com/javascript-data-grid/column-properties/)."