@zvndev/yable-react 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -1,19 +1,19 @@
 'use strict';
 
 var yableCore = require('@zvndev/yable-core');
-var React3 = require('react');
+var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var rowDragging = require('@zvndev/yable-core/features/rowDragging');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React4__default = /*#__PURE__*/_interopDefault(React4);
 
 // src/index.ts
-var YableContext = React3.createContext({});
+var YableContext = React4.createContext({});
 function useYableDefaults() {
-  return React3.useContext(YableContext);
+  return React4.useContext(YableContext);
 }
 function YableProvider({
   children,
@@ -131,7 +131,7 @@ function shallowEqual(a, b) {
 }
 function useTable(options) {
   const providerDefaults = useYableDefaults();
-  const optionsWithDefaults = React3.useMemo(() => {
+  const optionsWithDefaults = React4.useMemo(() => {
     const profile = resolveYableProfile(
       options.config ?? providerDefaults.config,
       options.configProfile ?? providerDefaults.tableProfile
@@ -156,7 +156,7 @@ function useTable(options) {
     providerDefaults.defaultColumnDef,
     providerDefaults.tableProfile
   ]);
-  const [state, setState] = React3.useState(() => ({
+  const [state, setState] = React4.useState(() => ({
     sorting: [],
     columnFilters: [],
     globalFilter: "",
@@ -193,26 +193,26 @@ function useTable(options) {
     ...options.initialState,
     ...options.state
   }));
-  const stateRef = React3.useRef(state);
+  const stateRef = React4.useRef(state);
   stateRef.current = state;
-  const prevOptionsRef = React3.useRef(optionsWithDefaults);
-  const stableOptions = React3.useMemo(() => {
+  const prevOptionsRef = React4.useRef(optionsWithDefaults);
+  const stableOptions = React4.useMemo(() => {
     if (shallowEqual(prevOptionsRef.current, optionsWithDefaults)) {
       return prevOptionsRef.current;
     }
     prevOptionsRef.current = optionsWithDefaults;
     return optionsWithDefaults;
   }, [optionsWithDefaults]);
-  const onStateChangeRef = React3.useRef(options.onStateChange);
+  const onStateChangeRef = React4.useRef(options.onStateChange);
   onStateChangeRef.current = options.onStateChange;
-  const resolvedState = React3.useMemo(
+  const resolvedState = React4.useMemo(
     () => ({
       ...state,
       ...stableOptions.state
     }),
     [state, stableOptions.state]
   );
-  const onStateChange = React3.useCallback((updater) => {
+  const onStateChange = React4.useCallback((updater) => {
     const latest = onStateChangeRef.current;
     if (latest) {
       latest(updater);
@@ -220,7 +220,7 @@ function useTable(options) {
       setState((prev) => yableCore.functionalUpdate(updater, prev));
     }
   }, []);
-  const resolvedOptions = React3.useMemo(
+  const resolvedOptions = React4.useMemo(
     () => ({
       ...stableOptions,
       state: resolvedState,
@@ -228,7 +228,7 @@ function useTable(options) {
     }),
     [stableOptions, resolvedState, onStateChange]
   );
-  const tableRef = React3.useRef(null);
+  const tableRef = React4.useRef(null);
   if (!tableRef.current) {
     tableRef.current = yableCore.createTable(resolvedOptions);
   } else {
@@ -241,7 +241,7 @@ function useTable(options) {
       })
     );
   }
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const table = tableRef.current;
     if (!table) return;
     const unsubscribers = [
@@ -267,7 +267,7 @@ function useTable(options) {
     options.onRowContextMenu,
     options.onRowDoubleClick
   ]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       if (tableRef.current) {
         tableRef.current.events.removeAllListeners();
@@ -292,26 +292,26 @@ function useServerTable({
   getRowId,
   ...tableOptions
 }) {
-  const [rows, setRows] = React3.useState(initialRows);
-  const [cursor, setCursor] = React3.useState(initialCursor);
-  const [hasMore, setHasMore] = React3.useState(initialHasMore);
-  const [rowCount, setRowCount] = React3.useState(initialRowCount);
-  const [pageCount, setPageCount] = React3.useState(initialPageCount);
-  const [sorting, setSorting] = React3.useState(initialSorting);
-  const [columnFilters, setColumnFilters] = React3.useState(initialColumnFilters);
-  const [globalFilter, setGlobalFilter] = React3.useState(initialGlobalFilter);
-  const [pagination, setPagination] = React3.useState(initialPagination);
-  const [loading, setLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const abortRef = React3.useRef(null);
-  const cursorRef = React3.useRef(cursor);
-  const fetchDataRef = React3.useRef(fetchData);
-  const updateRowRef = React3.useRef(updateRow);
-  const resolveRowId = React3.useCallback(
+  const [rows, setRows] = React4.useState(initialRows);
+  const [cursor, setCursor] = React4.useState(initialCursor);
+  const [hasMore, setHasMore] = React4.useState(initialHasMore);
+  const [rowCount, setRowCount] = React4.useState(initialRowCount);
+  const [pageCount, setPageCount] = React4.useState(initialPageCount);
+  const [sorting, setSorting] = React4.useState(initialSorting);
+  const [columnFilters, setColumnFilters] = React4.useState(initialColumnFilters);
+  const [globalFilter, setGlobalFilter] = React4.useState(initialGlobalFilter);
+  const [pagination, setPagination] = React4.useState(initialPagination);
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const abortRef = React4.useRef(null);
+  const cursorRef = React4.useRef(cursor);
+  const fetchDataRef = React4.useRef(fetchData);
+  const updateRowRef = React4.useRef(updateRow);
+  const resolveRowId = React4.useCallback(
     (row, index) => getRowId?.(row, index) ?? String(row.id ?? index),
     [getRowId]
   );
-  const runFetch = React3.useCallback(
+  const runFetch = React4.useCallback(
     async (mode) => {
       abortRef.current?.abort();
       const abort = new AbortController();
@@ -341,12 +341,12 @@ function useServerTable({
     },
     [columnFilters, globalFilter, pagination, sorting]
   );
-  const refresh = React3.useCallback(() => runFetch("replace"), [runFetch]);
-  const loadMore = React3.useCallback(async () => {
+  const refresh = React4.useCallback(() => runFetch("replace"), [runFetch]);
+  const loadMore = React4.useCallback(async () => {
     if (!hasMore || loading) return;
     await runFetch("append");
   }, [hasMore, loading, runFetch]);
-  const patchRow = React3.useCallback(
+  const patchRow = React4.useCallback(
     async (rowId, patch) => {
       const previousRow = rows.find((row, index) => resolveRowId(row, index) === rowId);
       setRows(
@@ -378,20 +378,20 @@ function useServerTable({
     },
     [resolveRowId, rows]
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     fetchDataRef.current = fetchData;
   }, [fetchData]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     updateRowRef.current = updateRow;
   }, [updateRow]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!autoLoad) return;
     void refresh();
   }, [autoLoad, refresh]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     cursorRef.current = cursor;
   }, [cursor]);
-  React3.useEffect(() => () => abortRef.current?.abort(), []);
+  React4.useEffect(() => () => abortRef.current?.abort(), []);
   const table = useTable({
     ...tableOptions,
     data: rows,
@@ -428,7 +428,7 @@ function useServerTable({
       setHasMore(true);
     }
   });
-  return React3.useMemo(
+  return React4.useMemo(
     () => ({
       table,
       rows,
@@ -528,25 +528,25 @@ function useTablePersistence(options) {
     version = 0,
     storage: customStorage
   } = options;
-  const storage = React3.useMemo(() => resolveStorage(customStorage), [customStorage]);
-  const initialState = React3.useMemo(
+  const storage = React4.useMemo(() => resolveStorage(customStorage), [customStorage]);
+  const initialState = React4.useMemo(
     () => readState(storage, key, version, persistedKeys),
     // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally read only on mount
     []
   );
-  const [state, setState] = React3.useState(initialState);
-  const timerRef = React3.useRef(null);
-  const keyRef = React3.useRef(key);
+  const [state, setState] = React4.useState(initialState);
+  const timerRef = React4.useRef(null);
+  const keyRef = React4.useRef(key);
   keyRef.current = key;
-  const versionRef = React3.useRef(version);
+  const versionRef = React4.useRef(version);
   versionRef.current = version;
-  const persistedKeysRef = React3.useRef(persistedKeys);
+  const persistedKeysRef = React4.useRef(persistedKeys);
   persistedKeysRef.current = persistedKeys;
-  const debounceRef = React3.useRef(debounceMs);
+  const debounceRef = React4.useRef(debounceMs);
   debounceRef.current = debounceMs;
-  const storageRef = React3.useRef(storage);
+  const storageRef = React4.useRef(storage);
   storageRef.current = storage;
-  const onStateChange = React3.useCallback((updater) => {
+  const onStateChange = React4.useCallback((updater) => {
     setState((prev) => {
       const next = yableCore.functionalUpdate(updater, prev);
       if (timerRef.current !== null) {
@@ -563,14 +563,14 @@ function useTablePersistence(options) {
       return next;
     });
   }, []);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       if (timerRef.current !== null) {
         clearTimeout(timerRef.current);
       }
     };
   }, []);
-  const clearPersistedState = React3.useCallback(() => {
+  const clearPersistedState = React4.useCallback(() => {
     const s = storageRef.current;
     if (s) {
       try {
@@ -599,10 +599,10 @@ function useVirtualization({
 }) {
   const hasPretextHeights = !!(pretextHeights && pretextPrefixSums && pretextHeights.length >= totalRows);
   const isFixedHeight = typeof rowHeight === "number" && !hasPretextHeights;
-  const heightCacheRef = React3.useRef(/* @__PURE__ */ new Map());
-  const heightCacheVersionRef = React3.useRef(0);
-  const [heightCacheVersion, setHeightCacheVersion] = React3.useState(0);
-  const getRowHeight = React3.useCallback(
+  const heightCacheRef = React4.useRef(/* @__PURE__ */ new Map());
+  const heightCacheVersionRef = React4.useRef(0);
+  const [heightCacheVersion, setHeightCacheVersion] = React4.useState(0);
+  const getRowHeight = React4.useCallback(
     (index) => {
       if (hasPretextHeights) return pretextHeights[index];
       if (isFixedHeight) return rowHeight;
@@ -616,9 +616,9 @@ function useVirtualization({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [rowHeight, isFixedHeight, hasPretextHeights, pretextHeights, heightCacheVersion]
   );
-  const [scrollState, setScrollState] = React3.useState({ scrollTop: 0, containerHeight: 0 });
-  const rafRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const [scrollState, setScrollState] = React4.useState({ scrollTop: 0, containerHeight: 0 });
+  const rafRef = React4.useRef(null);
+  React4.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     setScrollState({
@@ -662,24 +662,24 @@ function useVirtualization({
       }
     };
   }, [containerRef, totalRows]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!isFixedHeight) {
       heightCacheRef.current.clear();
     }
   }, [totalRows, isFixedHeight]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!isFixedHeight && columnSizingHash !== void 0) {
       heightCacheRef.current.clear();
       heightCacheVersionRef.current += 1;
       setHeightCacheVersion(heightCacheVersionRef.current);
     }
   }, [columnSizingHash]);
-  const invalidateRowHeights = React3.useCallback(() => {
+  const invalidateRowHeights = React4.useCallback(() => {
     heightCacheRef.current.clear();
     heightCacheVersionRef.current += 1;
     setHeightCacheVersion(heightCacheVersionRef.current);
   }, []);
-  const scrollTo = React3.useCallback(
+  const scrollTo = React4.useCallback(
     (index) => {
       const container = containerRef.current;
       if (!container || totalRows === 0) return;
@@ -706,7 +706,7 @@ function useVirtualization({
       pretextPrefixSums
     ]
   );
-  const totalHeight = React3.useMemo(() => {
+  const totalHeight = React4.useMemo(() => {
     if (totalRows === 0) return 0;
     if (hasPretextHeights && pretextPrefixSums) return pretextPrefixSums[totalRows];
     if (isFixedHeight) return totalRows * rowHeight;
@@ -855,18 +855,18 @@ function useColumnVirtualization({
   enabled = true,
   sizingKey
 }) {
-  const [scrollState, setScrollState] = React3.useState({
+  const [scrollState, setScrollState] = React4.useState({
     scrollLeft: 0,
     containerWidth: 0
   });
-  const rafRef = React3.useRef(null);
-  const sizes = React3.useMemo(
+  const rafRef = React4.useRef(null);
+  const sizes = React4.useMemo(
     () => columns.map((column) => column.getSize()),
     // `sizingKey` is an explicit invalidation hook for stable Column objects whose getSize value changed.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [columns, sizingKey]
   );
-  const offsets = React3.useMemo(() => {
+  const offsets = React4.useMemo(() => {
     const next = new Array(columns.length + 1);
     next[0] = 0;
     for (let i = 0; i < columns.length; i++) {
@@ -875,7 +875,7 @@ function useColumnVirtualization({
     return next;
   }, [columns.length, sizes]);
   const totalWidth = offsets[offsets.length - 1] ?? 0;
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     setScrollState({
@@ -922,7 +922,7 @@ function useColumnVirtualization({
       resizeObserver?.disconnect();
     };
   }, [containerRef]);
-  const scrollToIndex = React3.useCallback(
+  const scrollToIndex = React4.useCallback(
     (index) => {
       const container = containerRef.current;
       if (!container || columns.length === 0) return;
@@ -1010,12 +1010,12 @@ function usePretextMeasurement({
   minRowHeight = 32,
   enabled = true
 }) {
-  const [pretext, setPretext] = React3.useState(null);
-  const [ready, setReady] = React3.useState(false);
-  const prepareTimeRef = React3.useRef(0);
-  const layoutTimeRef = React3.useRef(0);
+  const [pretext, setPretext] = React4.useState(null);
+  const [ready, setReady] = React4.useState(false);
+  const prepareTimeRef = React4.useRef(0);
+  const layoutTimeRef = React4.useRef(0);
   const columnWidthsKey = columns.map((c) => `${c.columnId}:${c.width}`).join("|");
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!enabled) return;
     let cancelled = false;
     loadPretext().then((mod) => {
@@ -1025,8 +1025,8 @@ function usePretextMeasurement({
       cancelled = true;
     };
   }, [enabled]);
-  const preparedCacheRef = React3.useRef(/* @__PURE__ */ new Map());
-  const preparedCells = React3.useMemo(() => {
+  const preparedCacheRef = React4.useRef(/* @__PURE__ */ new Map());
+  const preparedCells = React4.useMemo(() => {
     if (!pretext || !enabled || data.length === 0 || columns.length === 0) return null;
     const cache = preparedCacheRef.current;
     const start = performance.now();
@@ -1053,7 +1053,7 @@ function usePretextMeasurement({
     data,
     columns.map((c) => `${c.columnId}:${c.font}:${c.fixedHeight ? "F" : "T"}`).join("|")
   ]);
-  const measurement = React3.useMemo(() => {
+  const measurement = React4.useMemo(() => {
     if (!pretext || !preparedCells) {
       return { rowHeights: null, prefixSums: null, totalHeight: 0 };
     }
@@ -1094,7 +1094,7 @@ function usePretextMeasurement({
       totalHeight: prefixSums[data.length]
     };
   }, [pretext, preparedCells, columnWidthsKey, minRowHeight, data.length]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (measurement.rowHeights) setReady(true);
   }, [measurement.rowHeights]);
   return {
@@ -1143,7 +1143,7 @@ function CellCurrency({
 }) {
   const raw = context.getValue();
   const num = typeof raw === "number" ? raw : Number(raw);
-  const formatter = React3.useMemo(
+  const formatter = React4.useMemo(
     () => new Intl.NumberFormat(locale, {
       style: "currency",
       currency,
@@ -1220,7 +1220,7 @@ function CellNumeric({
 }) {
   const raw = context.getValue();
   const num = typeof raw === "number" ? raw : Number(raw);
-  const formatter = React3.useMemo(
+  const formatter = React4.useMemo(
     () => new Intl.NumberFormat(locale, {
       minimumFractionDigits: decimals,
       maximumFractionDigits: decimals
@@ -1474,7 +1474,7 @@ function useAutoMeasurements({
   shouldMeasureColumn = defaultShouldMeasure
 }) {
   const widthKey = columns.map((c) => `${getColumnId2(c) ?? "?"}:${getColumnWidth(c)}`).join("|");
-  return React3.useMemo(() => {
+  return React4.useMemo(() => {
     const result = [];
     for (const col of columns) {
       const id = getColumnId2(col);
@@ -1511,7 +1511,7 @@ function useTableRowHeights({
     defaultRecipe,
     getColumnWidth
   });
-  const accessorMap = React3.useMemo(() => {
+  const accessorMap = React4.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const col of columns) {
       const id = col.id ?? col.accessorKey;
@@ -1528,7 +1528,7 @@ function useTableRowHeights({
     }
     return map;
   }, [columns]);
-  const getCellText = React3.useMemo(
+  const getCellText = React4.useMemo(
     () => (row, columnId) => {
       const get = accessorMap.get(columnId);
       if (!get) return "";
@@ -1547,10 +1547,10 @@ function useTableRowHeights({
   });
   return { ...result, measurements };
 }
-var TableContext = React3.createContext(null);
+var TableContext = React4.createContext(null);
 var TableProvider = TableContext.Provider;
 function useTableContext() {
-  const ctx = React3.useContext(TableContext);
+  const ctx = React4.useContext(TableContext);
   if (!ctx) {
     throw new Error(
       "[yable E001] useTableContext must be used within a <Table> component. Did you forget to pass the `table` prop?"
@@ -1611,7 +1611,7 @@ function formatValue(value) {
   return JSON.stringify(value);
 }
 function SetFilter({ column, className }) {
-  const [open, setOpen] = React3.useState(false);
+  const [open, setOpen] = React4.useState(false);
   const filterValue = column.getFilterValue();
   const selectedValues = Array.isArray(filterValue) ? filterValue : filterValue == null || filterValue === "" ? [] : [filterValue];
   const facetedUniqueValues = column.getFacetedUniqueValues();
@@ -1808,10 +1808,10 @@ function TableHeader({
 }) {
   const headerGroups = table.getHeaderGroups();
   const visibleColumns = table.getVisibleLeafColumns();
-  const theadRef = React3.useRef(null);
-  const reorderEndRef = React3.useRef(0);
-  const [drag, setDrag] = React3.useState(null);
-  const commitReorder = React3.useCallback(
+  const theadRef = React4.useRef(null);
+  const reorderEndRef = React4.useRef(0);
+  const [drag, setDrag] = React4.useState(null);
+  const commitReorder = React4.useCallback(
     (d) => {
       if (d.toIndex === d.fromIndex || d.toIndex === d.fromIndex + 1) return;
       const order = table.getState().columnOrder;
@@ -1825,7 +1825,7 @@ function TableHeader({
     },
     [table]
   );
-  const beginReorder = React3.useCallback(
+  const beginReorder = React4.useCallback(
     (e, columnId) => {
       if (e.button !== 0) return;
       const thead = theadRef.current;
@@ -1917,7 +1917,7 @@ function TableHeader({
     },
     [visibleColumns, table, commitReorder]
   );
-  const transformFor = React3.useCallback(
+  const transformFor = React4.useCallback(
     (columnId) => {
       if (!drag) return 0;
       const i = visibleColumns.findIndex((c) => c.id === columnId);
@@ -1965,7 +1965,7 @@ function TableHeader({
 function FloatingFilterCell({
   column
 }) {
-  const style = React3.useMemo(() => {
+  const style = React4.useMemo(() => {
     const next = {
       width: column.getSize(),
       minWidth: column.columnDef.minSize,
@@ -2003,7 +2003,7 @@ function HeaderCell({
   const canReorder = column.getCanReorder() && !header.isPlaceholder;
   const pinned = column.getIsPinned();
   const headerContent = header.isPlaceholder ? null : typeof column.columnDef.header === "function" ? column.columnDef.header(header.getContext()) : column.columnDef.header ?? header.id;
-  const style = React3.useMemo(() => {
+  const style = React4.useMemo(() => {
     const s = {
       width: header.getSize(),
       minWidth: column.columnDef.minSize,
@@ -2022,8 +2022,8 @@ function HeaderCell({
     }
     return s;
   }, [header, column, pinned, isDragSource, dragTransform]);
-  const lastResizeEndRef = React3.useRef(0);
-  const startResize = React3.useCallback(
+  const lastResizeEndRef = React4.useRef(0);
+  const startResize = React4.useCallback(
     (e) => {
       e.stopPropagation();
       const onEnd = () => {
@@ -2038,17 +2038,17 @@ function HeaderCell({
     },
     [header]
   );
-  const handleResizeClick = React3.useCallback((e) => {
+  const handleResizeClick = React4.useCallback((e) => {
     e.stopPropagation();
   }, []);
-  const handleContentPointerDown = React3.useCallback(
+  const handleContentPointerDown = React4.useCallback(
     (e) => {
       if (!canReorder || pinned) return;
       onReorderPointerDown(e, column.id);
     },
     [canReorder, pinned, onReorderPointerDown, column.id]
   );
-  const handleHeaderClick = React3.useCallback(
+  const handleHeaderClick = React4.useCallback(
     (e) => {
       table.events.emit("header:click", {
         column,
@@ -2063,7 +2063,7 @@ function HeaderCell({
     },
     [canSort, column, header, table.events, reorderEndRef]
   );
-  const handleHeaderContextMenu = React3.useCallback(
+  const handleHeaderContextMenu = React4.useCallback(
     (e) => {
       table.events.emit("header:contextmenu", {
         column,
@@ -2193,13 +2193,39 @@ function CellStatusBadge(props) {
     }
   );
 }
+function FillHandle({
+  rowIndex,
+  columnIndex,
+  onMouseDown
+}) {
+  const handleMouseDown = React4.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onMouseDown(rowIndex, columnIndex, e);
+    },
+    [rowIndex, columnIndex, onMouseDown]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "yable-fill-handle",
+      onMouseDown: handleMouseDown,
+      role: "presentation",
+      "aria-hidden": "true",
+      title: "Drag to fill",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "yable-fill-handle-dot" })
+    }
+  );
+}
 function TableCell({
   cell,
   table,
   rowIndex,
   columnIndex,
   isFocused,
-  isTabStop
+  isTabStop,
+  onFillHandleMouseDown
 }) {
   const column = cell.column;
   const isEditing = cell.getIsEditing();
@@ -2248,8 +2274,42 @@ function TableCell({
   } else {
     content = overrideValue !== void 0 ? overrideValue : cell.renderValue();
   }
-  const handleClick = React3.useCallback(
+  const isGroupRow = cell.row.getIsGrouped();
+  if (isGroupRow) {
+    if (column.id === cell.row.groupingColumnId) {
+      const expanded = cell.row.getIsExpanded();
+      content = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "yable-group-cell", style: { paddingLeft: cell.row.depth * 16 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "yable-group-toggle",
+            "aria-label": expanded ? "Collapse group" : "Expand group",
+            "aria-expanded": expanded,
+            onClick: cell.row.getToggleExpandedHandler(),
+            children: expanded ? "\u25BE" : "\u25B8"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "yable-group-value", children: String(cell.row.groupingValue ?? "") }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "yable-group-count", children: [
+          "(",
+          cell.row.getLeafRows().length,
+          ")"
+        ] })
+      ] });
+    } else {
+      const aggDef = column.columnDef.aggregatedCell;
+      if (typeof aggDef === "function") {
+        content = aggDef(cell.getContext());
+      } else {
+        const aggVal = cell.getValue();
+        content = aggVal == null ? null : aggVal;
+      }
+    }
+  }
+  const handleClick = React4.useCallback(
     (e) => {
+      if (cell.row.getIsGrouped()) return;
       table.events.emit("cell:click", {
         cell,
         row: cell.row,
@@ -2262,7 +2322,7 @@ function TableCell({
     },
     [cell, column, isAlwaysEditable, isEditing, isMultiCellSelection, table]
   );
-  const handleDoubleClick = React3.useCallback(
+  const handleDoubleClick = React4.useCallback(
     (e) => {
       table.events.emit("cell:dblclick", {
         cell,
@@ -2273,7 +2333,7 @@ function TableCell({
     },
     [table, cell]
   );
-  const handleContextMenu = React3.useCallback(
+  const handleContextMenu = React4.useCallback(
     (e) => {
       table.events.emit("cell:contextmenu", {
         cell,
@@ -2284,11 +2344,11 @@ function TableCell({
     },
     [table, cell]
   );
-  const handleFocus = React3.useCallback(() => {
+  const handleFocus = React4.useCallback(() => {
     if (!keyboardNavigationEnabled) return;
     table.setFocusedCell({ rowIndex, columnIndex });
   }, [columnIndex, keyboardNavigationEnabled, rowIndex, table]);
-  const handleMouseDown = React3.useCallback(
+  const handleMouseDown = React4.useCallback(
     (e) => {
       if (e.button !== 0) return;
       if (!cellSelectionEnabled) return;
@@ -2301,12 +2361,12 @@ function TableCell({
     },
     [cellSelectionEnabled, columnIndex, rowIndex, table]
   );
-  const handleMouseEnter = React3.useCallback(() => {
+  const handleMouseEnter = React4.useCallback(() => {
     if (!cellSelectionEnabled) return;
     if (!table.getState().cellSelection?.isDragging) return;
     table.updateCellRangeSelection({ rowIndex, columnIndex });
   }, [cellSelectionEnabled, columnIndex, rowIndex, table]);
-  const handleMouseUp = React3.useCallback(() => {
+  const handleMouseUp = React4.useCallback(() => {
     if (!table.getState().cellSelection?.isDragging) return;
     table.endCellRangeSelection();
   }, [table]);
@@ -2315,6 +2375,7 @@ function TableCell({
   const cellStyleDef = column.columnDef.cellStyle;
   const userStyle = typeof cellStyleDef === "function" ? cellStyleDef(cell.getContext()) : cellStyleDef;
   const mergedStyle = userStyle ? { ...style, ...userStyle } : style;
+  const showFillHandle = isFocused && Boolean(table.options.enableFillHandle) && onFillHandleMouseDown != null && !isGroupRow;
   const classNames = [
     "yable-td",
     isFocused && "yable-cell--focused",
@@ -2335,6 +2396,7 @@ function TableCell({
       "data-pinned": pinned || void 0,
       "data-cell-status": cellStatus !== "idle" ? cellStatus : void 0,
       "data-column-id": column.id,
+      "data-grouped": isGroupRow || void 0,
       "data-row-index": rowIndex,
       "data-column-index": columnIndex,
       "data-cell-selected": isCellSelected || void 0,
@@ -2368,6 +2430,14 @@ function TableCell({
             onRetry: () => void table.retryCommit(cell.row.id, column.id),
             onDismiss: () => table.dismissCommit(cell.row.id, column.id)
           }
+        ),
+        showFillHandle && onFillHandleMouseDown && /* @__PURE__ */ jsxRuntime.jsx(
+          FillHandle,
+          {
+            rowIndex,
+            columnIndex,
+            onMouseDown: onFillHandleMouseDown
+          }
         )
       ]
     }
@@ -2380,7 +2450,7 @@ function isInteractiveClickTarget(element) {
   );
   return interactive !== null;
 }
-var ErrorBoundary = class extends React3__default.default.Component {
+var ErrorBoundary = class extends React4__default.default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -2426,7 +2496,7 @@ var ErrorBoundary = class extends React3__default.default.Component {
     return this.props.children;
   }
 };
-var CellErrorBoundary = class extends React3__default.default.Component {
+var CellErrorBoundary = class extends React4__default.default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -2499,7 +2569,8 @@ function MasterDetail({
 function TableBody({
   table,
   clickableRows,
-  colgroup
+  colgroup,
+  onFillHandleMouseDown
 }) {
   const rows = table.getRowModel().rows;
   const visibleColumns = table.getVisibleLeafColumns();
@@ -2512,14 +2583,14 @@ function TableBody({
   const pendingValues = table.getState().editing.pendingValues ?? {};
   const options = table.options;
   const enableVirtualization = options.enableVirtualization ?? false;
-  const scrollContainerRef = React3.useRef(null);
+  const scrollContainerRef = React4.useRef(null);
   const rowHeight = options.rowHeight ?? 40;
   const overscan = options.overscan ?? 5;
   const estimateRowHeight = options.estimateRowHeight;
   const pretextHeights = options.pretextHeights ?? null;
   const pretextPrefixSums = options.pretextPrefixSums ?? null;
   const columnSizing = table.getState().columnSizing;
-  const columnSizingHash = React3.useMemo(() => {
+  const columnSizingHash = React4.useMemo(() => {
     const entries = Object.entries(columnSizing);
     if (entries.length === 0) return 0;
     let h = 0;
@@ -2542,7 +2613,7 @@ function TableBody({
     columnSizingHash
   });
   const cellSelectionKey = cellSelection.range ? `${cellSelection.range.start.rowIndex}:${cellSelection.range.start.columnIndex}:${cellSelection.range.end.rowIndex}:${cellSelection.range.end.columnIndex}:${cellSelection.isDragging ? "dragging" : "idle"}` : `none:${cellSelection.isDragging ? "dragging" : "idle"}`;
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const handleWindowMouseUp = () => {
       if (table.getState().cellSelection?.isDragging) {
         table.endCellRangeSelection();
@@ -2568,7 +2639,8 @@ function TableBody({
       cellSelectionKey,
       pendingValuesKey: getPendingValuesKey(pendingValues[row.id]),
       clickable: clickableRows,
-      pinnedPosition
+      pinnedPosition,
+      onFillHandleMouseDown
     },
     row.id
   );
@@ -2637,6 +2709,7 @@ function TableBody({
                       cellSelectionKey,
                       pendingValuesKey: getPendingValuesKey(pendingValues[row.id]),
                       clickable: clickableRows,
+                      onFillHandleMouseDown,
                       virtualStyle: {
                         position: "absolute",
                         top: 0,
@@ -2671,11 +2744,12 @@ function TableRowInner({
   pendingValuesKey: _pendingValuesKey,
   clickable,
   pinnedPosition,
-  virtualStyle
+  virtualStyle,
+  onFillHandleMouseDown
 }) {
   const allCells = row.getAllCells();
   const visibleCells = visibleColumns.map((column) => allCells.find((cell) => cell.column.id === column.id)).filter((cell) => cell != null);
-  const handleClick = React3.useCallback(
+  const handleClick = React4.useCallback(
     (e) => {
       if (table.options.enableRowClickSelection && row.getCanSelect() && !isInteractiveClickTarget2(e.target)) {
         row.toggleSelected();
@@ -2689,7 +2763,7 @@ function TableRowInner({
     },
     [clickable, table, row]
   );
-  const handleDoubleClick = React3.useCallback(
+  const handleDoubleClick = React4.useCallback(
     (e) => {
       table.events.emit("row:dblclick", {
         row,
@@ -2698,7 +2772,7 @@ function TableRowInner({
     },
     [table.events, row]
   );
-  const handleContextMenu = React3.useCallback(
+  const handleContextMenu = React4.useCallback(
     (e) => {
       table.events.emit("row:contextmenu", {
         row,
@@ -2751,7 +2825,8 @@ function TableRowInner({
                   rowIndex,
                   columnIndex,
                   isFocused,
-                  isTabStop
+                  isTabStop,
+                  onFillHandleMouseDown
                 }
               )
             },
@@ -2785,7 +2860,7 @@ function areRowPropsEqual(prev, next) {
   if (prev.table !== next.table) return false;
   return true;
 }
-var MemoizedTableRow = React3__default.default.memo(TableRowInner, areRowPropsEqual);
+var MemoizedTableRow = React4__default.default.memo(TableRowInner, areRowPropsEqual);
 function getPendingValuesKey(values) {
   if (!values) return "";
   return Object.keys(values).sort().map((key) => `${key}:${String(values[key])}`).join("|");
@@ -3003,8 +3078,8 @@ function StatusDivider() {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "yable-status-bar-divider", "aria-hidden": "true" });
 }
 function PanelGroup({ children }) {
-  const items = React3__default.default.Children.toArray(children).filter(Boolean);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((child, i) => /* @__PURE__ */ jsxRuntime.jsxs(React3__default.default.Fragment, { children: [
+  const items = React4__default.default.Children.toArray(children).filter(Boolean);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((child, i) => /* @__PURE__ */ jsxRuntime.jsxs(React4__default.default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsxRuntime.jsx(StatusDivider, {}),
     child
   ] }, i)) });
@@ -3141,8 +3216,8 @@ function VisibilityIcon({ visible }) {
   ] });
 }
 function ColumnsPanel({ table }) {
-  const [search, setSearch] = React3.useState("");
-  const [draggedId, setDraggedId] = React3.useState(null);
+  const [search, setSearch] = React4.useState("");
+  const [draggedId, setDraggedId] = React4.useState(null);
   const allColumns = table.getAllLeafColumns();
   const columnOrder = table.getState().columnOrder;
   const columns = columnOrder && columnOrder.length > 0 ? [...allColumns].sort((a, b) => {
@@ -3155,25 +3230,25 @@ function ColumnsPanel({ table }) {
     const header = typeof col.columnDef.header === "string" ? col.columnDef.header : col.id;
     return header.toLowerCase().includes(search.toLowerCase());
   }) : columns;
-  const handleToggleAll = React3.useCallback(
+  const handleToggleAll = React4.useCallback(
     (visible) => {
       table.toggleAllColumnsVisible(visible);
     },
     [table]
   );
-  const handleDragStart = React3.useCallback((e, columnId) => {
+  const handleDragStart = React4.useCallback((e, columnId) => {
     setDraggedId(columnId);
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/plain", columnId);
   }, []);
-  const handleDragOver = React3.useCallback((e) => {
+  const handleDragOver = React4.useCallback((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
   }, []);
-  const handleDragEnd = React3.useCallback(() => {
+  const handleDragEnd = React4.useCallback(() => {
     setDraggedId(null);
   }, []);
-  const handleDrop = React3.useCallback(
+  const handleDrop = React4.useCallback(
     (e, targetId) => {
       e.preventDefault();
       if (!draggedId || draggedId === targetId) return;
@@ -3298,7 +3373,7 @@ function FiltersPanel({
   const globalFilter = table.getState().globalFilter;
   const hasFilters = columnFilters.length > 0 || Boolean(globalFilter);
   const filterCount = columnFilters.length + (globalFilter ? 1 : 0);
-  const handleRemoveColumnFilter = React3.useCallback(
+  const handleRemoveColumnFilter = React4.useCallback(
     (columnId) => {
       table.setColumnFilters(
         (prev) => prev.filter((f) => f.id !== columnId)
@@ -3306,7 +3381,7 @@ function FiltersPanel({
     },
     [table]
   );
-  const handleClearAll = React3.useCallback(() => {
+  const handleClearAll = React4.useCallback(() => {
     table.resetColumnFilters(true);
     table.resetGlobalFilter(true);
   }, [table]);
@@ -3400,8 +3475,8 @@ function Sidebar({
   activePanel,
   onPanelChange
 }) {
-  const sidebarRef = React3.useRef(null);
-  const handleKeyDown = React3.useCallback(
+  const sidebarRef = React4.useRef(null);
+  const handleKeyDown = React4.useCallback(
     (e) => {
       if (e.key === "Escape" && open) {
         onClose();
@@ -3409,7 +3484,7 @@ function Sidebar({
     },
     [open, onClose]
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [handleKeyDown]);
@@ -3491,11 +3566,11 @@ function Sidebar({
   );
 }
 function ContextMenuItem({ item, onClose }) {
-  const [submenuOpen, setSubmenuOpen] = React3.useState(false);
-  const itemRef = React3.useRef(null);
-  const submenuRef = React3.useRef(null);
-  const timerRef = React3.useRef(void 0);
-  React3.useEffect(() => {
+  const [submenuOpen, setSubmenuOpen] = React4.useState(false);
+  const itemRef = React4.useRef(null);
+  const submenuRef = React4.useRef(null);
+  const timerRef = React4.useRef(void 0);
+  React4.useEffect(() => {
     return () => clearTimeout(timerRef.current);
   }, []);
   if (item.separator) {
@@ -3579,8 +3654,8 @@ function ContextMenu({
   targetColumnId,
   customItems
 }) {
-  const menuRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const menuRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (!menuRef.current) return;
     const rect = menuRef.current.getBoundingClientRect();
     const vw = window.innerWidth;
@@ -3592,11 +3667,11 @@ function ContextMenu({
       menuRef.current.style.top = `${y - rect.height}px`;
     }
   }, [x, y]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const firstItem = menuRef.current?.querySelector('[role="menuitem"]');
     firstItem?.focus();
   }, []);
-  const handleKeyDown = React3.useCallback(
+  const handleKeyDown = React4.useCallback(
     (e) => {
       if (e.key === "Escape") {
         onClose();
@@ -3774,12 +3849,12 @@ function ContextMenu({
   ] });
 }
 function useContextMenu() {
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const [x, setX] = React3.useState(0);
-  const [y, setY] = React3.useState(0);
-  const [targetTable, setTargetTable] = React3.useState(null);
-  const [targetColumnId, setTargetColumnId] = React3.useState(void 0);
-  const open = React3.useCallback(
+  const [isOpen, setIsOpen] = React4.useState(false);
+  const [x, setX] = React4.useState(0);
+  const [y, setY] = React4.useState(0);
+  const [targetTable, setTargetTable] = React4.useState(null);
+  const [targetColumnId, setTargetColumnId] = React4.useState(void 0);
+  const open = React4.useCallback(
     (clientX, clientY, table, columnId) => {
       setX(clientX);
       setY(clientY);
@@ -3789,12 +3864,12 @@ function useContextMenu() {
     },
     []
   );
-  const close = React3.useCallback(() => {
+  const close = React4.useCallback(() => {
     setIsOpen(false);
     setTargetTable(null);
     setTargetColumnId(void 0);
   }, []);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") close();
@@ -3818,7 +3893,7 @@ function useKeyboardNavigation(table, options = {}) {
   const activeCell = table.getState().editing.activeCell;
   const focusedRowIndex = focusedCell?.rowIndex ?? null;
   const focusedColumnIndex = focusedCell?.columnIndex ?? null;
-  const focusCellElement = React3.useCallback(
+  const focusCellElement = React4.useCallback(
     (container, cell) => {
       const element = getCellElement(container, cell);
       if (!element) return false;
@@ -3833,7 +3908,7 @@ function useKeyboardNavigation(table, options = {}) {
     },
     []
   );
-  const handleKeyDown = React3.useCallback(
+  const handleKeyDown = React4.useCallback(
     (event) => {
       if (!enabled || table.options.enableKeyboardNavigation === false) return;
       const target = event.target;
@@ -3907,7 +3982,7 @@ function useKeyboardNavigation(table, options = {}) {
     },
     [activeCell, containerRef, enabled, table]
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!enabled || table.options.enableKeyboardNavigation === false) return;
     const container = containerRef?.current;
     if (!container) return;
@@ -3916,7 +3991,7 @@ function useKeyboardNavigation(table, options = {}) {
       container.removeEventListener("keydown", handleKeyDown);
     };
   }, [containerRef, enabled, handleKeyDown, table.options.enableKeyboardNavigation]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!enabled || table.options.enableKeyboardNavigation === false) return;
     if (focusedRowIndex === null || focusedColumnIndex === null) return;
     if (activeCell) return;
@@ -4007,6 +4082,85 @@ function isEditableTarget(element) {
   }
   return element.isContentEditable;
 }
+function useFillHandle(table, options = {}) {
+  const { enabled = true } = options;
+  const [dragState, setDragState] = React4.useState({
+    isDragging: false,
+    sourceCell: null,
+    currentCell: null
+  });
+  const dragRef = React4.useRef(dragState);
+  dragRef.current = dragState;
+  const onFillHandleMouseDown = React4.useCallback(
+    (rowIndex, columnIndex, e) => {
+      if (!enabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setDragState({
+        isDragging: true,
+        sourceCell: { rowIndex, columnIndex },
+        currentCell: { rowIndex, columnIndex }
+      });
+    },
+    [enabled]
+  );
+  React4.useEffect(() => {
+    if (!dragState.isDragging) return;
+    const handleMouseMove = (e) => {
+      const target = document.elementFromPoint(e.clientX, e.clientY);
+      if (!target) return;
+      const td = target.closest("td[data-column-id]");
+      const tr = target.closest("tr[data-row-id]");
+      if (!td || !tr) return;
+      const columnId = td.getAttribute("data-column-id");
+      const rowId = tr.getAttribute("data-row-id");
+      if (!columnId || !rowId) return;
+      const rows = table.getRowModel().rows;
+      const columns = table.getVisibleLeafColumns();
+      const rowIndex = rows.findIndex((r) => r.id === rowId);
+      const columnIndex = columns.findIndex((c) => c.id === columnId);
+      if (rowIndex === -1 || columnIndex === -1) return;
+      setDragState((prev) => ({
+        ...prev,
+        currentCell: { rowIndex, columnIndex }
+      }));
+    };
+    const handleMouseUp = () => {
+      const current = dragRef.current;
+      if (current.sourceCell && current.currentCell) {
+        const source = current.sourceCell;
+        const target = current.currentCell;
+        if (source.rowIndex !== target.rowIndex || source.columnIndex !== target.columnIndex) {
+          const sourceRange = {
+            startRow: source.rowIndex,
+            startCol: source.columnIndex,
+            endRow: source.rowIndex,
+            endCol: source.columnIndex
+          };
+          const targetRange = {
+            startRow: Math.min(source.rowIndex, target.rowIndex),
+            startCol: Math.min(source.columnIndex, target.columnIndex),
+            endRow: Math.max(source.rowIndex, target.rowIndex),
+            endCol: Math.max(source.columnIndex, target.columnIndex)
+          };
+          table.fillRange(sourceRange, targetRange);
+        }
+      }
+      setDragState({
+        isDragging: false,
+        sourceCell: null,
+        currentCell: null
+      });
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [dragState.isDragging, table]);
+  return { dragState, onFillHandleMouseDown };
+}
 function filterHeaderGroups(groups, visibleColumnIds) {
   return groups.map((group) => ({
     ...group,
@@ -4069,12 +4223,12 @@ function Table({
   const resolvedFloatingFilters = floatingFilters ?? profileTableProps?.floatingFilters;
   const resolvedColumnVirtualization = columnVirtualization ?? profileTableProps?.columnVirtualization;
   const resolvedColumnVirtualizationOverscan = columnVirtualizationOverscan ?? profileTableProps?.columnVirtualizationOverscan;
-  const [sidebarOpen, setSidebarOpen] = React3.useState(false);
-  const [sidebarPanel, setSidebarPanel] = React3.useState(
+  const [sidebarOpen, setSidebarOpen] = React4.useState(false);
+  const [sidebarPanel, setSidebarPanel] = React4.useState(
     resolvedDefaultSidebarPanel ?? "columns"
   );
-  const containerRef = React3.useRef(null);
-  const horizontalScrollRef = React3.useRef(null);
+  const containerRef = React4.useRef(null);
+  const horizontalScrollRef = React4.useRef(null);
   const isRtl = direction === "rtl";
   const classNames = [
     "yable",
@@ -4104,7 +4258,7 @@ function Table({
     enabled: canVirtualizeColumns,
     sizingKey: allVisibleColumnSizeSignature
   });
-  const renderTable = React3.useMemo(() => {
+  const renderTable = React4.useMemo(() => {
     if (!canVirtualizeColumns || !columnVirtualState.isVirtualized) {
       return table;
     }
@@ -4130,13 +4284,16 @@ function Table({
   const showColumnVirtualizationShell = canVirtualizeColumns;
   const contextMenu = useContextMenu();
   useKeyboardNavigation(table, { containerRef });
-  const [announcement, setAnnouncement] = React3.useState("");
-  const prevSortingRef = React3.useRef(table.getState().sorting);
-  const prevFilterCountRef = React3.useRef(rows.length);
-  const prevHasFiltersRef = React3.useRef(isFiltered);
-  const prevPaginationRef = React3.useRef(table.getState().pagination);
-  const isFirstRenderRef = React3.useRef(true);
-  React3.useEffect(() => {
+  const { onFillHandleMouseDown } = useFillHandle(table, {
+    enabled: Boolean(table.options.enableFillHandle)
+  });
+  const [announcement, setAnnouncement] = React4.useState("");
+  const prevSortingRef = React4.useRef(table.getState().sorting);
+  const prevFilterCountRef = React4.useRef(rows.length);
+  const prevHasFiltersRef = React4.useRef(isFiltered);
+  const prevPaginationRef = React4.useRef(table.getState().pagination);
+  const isFirstRenderRef = React4.useRef(true);
+  React4.useEffect(() => {
     if (isFirstRenderRef.current) {
       isFirstRenderRef.current = false;
       return;
@@ -4174,7 +4331,7 @@ function Table({
       }
     }
   });
-  const handleContextMenu = React3.useCallback(
+  const handleContextMenu = React4.useCallback(
     (e) => {
       e.preventDefault();
       const targetEl = e.target?.closest?.("[data-column-id]");
@@ -4189,7 +4346,7 @@ function Table({
     0
   );
   const colgroup = visibleLeafColumns.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: visibleLeafColumns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: col.getSize() } }, col.id)) });
-  const outerTableStyle = React3.useMemo(() => {
+  const outerTableStyle = React4.useMemo(() => {
     if (columnVirtualState.isVirtualized) {
       return {
         width: columnVirtualState.visibleWidth,
@@ -4217,7 +4374,15 @@ function Table({
       children: [
         colgroup,
         /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { table: renderTable, floatingFilters: resolvedFloatingFilters }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableBody, { table: renderTable, clickableRows: resolvedClickableRows, colgroup }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TableBody,
+          {
+            table: renderTable,
+            clickableRows: resolvedClickableRows,
+            colgroup,
+            onFillHandleMouseDown
+          }
+        ),
         footer && /* @__PURE__ */ jsxRuntime.jsx(TableFooter, { table: renderTable })
       ]
     }
@@ -4539,12 +4704,12 @@ function GlobalFilter({
 }) {
   const locale = yableCore.getDefaultLocale();
   const resolvedPlaceholder = placeholder ?? locale.searchPlaceholder;
-  const [value, setValue] = React3.useState(
+  const [value, setValue] = React4.useState(
     table.getState().globalFilter ?? ""
   );
-  const timerRef = React3.useRef(void 0);
-  const inputRef = React3.useRef(null);
-  const handleChange = React3.useCallback(
+  const timerRef = React4.useRef(void 0);
+  const inputRef = React4.useRef(null);
+  const handleChange = React4.useCallback(
     (e) => {
       const newValue = e.target.value;
       setValue(newValue);
@@ -4559,13 +4724,13 @@ function GlobalFilter({
     },
     [table, debounce]
   );
-  const handleClear = React3.useCallback(() => {
+  const handleClear = React4.useCallback(() => {
     setValue("");
     table.setGlobalFilter("");
     clearTimeout(timerRef.current);
     inputRef.current?.focus();
   }, [table]);
-  const handleKeyDown = React3.useCallback(
+  const handleKeyDown = React4.useCallback(
     (e) => {
       if (e.key === "Escape" && value) {
         e.preventDefault();
@@ -4574,10 +4739,10 @@ function GlobalFilter({
     },
     [value, handleClear]
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return () => clearTimeout(timerRef.current);
   }, []);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const externalValue = table.getState().globalFilter ?? "";
     if (externalValue !== value) {
       setValue(externalValue);
@@ -4622,7 +4787,7 @@ function CellInput({
   className
 }) {
   const { table, row, column, cell } = context;
-  const inputRef = React3.useRef(null);
+  const inputRef = React4.useRef(null);
   const isEditing = cell.getIsEditing();
   const isAlwaysEditable = cell.getIsAlwaysEditable();
   const pending = table.getPendingValue(row.id, column.id);
@@ -4647,7 +4812,7 @@ function CellInput({
       }
     }
   };
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if ((isEditing || autoFocus) && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -4683,8 +4848,8 @@ function CellSelect({
   const isAlwaysEditable = cell.getIsAlwaysEditable();
   const pending = table.getPendingValue(row.id, column.id);
   const currentValue = pending !== void 0 ? pending : cell.getValue();
-  const commitTimerRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const commitTimerRef = React4.useRef(null);
+  React4.useEffect(() => {
     return () => {
       if (commitTimerRef.current !== null) {
         clearTimeout(commitTimerRef.current);
@@ -4765,7 +4930,7 @@ function CellDatePicker({
   className
 }) {
   const { table, row, column, cell } = context;
-  const inputRef = React3.useRef(null);
+  const inputRef = React4.useRef(null);
   const isEditing = cell.getIsEditing();
   const isAlwaysEditable = cell.getIsAlwaysEditable();
   const pending = table.getPendingValue(row.id, column.id);
@@ -4779,7 +4944,7 @@ function CellDatePicker({
       table.commitEdit();
     }
   };
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
     }
@@ -4814,7 +4979,7 @@ function formatDateValue(value, type) {
 }
 function useClipboard(table, options = {}) {
   const { enabled = true, containerRef, onCopy, onCut, onPaste, ...clipboardOptions } = options;
-  const handleCopy = React3.useCallback(
+  const handleCopy = React4.useCallback(
     (e) => {
       if (isEditableTarget2(e.target)) return;
       e.preventDefault();
@@ -4826,7 +4991,7 @@ function useClipboard(table, options = {}) {
     },
     [table, clipboardOptions, onCopy]
   );
-  const handleCut = React3.useCallback(
+  const handleCut = React4.useCallback(
     (e) => {
       if (isEditableTarget2(e.target)) return;
       e.preventDefault();
@@ -4838,7 +5003,7 @@ function useClipboard(table, options = {}) {
     },
     [table, clipboardOptions, onCut]
   );
-  const handlePaste = React3.useCallback(
+  const handlePaste = React4.useCallback(
     (e) => {
       if (isEditableTarget2(e.target)) return;
       e.preventDefault();
@@ -4883,7 +5048,7 @@ function useClipboard(table, options = {}) {
     },
     [table, clipboardOptions, onPaste]
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!enabled) return;
     const container = containerRef?.current ?? document;
     container.addEventListener("copy", handleCopy);
@@ -4905,110 +5070,6 @@ function isEditableTarget2(el) {
   if (el.isContentEditable) return true;
   return false;
 }
-function useFillHandle(table, options = {}) {
-  const { enabled = true } = options;
-  const [dragState, setDragState] = React3.useState({
-    isDragging: false,
-    sourceCell: null,
-    currentCell: null
-  });
-  const dragRef = React3.useRef(dragState);
-  dragRef.current = dragState;
-  const onFillHandleMouseDown = React3.useCallback(
-    (rowIndex, columnIndex, e) => {
-      if (!enabled) return;
-      e.preventDefault();
-      e.stopPropagation();
-      setDragState({
-        isDragging: true,
-        sourceCell: { rowIndex, columnIndex },
-        currentCell: { rowIndex, columnIndex }
-      });
-    },
-    [enabled]
-  );
-  React3.useEffect(() => {
-    if (!dragState.isDragging) return;
-    const handleMouseMove = (e) => {
-      const target = document.elementFromPoint(e.clientX, e.clientY);
-      if (!target) return;
-      const td = target.closest("td[data-column-id]");
-      const tr = target.closest("tr[data-row-id]");
-      if (!td || !tr) return;
-      const columnId = td.getAttribute("data-column-id");
-      const rowId = tr.getAttribute("data-row-id");
-      if (!columnId || !rowId) return;
-      const rows = table.getRowModel().rows;
-      const columns = table.getVisibleLeafColumns();
-      const rowIndex = rows.findIndex((r) => r.id === rowId);
-      const columnIndex = columns.findIndex((c) => c.id === columnId);
-      if (rowIndex === -1 || columnIndex === -1) return;
-      setDragState((prev) => ({
-        ...prev,
-        currentCell: { rowIndex, columnIndex }
-      }));
-    };
-    const handleMouseUp = () => {
-      const current = dragRef.current;
-      if (current.sourceCell && current.currentCell) {
-        const source = current.sourceCell;
-        const target = current.currentCell;
-        if (source.rowIndex !== target.rowIndex || source.columnIndex !== target.columnIndex) {
-          const sourceRange = {
-            startRow: source.rowIndex,
-            startCol: source.columnIndex,
-            endRow: source.rowIndex,
-            endCol: source.columnIndex
-          };
-          const targetRange = {
-            startRow: Math.min(source.rowIndex, target.rowIndex),
-            startCol: Math.min(source.columnIndex, target.columnIndex),
-            endRow: Math.max(source.rowIndex, target.rowIndex),
-            endCol: Math.max(source.columnIndex, target.columnIndex)
-          };
-          table.fillRange(sourceRange, targetRange);
-        }
-      }
-      setDragState({
-        isDragging: false,
-        sourceCell: null,
-        currentCell: null
-      });
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [dragState.isDragging, table]);
-  return { dragState, onFillHandleMouseDown };
-}
-function FillHandle({
-  rowIndex,
-  columnIndex,
-  onMouseDown
-}) {
-  const handleMouseDown = React3.useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onMouseDown(rowIndex, columnIndex, e);
-    },
-    [rowIndex, columnIndex, onMouseDown]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "yable-fill-handle",
-      onMouseDown: handleMouseDown,
-      role: "presentation",
-      "aria-hidden": "true",
-      title: "Drag to fill",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "yable-fill-handle-dot" })
-    }
-  );
-}
 function GripIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -5041,7 +5102,7 @@ function DragHandle({
     isDragging && "yable-row-drag-handle--dragging",
     className
   ].filter(Boolean).join(" ");
-  const handleDragStart = React3.useCallback(
+  const handleDragStart = React4.useCallback(
     (e) => {
       if (e.dataTransfer && e.currentTarget instanceof HTMLElement) {
         e.dataTransfer.effectAllowed = "move";
@@ -5070,10 +5131,10 @@ function useRowDrag({
   onDataChange,
   onReorder
 }) {
-  const [dragState, setDragState] = React3.useState(rowDragging.getInitialRowDragState);
-  const dragRowIdRef = React3.useRef(null);
-  const dragRowIndexRef = React3.useRef(-1);
-  const getRowDragProps = React3.useCallback(
+  const [dragState, setDragState] = React4.useState(rowDragging.getInitialRowDragState);
+  const dragRowIdRef = React4.useRef(null);
+  const dragRowIndexRef = React4.useRef(-1);
+  const getRowDragProps = React4.useCallback(
     (rowId, rowIndex) => {
       return {
         draggable: true,
@@ -5172,7 +5233,7 @@ function useRowDrag({
     },
     [data, dragState, onDataChange, onReorder, table]
   );
-  const getDragHandleProps = React3.useCallback(
+  const getDragHandleProps = React4.useCallback(
     (rowId) => ({
       onDragStart: (e) => {
         e.dataTransfer.effectAllowed = "move";
@@ -5199,7 +5260,7 @@ function TreeToggle({
   const isExpanded = row.getIsExpanded();
   const canToggle = showToggle !== void 0 ? showToggle : hasChildren;
   const indent = depth * indentWidth;
-  const handleClick = React3.useCallback(
+  const handleClick = React4.useCallback(
     (e) => {
       e.stopPropagation();
       if (canToggle) {
@@ -5269,7 +5330,7 @@ function ExpandIcon({
     className
   ].filter(Boolean).join(" ");
   const label = ariaLabel ?? (isExpanded ? "Collapse details" : "Expand details");
-  const handleClick = React3.useCallback(
+  const handleClick = React4.useCallback(
     (e) => {
       e.stopPropagation();
       onClick(e);
@@ -5334,20 +5395,20 @@ function PivotConfigPanel({
   aggregationOptions = DEFAULT_AGGREGATION_OPTIONS,
   className
 }) {
-  const [dragSource, setDragSource] = React3.useState(null);
+  const [dragSource, setDragSource] = React4.useState(null);
   const usedFields = /* @__PURE__ */ new Set([
     ...rowFields.map((f) => f.field),
     ...columnFields.map((f) => f.field),
     ...valueFields.map((f) => f.field)
   ]);
   const unplacedFields = availableFields.filter((f) => !usedFields.has(f.field));
-  const handleDragStart = React3.useCallback(
+  const handleDragStart = React4.useCallback(
     (field, zone) => {
       setDragSource({ field, zone });
     },
     []
   );
-  const handleDrop = React3.useCallback(
+  const handleDrop = React4.useCallback(
     (targetZone) => {
       if (!dragSource) return;
       const { field, zone: sourceZone } = dragSource;
@@ -5390,7 +5451,7 @@ function PivotConfigPanel({
       onValueFieldsChange
     ]
   );
-  const handleAggregationChange = React3.useCallback(
+  const handleAggregationChange = React4.useCallback(
     (field, aggregation) => {
       onValueFieldsChange(
         valueFields.map(
@@ -5400,7 +5461,7 @@ function PivotConfigPanel({
     },
     [valueFields, onValueFieldsChange]
   );
-  const handleRemoveField = React3.useCallback(
+  const handleRemoveField = React4.useCallback(
     (field, zone) => {
       if (zone === "rows") {
         onRowFieldsChange(rowFields.filter((f) => f.field !== field));
@@ -5590,8 +5651,8 @@ function Tooltip({
   content,
   customComponent
 }) {
-  const tooltipRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const tooltipRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (!visible || !tooltipRef.current) return;
     const el = tooltipRef.current;
     const rect = el.getBoundingClientRect();
@@ -5656,16 +5717,16 @@ function Tooltip({
 }
 function useTooltip(options = {}) {
   const { delay = 500, placement = "top", enabled = true } = options;
-  const [visible, setVisible] = React3.useState(false);
-  const [position, setPosition] = React3.useState({
+  const [visible, setVisible] = React4.useState(false);
+  const [position, setPosition] = React4.useState({
     x: 0,
     y: 0,
     placement
   });
-  const [content, setContent] = React3.useState("");
-  const timerRef = React3.useRef(void 0);
-  const targetRef = React3.useRef(null);
-  const show = React3.useCallback(
+  const [content, setContent] = React4.useState("");
+  const timerRef = React4.useRef(void 0);
+  const targetRef = React4.useRef(null);
+  const show = React4.useCallback(
     (target, tooltipContent) => {
       if (!enabled || !tooltipContent) return;
       targetRef.current = target;
@@ -5712,12 +5773,12 @@ function useTooltip(options = {}) {
     },
     [delay, placement, enabled]
   );
-  const hide = React3.useCallback(() => {
+  const hide = React4.useCallback(() => {
     clearTimeout(timerRef.current);
     setVisible(false);
     targetRef.current = null;
   }, []);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return () => clearTimeout(timerRef.current);
   }, []);
   return {
@@ -5939,10 +6000,10 @@ function FlashCell({
 }
 function useCellFlash(table, options = {}) {
   const { duration = 700 } = options;
-  const [flashes, setFlashes] = React3.useState(/* @__PURE__ */ new Map());
-  const prevDataRef = React3.useRef([]);
-  const timersRef = React3.useRef(/* @__PURE__ */ new Map());
-  const clearFlash = React3.useCallback((key) => {
+  const [flashes, setFlashes] = React4.useState(/* @__PURE__ */ new Map());
+  const prevDataRef = React4.useRef([]);
+  const timersRef = React4.useRef(/* @__PURE__ */ new Map());
+  const clearFlash = React4.useCallback((key) => {
     setFlashes((prev) => {
       const next = new Map(prev);
       next.delete(key);
@@ -5950,7 +6011,7 @@ function useCellFlash(table, options = {}) {
     });
     timersRef.current.delete(key);
   }, []);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const currentData = table.options.data;
     const prevData = prevDataRef.current;
     if (prevData.length > 0 && currentData !== prevData) {
@@ -5979,14 +6040,14 @@ function useCellFlash(table, options = {}) {
     }
     prevDataRef.current = currentData;
   }, [table.options.data, table, duration, clearFlash]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       for (const timer of timersRef.current.values()) {
         clearTimeout(timer);
       }
     };
   }, []);
-  const getFlash = React3.useCallback(
+  const getFlash = React4.useCallback(
     (rowId, columnId) => {
       return flashes.get(`${rowId}:${columnId}`);
     },
@@ -5996,9 +6057,9 @@ function useCellFlash(table, options = {}) {
 }
 function useRowAnimation(_table, options = {}) {
   const { enabled = false, duration = 250, easing = "ease" } = options;
-  const prevPositionsRef = React3.useRef(/* @__PURE__ */ new Map());
-  const animatingRef = React3.useRef(false);
-  const capturePositions = React3.useCallback(
+  const prevPositionsRef = React4.useRef(/* @__PURE__ */ new Map());
+  const animatingRef = React4.useRef(false);
+  const capturePositions = React4.useCallback(
     (containerEl) => {
       if (!enabled || !containerEl) return;
       const positions = /* @__PURE__ */ new Map();
@@ -6016,7 +6077,7 @@ function useRowAnimation(_table, options = {}) {
     },
     [enabled]
   );
-  const animateRows = React3.useCallback(
+  const animateRows = React4.useCallback(
     (containerEl) => {
       if (!enabled || !containerEl || animatingRef.current) return;
       const prevPositions = prevPositionsRef.current;
@@ -6138,8 +6199,8 @@ function sanitizeCSS(css) {
 }
 function usePrintLayout(_table, options = {}) {
   const { title, additionalCSS } = options;
-  const isPrintingRef = React3.useRef(false);
-  const preparePrint = React3.useCallback(() => {
+  const isPrintingRef = React4.useRef(false);
+  const preparePrint = React4.useCallback(() => {
     const yableEl = document.querySelector(".yable");
     if (yableEl) {
       yableEl.classList.add("yable-print-mode");
@@ -6181,23 +6242,23 @@ function usePrintLayout(_table, options = {}) {
 }
 function useTheme(options = {}) {
   const { defaultTheme = "default", defaultColorScheme = "auto" } = options;
-  const [theme, setThemeState] = React3.useState(defaultTheme);
-  const [colorScheme, setColorSchemeState] = React3.useState(defaultColorScheme);
-  const containerRef = React3.useRef(null);
-  const setTheme = React3.useCallback((newTheme) => {
+  const [theme, setThemeState] = React4.useState(defaultTheme);
+  const [colorScheme, setColorSchemeState] = React4.useState(defaultColorScheme);
+  const containerRef = React4.useRef(null);
+  const setTheme = React4.useCallback((newTheme) => {
     setThemeState(newTheme);
   }, []);
-  const setColorScheme = React3.useCallback((scheme) => {
+  const setColorScheme = React4.useCallback((scheme) => {
     setColorSchemeState(scheme);
   }, []);
-  const toggleColorScheme = React3.useCallback(() => {
+  const toggleColorScheme = React4.useCallback(() => {
     setColorSchemeState((prev) => {
       if (prev === "auto") return "dark";
       if (prev === "dark") return "light";
       return "auto";
     });
   }, []);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const target = containerRef.current ?? document.documentElement;
     if (colorScheme === "auto") {
       target.removeAttribute("data-yable-theme");
@@ -6205,8 +6266,8 @@ function useTheme(options = {}) {
       target.setAttribute("data-yable-theme", colorScheme);
     }
   }, [colorScheme]);
-  const [systemDark, setSystemDark] = React3.useState(false);
-  React3.useEffect(() => {
+  const [systemDark, setSystemDark] = React4.useState(false);
+  React4.useEffect(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     setSystemDark(mq.matches);
     const handler = (e) => setSystemDark(e.matches);