@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/features/grouping/createSetGroup.js

@@ -0,0 +1,35 @@
+/*
+  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 toGroupKeys from './toGroupKeys.js';
+// Block method `setGroup(keys)`: group by these columns, outermost first. Accepts column keys or
+// `[{ key }]`; an empty list (or null) removes the grouping.
+function createSetGroup(api) {
+    return function setGroup(group) {
+        const keys = toGroupKeys(group);
+        keys.forEach((key)=>{
+            const column = api.config.columnsByKey.get(key);
+            if (!column) {
+                throw new Error(`setGroup: Table has no column "${key}".`);
+            }
+            if (!column.groupable) {
+                throw new Error(`setGroup: column "${key}" is not groupable. Set "groupable: true".`);
+            }
+        });
+        return api.actions.setGroupKeys([
+            ...new Set(keys)
+        ]);
+    };
+}
+export default createSetGroup;

package/dist/features/grouping/createSetGroupKeys.js

@@ -0,0 +1,27 @@
+/*
+  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.
+*/ // Sets the group levels (column keys, outermost first). Used by the setGroup method and the
+// header menu; keys are validated by the caller.
+function createSetGroupKeys(api) {
+    return function setGroupKeys(keys) {
+        const current = api.state.grouping;
+        if (keys.length === current.length && keys.every((key, i)=>key === current[i])) return false;
+        api.updateSlice('grouping', ()=>keys, {
+            cause: 'group'
+        });
+        return true;
+    };
+}
+export default createSetGroupKeys;

package/dist/features/grouping/createToggleGroup.js

@@ -0,0 +1,38 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+// Collapses or expands one group (`collapsed` omitted toggles it). Server groups open and close
+// in the server store, which loads a group's first block when it opens; client groups are the
+// `collapsedGroups` slice.
+function createToggleGroup(api) {
+    return function toggleGroup({ key, collapsed }) {
+        if (api.serverStore) {
+            api.serverStore.toggleGroup({
+                key,
+                expanded: type.isBoolean(collapsed) ? !collapsed : undefined
+            });
+            return true;
+        }
+        const current = api.state.collapsedGroups;
+        const isCollapsed = current.includes(key);
+        const next = type.isBoolean(collapsed) ? collapsed : !isCollapsed;
+        if (next === isCollapsed) return false;
+        return api.actions.setCollapsedGroups(next ? [
+            ...current,
+            key
+        ] : current.filter((entry)=>entry !== key));
+    };
+}
+export default createToggleGroup;

package/dist/features/grouping/createToggleGroupSelected.js

@@ -0,0 +1,49 @@
+/*
+  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 countGroupSelection from './countGroupSelection.js';
+// The group checkbox selects every leaf row of the group, or clears them when all are selected.
+function createToggleGroupSelected(api) {
+    return function toggleGroupSelected({ key }) {
+        if (api.config.rowSelection?.type !== 'checkbox') return false;
+        // Server groups have no leaf rows in the browser, so they have no group checkbox.
+        if (!api.grouping?.tree) return false;
+        const group = api.grouping.tree.groupsByKey.get(key);
+        const { leaves } = api.grouping.tree;
+        const { selected, total } = countGroupSelection({
+            leaves,
+            start: group.start,
+            end: group.end,
+            selection: api.state.rowSelection
+        });
+        const select = selected < total;
+        api.updateSlice('rowSelection', (previous)=>{
+            const next = {
+                ...previous
+            };
+            for(let i = group.start; i < group.end; i++){
+                if (select) {
+                    next[leaves[i].id] = true;
+                } else {
+                    delete next[leaves[i].id];
+                }
+            }
+            return next;
+        }, {
+            cause: 'select'
+        });
+        return true;
+    };
+}
+export default createToggleGroupSelected;

package/dist/features/grouping/findGroupIndices.js

@@ -0,0 +1,25 @@
+/*
+  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.
+*/ // The list index of every group header item, ascending (for the sticky header's binary search).
+// Client grouping gets them from flattenGroups; server mode's list comes built, so they are
+// found here.
+function findGroupIndices(rows) {
+    const indices = [];
+    for(let i = 0; i < rows.length; i++){
+        if (rows[i]?.kind === 'group') indices.push(i);
+    }
+    return Uint32Array.from(indices);
+}
+export default findGroupIndices;

package/dist/features/grouping/flattenGroups.js

@@ -0,0 +1,58 @@
+/*
+  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.
+*/ function toGroupItem({ group, collapsed }) {
+    return {
+        kind: 'group',
+        key: group.key,
+        depth: group.depth,
+        columnKey: group.columnKey,
+        value: group.value,
+        empty: group.empty,
+        count: group.count,
+        aggregates: group.aggregates,
+        collapsed,
+        start: group.start,
+        end: group.end
+    };
+}
+// The one virtual list the window renders: group header items and the leaf rows of expanded
+// groups, in display order, plus the list index of every header (ascending, for the sticky
+// header's binary search). Collapsing reruns this, never the tree build.
+function flattenGroups({ groups, leaves, collapsed }) {
+    const items = [];
+    const groupIndices = [];
+    function visit(siblings) {
+        siblings.forEach((group)=>{
+            const isCollapsed = collapsed.has(group.key);
+            groupIndices.push(items.length);
+            items.push(toGroupItem({
+                group,
+                collapsed: isCollapsed
+            }));
+            if (isCollapsed) return;
+            if (group.children !== null) {
+                visit(group.children);
+                return;
+            }
+            for(let i = group.start; i < group.end; i++)items.push(leaves[i]);
+        });
+    }
+    visit(groups);
+    return {
+        items,
+        groupIndices: Uint32Array.from(groupIndices)
+    };
+}
+export default flattenGroups;

package/dist/features/grouping/getGroupLabel.js

@@ -0,0 +1,34 @@
+/*
+  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 getCellText from '@lowdefy/blocks-antd/table/getCellText.js';
+import resolveOption from '@lowdefy/blocks-antd/table/resolveOption.js';
+const EMPTY_LABEL = '(Empty)';
+// A group header's label as text: the option label for enum values, else the value in the
+// column's display format, and "(Empty)" for the group of empty values.
+function getGroupLabel({ level, item }) {
+    if (item.empty) return EMPTY_LABEL;
+    const option = resolveOption({
+        options: level.options,
+        value: item.value
+    });
+    if (option) return option.label;
+    const text = getCellText({
+        column: level.column,
+        value: item.value,
+        row: {}
+    });
+    return text === '' ? String(item.value) : text;
+}
+export default getGroupLabel;

package/dist/features/grouping/getStickyGroups.js

@@ -0,0 +1,60 @@
+/*
+  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 firstIndexAbove from '../virtualization/firstIndexAbove.js';
+// The stacked sticky group headers for a body scroll offset: for each level from the outermost,
+// the header of the group the rows under that level's slot belong to (slot `level` sits
+// `level` rows below the column header), once it has scrolled (partly) under the slot. A level
+// shows only while its parent level shows and holds one of the parent's groups. `shift` (zero or
+// negative) pushes a level up as the next header at that level or above arrives beneath it, so a
+// new outer group pushes the inner headers out first. Item tops are `rowOffsets` when some items
+// are not one row high (detail rows, measured rows), else index times row height; group headers
+// themselves are always one row high. `levels` comes from buildStickyLevels.
+function getStickyGroups({ levels, rowHeight, rowOffsets, scrollTop }) {
+    const groups = [];
+    if (scrollTop <= 0) return groups;
+    const offsetOf = (index)=>rowOffsets ? rowOffsets[index] : index * rowHeight;
+    const rowAt = (offset)=>rowOffsets ? firstIndexAbove({
+            offsets: rowOffsets,
+            value: offset
+        }) - 1 : Math.floor(offset / rowHeight);
+    let parent = -1;
+    for(let level = 0; level < levels.length; level++){
+        const { own, upTo } = levels[level];
+        const slotTop = scrollTop + level * rowHeight;
+        const position = firstIndexAbove({
+            offsets: own,
+            value: rowAt(slotTop)
+        }) - 1;
+        if (position < 0) break;
+        const index = own[position];
+        if (index <= parent || offsetOf(index) >= slotTop) break;
+        const next = firstIndexAbove({
+            offsets: upTo,
+            value: index
+        });
+        let shift = 0;
+        if (next < upTo.length) {
+            shift = Math.min(0, offsetOf(upTo[next]) - slotTop - rowHeight);
+            shift = Math.max(shift, -(level + 1) * rowHeight);
+        }
+        groups.push({
+            index,
+            shift
+        });
+        parent = index;
+    }
+    return groups;
+}
+export default getStickyGroups;

package/dist/features/grouping/groupRowsFeature.js

@@ -0,0 +1,57 @@
+/*
+  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 createCollapseAllGroups from './createCollapseAllGroups.js';
+import createExpandAllGroups from './createExpandAllGroups.js';
+import createSetCollapsedGroups from './createSetCollapsedGroups.js';
+import createSetGroup from './createSetGroup.js';
+import createSetGroupKeys from './createSetGroupKeys.js';
+import createToggleGroup from './createToggleGroup.js';
+import createToggleGroupSelected from './createToggleGroupSelected.js';
+import groupingHeaderMenuItems from './groupingHeaderMenuItems.js';
+import GroupRow from './GroupRow.js';
+import handleGroupClick from './handleGroupClick.js';
+import handleGroupKeyDown from './handleGroupKeyDown.js';
+import StickyGroupRow from './StickyGroupRow.js';
+import useGrouping from './useGrouping.js';
+// Client-side row grouping (D6, D10.8), loaded for tables with a groupable column: the group
+// rows, sticky headers, grouping actions and methods over the state groupingFeature keeps. The
+// rows it produces are one flat list of group header items and leaf rows; the Body renders the
+// headers with `rowRenderers.group`, and one sticky overlay shows the current groups while
+// scrolling. Server groups (serverData) are the same items and render the same way.
+const groupRowsFeature = {
+    name: 'groupRows',
+    actions: {
+        setCollapsedGroups: createSetCollapsedGroups,
+        setGroupKeys: createSetGroupKeys,
+        toggleGroup: createToggleGroup,
+        toggleGroupSelected: createToggleGroupSelected
+    },
+    methods: {
+        collapseAllGroups: createCollapseAllGroups,
+        expandAllGroups: createExpandAllGroups,
+        setGroup: createSetGroup
+    },
+    gridHandlers: {
+        click: handleGroupClick,
+        keydown: handleGroupKeyDown
+    },
+    headerMenuItems: groupingHeaderMenuItems,
+    rowRenderers: {
+        group: GroupRow
+    },
+    bodyOverlay: StickyGroupRow,
+    useItems: useGrouping
+};
+export default groupRowsFeature;

package/dist/features/grouping/grouping.css

@@ -0,0 +1,128 @@
+/*
+  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.
+*/
+
+/* Group header rows and the sticky group overlay. A group row is also an `lf-table-row`, so the
+   core body row rules (`.lf-table-body .lf-table-row` and its `:hover`, both in the same layer)
+   match it too. The group rules name both classes of the row under the root, one class more
+   specific than each core rule, so they win whatever order the stylesheets load in (a tie would
+   go to whichever loads last). */
+
+@layer components {
+  .lf-table .lf-table-row.lf-table-group-row {
+    --lf-group-row-bg: color-mix(in srgb, var(--ant-color-text-base, #000) 3%, var(--lf-bg));
+    background: var(--lf-group-row-bg);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .lf-table .lf-table-row.lf-table-group-row:hover {
+    --lf-group-row-bg: color-mix(in srgb, var(--ant-color-text-base, #000) 6%, var(--lf-bg));
+    background: var(--lf-group-row-bg);
+  }
+
+  .lf-table-group-label {
+    position: sticky;
+    z-index: 2;
+    flex: none;
+    width: 0;
+    height: 100%;
+  }
+
+  .lf-table-group-label-content {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--ant-padding-xs, 8px);
+    box-sizing: border-box;
+    padding-inline: calc(var(--lf-group-depth, 0) * 20px + var(--ant-padding-xs, 8px))
+      var(--ant-padding, 16px);
+    font-weight: var(--ant-font-weight-strong, 600);
+    white-space: nowrap;
+    background: var(--lf-group-row-bg);
+  }
+
+  .lf-table-group-row:has([data-lf-cell]:focus-visible) .lf-table-group-label-content,
+  .lf-table-group-row:has([data-lf-cell][data-focused]:focus) .lf-table-group-label-content {
+    box-shadow: inset 0 0 0 2px var(--ant-color-primary, #1677ff);
+  }
+
+  .lf-table-group-toggle {
+    flex: none;
+    width: 14px;
+    height: 14px;
+    color: var(--ant-color-text-secondary, rgba(0, 0, 0, 0.65));
+    transition: transform 0.15s;
+  }
+
+  .lf-table-group-row[aria-expanded='true'] .lf-table-group-toggle {
+    transform: rotate(90deg);
+  }
+
+  .lf-table-group-value {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .lf-table-group-count {
+    padding: 0 var(--ant-padding-xs, 8px);
+    color: var(--ant-color-text-secondary, rgba(0, 0, 0, 0.65));
+    font-weight: normal;
+    font-size: var(--ant-font-size-sm, 12px);
+    line-height: 20px;
+    background: var(--ant-color-fill-secondary, rgba(0, 0, 0, 0.06));
+    border-radius: 10px;
+  }
+
+  .lf-table-group-aggregate {
+    min-width: 0;
+    overflow: hidden;
+    font-weight: var(--ant-font-weight-strong, 600);
+    text-overflow: ellipsis;
+  }
+
+  .lf-table-group-aggregate-fn {
+    margin-inline-end: var(--ant-padding-xxs, 4px);
+    color: var(--ant-color-text-tertiary, rgba(0, 0, 0, 0.45));
+    font-weight: normal;
+    font-size: var(--ant-font-size-sm, 12px);
+  }
+
+  .lf-table-group-sticky {
+    position: sticky;
+    outline: none;
+    z-index: 2;
+    width: var(--lf-total);
+    min-width: 100%;
+    height: 0;
+  }
+
+  .lf-table-group-sticky-shift {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    will-change: transform;
+  }
+
+  /* Only the innermost stacked header casts the shadow over the rows. */
+  .lf-table-group-sticky-shift:last-child .lf-table-row {
+    box-shadow: 0 2px 4px color-mix(in srgb, var(--ant-color-text, #000) 6%, transparent);
+  }
+}

package/dist/features/grouping/groupingFeature.js

@@ -0,0 +1,48 @@
+/*
+  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 groupingToValue from './groupingToValue.js';
+import initAggregates from './initAggregates.js';
+import initCollapsedGroups from './initCollapsedGroups.js';
+import initGrouping from './initGrouping.js';
+// The grouping state every table keeps, loaded or not with the group rows (groupRowsFeature):
+// `view.group` levels, collapsed groups and the view's aggregates (which the summary footer reads
+// too). Owning the view keys here keeps the value the same whether or not a table can group.
+const groupingFeature = {
+    name: 'grouping',
+    viewKeys: [
+        'group',
+        'collapsedGroups',
+        'aggregates'
+    ],
+    slices: {
+        // Regrouping 100k rows is one tree build; in a transition the old rows stay (dimmed) until
+        // the grouped ones land, as with a sort.
+        grouping: {
+            init: initGrouping,
+            cause: 'group',
+            transition: true
+        },
+        collapsedGroups: {
+            init: initCollapsedGroups,
+            cause: 'expand'
+        },
+        aggregates: {
+            init: initAggregates,
+            cause: 'aggregate'
+        }
+    },
+    toValue: groupingToValue
+};
+export default groupingFeature;

package/dist/features/grouping/groupingHeaderMenuItems.js

@@ -0,0 +1,44 @@
+/*
+  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.
+*/ // The header menu's grouping entries for a groupable column (collected by the headerMenu feature
+// through its `headerMenuItems` extension point). "Group by this column" adds the column as the
+// innermost level, so repeating it on other columns builds a multi-level grouping. Trees are
+// never grouped.
+function groupingHeaderMenuItems({ column, api }) {
+    if (api.config.tree || api.config.columnsByKey.get(column.key)?.groupable !== true) return [];
+    const keys = api.state.grouping;
+    if (keys.includes(column.key)) {
+        return [
+            {
+                key: 'grouping-remove',
+                label: 'Remove grouping',
+                section: 'group',
+                onClick: ()=>api.actions.setGroupKeys(keys.filter((key)=>key !== column.key))
+            }
+        ];
+    }
+    return [
+        {
+            key: 'grouping-add',
+            label: 'Group by this column',
+            section: 'group',
+            onClick: ()=>api.actions.setGroupKeys([
+                    ...keys,
+                    column.key
+                ])
+        }
+    ];
+}
+export default groupingHeaderMenuItems;

package/dist/features/grouping/groupingToValue.js

@@ -0,0 +1,26 @@
+/*
+  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.
+*/ function groupingToValue({ state }) {
+    return {
+        view: {
+            group: state.grouping.map((key)=>({
+                    key
+                })),
+            collapsedGroups: state.collapsedGroups,
+            aggregates: state.aggregates
+        }
+    };
+}
+export default groupingToValue;