@lowdefy/blocks-table 0.0.0-experimental-20260929110023

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

@@ -0,0 +1,251 @@
+# 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: table-filtering
+type: Box
+
+blocks:
+  # ============================================
+  # COLUMN FILTERS, SEARCH, SETSTATE ROUND TRIP
+  # ============================================
+
+  - id: filter_table
+    type: Table
+    properties:
+      columns:
+        _ref: ../../src/blocks/Table/tests/deals_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/deals.yaml
+    events:
+      onChange:
+        - id: set_filter_cause
+          type: SetState
+          params:
+            filter_cause:
+              _event: cause
+
+  - id: filter_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'filter='
+          - _json.stringify:
+              - _state: filter_table.view.filter
+              - space: 0
+          - ' search='
+          - _json.stringify:
+              - _state: filter_table.view.search
+              - space: 0
+          - ' cause='
+          - _if_none:
+              - _state: filter_cause
+              - none
+
+  - id: set_filter_state
+    type: Button
+    properties:
+      title: SetState filter
+    events:
+      onClick:
+        - id: set_filter_state_action
+          type: SetState
+          params:
+            filter_table.view.filter:
+              and:
+                - key: stage
+                  op: in
+                  value:
+                    - won
+                    - lost
+                - or:
+                    - key: amount
+                      op: gte
+                      value: 1000
+                    - key: active
+                      op: isFalse
+
+  - id: call_set_filter
+    type: Button
+    properties:
+      title: setFilter
+    events:
+      onClick:
+        - id: call_set_filter_action
+          type: CallMethod
+          params:
+            blockId: filter_table
+            method: setFilter
+            args:
+              - key: owner
+                op: eq
+                value: dana
+
+  - id: call_clear_filters
+    type: Button
+    properties:
+      title: clearFilters
+    events:
+      onClick:
+        - id: call_clear_filters_action
+          type: CallMethod
+          params:
+            blockId: filter_table
+            method: clearFilters
+
+  - id: call_set_search
+    type: Button
+    properties:
+      title: setSearch
+    events:
+      onClick:
+        - id: call_set_search_action
+          type: CallMethod
+          params:
+            blockId: filter_table
+            method: setSearch
+            args:
+              - ACME   won
+
+  - id: call_clear_search
+    type: Button
+    properties:
+      title: clearSearch
+    events:
+      onClick:
+        - id: call_clear_search_action
+          type: CallMethod
+          params:
+            blockId: filter_table
+            method: setSearch
+            args:
+              - null
+
+  # ============================================
+  # DEFAULT VIEW FILTER, SEARCHABLE COLUMNS, SELECTION
+  # ============================================
+
+  - id: filter_default_table
+    type: Table
+    properties:
+      columns:
+        _ref: ../../src/blocks/Table/tests/deals_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/deals.yaml
+      defaultView:
+        filter:
+          key: stage
+          op: in
+          value:
+            - lead
+        search: hooli
+
+  - id: filter_searchable_table
+    type: Table
+    properties:
+      defaultView:
+        search: dana
+      columns:
+        - key: name
+          searchable: true
+        - key: owner
+      data:
+        _ref: ../../src/blocks/Table/tests/deals.yaml
+
+  - id: filter_select_table
+    type: Table
+    properties:
+      rowSelection:
+        type: checkbox
+      defaultView:
+        filter:
+          key: owner
+          op: eq
+          value: Dana
+      columns:
+        _ref: ../../src/blocks/Table/tests/deals_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/deals.yaml
+
+  - id: filter_select_value
+    type: Span
+    properties:
+      content:
+        _json.stringify:
+          - _state: filter_select_table.selected
+          - space: 0
+
+  # ============================================
+  # 100K ROWS
+  # ============================================
+
+  - id: filter_big_table
+    type: Table
+    properties:
+      height: 400
+      columns:
+        - key: id
+          type: number
+          width: 120
+        - key: name
+        - key: amount
+          type: number
+        - key: team
+          options:
+            - Red
+            - Blue
+            - Green
+      data:
+        _js: |
+          const teams = ['Red', 'Blue', 'Green'];
+          const rows = new Array(100000);
+          for (let i = 0; i < rows.length; i++) {
+            rows[i] = { id: i, name: 'Row ' + i, amount: i % 1000, team: teams[i % 3] };
+          }
+          return rows;
+
+  - id: filter_big_set
+    type: Button
+    properties:
+      title: Filter 100k
+    events:
+      onClick:
+        - id: filter_big_set_action
+          type: CallMethod
+          params:
+            blockId: filter_big_table
+            method: setFilter
+            args:
+              - and:
+                  - key: amount
+                    op: lt
+                    value: 10
+                  - key: team
+                    op: in
+                    value:
+                      - Red
+
+  - id: filter_big_search
+    type: Button
+    properties:
+      title: Search 100k
+    events:
+      onClick:
+        - id: filter_big_search_action
+          type: CallMethod
+          params:
+            blockId: filter_big_table
+            method: setSearch
+            args:
+              - row 9999

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

@@ -0,0 +1,272 @@
+# 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: grouping
+type: Box
+
+blocks:
+  # ============================================
+  # ONE LEVEL, COLLAPSE AND VALUE
+  # ============================================
+
+  - id: group_single
+    type: Table
+    properties:
+      columns:
+        _ref: ../../src/blocks/Table/tests/grouping_deals_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/grouping_deals.yaml
+      defaultView:
+        group:
+          - key: region
+        aggregates:
+          margin: avg
+    events:
+      onChange:
+        - id: set_group_single_cause
+          type: SetState
+          params:
+            group_single_cause:
+              _event: cause
+
+  - id: group_nokeys
+    type: Table
+    properties:
+      keyboard: false
+      columns:
+        _ref: ../../src/blocks/Table/tests/grouping_deals_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/grouping_deals.yaml
+      defaultView:
+        group:
+          - key: region
+
+  - id: group_single_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'group='
+          - _json.stringify:
+              - _state: group_single.view.group
+              - space: 0
+          - ' collapsed='
+          - _json.stringify:
+              - _state: group_single.view.collapsedGroups
+              - space: 0
+          - ' cause='
+          - _if_none:
+              - _state: group_single_cause
+              - none
+
+  - id: group_single_collapse_apac
+    type: Button
+    properties:
+      title: Collapse APAC by value
+    events:
+      onClick:
+        - id: set_group_single_collapsed
+          type: SetState
+          params:
+            group_single.view.collapsedGroups:
+              - '["APAC"]'
+
+  # ============================================
+  # TWO LEVELS
+  # ============================================
+
+  - id: group_two
+    type: Table
+    properties:
+      columns:
+        _ref: ../../src/blocks/Table/tests/grouping_deals_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/grouping_deals.yaml
+      defaultView:
+        group:
+          - key: region
+          - key: rep
+        collapsedGroups:
+          - '["APAC"]'
+
+  # ============================================
+  # ORDER: ENUM OPTIONS AND SORTED GROUP COLUMN
+  # ============================================
+
+  - id: group_enum
+    type: Table
+    properties:
+      columns:
+        _ref: ../../src/blocks/Table/tests/grouping_deals_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/grouping_deals.yaml
+      defaultView:
+        group:
+          - key: stage
+
+  - id: group_sorted
+    type: Table
+    properties:
+      columns:
+        _ref: ../../src/blocks/Table/tests/grouping_deals_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/grouping_deals.yaml
+      defaultView:
+        group:
+          - key: region
+        sort:
+          - key: region
+          - key: amount
+            desc: true
+
+  # ============================================
+  # SELECTION
+  # ============================================
+
+  - id: group_select
+    type: Table
+    properties:
+      rowSelection:
+        type: checkbox
+      columns:
+        _ref: ../../src/blocks/Table/tests/grouping_deals_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/grouping_deals.yaml
+      defaultView:
+        group:
+          - key: region
+
+  - id: group_select_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'selected='
+          - _json.stringify:
+              - _state: group_select.selected
+              - space: 0
+
+  # ============================================
+  # METHODS
+  # ============================================
+
+  - id: group_methods
+    type: Table
+    properties:
+      columns:
+        _ref: ../../src/blocks/Table/tests/grouping_deals_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/grouping_deals.yaml
+    events:
+      onChange:
+        - id: set_group_methods_cause
+          type: SetState
+          params:
+            group_methods_cause:
+              _event: cause
+
+  - id: group_methods_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'group='
+          - _json.stringify:
+              - _state: group_methods.view.group
+              - space: 0
+          - ' collapsed='
+          - _json.stringify:
+              - _state: group_methods.view.collapsedGroups
+              - space: 0
+          - ' cause='
+          - _if_none:
+              - _state: group_methods_cause
+              - none
+
+  - id: group_by_region_rep
+    type: Button
+    properties:
+      title: Group by region and rep
+    events:
+      onClick:
+        - id: call_set_group
+          type: CallMethod
+          params:
+            blockId: group_methods
+            method: setGroup
+            args:
+              - - region
+                - key: rep
+
+  - id: group_collapse_all
+    type: Button
+    properties:
+      title: Collapse all
+    events:
+      onClick:
+        - id: call_collapse_all
+          type: CallMethod
+          params:
+            blockId: group_methods
+            method: collapseAllGroups
+
+  - id: group_expand_all
+    type: Button
+    properties:
+      title: Expand all
+    events:
+      onClick:
+        - id: call_expand_all
+          type: CallMethod
+          params:
+            blockId: group_methods
+            method: expandAllGroups
+
+  - id: group_remove
+    type: Button
+    properties:
+      title: Remove grouping
+    events:
+      onClick:
+        - id: call_remove_group
+          type: CallMethod
+          params:
+            blockId: group_methods
+            method: setGroup
+            args:
+              - []
+
+  # ============================================
+  # STICKY GROUP HEADER
+  # ============================================
+
+  - id: group_sticky
+    type: Table
+    properties:
+      height: 300
+      columns:
+        - key: bucket
+          groupable: true
+        - key: id
+          type: number
+      data:
+        _js: |
+          const rows = new Array(300);
+          for (let i = 0; i < rows.length; i++) {
+            rows[i] = { id: i, bucket: 'B' + String(Math.floor(i / 30)).padStart(2, '0') };
+          }
+          return rows;
+      defaultView:
+        group:
+          - key: bucket

package/dist/blocks/Table/tests/grouping_deals.yaml

@@ -0,0 +1,24 @@
+# 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.
+
+# Rows shared by the grouping e2e tables. Row 7 has no region and row 8 an empty one: both land
+# in the "(Empty)" region group.
+- { id: 1, name: Acme, region: EMEA, rep: Ada, stage: won, amount: 100, margin: 10 }
+- { id: 2, name: Bolt, region: APAC, rep: Ken, stage: lead, amount: 200, margin: 20 }
+- { id: 3, name: Core, region: EMEA, rep: Grace, stage: qualified, amount: 300, margin: 30 }
+- { id: 4, name: Dune, region: AMER, rep: Alan, stage: lead, amount: 400, margin: 40 }
+- { id: 5, name: Echo, region: EMEA, rep: Ada, stage: lead, amount: 500, margin: 50 }
+- { id: 6, name: Flux, region: APAC, rep: Ken, stage: won, amount: 600, margin: 60 }
+- { id: 7, name: Gale, rep: Alan, stage: qualified, amount: 700, margin: 70 }
+- { id: 8, name: Halo, region: '', rep: Grace, stage: won, amount: 800 }

package/dist/blocks/Table/tests/grouping_deals_columns.yaml

@@ -0,0 +1,32 @@
+# 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.
+
+# Columns shared by the grouping e2e tables. `name` is not groupable.
+- key: name
+- key: region
+  groupable: true
+- key: rep
+  groupable: true
+- key: stage
+  type: tag
+  groupable: true
+  options:
+    - { value: lead, label: Lead }
+    - { value: qualified, label: Qualified }
+    - { value: won, label: Won }
+- key: amount
+  type: number
+  aggregate: sum
+- key: margin
+  type: number

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

@@ -0,0 +1,134 @@
+# 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: table-header-menu
+type: Box
+
+blocks:
+  # ============================================
+  # HEADER MENU
+  # ============================================
+
+  - id: menu_table
+    type: Table
+    properties:
+      columns:
+        - key: name
+          title: Name
+        - key: team
+          filterable: false
+        - key: age
+          type: number
+          width: 100
+        - key: city
+          width: 70
+      data:
+        _ref: ../../src/blocks/Table/tests/people.yaml
+    events:
+      onChange:
+        - id: set_menu_cause
+          type: SetState
+          params:
+            menu_cause:
+              _event: cause
+
+  - id: menu_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'sort='
+          - _json.stringify:
+              - _state: menu_table.view.sort
+              - space: 0
+          - ' columns='
+          - _json.stringify:
+              - _state: menu_table.view.columns
+              - space: 0
+          - ' cause='
+          - _if_none:
+              - _state: menu_cause
+              - none
+
+  - id: menu_off_table
+    type: Table
+    properties:
+      headerMenu: false
+      columns:
+        _ref: ../../src/blocks/Table/tests/people_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/people.yaml
+
+  # ============================================
+  # COLUMN MANAGER
+  # ============================================
+
+  - id: manager_table
+    type: Table
+    properties:
+      defaultView:
+        columns:
+          - key: name
+            pinned: start
+          - key: team
+          - key: age
+          - key: city
+            hidden: true
+      columns:
+        _ref: ../../src/blocks/Table/tests/people_columns.yaml
+      data:
+        _ref: ../../src/blocks/Table/tests/people.yaml
+    events:
+      onChange:
+        - id: set_manager_cause
+          type: SetState
+          params:
+            manager_cause:
+              _event: cause
+            manager_changes:
+              _sum:
+                - _if_none:
+                    - _state: manager_changes
+                    - 0
+                - 1
+
+  - id: manager_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'columns='
+          - _json.stringify:
+              - _state: manager_table.view.columns
+              - space: 0
+          - ' cause='
+          - _if_none:
+              - _state: manager_cause
+              - none
+          - ' changes='
+          - _if_none:
+              - _state: manager_changes
+              - 0
+
+  - id: open_manager
+    type: Button
+    properties:
+      title: Open column manager
+    events:
+      onClick:
+        - id: open_manager_action
+          type: CallMethod
+          params:
+            blockId: manager_table
+            method: openColumnManager