@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/features/transactions/createApplyTransaction.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.
+*/ import normalizeTransaction from './normalizeTransaction.js';
+// Block method `applyTransaction({ add, update, remove, addIndex })` for push updates without
+// replacing `data`. Returns the counts `{ added, updated, removed }`. In server mode it applies
+// to the loaded blocks (see serverData).
+function createApplyTransaction(api) {
+    return function applyTransaction(params) {
+        const transaction = normalizeTransaction(params);
+        if (api.config.server) return api.serverStore.applyTransaction(transaction);
+        return api.applyClientTransaction(transaction);
+    };
+}
+export default createApplyTransaction;

package/dist/features/transactions/normalizeTransaction.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 { type } from '@lowdefy/helpers';
+function checkList({ list, name }) {
+    if (type.isUndefined(list)) return [];
+    if (!type.isArray(list)) {
+        throw new Error(`applyTransaction "${name}" must be a list. Received ${JSON.stringify(list)}.`);
+    }
+    return list;
+}
+// `{ add, update, remove, addIndex }`: rows to add, rows to merge into the row with the same key,
+// and rows (or row keys) to remove.
+function normalizeTransaction(transaction) {
+    if (!type.isObject(transaction)) {
+        throw new Error(`applyTransaction requires { add, update, remove }. Received ${JSON.stringify(transaction)}.`);
+    }
+    const { addIndex } = transaction;
+    if (!type.isUndefined(addIndex) && !type.isInt(addIndex)) {
+        throw new Error(`applyTransaction "addIndex" must be an integer. Received ${JSON.stringify(addIndex)}.`);
+    }
+    return {
+        add: checkList({
+            list: transaction.add,
+            name: 'add'
+        }),
+        update: checkList({
+            list: transaction.update,
+            name: 'update'
+        }),
+        remove: checkList({
+            list: transaction.remove,
+            name: 'remove'
+        }),
+        addIndex
+    };
+}
+export default normalizeTransaction;

package/dist/features/transactions/transactionsFeature.js

@@ -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.
+*/ import createApplyTransaction from './createApplyTransaction.js';
+import useTransactionData from './useTransactionData.js';
+const transactionsFeature = {
+    name: 'transactions',
+    useRows: useTransactionData,
+    methods: {
+        applyTransaction: createApplyTransaction
+    }
+};
+export default transactionsFeature;

package/dist/features/transactions/useTransactionData.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.
+*/ import { useRef, useState } from 'react';
+import applyTransactionToRows from './applyTransactionToRows.js';
+// Client mode keeps transaction results as an overlay on the rows: the table shows the
+// transformed rows until the app's `data` changes, which replaces them (the app's data is the
+// truth again). The rows are diffed by key already, so an engine update that re-evaluates the
+// same data keeps their identity and the overlay. Refs, not render state, hold the latest rows,
+// so two transactions in one tick both apply.
+function useTransactionData({ api, config, rows: data }) {
+    const overlay = useRef(null);
+    const source = useRef(data);
+    source.current = data;
+    const [, setVersion] = useState(0);
+    api.applyClientTransaction = (transaction)=>{
+        const current = overlay.current?.source === source.current ? overlay.current.rows : null;
+        const result = applyTransactionToRows({
+            rows: current ?? source.current,
+            transaction,
+            getKey: config.getKey
+        });
+        overlay.current = {
+            source: source.current,
+            rows: result.rows
+        };
+        setVersion((version)=>version + 1);
+        return result.changed;
+    };
+    if (config.server || overlay.current?.source !== data) return data;
+    return overlay.current.rows;
+}
+export default useTransactionData;

package/dist/features/tree/TreeToggle.js

@@ -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.
+*/ import React from 'react';
+import Chevron from '../../core/Chevron.js';
+// Indent and expand chevron in a tree row's first data cell. The delegated click handler
+// (handleTreeClick) does the toggling.
+function TreeToggle({ api, item }) {
+    const { tree } = api.config;
+    if (!tree || item.depth === undefined) return null;
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
+        className: "lf-table-tree-indent",
+        style: {
+            width: item.depth * tree.indent
+        }
+    }), item.hasChildren ? /*#__PURE__*/ React.createElement("button", {
+        "aria-expanded": item.expanded,
+        "aria-label": item.expanded ? 'Collapse row' : 'Expand row',
+        className: "lf-table-toggle",
+        "data-expanded": item.expanded ? '' : undefined,
+        "data-lf-tree-toggle": "",
+        tabIndex: -1,
+        type: "button"
+    }, /*#__PURE__*/ React.createElement(Chevron, null)) : /*#__PURE__*/ React.createElement("span", {
+        className: "lf-table-toggle-spacer"
+    }));
+}
+export default TreeToggle;

package/dist/features/tree/buildTreeIndex.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 { get, type } from '@lowdefy/helpers';
+// Parent and children of every loaded row, by row id. With `parentField` the parent is the row
+// whose key equals the field's value; a parent that is not in `data`, or a link that would close
+// a cycle, makes the row a root.
+function buildTreeIndex({ rows, getId, parentField, parentOf: flattenedParents }) {
+    const ids = new Set(rows.map(getId));
+    const parentOf = new Map();
+    rows.forEach((row)=>{
+        const id = getId(row);
+        let parentId = flattenedParents?.get(id);
+        if (parentField) {
+            const parentKey = get(row, parentField);
+            parentId = type.isNone(parentKey) ? undefined : String(parentKey);
+        }
+        if (parentId !== undefined && parentId !== id && ids.has(parentId)) {
+            parentOf.set(id, parentId);
+        }
+    });
+    parentOf.forEach((_, id)=>{
+        const seen = new Set([
+            id
+        ]);
+        let current = parentOf.get(id);
+        while(current !== undefined){
+            if (seen.has(current)) {
+                parentOf.delete(id);
+                return;
+            }
+            seen.add(current);
+            current = parentOf.get(current);
+        }
+    });
+    const childrenOf = new Map();
+    rows.forEach((row)=>{
+        const id = getId(row);
+        const parentId = parentOf.get(id);
+        if (parentId === undefined) return;
+        if (!childrenOf.has(parentId)) childrenOf.set(parentId, []);
+        childrenOf.get(parentId).push(id);
+    });
+    return {
+        parentOf,
+        childrenOf
+    };
+}
+export default buildTreeIndex;

package/dist/features/tree/buildTreeItems.js

@@ -0,0 +1,96 @@
+/*
+  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 { get } from '@lowdefy/helpers';
+function isSameItem({ item, row, depth, hasChildren, expanded }) {
+    return item !== undefined && item.row === row && item.depth === depth && item.hasChildren === hasChildren && item.expanded === expanded;
+}
+// The display list of a tree from the row model rows (already filtered and sorted): siblings keep
+// the order the rows arrive in, so a sort sorts within each level. Ancestors of every row the
+// filter kept stay in the list, so a match deep in the tree keeps its path. Children of collapsed
+// rows are left out. Unchanged rows keep their item object (and their memoised row component).
+function buildTreeItems({ rows, rowsById, parentOf, expandedIds, hasChildrenField, childrenOf, cache }) {
+    const inRows = new Set(rows.map((row)=>row.id));
+    const walked = new Set();
+    const visibleChildren = new Map();
+    const roots = [];
+    function emit(id) {
+        const parentId = parentOf.get(id);
+        if (parentId === undefined) {
+            roots.push(id);
+            return;
+        }
+        if (!visibleChildren.has(parentId)) visibleChildren.set(parentId, []);
+        visibleChildren.get(parentId).push(id);
+    }
+    // Ancestors the filter left out are placed just before their first descendant in row order,
+    // which is where their own sort position would be relative to their siblings' rows.
+    rows.forEach((row)=>{
+        const missing = [];
+        let ancestor = parentOf.get(row.id);
+        while(ancestor !== undefined && !walked.has(ancestor)){
+            walked.add(ancestor);
+            if (!inRows.has(ancestor)) missing.push(ancestor);
+            ancestor = parentOf.get(ancestor);
+        }
+        for(let i = missing.length - 1; i >= 0; i--)emit(missing[i]);
+        emit(row.id);
+    });
+    const items = [];
+    const stack = [];
+    for(let i = roots.length - 1; i >= 0; i--)stack.push({
+        id: roots[i],
+        depth: 0
+    });
+    while(stack.length > 0){
+        const { id, depth } = stack.pop();
+        const row = rowsById[id];
+        const children = visibleChildren.get(id);
+        const lazyChildren = hasChildrenField !== null && !childrenOf.has(id) && get(row.original, hasChildrenField) === true;
+        const hasChildren = children !== undefined || lazyChildren;
+        const expanded = hasChildren && expandedIds.has(id);
+        let item = cache.get(row);
+        if (!isSameItem({
+            item,
+            row,
+            depth,
+            hasChildren,
+            expanded
+        })) {
+            item = {
+                kind: 'row',
+                id,
+                row,
+                original: row.original,
+                index: row.index,
+                depth,
+                hasChildren,
+                expanded,
+                parentId: parentOf.get(id)
+            };
+            cache.set(row, item);
+        }
+        items.push(item);
+        if (expanded && children) {
+            for(let i = children.length - 1; i >= 0; i--){
+                stack.push({
+                    id: children[i],
+                    depth: depth + 1
+                });
+            }
+        }
+    }
+    return items;
+}
+export default buildTreeItems;

package/dist/features/tree/flattenTreeData.js

@@ -0,0 +1,45 @@
+/*
+  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 { get, type } from '@lowdefy/helpers';
+// Nested rows (`childrenField`) become one flat list in depth-first order, so sorting, selection
+// and diffing by key work on every node. `parentOf` maps each child's row id to its parent's.
+function flattenTreeData({ data, childrenField, getId }) {
+    const rows = [];
+    const parentOf = new Map();
+    const stack = [];
+    for(let i = data.length - 1; i >= 0; i--)stack.push({
+        row: data[i],
+        parentId: undefined
+    });
+    while(stack.length > 0){
+        const { row, parentId } = stack.pop();
+        rows.push(row);
+        const id = getId(row);
+        if (parentId !== undefined) parentOf.set(id, parentId);
+        const children = get(row, childrenField);
+        if (!type.isArray(children)) continue;
+        for(let i = children.length - 1; i >= 0; i--){
+            if (type.isObject(children[i])) stack.push({
+                row: children[i],
+                parentId: id
+            });
+        }
+    }
+    return {
+        rows,
+        parentOf
+    };
+}
+export default flattenTreeData;

package/dist/features/tree/getDescendantIds.js

@@ -0,0 +1,28 @@
+/*
+  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.
+*/ // Every descendant of a row, by row id (loaded rows only; filtered-out rows included).
+function getDescendantIds({ id, childrenOf }) {
+    const descendants = [];
+    const stack = [
+        ...childrenOf.get(id) ?? []
+    ];
+    while(stack.length > 0){
+        const current = stack.pop();
+        descendants.push(current);
+        stack.push(...childrenOf.get(current) ?? []);
+    }
+    return descendants;
+}
+export default getDescendantIds;

package/dist/features/tree/handleTreeClick.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.
+*/ function handleTreeClick(event, api) {
+    if (!api.config.tree) return false;
+    const toggle = event.target.closest('[data-lf-tree-toggle]');
+    if (!toggle || !api.contains(toggle)) return false;
+    const rowElement = toggle.closest('[data-row-key]');
+    api.actions.toggleRowExpanded({
+        id: rowElement.dataset.rowKey
+    });
+    return true;
+}
+export default handleTreeClick;

package/dist/features/tree/handleTreeKeyDown.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.
+*/ // In the tree column (the first data column), Right expands a collapsed row and Left collapses
+// an expanded one or moves to the parent row (the ARIA treegrid pattern). Otherwise the arrows
+// move between cells as usual.
+function handleTreeKeyDown(event, api) {
+    if (!api.config.tree || !api.config.keyboard) return false;
+    if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return false;
+    if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return false;
+    const cell = event.target.closest('[data-lf-cell]');
+    if (!cell || event.target !== cell || !api.contains(cell)) return false;
+    const rowElement = cell.closest('[data-row-key]');
+    if (!rowElement) return false;
+    const col = Number(cell.dataset.colIndex);
+    const leadIndex = api.layout.cols.find((layoutCol)=>!layoutCol.special)?.index;
+    if (col !== leadIndex) return false;
+    const item = api.rows[Number(rowElement.dataset.rowIndex)];
+    if (item?.depth === undefined) return false;
+    if (event.key === 'ArrowRight') {
+        if (!item.hasChildren || item.expanded) return false;
+        event.preventDefault();
+        api.actions.toggleRowExpanded({
+            id: item.id,
+            expanded: true
+        });
+        return true;
+    }
+    if (item.expanded) {
+        event.preventDefault();
+        api.actions.toggleRowExpanded({
+            id: item.id,
+            expanded: false
+        });
+        return true;
+    }
+    if (item.parentId === undefined) return false;
+    const parentIndex = api.rows.findIndex((row)=>row?.id === item.parentId);
+    if (parentIndex === -1) return false;
+    event.preventDefault();
+    api.keyboard.moveTo({
+        row: parentIndex,
+        col
+    });
+    return true;
+}
+export default handleTreeKeyDown;

package/dist/features/tree/needsTree.js

@@ -0,0 +1,20 @@
+/*
+  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';
+// Trees load when `tree` is set (normalizeTree validates it).
+function needsTree({ properties }) {
+    return !type.isNone(properties.tree);
+}
+export default needsTree;

package/dist/features/tree/normalizeTree.js

@@ -0,0 +1,41 @@
+/*
+  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';
+const DEFAULT_INDENT = 20;
+// `tree: { childrenField }` (nested rows) or `{ parentField }` (flat rows naming their parent's
+// row key). `lazy: true` shows a chevron on rows whose `hasChildrenField` is true before their
+// children are in `data`, and the app loads them on `onRowExpand`.
+function normalizeTree({ tree, server }) {
+    if (type.isNone(tree)) return null;
+    if (server) {
+        throw new Error('Table "tree" needs client data; server mode does not support trees.');
+    }
+    if (!type.isObject(tree)) {
+        throw new Error(`Table "tree" must be an object. Received ${JSON.stringify(tree)}.`);
+    }
+    const { childrenField, parentField } = tree;
+    if (type.isString(childrenField) === type.isString(parentField)) {
+        throw new Error(`Table "tree" requires one of "childrenField" or "parentField". Received ${JSON.stringify(tree)}.`);
+    }
+    const lazy = tree.lazy === true;
+    return {
+        childrenField: type.isString(childrenField) ? childrenField : null,
+        parentField: type.isString(parentField) ? parentField : null,
+        lazy,
+        hasChildrenField: lazy ? tree.hasChildrenField ?? 'hasChildren' : null,
+        indent: tree.indent ?? DEFAULT_INDENT
+    };
+}
+export default normalizeTree;

package/dist/features/tree/rowNeedsChildren.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.
+*/ import { get } from '@lowdefy/helpers';
+// With `tree.lazy`, a row needs its children loaded when it is marked with `hasChildrenField` and
+// none of its children are in `data` yet. onRowExpand says so (`needsChildren`), so the app loads
+// them once, not on every expand.
+function rowNeedsChildren({ api, id, row }) {
+    const { tree } = api.config;
+    if (!tree?.lazy || api.tree === null) return false;
+    if (get(row.original, tree.hasChildrenField) !== true) return false;
+    return !api.tree.childrenOf.has(id);
+}
+export default rowNeedsChildren;

package/dist/features/tree/tree.css

@@ -0,0 +1,55 @@
+/*
+  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.
+*/
+
+@layer components {
+  .lf-table-tree-indent {
+    display: inline-block;
+    flex: none;
+  }
+
+  .lf-table-toggle,
+  .lf-table-toggle-spacer {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-right: 4px;
+  }
+
+  .lf-table-toggle {
+    padding: 0;
+    color: var(--ant-color-text-tertiary, rgba(0, 0, 0, 0.45));
+    background: none;
+    border: 0;
+    border-radius: var(--ant-border-radius-sm, 4px);
+    cursor: pointer;
+  }
+
+  .lf-table-toggle:hover {
+    color: var(--ant-color-text, rgba(0, 0, 0, 0.88));
+    background: var(--ant-color-fill-tertiary, rgba(0, 0, 0, 0.04));
+  }
+
+  .lf-table-toggle svg {
+    transition: transform 0.15s;
+  }
+
+  .lf-table-toggle[data-expanded] svg {
+    transform: rotate(90deg);
+  }
+}