@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/blocks/TableInput/gallery.yaml

@@ -0,0 +1,153 @@
+# 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.
+
+- title: Edit cells
+  fullWidth: true
+  blocks:
+    - id: contacts_input
+      type: TableInput
+      properties:
+        columns:
+          - key: name
+            editable: true
+            required: true
+          - key: email
+            type: email
+            width: 220
+            editable: true
+          - key: role
+            type: tag
+            editable: true
+            options: [Buyer, Champion, Finance]
+          - key: active
+            type: boolean
+            width: 100
+            editable: true
+        data:
+          - _id: c1
+            name: Ada Lovelace
+            email: ada@example.com
+            role: Champion
+            active: true
+          - _id: c2
+            name: Grace Hopper
+            email: grace@example.com
+            role: Buyer
+            active: false
+
+- title: Invoice lines with add, delete and a total
+  fullWidth: true
+  blocks:
+    - id: invoice_lines
+      type: TableInput
+      properties:
+        addRow: true
+        addRowText: Add line
+        rowActions:
+          delete: true
+        columns:
+          - key: description
+            width: 260
+            editable: true
+            validate:
+              - pass:
+                  op: notEmpty
+                message: Describe the line.
+          - key: qty
+            type: number
+            width: 100
+            editable: true
+            default: 1
+            validate:
+              - pass:
+                  op: gt
+                  value: 0
+                message: The quantity must be more than 0.
+          - key: price
+            type: currency
+            width: 140
+            editable: true
+            default: 0
+            aggregate: sum
+        data:
+          - _id: l1
+            description: Design workshop
+            qty: 1
+            price: 1800
+          - _id: l2
+            description: Implementation days
+            qty: 5
+            price: 950
+
+- title: Ordered list with drag and positions
+  blocks:
+    - id: recipe_steps
+      type: TableInput
+      properties:
+        addRow: true
+        rowDrag:
+          positionField: position
+        defaultView:
+          sort:
+            - key: position
+        columns:
+          - key: step
+            width: 280
+            editable: true
+          - key: position
+            type: number
+            width: 110
+        data:
+          - _id: s1
+            step: Mix the flour and water
+            position: 1024
+          - _id: s2
+            step: Rest for an hour
+            position: 2048
+          - _id: s3
+            step: Bake at 250°C
+            position: 3072
+
+- title: Reset the changes after saving
+  blocks:
+    - id: ingredients_input
+      type: TableInput
+      properties:
+        rowKey: id
+        deleteRows: true
+        columns:
+          - key: ingredient
+            editable: true
+          - key: grams
+            type: number
+            editable: true
+        data:
+          - id: flour
+            ingredient: Flour
+            grams: 500
+          - id: salt
+            ingredient: Salt
+            grams: 10
+    - id: ingredients_reset
+      type: Button
+      properties:
+        title: Reset changes
+        size: small
+      events:
+        onClick:
+          - id: ingredients_reset_call
+            type: CallMethod
+            params:
+              blockId: ingredients_input
+              method: resetChanges

package/dist/blocks/TableInput/meta.js

@@ -0,0 +1,93 @@
+/*
+  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.
+*/ import tableMeta from '../Table/meta.js';
+// Table's properties, events and methods apply as they are. The value differs: TableInput's is
+// a changeset over `data`, not the table's UI state (its view and selection stay internal), and
+// edits and moves go into it instead of firing onCellEdit / onRowMove.
+const { onCellEdit, onChange, onRowMove, ...tableEvents } = tableMeta.events;
+// TableInput is an input, not an input-container: it renders no slots (no toolbar, bulk action
+// or empty slot blocks), so it does not take Table's.
+const { slots, ...inputMeta } = tableMeta; // eslint-disable-line no-unused-vars
+export default {
+    ...inputMeta,
+    category: 'input',
+    valueType: 'object',
+    // No changes yet. The value is only ever what changed, never the rows (see onChange `value`).
+    initValue: {
+        updated: {},
+        added: [],
+        removed: []
+    },
+    events: {
+        onChange: {
+            description: 'Trigger when the changes change through the table: a cell edit, an added, deleted or moved row, a paste, or an undo or redo.',
+            event: {
+                value: 'The block value: the changes made in the table since `data`, `{ updated, added, removed, moved?, order? }`. `updated` is `{ [rowKey]: { [field]: value } }` with only the changed fields, keyed by the column `field` dot path (a MongoDB $set); a field edited back to its original value leaves it. `added` is `[{ rowKey, ...row }]`, `rowKey` a generated temporary key (a `default` on the key column is ignored, so added rows never share a key). `removed` is `[rowKey]` of data rows deleted (deleting an added row just drops it from `added`). With `rowDrag.positionField`, `moved` is `{ [rowKey]: position }` of moved data rows; with `rowDrag` and no positionField, `order` is the full row key order after a move. No changes is `{ updated: {}, added: [], removed: [] }`.',
+                cause: 'What changed: `edit`, `add`, `delete`, `move`, `paste`, `undo` or `redo`.',
+                rowKey: 'The key of the row that changed, for `edit`, `add`, `delete` and `move`.',
+                skipped: 'For `paste`: the cells that were not pasted, `[{ rowKey, column, text, reason }]`.'
+            }
+        },
+        ...tableEvents
+    },
+    methods: {
+        ...tableMeta.methods,
+        resetChanges: 'Drop every change and the undo history: the value becomes `{ updated: {}, added: [], removed: [] }` and the table shows `data` as it is. Call it after the changes were saved and `data` refetched.'
+    },
+    properties: {
+        ...tableMeta.properties,
+        properties: {
+            ...tableMeta.properties.properties,
+            data: {
+                type: 'array',
+                description: 'The rows to edit. They are never written: the changes are the block value, shown over the rows.',
+                items: {
+                    type: 'object'
+                }
+            },
+            rowKey: {
+                type: 'string',
+                description: 'Dot path to the unique row key. Defaults to `_id`, then `id`. Changes are recorded by key, so rows need a key. A row added in the table shows its temporary key in this field (default `_id` when the data uses it, else `id`).'
+            },
+            addRow: {
+                type: 'boolean',
+                default: false,
+                description: 'Show a "+ Add row" row under the table. A new row gets each column `default` (and, with `rowDrag.positionField`, a position after the last row), and opens its first editable cell.'
+            },
+            addRowText: {
+                type: 'string',
+                default: 'Add row',
+                description: 'Text of the add-row row.'
+            },
+            deleteRows: {
+                type: 'boolean',
+                default: false,
+                description: 'Delete the focused row with the Delete or Backspace key.'
+            },
+            rowActions: {
+                type: 'object',
+                additionalProperties: false,
+                description: 'Row controls shown in a leading column.',
+                properties: {
+                    delete: {
+                        type: 'boolean',
+                        default: false,
+                        description: 'A delete button on every row.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/TableInput/tests/TableInput.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: table-input
+type: Box
+
+blocks:
+  # ============================================
+  # EDIT, ADD, DELETE, ORDER (value = the changes over data)
+  # ============================================
+
+  - id: lines
+    type: TableInput
+    properties:
+      rowKey: id
+      addRow: true
+      rowDrag: true
+      deleteRows: true
+      rowActions:
+        delete: true
+      columns:
+        - key: item
+          editable: true
+          validate:
+            - pass: { op: notEmpty }
+              message: Item is required
+        - key: qty
+          type: number
+          width: 100
+          editable: true
+          default: 1
+          validate:
+            - pass: { op: gte, value: 0 }
+              message: Quantity cannot be negative
+        - key: note
+          field: details.note
+          editable: true
+        - key: id
+          title: Key
+      data:
+        - id: a
+          item: Apples
+          qty: 3
+          details:
+            note: fresh
+        - id: b
+          item: Bread
+          qty: 1
+          details:
+            note: rye
+        - id: c
+          item: Cheese
+          qty: 2
+          details:
+            note: aged
+    events:
+      onChange:
+        - id: record_change
+          type: SetState
+          params:
+            lines_change:
+              cause:
+                _event: cause
+              rowKey:
+                _event: rowKey
+              skipped:
+                _event: skipped
+      onRowClick:
+        - id: record_lines_click
+          type: SetState
+          params:
+            lines_click:
+              rowKey:
+                _event: rowKey
+              index:
+                _event: index
+
+  - id: lines_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'value='
+          - _json.stringify:
+              - _state: lines
+              - space: 0
+
+  - id: lines_click_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'click='
+          - _json.stringify:
+              - _state: lines_click
+              - space: 0
+
+  - id: lines_change_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'change='
+          - _json.stringify:
+              - _state: lines_change
+              - space: 0
+
+  - id: lines_reset
+    type: Button
+    properties:
+      title: Reset changes
+    events:
+      onClick:
+        - id: reset_lines
+          type: CallMethod
+          params:
+            blockId: lines
+            method: resetChanges
+
+  # ============================================
+  # FRACTIONAL POSITIONS
+  # ============================================
+
+  - id: steps
+    type: TableInput
+    properties:
+      addRow: true
+      rowDrag:
+        positionField: position
+      columns:
+        - key: title
+          editable: true
+        - key: position
+          type: number
+      data:
+        - _id: s1
+          title: Plan
+          position: 1024
+        - _id: s2
+          title: Build
+          position: 2048
+        - _id: s3
+          title: Ship
+          position: 3072
+
+  - id: steps_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'steps='
+          - _json.stringify:
+              - _state: steps
+              - space: 0
+
+  # ============================================
+  # PAGINATED: moves and adds over every page
+  # ============================================
+
+  - id: lines_paged
+    type: TableInput
+    properties:
+      rowKey: id
+      pagination: true
+      pageSize: 2
+      rowDrag: true
+      columns:
+        - key: item
+      data:
+        - id: a
+          item: Apples
+        - id: b
+          item: Bread
+        - id: c
+          item: Cheese
+        - id: d
+          item: Dates
+        - id: e
+          item: Eggs
+
+  - id: lines_paged_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'paged='
+          - _json.stringify:
+              - _state: lines_paged
+              - space: 0
+
+  - id: steps_paged
+    type: TableInput
+    properties:
+      pagination: true
+      pageSize: 2
+      addRow: true
+      rowDrag:
+        positionField: position
+      columns:
+        - key: title
+          editable: true
+        - key: position
+          type: number
+      data:
+        - _id: s1
+          title: Plan
+          position: 1024
+        - _id: s2
+          title: Build
+          position: 2048
+        - _id: s3
+          title: Test
+          position: 3072
+        - _id: s4
+          title: Ship
+          position: 4096
+        - _id: s5
+          title: Launch
+          position: 5120
+
+  - id: steps_paged_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'steps='
+          - _json.stringify:
+              - _state: steps_paged
+              - space: 0
+
+  # ============================================
+  # SORTED: edits by key, reorder off
+  # ============================================
+
+  - id: lines_sorted
+    type: TableInput
+    properties:
+      rowKey: id
+      rowDrag: true
+      defaultView:
+        sort:
+          - key: item
+            desc: true
+      columns:
+        - key: item
+          editable: true
+      data:
+        - id: a
+          item: Apples
+        - id: b
+          item: Bread
+
+  - id: lines_sorted_value
+    type: Span
+    properties:
+      content:
+        _string.concat:
+          - 'sorted='
+          - _json.stringify:
+              - _state: lines_sorted
+              - space: 0

package/dist/blocks.js

@@ -0,0 +1,16 @@
+/*
+  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.
+*/ export { default as Table } from './blocks/Table/Table.js';
+export { default as TableInput } from './blocks/TableInput/TableInput.js';

package/dist/core/Body.js

@@ -0,0 +1,112 @@
+/*
+  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.
+*/ import React, { useContext, useLayoutEffect, useRef } from 'react';
+import RenderProbeContext from './RenderProbeContext.js';
+import Row from './Row.js';
+import SkeletonRow from './SkeletonRow.js';
+// Rows of the current window. `translated` (the default) renders the window rows in flow inside
+// one container moved by a single translateY per range change; `positioned` gives each row its own
+// absolute transform (TanStack Virtual's pattern), kept for the benchmark comparison.
+//
+// Items are TanStack rows, wrapped row items (`kind: 'row'`, with a tree depth or an expand
+// state), other kinds rendered by the row renderer their feature registers (group headers,
+// detail rows), or `undefined` for a row that is not loaded yet (a skeleton row). `rowOffsets`
+// positions the items when some are not one row high; measured items (data rows with
+// `measuredRows`, detail rows) take their content height and report it after each render.
+function Body({ activeCell, api, ariaRowOffset, centerCols, layout, measuredRows, measureRows, rowClassName, rowHeight, rowOffsets, rowStyle, rows, selectable, selection, range }) {
+    const probe = useContext(RenderProbeContext);
+    probe?.body();
+    const windowRef = useRef(null);
+    useLayoutEffect(()=>{
+        if (measureRows && windowRef.current) measureRows(windowRef.current.children);
+    });
+    const rowElements = [];
+    const positioned = range.positioning === 'positioned' && rowOffsets === null;
+    const leadIndex = layout.cols.find((col)=>!col.special)?.index;
+    for(let i = range.rowStart; i < range.rowEnd; i++){
+        const item = rows[i];
+        const kind = item?.kind ?? 'row';
+        const activeCol = activeCell.row === i ? activeCell.col : -1;
+        const ariaRowIndex = i + ariaRowOffset;
+        const offset = positioned ? i * rowHeight : undefined;
+        if (item === undefined) {
+            rowElements.push(/*#__PURE__*/ React.createElement(SkeletonRow, {
+                ariaRowIndex: ariaRowIndex,
+                centerCols: centerCols,
+                className: rowClassName,
+                displayIndex: i,
+                endCols: layout.end,
+                key: `__skeleton_${i}`,
+                startCols: layout.start
+            }));
+        } else if (kind !== 'row') {
+            const ItemRow = api.features.rowRenderers[kind];
+            rowElements.push(/*#__PURE__*/ React.createElement(ItemRow, {
+                activeCol: activeCol,
+                api: api,
+                ariaRowIndex: ariaRowIndex,
+                centerCols: centerCols,
+                className: rowClassName,
+                displayIndex: i,
+                endCols: layout.end,
+                item: item,
+                key: `${kind}:${item.key}`,
+                layout: layout,
+                offset: offset,
+                selectable: selectable,
+                selection: selection,
+                startCols: layout.start,
+                style: rowStyle
+            }));
+        } else {
+            rowElements.push(/*#__PURE__*/ React.createElement(Row, {
+                activeCol: activeCol,
+                api: api,
+                ariaRowIndex: ariaRowIndex,
+                centerCols: centerCols,
+                className: rowClassName,
+                displayIndex: i,
+                endCols: layout.end,
+                item: item.kind ? item : undefined,
+                key: item.id,
+                leadIndex: leadIndex,
+                measured: measuredRows,
+                offset: offset,
+                original: item.original,
+                rowId: item.id,
+                selectable: selectable,
+                selected: selection[item.id] === true,
+                startCols: layout.start,
+                style: rowStyle
+            }));
+        }
+    }
+    const height = rowOffsets ? rowOffsets[rows.length] : rows.length * rowHeight;
+    const windowTop = rowOffsets ? rowOffsets[range.rowStart] : range.rowStart * rowHeight;
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-body",
+        role: "rowgroup",
+        style: {
+            height
+        }
+    }, positioned ? rowElements : /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-window",
+        ref: windowRef,
+        style: {
+            transform: `translateY(${windowTop}px)`
+        }
+    }, rowElements));
+}
+export default Body;