Latest changes

src/Griddy/rendering/TableCell.tsx

@@ -4,6 +4,7 @@ import { type Cell, flexRender } from '@tanstack/react-table';
 import { getGriddyColumn } from '../core/columnMapper';
 import { CSS, SELECTION_COLUMN_ID } from '../core/constants';
 import { useGriddyStore } from '../core/GriddyStore';
+import { TreeExpandButton } from '../features/tree/TreeExpandButton';
 import styles from '../styles/griddy.module.css';
 import { EditableCell } from './EditableCell';
 
@@ -20,6 +21,9 @@ export function TableCell<T>({ cell, showGrouping }: TableCellProps<T>) {
   const setEditing = useGriddyStore((s) => s.setEditing);
   const setFocusedColumn = useGriddyStore((s) => s.setFocusedColumn);
   const onEditCommit = useGriddyStore((s) => s.onEditCommit);
+  const tree = useGriddyStore((s) => s.tree);
+  const treeLoadingNodes = useGriddyStore((s) => s.treeLoadingNodes);
+  const selection = useGriddyStore((s) => s.selection);
 
   if (isSelectionCol) {
     return <RowCheckbox cell={cell} />;
@@ -59,6 +63,17 @@ export function TableCell<T>({ cell, showGrouping }: TableCellProps<T>) {
   const isAggregated = cell.getIsAggregated();
   const isPlaceholder = cell.getIsPlaceholder();
 
+  // Tree support
+  const depth = cell.row.depth;
+  const canExpand = cell.row.getCanExpand();
+  const isExpanded = cell.row.getIsExpanded();
+  const hasSelection = selection?.mode !== 'none';
+  const columnIndex = cell.column.getIndex();
+  // First content column is index 0 if no selection, or index 1 if selection enabled
+  const isFirstColumn = hasSelection ? columnIndex === 1 : columnIndex === 0;
+  const indentSize = tree?.indentSize ?? 20;
+  const showTreeButton = tree?.enabled && isFirstColumn && tree?.showExpandIcon !== false;
+
   return (
     <div
       className={[
@@ -72,12 +87,22 @@ export function TableCell<T>({ cell, showGrouping }: TableCellProps<T>) {
       role="gridcell"
       style={{
         left: leftOffset !== undefined ? `${leftOffset}px` : undefined,
+        paddingLeft: isFirstColumn && tree?.enabled ? `${depth * indentSize + 8}px` : undefined,
         position: isPinned ? 'sticky' : 'relative',
         right: rightOffset !== undefined ? `${rightOffset}px` : undefined,
         width: cell.column.getSize(),
         zIndex: isPinned ? 1 : 0,
       }}
     >
+      {showTreeButton && (
+        <TreeExpandButton
+          canExpand={canExpand}
+          icons={tree?.icons}
+          isExpanded={isExpanded}
+          isLoading={treeLoadingNodes.has(cell.row.id)}
+          onToggle={() => cell.row.toggleExpanded()}
+        />
+      )}
       {showGrouping && isGrouped && (
         <button
           onClick={() => cell.row.toggleExpanded()}