@lowdefy/blocks-table 0.0.0-experimental-20260929110023

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

@@ -0,0 +1,144 @@
+# 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.
+
+# One TableLight config, rendered by TableParity.e2e.yaml under both `type: TableLight` and
+# `type: Table`: every key here is valid on both blocks with the same meaning.
+user:
+  role: admin
+rowRules:
+  - when: { key: overdue, op: isTrue }
+    className: parity-overdue
+columns:
+  - name
+  - key: amount
+    type: currency
+    cell: { currency: EUR, locale: en-US }
+    aggregate: sum
+  - title: Rates
+    children:
+      - { key: rate, type: percent, cell: { locale: en-US } }
+      - key: score
+        type: number
+        cell: { locale: en-US, decimals: 1 }
+        aggregate: avg
+        rules:
+          - when: { op: lt, value: 5 }
+            className: parity-low
+  - { key: created, type: date }
+  - { key: active, type: boolean, cell: { trueLabel: Active, falseLabel: Idle } }
+  - key: stage
+    type: tag
+    options:
+      - { value: lead, label: Lead }
+      - { value: won, label: Won, color: success }
+  - { key: labels, type: tags, cell: { max: 2 } }
+  - key: state
+    type: status
+    options:
+      open: { label: Open, color: processing }
+      closed: { label: Closed, color: error }
+  - { key: owner, type: avatar }
+  - { key: team, type: people }
+  - { key: profile, type: link, cell: { pageId: table-link-target, urlQuery: { id: _id } } }
+  - { key: email, type: email }
+  - { key: site, type: url }
+  - { key: progress, type: progress }
+  - { key: stars, type: rating }
+  - key: bio
+    type: html
+    cell:
+      template: '<b>{{ value }}</b> in {{ row.city }}'
+  - { key: meta, type: json }
+  - key: note
+    tooltip: '{{ row.name }}: {{ value }}'
+  - key: actions
+    type: buttons
+    cell:
+      buttons:
+        - eventName: onEdit
+          title: Edit
+        - eventName: onPromote
+          title: Promote
+          hidden:
+            when: { key: role, op: ne, value: { $user: role } }
+data:
+  - _id: a
+    name: Alice
+    amount: 1200.5
+    rate: 0.125
+    score: 8.25
+    created: '2026-03-01'
+    active: true
+    stage: won
+    labels: [red, green, blue]
+    state: open
+    owner: Alice Adams
+    team: [{ name: Ann Lee }, { name: Bo Kim }]
+    profile: Alice profile
+    email: alice@example.com
+    site: example.com
+    progress: 40
+    stars: 4
+    bio: Engineer
+    city: Paarl
+    meta: { a: 1 }
+    note: First
+    role: admin
+    overdue: true
+  - _id: b
+    name: bob
+    amount: 99
+    rate: 0.5
+    score: 3
+    created: '2025-12-31'
+    active: false
+    stage: lead
+    labels: [green]
+    state: closed
+    owner: Bob Brown
+    team: [{ name: Cy Dunn }]
+    profile: Bob profile
+    email: bob@example.com
+    site: https://example.org/path
+    progress: 100
+    stars: 2
+    bio: Designer
+    city: Durban
+    meta: [1, 2]
+    note: Second
+    role: viewer
+    overdue: false
+  - _id: c
+    name: Charlie
+    amount: null
+    rate: null
+    score: null
+    created: null
+    active: null
+    stage: unknown
+    labels: []
+    state: null
+    owner: null
+    team: []
+    profile: null
+    email: null
+    site: null
+    progress: null
+    stars: null
+    bio: null
+    city: Cape Town
+    meta: null
+    note: null
+    role: admin
+    overdue: false

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

@@ -0,0 +1,39 @@
+# 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 Table e2e tables.
+- id: 1
+  name: Charlie
+  team: Blue
+  age: 35
+  city: Cape Town
+- id: 2
+  name: alice
+  team: Red
+  age: 30
+  city: Berlin
+- id: 3
+  name: Bob
+  team: Blue
+  age: 25
+  city: Austin
+- id: 4
+  name: Dana
+  team: Red
+  age: 41
+  city: Durban
+- id: 5
+  name: Eve
+  team: Blue
+  age: 30

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

@@ -0,0 +1,22 @@
+# 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 Table e2e tables.
+- key: name
+  title: Name
+- key: team
+- key: age
+  type: number
+  width: 100
+- key: city

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

@@ -0,0 +1,372 @@
+# 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.
+
+# Visual checks (polish.e2e.spec.js): summary footer fitting, group row backgrounds, slot layout,
+# header alignment, tag and avatar fitting, row separators, the column manager, pinned edges,
+# stacked sticky groups, the select editor and the toolbar counts.
+id: polish
+type: Box
+
+blocks:
+  # ============================================
+  # CRM LIST: toolbar, slots, pinned columns, rich cells, summary footer
+  # ============================================
+
+  - id: crm
+    type: Table
+    properties:
+      maxHeight: 420
+      rowSelection:
+        type: checkbox
+      toolbar:
+        search: true
+        filter: true
+        sort: true
+        group: true
+        columns: true
+      defaultView:
+        sort:
+          - key: amount
+            desc: true
+        filter:
+          and:
+            - key: amount
+              op: gt
+              value: 0
+            - key: name
+              op: notEmpty
+        columns:
+          - key: company
+            hidden: true
+          - key: region
+            hidden: true
+          - key: email
+            hidden: true
+      columns:
+        - key: name
+          title: Deal
+          width: 180
+          pinned: start
+        - key: stage
+          type: status
+          width: 130
+          editable: true
+          options:
+            lead: Lead
+            qualified:
+              label: Qualified
+              color: processing
+            won:
+              label: Won
+              color: success
+            lost:
+              label: Lost
+              color: error
+        - key: labels
+          title: Tags
+          type: tags
+          width: 150
+          editable: true
+          options:
+            - value: renewal
+              label: Renewal
+              color: blue
+            - value: strategic
+              label: Strategic
+              color: purple
+            - value: at-risk
+              label: At risk
+              color: red
+            - value: inbound
+              label: Inbound
+              color: green
+        - key: contacts
+          type: people
+          width: 120
+        - key: owner
+          type: people
+          width: 150
+        - key: amount
+          type: currency
+          width: 110
+          aggregate: sum
+          cell:
+            currency: USD
+            decimals: 0
+        - key: win
+          title: Win chance
+          type: number
+          width: 110
+        - key: company
+        - key: region
+        - key: email
+          type: email
+        - key: actions
+          title: ''
+          type: buttons
+          width: 110
+          pinned: end
+          cell:
+            showOn: hover
+            buttons:
+              - eventName: onMail
+                title: Mail
+              - eventName: onCall
+                title: Call
+      data:
+        _js: |
+          const names = ['Brightwater Analytics pilot', 'Marigold Hospitality multi-year renewal', 'Kestrel Aerospace fleet rollout', 'Wren & Finch Books analytics add-on', 'Stonebridge Legal seat upgrade'];
+          const people = ['Ada Tran', 'Theo Lindqvist', 'Priya Raman', 'Maya Okafor', 'Ingrid Olsen', 'Samuel Adeyemi'];
+          const stages = ['lead', 'qualified', 'won', 'lost'];
+          const labels = [['inbound', 'at-risk', 'strategic'], ['at-risk'], ['renewal', 'strategic'], ['inbound', 'renewal', 'strategic', 'at-risk'], []];
+          const rows = [];
+          for (let i = 0; i < 60; i++) {
+            rows.push({
+              id: i + 1,
+              name: names[i % names.length] + ' ' + (i + 1),
+              stage: stages[i % 4],
+              labels: labels[i % labels.length],
+              contacts: i % 3 === 0 ? [people[(i + 1) % 6]] : [people[i % 6], people[(i + 2) % 6], people[(i + 3) % 6], people[(i + 4) % 6]].slice(0, 2 + (i % 3)),
+              owner: people[i % 6],
+              amount: 900000 + i * 13579,
+              win: (i * 7) % 100,
+              company: 'Company ' + i,
+              region: i % 2 === 0 ? 'EMEA' : 'APAC',
+              email: 'deal' + i + '@example.com',
+            });
+          }
+          return rows;
+    slots:
+      toolbarStart:
+        blocks:
+          - id: crm_new
+            type: Button
+            properties:
+              title: New deal
+              size: small
+          - id: crm_import
+            type: Button
+            properties:
+              title: Import
+              size: small
+      toolbarEnd:
+        blocks:
+          - id: crm_end_a
+            type: Button
+            properties:
+              title: Share
+              size: small
+          - id: crm_end_b
+            type: Button
+            properties:
+              title: Help
+              size: small
+      bulkActions:
+        blocks:
+          - id: crm_assign
+            type: Button
+            properties:
+              title: Assign owner
+              size: small
+          - id: crm_move
+            type: Button
+            properties:
+              title: Move stage
+              size: small
+          - id: crm_delete
+            type: Button
+            properties:
+              title: Delete
+              size: small
+              danger: true
+    events:
+      onCellEdit:
+        - id: crm_edit
+          type: SetState
+          params:
+            crm_edit:
+              _event: value
+
+  # ============================================
+  # NARROW COLUMNS: the table is wider than its columns
+  # ============================================
+
+  - id: narrow
+    type: Table
+    properties:
+      columns:
+        - key: name
+          width: 120
+        - key: amount
+          type: number
+          width: 100
+          aggregate: sum
+        - key: big
+          type: number
+          width: 70
+          aggregate: sum
+        - key: rate
+          type: number
+          width: 70
+          aggregate: avg
+        - key: more
+          title: ''
+          type: menu
+          width: 48
+          cell:
+            items:
+              - eventName: onSnooze
+                title: Snooze
+        - key: actions
+          title: ''
+          type: buttons
+          width: 90
+          pinned: end
+          cell:
+            buttons:
+              - eventName: onOpen
+                title: Open
+      data:
+        - { id: 1, name: Acme, amount: 100, big: 1000000000, rate: 10 }
+        - { id: 2, name: Bolt, amount: 200, big: 2000000000, rate: 42 }
+        - { id: 3, name: Core, amount: 300, big: 3000000000, rate: 71 }
+
+  # ============================================
+  # TWO GROUP LEVELS
+  # ============================================
+
+  - id: grouped
+    type: Table
+    properties:
+      maxHeight: 300
+      columns:
+        - key: name
+        - key: region
+          groupable: true
+        - key: rep
+          groupable: true
+        - key: amount
+          type: number
+          aggregate: sum
+      defaultView:
+        group:
+          - key: region
+          - key: rep
+      data:
+        _js: |
+          const regions = ['EMEA', 'APAC'];
+          const reps = ['Ada', 'Ken', 'Grace'];
+          const rows = [];
+          for (let i = 0; i < 60; i++) {
+            rows.push({ id: i + 1, name: 'Deal ' + (i + 1), region: regions[Math.floor(i / 30)], rep: reps[Math.floor(i / 10) % 3], amount: 100 * (i + 1) });
+          }
+          return rows;
+
+  # ============================================
+  # TABLELIGHT AND TABLE WITH ONE CONFIG
+  # ============================================
+
+  - id: light
+    type: TableLight
+    properties:
+      columns:
+        - key: invoice
+          type: link
+          cell:
+            pageId: polish
+        - key: customer
+          type: avatar
+        - key: status
+          type: tag
+        - key: note
+        - key: amount
+          type: number
+          aggregate: sum
+        - key: due
+          type: date
+      data:
+        - {
+            id: 1,
+            invoice: INV-2041,
+            customer: Halcyon Freight,
+            status: Paid,
+            note: Net 30,
+            amount: 12480,
+            due: '2026-09-12',
+          }
+        - {
+            id: 2,
+            invoice: INV-2042,
+            customer: Tessellate Labs,
+            status: Overdue,
+            note: Net 30,
+            amount: 4350,
+            due: '2026-09-18',
+          }
+        - {
+            id: 3,
+            invoice: INV-2043,
+            customer: Copperleaf Health,
+            status: Due,
+            note: Net 60,
+            amount: 8920,
+            due: '2026-10-06',
+          }
+
+  - id: light_table
+    type: Table
+    properties:
+      columns:
+        - key: invoice
+          type: link
+          cell:
+            pageId: polish
+        - key: customer
+          type: avatar
+        - key: status
+          type: tag
+        - key: note
+        - key: amount
+          type: number
+          aggregate: sum
+        - key: due
+          type: date
+      data:
+        - {
+            id: 1,
+            invoice: INV-2041,
+            customer: Halcyon Freight,
+            status: Paid,
+            note: Net 30,
+            amount: 12480,
+            due: '2026-09-12',
+          }
+        - {
+            id: 2,
+            invoice: INV-2042,
+            customer: Tessellate Labs,
+            status: Overdue,
+            note: Net 30,
+            amount: 4350,
+            due: '2026-09-18',
+          }
+        - {
+            id: 3,
+            invoice: INV-2043,
+            customer: Copperleaf Health,
+            status: Due,
+            note: Net 60,
+            amount: 8920,
+            due: '2026-10-06',
+          }