@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/blocks/Table/tests/server-mongodb.e2e.yaml

@@ -0,0 +1,169 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# Server mode against a real MongoDB through MongoDBTableQuery. The spec runs only when
+# LOWDEFY_SECRET_TABLE_MONGODB_URI is set (see server-mongodb.e2e.spec.js); the "Seed" button
+# replaces the collection with 10k people, and the tables show them after a reload.
+id: table-server-mongodb
+type: Box
+
+requests:
+  - id: seed_clear
+    type: MongoDBDeleteMany
+    connectionId: table_people
+    properties:
+      filter: {}
+  - id: seed_insert
+    type: MongoDBInsertMany
+    connectionId: table_people
+    payload:
+      docs:
+        _state: seed_docs
+    properties:
+      docs:
+        _payload: docs
+  - id: people_page
+    type: MongoDBTableQuery
+    connectionId: table_people
+    payload:
+      view:
+        _event: view
+      startRow:
+        _event: startRow
+      endRow:
+        _event: endRow
+      groupPath:
+        _event: groupPath
+    properties:
+      fields:
+        name:
+          type: text
+          search: true
+        stage:
+          type: tag
+          groupable: true
+        amount:
+          type: number
+      view:
+        _payload: view
+      startRow:
+        _payload: startRow
+      endRow:
+        _payload: endRow
+      groupPath:
+        _payload: groupPath
+
+blocks:
+  - id: mongo_seed
+    type: Button
+    properties:
+      title: Seed
+    events:
+      onClick:
+        - id: seed_docs_set
+          type: SetState
+          params:
+            seed_docs:
+              _js: |
+                const stages = ['lead', 'qualified', 'won', 'lost'];
+                const docs = new Array(10000);
+                for (let i = 0; i < docs.length; i++) {
+                  docs[i] = {
+                    _id: i,
+                    name: 'Person ' + String(i).padStart(5, '0'),
+                    stage: stages[i % 4],
+                    amount: (i * 7919) % 1000,
+                  };
+                }
+                return docs;
+        - id: seed_clear_call
+          type: Request
+          params: seed_clear
+        - id: seed_insert_call
+          type: Request
+          params: seed_insert
+        - id: seed_done
+          type: SetState
+          params:
+            seeded: true
+
+  - id: mongo_seeded
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: seeded
+              - true
+          then: seeded
+          else: not seeded
+
+  - id: table_mongo
+    type: Table
+    properties:
+      height: 400
+      data:
+        mode: server
+        request: people_page
+        blockSize: 200
+      columns:
+        - key: _id
+          title: Id
+          type: number
+          width: 100
+        - key: name
+        - key: stage
+          type: tag
+        - key: amount
+          type: number
+
+  - id: table_mongo_filter
+    type: Button
+    properties:
+      title: Filter won
+    events:
+      onClick:
+        - id: table_mongo_filter_set
+          type: SetState
+          params:
+            table_mongo.view.filter:
+              key: stage
+              op: eq
+              value: won
+
+  - id: table_mongo_grouped
+    type: Table
+    properties:
+      height: 400
+      data:
+        mode: server
+        request: people_page
+        blockSize: 100
+      defaultView:
+        group:
+          - key: stage
+        aggregates:
+          amount: sum
+      columns:
+        - key: _id
+          title: Id
+          type: number
+          width: 100
+        - key: name
+        - key: stage
+          type: tag
+          groupable: true
+        - key: amount
+          type: number

package/dist/blocks/Table/tests/server.e2e.yaml

@@ -0,0 +1,267 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# Server mode. The requests use the test connection; the spec answers them in the browser
+# (page.route) from a synthetic 100k row dataset, so it can count requests, delay responses and
+# answer them out of order.
+id: table-server
+type: Box
+
+requests:
+  - id: table_rows
+    type: TestLog
+    connectionId: table_test
+    payload:
+      startRow:
+        _event: startRow
+      endRow:
+        _event: endRow
+      view:
+        _event: view
+      groupPath:
+        _event: groupPath
+      selected:
+        _event: selected
+
+blocks:
+  # ============================================
+  # PAGING
+  # ============================================
+
+  - id: table_server
+    type: Table
+    properties:
+      height: 400
+      rowSelection:
+        type: checkbox
+      data:
+        mode: server
+        request: table_rows
+        blockSize: 100
+      columns:
+        - key: id
+          type: number
+          width: 100
+        - key: name
+        - key: stage
+        - key: amount
+          type: number
+    events:
+      onSelectionChange:
+        - id: set_server_selection
+          type: SetState
+          params:
+            server_selection:
+              _event: selected
+            server_selection_rows:
+              _array.length:
+                _event: rows
+      onExport:
+        - id: set_export_view
+          type: SetState
+          params:
+            export_view:
+              _event: view
+      onRowClick:
+        - id: set_server_click
+          type: SetState
+          params:
+            server_click:
+              rowKey:
+                _event: rowKey
+              index:
+                _event: index
+
+  - id: server_click_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'click='
+          - _json.stringify:
+              - _state: server_click
+              - space: 0
+
+  - id: server_selection_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'selected='
+          - _json.stringify:
+              - _state: table_server.selected
+              - space: 0
+          - ' event='
+          - _json.stringify:
+              - _if_none:
+                  - _state: server_selection
+                  - none
+              - space: 0
+          - ' rows='
+          - _if_none:
+              - _state: server_selection_rows
+              - none
+
+  - id: server_export_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'export='
+          - _json.stringify:
+              - _if_none:
+                  - _state: export_view.sort
+                  - none
+              - space: 0
+
+  - id: server_export
+    type: Button
+    properties:
+      title: Export
+    events:
+      onClick:
+        - id: server_export_call
+          type: CallMethod
+          params:
+            blockId: table_server
+            method: exportCsv
+
+  - id: server_refresh
+    type: Button
+    properties:
+      title: Refresh
+    events:
+      onClick:
+        - id: server_refresh_call
+          type: CallMethod
+          params:
+            blockId: table_server
+            method: refresh
+
+  - id: server_filter
+    type: Button
+    properties:
+      title: Filter
+    events:
+      onClick:
+        - id: server_filter_set
+          type: SetState
+          params:
+            table_server.view.filter:
+              key: stage
+              op: eq
+              value: won
+
+  - id: server_update
+    type: Button
+    properties:
+      title: Update
+    events:
+      onClick:
+        - id: server_update_call
+          type: CallMethod
+          params:
+            blockId: table_server
+            method: applyTransaction
+            args:
+              - update:
+                  - id: 1
+                    name: Updated one
+
+  # ============================================
+  # GROUPING
+  # ============================================
+
+  - id: table_server_grouped
+    type: Table
+    properties:
+      height: 400
+      data:
+        mode: server
+        request: table_rows
+        blockSize: 50
+      defaultView:
+        group:
+          - key: stage
+        aggregates:
+          amount: sum
+      columns:
+        - key: id
+          type: number
+          width: 100
+        - key: name
+        - key: stage
+          groupable: true
+        - key: amount
+          type: number
+
+  # ============================================
+  # CLIENT TRANSACTIONS
+  # ============================================
+
+  - id: table_transactions
+    type: Table
+    properties:
+      columns:
+        - key: id
+          type: number
+        - key: name
+      data:
+        - id: 1
+          name: One
+        - id: 2
+          name: Two
+        - id: 3
+          name: Three
+    events:
+      onRowClick:
+        - id: set_transactions_click
+          type: SetState
+          params:
+            transactions_click:
+              rowKey:
+                _event: rowKey
+              index:
+                _event: index
+
+  - id: transactions_click_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'click='
+          - _json.stringify:
+              - _state: transactions_click
+              - space: 0
+
+  - id: transactions_apply
+    type: Button
+    properties:
+      title: Apply transaction
+    events:
+      onClick:
+        - id: transactions_apply_call
+          type: CallMethod
+          params:
+            blockId: table_transactions
+            method: applyTransaction
+            args:
+              - update:
+                  - id: 2
+                    name: Two updated
+                remove:
+                  - 3
+                add:
+                  - id: 4
+                    name: Four

package/dist/blocks/Table/tests/toolbar.e2e.yaml

@@ -0,0 +1,140 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+id: toolbar
+type: Box
+
+blocks:
+  # ============================================
+  # EVERY TOOLBAR ITEM
+  # ============================================
+
+  - id: tb
+    type: Table
+    properties:
+      toolbar:
+        search: true
+        quickFilters: [team, city]
+        filter: true
+        sort: true
+        group: true
+        columns: true
+        density: true
+        export: true
+      defaultView:
+        filter:
+          and:
+            - key: age
+              op: gte
+              value: 20
+      columns:
+        - key: name
+          title: Name
+        - key: team
+          options: [Blue, Red]
+          groupable: true
+        - key: age
+          type: number
+          width: 100
+        - key: city
+      data:
+        _ref: ../../src/blocks/Table/tests/people.yaml
+    slots:
+      toolbarStart:
+        blocks:
+          - id: tb_new
+            type: Button
+            properties:
+              title: New person
+      toolbarEnd:
+        blocks:
+          - id: tb_end
+            type: Span
+            properties:
+              content: end slot
+    events:
+      onChange:
+        - id: set_cause
+          type: SetState
+          params:
+            tb_cause:
+              _event: cause
+
+  - id: tb_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'view='
+          - _json.stringify:
+              - _state: tb.view
+              - space: 0
+          - ' cause='
+          - _if_none:
+              - _state: tb_cause
+              - none
+
+  # ============================================
+  # toolbar: true
+  # ============================================
+
+  - id: tb_true
+    type: Table
+    properties:
+      toolbar: true
+      columns:
+        _ref: ../../src/blocks/Table/tests/people_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/people.yaml
+
+  # ============================================
+  # OFF BY DEFAULT, SLOTS ONLY, EMPTY SLOT
+  # ============================================
+
+  - id: tb_off
+    type: Table
+    properties:
+      columns:
+        _ref: ../../src/blocks/Table/tests/people_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/people.yaml
+
+  - id: tb_slots
+    type: Table
+    properties:
+      columns:
+        _ref: ../../src/blocks/Table/tests/people_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/people.yaml
+    slots:
+      toolbarEnd:
+        blocks:
+          - id: tb_slots_button
+            type: Button
+            properties:
+              title: Only a slot
+
+  - id: tb_empty
+    type: Table
+    properties:
+      columns:
+        _ref: ../../src/blocks/Table/tests/people_columns.yaml
+      data: []
+    slots:
+      empty:
+        blocks:
+          - id: tb_empty_message
+            type: Paragraph
+            properties:
+              content: No people yet. Add the first one.