@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/core/Cell.js

@@ -0,0 +1,86 @@
+/*
+  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, { memo } from 'react';
+import renderCell from '@lowdefy/blocks-antd/table/renderCell.js';
+import LAZY_CELL_TYPES from './lazyCellTypes.js';
+import LazyCell from './LazyCell.js';
+function renderContent({ api, col, lead, original }) {
+    const rowKey = api.config.getKey(original);
+    if (LAZY_CELL_TYPES.has(col.column.type)) {
+        return /*#__PURE__*/ React.createElement(LazyCell, {
+            api: api,
+            col: col,
+            lead: lead,
+            original: original,
+            rowKey: rowKey
+        });
+    }
+    return renderCell({
+        column: col.column,
+        row: original,
+        rowKey,
+        methods: api.methods,
+        components: api.components,
+        onEvent: api.onCellEvent
+    });
+}
+// One grid cell. Memoised on the row object and the layout column, so a horizontal range change
+// only mounts the cells that came into range. The content is the shared column core's cell
+// (`renderCell`, the same renderers TableLight uses); renderers build their own event payloads
+// and `api.onCellEvent` passes them to the block's triggerEvent. Rich cell types mount on demand
+// through LazyCell (placeholders during fast scrolls, hover-only buttons on hover). `lead` (the
+// tree indent and chevron, the expand chevron) goes before the content in a row's first data
+// cell.
+function Cell({ api, col, focused, lead, original, selected }) {
+    if (col.special) {
+        return /*#__PURE__*/ React.createElement("div", {
+            "aria-colindex": col.ariaIndex,
+            className: "lf-table-gridcell lf-table-select",
+            "data-col-index": col.index,
+            "data-col-key": col.key,
+            "data-focused": focused ? '' : undefined,
+            "data-lf-cell": "",
+            "data-lf-select-cell": "",
+            "data-pinned": col.region === 'center' ? undefined : col.region,
+            "data-pinned-edge": col.pinnedEdge ? '' : undefined,
+            role: "gridcell",
+            style: col.style,
+            tabIndex: focused ? 0 : -1
+        }, /*#__PURE__*/ React.createElement(col.Cell, {
+            api: api,
+            selected: selected
+        }));
+    }
+    return /*#__PURE__*/ React.createElement("div", {
+        "aria-colindex": col.ariaIndex,
+        className: "lf-table-gridcell",
+        "data-align": col.column.align,
+        "data-col-index": col.index,
+        "data-col-key": col.key,
+        "data-focused": focused ? '' : undefined,
+        "data-lf-cell": "",
+        "data-pinned": col.region === 'center' ? undefined : col.region,
+        "data-pinned-edge": col.pinnedEdge ? '' : undefined,
+        role: "gridcell",
+        style: col.style,
+        tabIndex: focused ? 0 : -1
+    }, lead, renderContent({
+        api,
+        col,
+        lead,
+        original
+    }));
+}
+export default /*#__PURE__*/ memo(Cell);

package/dist/core/Chevron.js

@@ -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.
+*/ import React from 'react';
+function Chevron() {
+    return /*#__PURE__*/ React.createElement("svg", {
+        "aria-hidden": "true",
+        focusable: "false",
+        height: "12",
+        viewBox: "0 0 16 16",
+        width: "12"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M6 3.5 10.5 8 6 12.5",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.8"
+    }));
+}
+export default Chevron;

package/dist/core/EmptyState.js

@@ -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.
+*/ import React from 'react';
+import { Empty } from 'antd';
+import { renderHtml } from '@lowdefy/block-utils';
+// Blocks in the `empty` slot replace the default empty state; otherwise `emptyText` (html, as in
+// TableLight).
+function EmptyState({ content, methods, text }) {
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-empty-state",
+        "data-lf-empty": ""
+    }, content.empty ? content.empty() : /*#__PURE__*/ React.createElement(Empty, {
+        description: renderHtml({
+            html: text,
+            methods
+        }),
+        image: Empty.PRESENTED_IMAGE_SIMPLE
+    }));
+}
+export default EmptyState;

package/dist/core/Grid.js

@@ -0,0 +1,219 @@
+/*
+  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, { useMemo } from 'react';
+import { cn } from '@lowdefy/block-utils';
+import applyLayoutVars from './applyLayoutVars.js';
+import Body from './Body.js';
+import computeLayout from './computeLayout.js';
+import dispatchGridEvent from './dispatchGridEvent.js';
+import EmptyState from './EmptyState.js';
+import HeaderRow from './HeaderRow.js';
+import LoadingRows from './LoadingRows.js';
+import renderRegion from './renderRegion.js';
+import SummaryRow from './SummaryRow.js';
+import useGridFeatures from './useGridFeatures.js';
+import useViewportSize from './useViewportSize.js';
+function toCssSize(size) {
+    return typeof size === 'number' ? `${size}px` : size;
+}
+function hasSummary({ layout, summary }) {
+    if (summary === null) return false;
+    return layout.cols.some((col)=>!col.special && summary.has(col.key));
+}
+// The window component: one scroll container for header, body and summary footer (native scroll,
+// sticky header and footer). It owns the scroll-driven state (rendered ranges, active cell), so
+// scrolling renders the grid and never the block above it.
+function Grid({ api, blockId, classNames, clickable, config, headerHeight, isPending, leadingColumns, loading, regions, rowHeight, rowHeights, rows, state, strategy, styles, summary }) {
+    const { rootRef, scrollerRef } = api;
+    const levels = config.headerLevels;
+    const viewport = useViewportSize(scrollerRef);
+    const layout = useMemo(()=>computeLayout({
+            table: api.table,
+            leadingColumns,
+            viewportWidth: viewport.width,
+            wrap: state.wrap
+        }), [
+        config,
+        leadingColumns,
+        state.wrap,
+        state.columnOrder,
+        state.columnPinning,
+        state.columnSizing,
+        state.columnVisibility,
+        viewport.width
+    ]);
+    // Header group rows stack above the leaf header row, each one header row high.
+    const headerRowsHeight = headerHeight * (levels.depth + 1);
+    const showSummary = rows.length > 0 && hasSummary({
+        layout,
+        summary
+    });
+    const footerHeight = showSummary ? rowHeight : 0;
+    Object.assign(api, {
+        footerHeight,
+        headerHeight: headerRowsHeight,
+        layout,
+        rowHeight,
+        rows
+    });
+    api.previewLayout = ({ widths })=>applyLayoutVars({
+            element: rootRef.current,
+            layout: computeLayout({
+                table: api.table,
+                leadingColumns,
+                viewportWidth: viewport.width,
+                widths,
+                wrap: state.wrap
+            })
+        });
+    const { activeCell, measuredColumns, measureRows, range, rowOffsets, scrollerTabIndex } = useGridFeatures({
+        api,
+        config,
+        headerHeight: headerRowsHeight,
+        layout,
+        rowHeight,
+        rowHeights,
+        rows,
+        scrollerRef,
+        state,
+        strategy,
+        viewport
+    });
+    const centerCols = useMemo(()=>layout.center.slice(range.colStart, range.colEnd), [
+        layout,
+        range.colStart,
+        range.colEnd
+    ]);
+    const rootStyle = useMemo(()=>({
+            ...layout.vars,
+            '--lf-row-h': `${rowHeight}px`,
+            '--lf-header-h': `${headerHeight}px`,
+            ...styles.element
+        }), [
+        layout,
+        rowHeight,
+        headerHeight,
+        styles.element
+    ]);
+    const scrollerStyle = {
+        '--lf-center-before': `${layout.centerStarts[range.colStart] ?? 0}px`,
+        '--lf-viewport-w': `${viewport.width}px`
+    };
+    const fixedHeight = config.height !== undefined && config.height !== null;
+    if (fixedHeight) {
+        scrollerStyle.height = toCssSize(config.height);
+    } else {
+        scrollerStyle.maxHeight = toCssSize(config.maxHeight);
+    }
+    const rowClassName = cn('lf-table-row', classNames.row);
+    const dispatch = (eventType)=>(event)=>dispatchGridEvent({
+                api,
+                event,
+                eventType
+            });
+    // Body rows follow the header rows in aria-rowindex (1-based).
+    const ariaRowOffset = levels.depth + 2;
+    let body;
+    if (rows.length > 0) {
+        body = /*#__PURE__*/ React.createElement(Body, {
+            activeCell: activeCell,
+            api: api,
+            ariaRowOffset: ariaRowOffset,
+            centerCols: centerCols,
+            layout: layout,
+            measuredRows: measuredColumns,
+            measureRows: measureRows,
+            range: range,
+            rowClassName: rowClassName,
+            rowHeight: rowHeight,
+            rowOffsets: rowOffsets,
+            rowStyle: styles.row,
+            rows: rows,
+            selectable: Boolean(config.rowSelection),
+            selection: state.rowSelection
+        });
+    } else if (loading) {
+        body = /*#__PURE__*/ React.createElement(LoadingRows, {
+            layout: layout
+        });
+    } else {
+        body = /*#__PURE__*/ React.createElement(EmptyState, {
+            content: api.content,
+            methods: api.methods,
+            text: config.emptyText
+        });
+    }
+    return /*#__PURE__*/ React.createElement("div", {
+        className: cn('lf-table', classNames.element),
+        "data-bordered": config.bordered ? '' : undefined,
+        "data-clickable": clickable ? '' : undefined,
+        "data-pending": isPending ? '' : undefined,
+        id: blockId,
+        onAuxClick: dispatch('auxclick'),
+        onBlur: dispatch('blur'),
+        onClick: dispatch('click'),
+        onDoubleClick: dispatch('dblclick'),
+        onFocus: dispatch('focus'),
+        onKeyDown: dispatch('keydown'),
+        onPointerDown: dispatch('pointerdown'),
+        onPointerLeave: dispatch('pointerleave'),
+        onPointerOver: dispatch('pointerover'),
+        ref: rootRef,
+        style: rootStyle
+    }, loading && rows.length > 0 ? /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-loading-bar"
+    }) : null, renderRegion(regions.top), /*#__PURE__*/ React.createElement("div", {
+        "aria-busy": loading ? true : undefined,
+        "aria-colcount": layout.cols.length,
+        "aria-multiselectable": config.rowSelection?.type === 'checkbox' ? true : undefined,
+        "aria-rowcount": rows.length + levels.depth + 1 + (showSummary ? 1 : 0),
+        className: "lf-table-scroller",
+        "data-autoheight": fixedHeight ? undefined : '',
+        ref: scrollerRef,
+        role: config.tree ? 'treegrid' : 'grid',
+        style: scrollerStyle,
+        tabIndex: scrollerTabIndex
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-canvas"
+    }, /*#__PURE__*/ React.createElement(HeaderRow, {
+        activeCol: activeCell.row === -1 ? activeCell.col : -1,
+        api: api,
+        centerCols: centerCols,
+        className: cn('lf-table-header', classNames.header),
+        layout: layout,
+        levels: levels,
+        state: state,
+        sticky: config.stickyHeader,
+        style: styles.header
+    }), rows.length > 0 ? api.features.bodyOverlays.map((Overlay, i)=>/*#__PURE__*/ React.createElement(Overlay, {
+            api: api,
+            centerCols: centerCols,
+            headerHeight: headerRowsHeight,
+            key: i,
+            layout: layout,
+            rowClassName: rowClassName,
+            rows: rows,
+            selectable: Boolean(config.rowSelection),
+            selection: state.rowSelection,
+            sticky: config.stickyHeader
+        })) : null, body, showSummary ? /*#__PURE__*/ React.createElement(SummaryRow, {
+        api: api,
+        ariaRowIndex: rows.length + ariaRowOffset,
+        centerCols: centerCols,
+        layout: layout,
+        summary: summary
+    }) : null)), renderRegion(regions.bottom));
+}
+export default Grid;

package/dist/core/GroupHeaderRow.js

@@ -0,0 +1,81 @@
+/*
+  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 from 'react';
+import buildGroupSegments from './buildGroupSegments.js';
+import HeaderTitle from './HeaderTitle.js';
+function segmentStyle(cols) {
+    const first = cols[0];
+    const last = cols[cols.length - 1];
+    const widths = cols.map((col)=>`var(--lf-w${col.index})`);
+    // Widths are the columns' own CSS variables, so a resize drag moves the group edges too.
+    const style = {
+        width: widths.length === 1 ? widths[0] : `calc(${widths.join(' + ')})`
+    };
+    if (first.region === 'start') style.left = `var(--lf-l${first.index})`;
+    if (last.region === 'end') style.right = `var(--lf-r${last.index})`;
+    return style;
+}
+function renderSegments({ api, cols, level, levels }) {
+    return buildGroupSegments({
+        cols,
+        level,
+        ancestorsByKey: levels.ancestorsByKey
+    }).map((segment)=>{
+        const first = segment.cols[0];
+        const { node } = segment;
+        return /*#__PURE__*/ React.createElement("div", {
+            "aria-colindex": first.ariaIndex,
+            "aria-colspan": segment.cols.length,
+            className: "lf-table-gridcell lf-table-group-header",
+            "data-group": node ? node.key : undefined,
+            "data-pinned": first.region === 'center' ? undefined : first.region,
+            key: `${node ? node.key : '~'}:${first.key}`,
+            role: "columnheader",
+            style: segmentStyle(segment.cols)
+        }, node ? /*#__PURE__*/ React.createElement(HeaderTitle, {
+            api: api,
+            headerTooltip: node.headerTooltip,
+            title: node.title
+        }) : null);
+    });
+}
+// One row of header groups (`children` columns) above the leaf headers. Pinned groups stick with
+// their columns; centre groups follow column virtualisation (only rendered columns are spanned,
+// after the same spacer the leaf row uses).
+function GroupHeaderRow({ api, centerCols, layout, level, levels }) {
+    return /*#__PURE__*/ React.createElement("div", {
+        "aria-rowindex": level + 1,
+        className: "lf-table-row lf-table-group-row",
+        role: "row"
+    }, renderSegments({
+        api,
+        cols: layout.start,
+        level,
+        levels
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-center"
+    }, renderSegments({
+        api,
+        cols: centerCols,
+        level,
+        levels
+    })), renderSegments({
+        api,
+        cols: layout.end,
+        level,
+        levels
+    }));
+}
+export default GroupHeaderRow;

package/dist/core/HeaderCell.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.
+*/ import React from 'react';
+import getHeaderCellProps from './getHeaderCellProps.js';
+import HeaderTitle from './HeaderTitle.js';
+function HeaderCell({ api, col, focused, state }) {
+    const props = {
+        'aria-colindex': col.ariaIndex,
+        className: 'lf-table-gridcell',
+        'data-align': col.column?.align,
+        'data-col-index': col.index,
+        'data-col-key': col.key,
+        'data-focused': focused ? '' : undefined,
+        'data-lf-cell': '',
+        'data-lf-header': '',
+        'data-pinned': col.region === 'center' ? undefined : col.region,
+        'data-pinned-edge': col.pinnedEdge ? '' : undefined,
+        'data-special': col.special,
+        role: 'columnheader',
+        style: col.style,
+        tabIndex: focused ? 0 : -1,
+        ...col.special ? {} : getHeaderCellProps({
+            col,
+            features: api.features.list,
+            state
+        })
+    };
+    if (col.special) {
+        return /*#__PURE__*/ React.createElement('div', props, /*#__PURE__*/ React.createElement(col.Header, {
+            api: api,
+            state: state
+        }));
+    }
+    return /*#__PURE__*/ React.createElement('div', props, /*#__PURE__*/ React.createElement(HeaderTitle, {
+        api: api,
+        headerTooltip: col.column.headerTooltip,
+        title: col.column.title
+    }), ...api.features.headerParts.map((Part, i)=>/*#__PURE__*/ React.createElement(Part, {
+            api: api,
+            col: col,
+            focused: focused,
+            key: i,
+            state: state
+        })));
+}
+export default HeaderCell;

package/dist/core/HeaderRow.js

@@ -0,0 +1,76 @@
+/*
+  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 from 'react';
+import GroupHeaderRow from './GroupHeaderRow.js';
+import HeaderCell from './HeaderCell.js';
+function renderHeaderCells({ api, cols, activeCol, state }) {
+    return cols.map((col)=>/*#__PURE__*/ React.createElement(HeaderCell, {
+            api: api,
+            col: col,
+            focused: activeCol === col.index,
+            key: col.key,
+            state: state
+        }));
+}
+function renderGroupRows({ api, centerCols, layout, levels }) {
+    const groupRows = [];
+    for(let level = 0; level < levels.depth; level++){
+        groupRows.push(/*#__PURE__*/ React.createElement(GroupHeaderRow, {
+            api: api,
+            centerCols: centerCols,
+            key: level,
+            layout: layout,
+            level: level,
+            levels: levels
+        }));
+    }
+    return groupRows;
+}
+function HeaderRow({ activeCol, api, centerCols, className, layout, levels, state, sticky, style }) {
+    return /*#__PURE__*/ React.createElement("div", {
+        className: className,
+        "data-sticky": sticky ? undefined : 'false',
+        role: "rowgroup",
+        style: style
+    }, renderGroupRows({
+        api,
+        centerCols,
+        layout,
+        levels
+    }), /*#__PURE__*/ React.createElement("div", {
+        "aria-rowindex": levels.depth + 1,
+        className: "lf-table-row",
+        "data-row-index": -1,
+        role: "row"
+    }, renderHeaderCells({
+        api,
+        cols: layout.start,
+        activeCol,
+        state
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-center"
+    }, renderHeaderCells({
+        api,
+        cols: centerCols,
+        activeCol,
+        state
+    })), renderHeaderCells({
+        api,
+        cols: layout.end,
+        activeCol,
+        state
+    })));
+}
+export default HeaderRow;

package/dist/core/HeaderTitle.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 React from 'react';
+import { Tooltip } from 'antd';
+import { type } from '@lowdefy/helpers';
+import { renderHtml } from '@lowdefy/block-utils';
+function renderTitle({ api, title }) {
+    // Titles may hold HTML; plain titles skip the sanitiser.
+    if (type.isString(title) && title.includes('<')) {
+        return renderHtml({
+            className: 'lf-table-header-title',
+            html: title,
+            methods: api.methods
+        });
+    }
+    return /*#__PURE__*/ React.createElement("span", {
+        className: "lf-table-header-title"
+    }, title);
+}
+// A header title, with the column's (or group's) `headerTooltip` as an antd Tooltip, as in
+// TableLight. Headers are few, so the tooltip mounts with the header.
+function HeaderTitle({ api, headerTooltip, title }) {
+    const element = renderTitle({
+        api,
+        title
+    });
+    if (type.isNone(headerTooltip)) return element;
+    return /*#__PURE__*/ React.createElement(Tooltip, {
+        title: renderHtml({
+            html: headerTooltip,
+            methods: api.methods
+        })
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: "lf-table-header-tooltip"
+    }, element));
+}
+export default HeaderTitle;