@zvndev/yable-react 0.4.0 → 0.5.1

package/dist/index.cjs

@@ -1,21 +1,24 @@
 '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,
+  config,
+  tableProfile,
   defaultColumnDef,
   striped,
   stickyHeader,
@@ -34,12 +37,86 @@ function YableProvider({
   if (direction !== void 0) tableProps.direction = direction;
   if (ariaLabel !== void 0) tableProps.ariaLabel = ariaLabel;
   const value = {
+    config,
+    tableProfile,
     tableProps: Object.keys(tableProps).length > 0 ? tableProps : void 0,
     defaultColumnDef
   };
   return /* @__PURE__ */ jsxRuntime.jsx(YableContext.Provider, { value, children });
 }
 
+// src/config.ts
+function createYableConfig(config) {
+  return config;
+}
+function resolveYableProfile(config, profileName = "default") {
+  const base = pickProfileFields(config);
+  const named = profileName === "default" ? void 0 : config?.profiles?.[profileName];
+  return {
+    name: profileName,
+    table: { ...base.table, ...named?.table },
+    columns: {
+      default: { ...base.columns?.default, ...named?.columns?.default },
+      byId: { ...base.columns?.byId, ...named?.columns?.byId }
+    },
+    rows: { ...base.rows, ...named?.rows },
+    cells: {
+      default: { ...base.cells?.default, ...named?.cells?.default },
+      named: { ...base.cells?.named, ...named?.cells?.named },
+      byColumn: { ...base.cells?.byColumn, ...named?.cells?.byColumn }
+    }
+  };
+}
+function getYableDefaultColumnDef(profile) {
+  const next = {
+    ...profile?.columns?.default
+  };
+  return Object.keys(next).length > 0 ? next : void 0;
+}
+function applyYableConfigToColumns(columns, profile) {
+  if (!profile) return columns;
+  return columns.map((columnDef) => applyColumnConfig(columnDef, profile));
+}
+function applyColumnConfig(columnDef, profile) {
+  const columnId = getColumnId(columnDef);
+  const explicit = columnDef;
+  const cellNames = normalizeCellConfigNames(explicit.cellConfig);
+  const namedCellConfig = cellNames.reduce(
+    (acc, name) => ({ ...acc, ...profile.cells?.named?.[name] }),
+    {}
+  );
+  const defaultCell = profile.cells?.default;
+  const columnCell = columnId ? profile.cells?.byColumn?.[columnId] : void 0;
+  const columnConfig = columnId ? profile.columns?.byId?.[columnId] : void 0;
+  const children = "columns" in columnDef && columnDef.columns ? { columns: columnDef.columns.map((child) => applyColumnConfig(child, profile)) } : void 0;
+  return {
+    ...defaultCell,
+    ...namedCellConfig,
+    ...columnCell,
+    ...columnConfig,
+    ...columnDef,
+    ...children
+  };
+}
+function pickProfileFields(config) {
+  if (!config) return {};
+  return {
+    table: config.table,
+    columns: config.columns,
+    rows: config.rows,
+    cells: config.cells
+  };
+}
+function getColumnId(columnDef) {
+  if ("id" in columnDef && columnDef.id) return String(columnDef.id);
+  if ("accessorKey" in columnDef && columnDef.accessorKey) return String(columnDef.accessorKey);
+  return void 0;
+}
+function normalizeCellConfigNames(value) {
+  if (!value) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
 // src/useTable.ts
 function shallowEqual(a, b) {
   if (a === b) return true;
@@ -54,17 +131,32 @@ function shallowEqual(a, b) {
 }
 function useTable(options) {
   const providerDefaults = useYableDefaults();
-  const optionsWithDefaults = React3.useMemo(() => {
-    if (!providerDefaults.defaultColumnDef) return options;
+  const optionsWithDefaults = React4.useMemo(() => {
+    const profile = resolveYableProfile(
+      options.config ?? providerDefaults.config,
+      options.configProfile ?? providerDefaults.tableProfile
+    );
+    const profileDefaultColumnDef = getYableDefaultColumnDef(profile);
+    const configuredColumns = applyYableConfigToColumns(options.columns, profile);
+    const defaultColumnDef = {
+      ...profileDefaultColumnDef,
+      ...providerDefaults.defaultColumnDef,
+      ...options.defaultColumnDef
+    };
     return {
       ...options,
-      defaultColumnDef: {
-        ...providerDefaults.defaultColumnDef,
-        ...options.defaultColumnDef
-      }
+      columns: configuredColumns,
+      rowClassName: options.rowClassName ?? profile.rows?.className,
+      rowStyle: options.rowStyle ?? profile.rows?.style,
+      defaultColumnDef: Object.keys(defaultColumnDef).length > 0 ? defaultColumnDef : void 0
     };
-  }, [options, providerDefaults.defaultColumnDef]);
-  const [state, setState] = React3.useState(() => ({
+  }, [
+    options,
+    providerDefaults.config,
+    providerDefaults.defaultColumnDef,
+    providerDefaults.tableProfile
+  ]);
+  const [state, setState] = React4.useState(() => ({
     sorting: [],
     columnFilters: [],
     globalFilter: "",
@@ -101,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);
@@ -128,7 +220,7 @@ function useTable(options) {
       setState((prev) => yableCore.functionalUpdate(updater, prev));
     }
   }, []);
-  const resolvedOptions = React3.useMemo(
+  const resolvedOptions = React4.useMemo(
     () => ({
       ...stableOptions,
       state: resolvedState,
@@ -136,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 {
@@ -149,7 +241,33 @@ function useTable(options) {
       })
     );
   }
-  React3.useEffect(() => {
+  React4.useEffect(() => {
+    const table = tableRef.current;
+    if (!table) return;
+    const unsubscribers = [
+      options.onCellClick && table.events.on("cell:click", options.onCellClick),
+      options.onCellDoubleClick && table.events.on("cell:dblclick", options.onCellDoubleClick),
+      options.onCellContextMenu && table.events.on("cell:contextmenu", options.onCellContextMenu),
+      options.onRowClick && table.events.on("row:click", options.onRowClick),
+      options.onRowDoubleClick && table.events.on("row:dblclick", options.onRowDoubleClick),
+      options.onRowContextMenu && table.events.on("row:contextmenu", options.onRowContextMenu),
+      options.onHeaderClick && table.events.on("header:click", options.onHeaderClick),
+      options.onHeaderContextMenu && table.events.on("header:contextmenu", options.onHeaderContextMenu)
+    ].filter((unsubscribe) => Boolean(unsubscribe));
+    return () => {
+      unsubscribers.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [
+    options.onCellClick,
+    options.onCellContextMenu,
+    options.onCellDoubleClick,
+    options.onHeaderClick,
+    options.onHeaderContextMenu,
+    options.onRowClick,
+    options.onRowContextMenu,
+    options.onRowDoubleClick
+  ]);
+  React4.useEffect(() => {
     return () => {
       if (tableRef.current) {
         tableRef.current.events.removeAllListeners();
@@ -158,6 +276,195 @@ function useTable(options) {
   }, []);
   return tableRef.current;
 }
+function useServerTable({
+  fetchData,
+  updateRow,
+  initialRows = [],
+  initialCursor = null,
+  initialHasMore = true,
+  initialRowCount,
+  initialPageCount,
+  initialSorting = [],
+  initialColumnFilters = [],
+  initialGlobalFilter = "",
+  initialPagination = { pageIndex: 0, pageSize: 50 },
+  autoLoad = true,
+  getRowId,
+  ...tableOptions
+}) {
+  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 = React4.useCallback(
+    async (mode) => {
+      abortRef.current?.abort();
+      const abort = new AbortController();
+      abortRef.current = abort;
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await fetchDataRef.current({
+          sorting,
+          columnFilters,
+          globalFilter,
+          pagination,
+          cursor: mode === "append" ? cursorRef.current : null,
+          signal: abort.signal
+        });
+        if (abort.signal.aborted) return;
+        setRows((prev) => mode === "append" ? [...prev, ...result.rows] : result.rows);
+        setCursor(result.cursor ?? null);
+        setHasMore((prev) => result.hasMore ?? prev);
+        setRowCount((prev) => result.rowCount ?? prev);
+        setPageCount((prev) => result.pageCount ?? prev);
+      } catch (nextError) {
+        if (!abort.signal.aborted) setError(nextError);
+      } finally {
+        if (!abort.signal.aborted) setLoading(false);
+      }
+    },
+    [columnFilters, globalFilter, pagination, sorting]
+  );
+  const refresh = React4.useCallback(() => runFetch("replace"), [runFetch]);
+  const loadMore = React4.useCallback(async () => {
+    if (!hasMore || loading) return;
+    await runFetch("append");
+  }, [hasMore, loading, runFetch]);
+  const patchRow = React4.useCallback(
+    async (rowId, patch) => {
+      const previousRow = rows.find((row, index) => resolveRowId(row, index) === rowId);
+      setRows(
+        (prev) => prev.map((row, index) => resolveRowId(row, index) === rowId ? { ...row, ...patch } : row)
+      );
+      if (!updateRowRef.current) return;
+      const abort = new AbortController();
+      try {
+        const result = await updateRowRef.current({
+          rowId,
+          patch,
+          previousRow,
+          signal: abort.signal
+        });
+        if (!result) return;
+        setRows(
+          (prev) => prev.map(
+            (row, index) => resolveRowId(row, index) === rowId ? { ...row, ...result } : row
+          )
+        );
+      } catch (nextError) {
+        setError(nextError);
+        if (previousRow) {
+          setRows(
+            (prev) => prev.map((row, index) => resolveRowId(row, index) === rowId ? previousRow : row)
+          );
+        }
+      }
+    },
+    [resolveRowId, rows]
+  );
+  React4.useEffect(() => {
+    fetchDataRef.current = fetchData;
+  }, [fetchData]);
+  React4.useEffect(() => {
+    updateRowRef.current = updateRow;
+  }, [updateRow]);
+  React4.useEffect(() => {
+    if (!autoLoad) return;
+    void refresh();
+  }, [autoLoad, refresh]);
+  React4.useEffect(() => {
+    cursorRef.current = cursor;
+  }, [cursor]);
+  React4.useEffect(() => () => abortRef.current?.abort(), []);
+  const table = useTable({
+    ...tableOptions,
+    data: rows,
+    getRowId: resolveRowId,
+    manualSorting: true,
+    manualFiltering: true,
+    manualPagination: true,
+    rowCount,
+    pageCount,
+    state: {
+      sorting,
+      columnFilters,
+      globalFilter,
+      pagination
+    },
+    onSortingChange: (updater) => {
+      setSorting((prev) => yableCore.functionalUpdate(updater, prev));
+      setCursor(null);
+      setHasMore(true);
+    },
+    onColumnFiltersChange: (updater) => {
+      setColumnFilters((prev) => yableCore.functionalUpdate(updater, prev));
+      setCursor(null);
+      setHasMore(true);
+    },
+    onGlobalFilterChange: (updater) => {
+      setGlobalFilter((prev) => yableCore.functionalUpdate(updater, prev));
+      setCursor(null);
+      setHasMore(true);
+    },
+    onPaginationChange: (updater) => {
+      setPagination((prev) => yableCore.functionalUpdate(updater, prev));
+      setCursor(null);
+      setHasMore(true);
+    }
+  });
+  return React4.useMemo(
+    () => ({
+      table,
+      rows,
+      loading,
+      error,
+      cursor,
+      hasMore,
+      rowCount,
+      pageCount,
+      sorting,
+      columnFilters,
+      globalFilter,
+      pagination,
+      refresh,
+      loadMore,
+      updateRow: patchRow
+    }),
+    [
+      table,
+      rows,
+      loading,
+      error,
+      cursor,
+      hasMore,
+      rowCount,
+      pageCount,
+      sorting,
+      columnFilters,
+      globalFilter,
+      pagination,
+      refresh,
+      loadMore,
+      patchRow
+    ]
+  );
+}
 var DEFAULT_PERSISTED_KEYS = [
   "columnVisibility",
   "columnOrder",
@@ -221,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) {
@@ -256,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 {
@@ -292,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;
@@ -309,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({
@@ -354,25 +661,25 @@ function useVirtualization({
         resizeObserver.disconnect();
       }
     };
-  }, [containerRef]);
-  React3.useEffect(() => {
+  }, [containerRef, totalRows]);
+  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;
@@ -399,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;
@@ -545,15 +852,21 @@ function useColumnVirtualization({
   containerRef,
   columns,
   overscan = 2,
-  enabled = true
+  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(() => columns.map((column) => column.getSize()), [columns]);
-  const offsets = 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 = React4.useMemo(() => {
     const next = new Array(columns.length + 1);
     next[0] = 0;
     for (let i = 0; i < columns.length; i++) {
@@ -562,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({
@@ -609,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;
@@ -697,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) => {
@@ -712,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();
@@ -740,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 };
     }
@@ -781,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 {
@@ -830,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,
@@ -907,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
@@ -1130,12 +1443,12 @@ function getRegisteredCellTypes() {
 
 // src/hooks/useAutoMeasurements.ts
 var NON_DATA_COLUMN_IDS = /* @__PURE__ */ new Set(["select", "expand", "drag", "actions"]);
-function getColumnId(col) {
+function getColumnId2(col) {
   const id = col.id ?? col.accessorKey;
   return typeof id === "string" ? id : void 0;
 }
 function defaultShouldMeasure(col) {
-  const id = getColumnId(col);
+  const id = getColumnId2(col);
   if (!id) return false;
   if (id.startsWith("_")) return false;
   if (NON_DATA_COLUMN_IDS.has(id)) return false;
@@ -1160,11 +1473,11 @@ function useAutoMeasurements({
   getColumnWidth = defaultGetColumnWidth,
   shouldMeasureColumn = defaultShouldMeasure
 }) {
-  const widthKey = columns.map((c) => `${getColumnId(c) ?? "?"}:${getColumnWidth(c)}`).join("|");
-  return React3.useMemo(() => {
+  const widthKey = columns.map((c) => `${getColumnId2(c) ?? "?"}:${getColumnWidth(c)}`).join("|");
+  return React4.useMemo(() => {
     const result = [];
     for (const col of columns) {
-      const id = getColumnId(col);
+      const id = getColumnId2(col);
       if (!id) continue;
       if (!shouldMeasureColumn(col)) continue;
       const recipe = resolveMeasureRecipe(col, defaultRecipe);
@@ -1198,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;
@@ -1215,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 "";
@@ -1234,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?"
@@ -1298,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();
@@ -1483,22 +1796,176 @@ function FloatingFilter({ column }) {
     }
   ) });
 }
-var DRAG_MIME = "application/yable-column";
+var REORDER_TRANSITION = "transform 180ms cubic-bezier(0.2, 0, 0, 1)";
+function transformAt(i, d) {
+  if (i === d.fromIndex) return 0;
+  if (d.toIndex > d.fromIndex) return i > d.fromIndex && i < d.toIndex ? -d.width : 0;
+  return i >= d.toIndex && i < d.fromIndex ? d.width : 0;
+}
 function TableHeader({
   table,
   floatingFilters = false
 }) {
   const headerGroups = table.getHeaderGroups();
   const visibleColumns = table.getVisibleLeafColumns();
-  return /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: "yable-thead", children: [
-    headerGroups.map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "yable-header-row", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(HeaderCell, { header, table }, header.id)) }, headerGroup.id)),
-    floatingFilters && visibleColumns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "yable-header-row yable-header-row--filters", children: visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(FloatingFilterCell, { column }, `${column.id}-filter`)) })
+  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;
+      const base = order && order.length > 0 ? [...order] : d.layout.map((l) => l.id);
+      const targetId = d.toIndex < d.layout.length ? d.layout[d.toIndex].id : null;
+      const next = base.filter((id) => id !== d.columnId);
+      let insertAt = targetId ? next.indexOf(targetId) : next.length;
+      if (insertAt === -1) insertAt = next.length;
+      next.splice(insertAt, 0, d.columnId);
+      table.setColumnOrder(next);
+    },
+    [table]
+  );
+  const beginReorder = React4.useCallback(
+    (e, columnId) => {
+      if (e.button !== 0) return;
+      const thead = theadRef.current;
+      if (!thead) return;
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const layout = [];
+      let top = 0;
+      let height = 0;
+      for (const c of visibleColumns) {
+        const th = thead.querySelector(`th[data-column-id="${CSS.escape(c.id)}"]`);
+        if (!th) return;
+        const r = th.getBoundingClientRect();
+        layout.push({ id: c.id, left: r.left, width: r.width });
+        if (c.id === columnId) {
+          top = r.top;
+          height = r.height;
+        }
+      }
+      const fromIndex = layout.findIndex((l) => l.id === columnId);
+      if (fromIndex < 0) return;
+      const src = layout[fromIndex];
+      const bodyRoot = thead.closest("table");
+      const applyBody = (d) => {
+        if (!bodyRoot) return;
+        visibleColumns.forEach((col, i) => {
+          if (col.getIsPinned()) return;
+          const tx = transformAt(i, d);
+          bodyRoot.querySelectorAll(`td[data-column-id="${CSS.escape(col.id)}"]`).forEach((td) => {
+            td.style.transition = REORDER_TRANSITION;
+            td.style.opacity = i === d.fromIndex ? "0" : "";
+            td.style.transform = i !== d.fromIndex && tx ? `translateX(${tx}px)` : "";
+          });
+        });
+      };
+      const clearBody = () => {
+        bodyRoot?.querySelectorAll("td[data-column-id]").forEach((td) => {
+          td.style.transform = "";
+          td.style.transition = "";
+          td.style.opacity = "";
+        });
+      };
+      let started = false;
+      let latest = {
+        columnId,
+        fromIndex,
+        toIndex: fromIndex,
+        pointerX: startX,
+        grabOffsetX: startX - src.left,
+        width: src.width,
+        top,
+        height,
+        layout
+      };
+      const computeToIndex = (x) => {
+        let t = layout.findIndex((l) => x < l.left + l.width / 2);
+        if (t === -1) t = layout.length;
+        return t;
+      };
+      const onMove = (ev) => {
+        if (!started) {
+          if (Math.abs(ev.clientX - startX) < 4 && Math.abs(ev.clientY - startY) < 4) return;
+          started = true;
+          table.setColumnDragActive(true);
+          document.body.style.userSelect = "none";
+          document.body.style.cursor = "grabbing";
+        }
+        latest = { ...latest, pointerX: ev.clientX, toIndex: computeToIndex(ev.clientX) };
+        setDrag(latest);
+        applyBody(latest);
+      };
+      const finish = () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", finish);
+        window.removeEventListener("pointercancel", finish);
+        if (started) {
+          commitReorder(latest);
+          reorderEndRef.current = Date.now();
+          table.setColumnDragActive(false);
+          document.body.style.userSelect = "";
+          document.body.style.cursor = "";
+          clearBody();
+        }
+        setDrag(null);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", finish);
+      window.addEventListener("pointercancel", finish);
+    },
+    [visibleColumns, table, commitReorder]
+  );
+  const transformFor = React4.useCallback(
+    (columnId) => {
+      if (!drag) return 0;
+      const i = visibleColumns.findIndex((c) => c.id === columnId);
+      if (i < 0) return 0;
+      return transformAt(i, drag);
+    },
+    [drag, visibleColumns]
+  );
+  const dragColumn = drag ? visibleColumns.find((c) => c.id === drag.columnId) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: "yable-thead", ref: theadRef, children: [
+    headerGroups.map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "yable-header-row", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
+      HeaderCell,
+      {
+        header,
+        table,
+        onReorderPointerDown: beginReorder,
+        dragTransform: transformFor(header.column.id),
+        isDragSource: drag?.columnId === header.column.id,
+        dragActive: drag !== null,
+        reorderEndRef
+      },
+      header.id
+    )) }, headerGroup.id)),
+    floatingFilters && visibleColumns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "yable-header-row yable-header-row--filters", children: visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(FloatingFilterCell, { column }, `${column.id}-filter`)) }),
+    drag && dragColumn && typeof document !== "undefined" && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "yable-col-drag-ghost",
+          "aria-hidden": "true",
+          style: {
+            position: "fixed",
+            top: drag.top,
+            left: drag.pointerX - drag.grabOffsetX,
+            width: drag.width,
+            height: drag.height
+          },
+          children: typeof dragColumn.columnDef.header === "string" ? dragColumn.columnDef.header : dragColumn.id
+        }
+      ),
+      document.body
+    )
   ] });
 }
 function FloatingFilterCell({
   column
 }) {
-  const style = React3.useMemo(() => {
+  const style = React4.useMemo(() => {
     const next = {
       width: column.getSize(),
       minWidth: column.columnDef.minSize,
@@ -1521,7 +1988,12 @@ function FloatingFilterCell({
 }
 function HeaderCell({
   header,
-  table
+  table,
+  onReorderPointerDown,
+  dragTransform,
+  isDragSource,
+  dragActive,
+  reorderEndRef
 }) {
   const column = header.column;
   const canSort = column.getCanSort();
@@ -1529,27 +2001,29 @@ function HeaderCell({
   const sortIndex = column.getSortIndex();
   const canResize = column.getCanResize();
   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,
       maxWidth: column.columnDef.maxSize
     };
-    const pinned2 = column.getIsPinned();
-    if (pinned2) {
+    if (pinned) {
       s.position = "sticky";
-      if (pinned2 === "left") {
+      if (pinned === "left") {
         s.left = header.getStart("left");
       } else {
         s.right = header.getStart("right");
       }
     }
+    if (!pinned && !isDragSource && dragTransform !== 0) {
+      s.transform = `translateX(${dragTransform}px)`;
+    }
     return s;
-  }, [header, column]);
-  const pinned = column.getIsPinned();
-  const lastResizeEndRef = React3.useRef(0);
-  const startResize = React3.useCallback(
+  }, [header, column, pinned, isDragSource, dragTransform]);
+  const lastResizeEndRef = React4.useRef(0);
+  const startResize = React4.useCallback(
     (e) => {
       e.stopPropagation();
       const onEnd = () => {
@@ -1564,125 +2038,63 @@ function HeaderCell({
     },
     [header]
   );
-  const handleResizeClick = React3.useCallback((e) => {
+  const handleResizeClick = React4.useCallback((e) => {
     e.stopPropagation();
   }, []);
-  const [dragOver, setDragOver] = React3.useState(null);
-  const handleDragStart = React3.useCallback(
-    (e) => {
-      if (!canReorder) return;
-      e.stopPropagation();
-      e.dataTransfer.effectAllowed = "move";
-      try {
-        e.dataTransfer.setData(DRAG_MIME, column.id);
-        e.dataTransfer.setData("text/plain", column.id);
-      } catch {
-      }
-      table.setColumnDragActive(true);
-    },
-    [canReorder, column.id, table]
-  );
-  const handleDragOver = React3.useCallback(
+  const handleContentPointerDown = React4.useCallback(
     (e) => {
-      if (!canReorder) return;
-      const types = e.dataTransfer.types;
-      let isYableDrag = false;
-      for (let i = 0; i < types.length; i++) {
-        if (types[i] === DRAG_MIME) {
-          isYableDrag = true;
-          break;
-        }
-      }
-      if (!isYableDrag) return;
-      e.preventDefault();
-      e.dataTransfer.dropEffect = "move";
-      const rect = e.currentTarget.getBoundingClientRect();
-      const midpoint = rect.left + rect.width / 2;
-      setDragOver(e.clientX < midpoint ? "left" : "right");
+      if (!canReorder || pinned) return;
+      onReorderPointerDown(e, column.id);
     },
-    [canReorder]
+    [canReorder, pinned, onReorderPointerDown, column.id]
   );
-  const handleDragLeave = React3.useCallback((e) => {
-    const next = e.relatedTarget;
-    if (next && e.currentTarget.contains(next)) return;
-    setDragOver(null);
-  }, []);
-  const handleDragEnd = React3.useCallback(() => {
-    setDragOver(null);
-    table.setColumnDragActive(false);
-  }, [table]);
-  const handleDrop = React3.useCallback(
-    (e) => {
-      if (!canReorder) return;
-      e.preventDefault();
-      e.stopPropagation();
-      const sourceId = e.dataTransfer.getData(DRAG_MIME);
-      const rect = e.currentTarget.getBoundingClientRect();
-      const insertAfter = e.clientX >= rect.left + rect.width / 2;
-      setDragOver(null);
-      table.setColumnDragActive(false);
-      if (!sourceId || sourceId === column.id) return;
-      const state = table.getState();
-      const allLeafs = table.getAllLeafColumns();
-      const baseOrder = state.columnOrder && state.columnOrder.length > 0 ? state.columnOrder : allLeafs.map((c) => c.id);
-      const next = [];
-      const seen = /* @__PURE__ */ new Set();
-      for (const id of baseOrder) {
-        if (allLeafs.some((c) => c.id === id)) {
-          next.push(id);
-          seen.add(id);
-        }
-      }
-      for (const c of allLeafs) {
-        if (!seen.has(c.id)) {
-          next.push(c.id);
-          seen.add(c.id);
-        }
-      }
-      const fromIdx = next.indexOf(sourceId);
-      if (fromIdx === -1) return;
-      next.splice(fromIdx, 1);
-      let toIdx = next.indexOf(column.id);
-      if (toIdx === -1) return;
-      if (insertAfter) toIdx += 1;
-      next.splice(toIdx, 0, sourceId);
-      table.setColumnOrder(next);
-    },
-    [canReorder, column.id, table]
-  );
-  const handleHeaderClick = React3.useCallback(
+  const handleHeaderClick = React4.useCallback(
     (e) => {
+      table.events.emit("header:click", {
+        column,
+        header,
+        originalEvent: e
+      });
       if (!canSort) return;
       if (Date.now() - lastResizeEndRef.current < 250) return;
+      if (Date.now() - reorderEndRef.current < 250) return;
       const handler = column.getToggleSortingHandler();
       if (handler) handler(e);
     },
-    [canSort, column]
+    [canSort, column, header, table.events, reorderEndRef]
+  );
+  const handleHeaderContextMenu = React4.useCallback(
+    (e) => {
+      table.events.emit("header:contextmenu", {
+        column,
+        header,
+        originalEvent: e
+      });
+    },
+    [column, header, table.events]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "th",
     {
       className: "yable-th",
       style,
+      "data-column-id": column.id,
       "data-sortable": canSort || void 0,
       "data-pinned": pinned || void 0,
-      "data-reorderable": canReorder || void 0,
-      "data-drag-over": dragOver || void 0,
+      "data-reorderable": canReorder && !pinned || void 0,
+      "data-reordering": dragActive && !pinned || void 0,
+      "data-drag-source": isDragSource || void 0,
       "aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : canSort ? "none" : void 0,
       role: "columnheader",
       colSpan: header.colSpan,
       onClick: handleHeaderClick,
-      onDragOver: canReorder ? handleDragOver : void 0,
-      onDragLeave: canReorder ? handleDragLeave : void 0,
-      onDrop: canReorder ? handleDrop : void 0,
+      onContextMenu: handleHeaderContextMenu,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: "yable-th-content",
-            draggable: canReorder || void 0,
-            onDragStart: canReorder ? handleDragStart : void 0,
-            onDragEnd: canReorder ? handleDragEnd : void 0,
+            onPointerDown: canReorder && !pinned ? handleContentPointerDown : void 0,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: headerContent }),
               canSort && /* @__PURE__ */ jsxRuntime.jsx(SortIndicator, { direction: sortDirection, index: sortIndex > 0 ? sortIndex : void 0 })
@@ -1781,19 +2193,46 @@ 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();
   const isAlwaysEditable = cell.getIsAlwaysEditable();
   const pinned = column.getIsPinned();
   const keyboardNavigationEnabled = table.options.enableKeyboardNavigation !== false;
+  const cellSelectionEnabled = table.options.enableCellSelection !== false && column.columnDef.enableCellSelection !== false;
   const style = {
     width: column.getSize(),
     minWidth: column.columnDef.minSize,
@@ -1835,7 +2274,7 @@ function TableCell({
   } else {
     content = overrideValue !== void 0 ? overrideValue : cell.renderValue();
   }
-  const handleClick = React3.useCallback(
+  const handleClick = React4.useCallback(
     (e) => {
       table.events.emit("cell:click", {
         cell,
@@ -1849,7 +2288,7 @@ function TableCell({
     },
     [cell, column, isAlwaysEditable, isEditing, isMultiCellSelection, table]
   );
-  const handleDoubleClick = React3.useCallback(
+  const handleDoubleClick = React4.useCallback(
     (e) => {
       table.events.emit("cell:dblclick", {
         cell,
@@ -1860,7 +2299,7 @@ function TableCell({
     },
     [table, cell]
   );
-  const handleContextMenu = React3.useCallback(
+  const handleContextMenu = React4.useCallback(
     (e) => {
       table.events.emit("cell:contextmenu", {
         cell,
@@ -1871,13 +2310,14 @@ 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;
       const clickTarget = e.target;
       if (isInteractiveClickTarget(clickTarget)) return;
       e.preventDefault();
@@ -1885,13 +2325,14 @@ function TableCell({
       table.startCellRangeSelection({ rowIndex, columnIndex }, { extend: e.shiftKey });
       e.currentTarget.focus({ preventScroll: true });
     },
-    [columnIndex, rowIndex, table]
+    [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 });
-  }, [columnIndex, rowIndex, table]);
-  const handleMouseUp = React3.useCallback(() => {
+  }, [cellSelectionEnabled, columnIndex, rowIndex, table]);
+  const handleMouseUp = React4.useCallback(() => {
     if (!table.getState().cellSelection?.isDragging) return;
     table.endCellRangeSelection();
   }, [table]);
@@ -1900,6 +2341,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;
   const classNames = [
     "yable-td",
     isFocused && "yable-cell--focused",
@@ -1953,6 +2395,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
+          }
         )
       ]
     }
@@ -1965,7 +2415,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 };
@@ -2011,7 +2461,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 };
@@ -2054,10 +2504,38 @@ var CellErrorBoundary = class extends React3__default.default.Component {
     return this.props.children;
   }
 };
+function MasterDetail({
+  row,
+  table,
+  colSpan,
+  renderDetailPanel,
+  animationClass
+}) {
+  const renderer = renderDetailPanel ?? table.options.renderDetailPanel;
+  if (!renderer) return null;
+  const content = renderer(row);
+  if (content == null) return null;
+  const classes = [
+    "yable-detail-row",
+    "yable-detail-row--animated",
+    animationClass
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      className: classes,
+      "data-detail-for": row.id,
+      role: "row",
+      "aria-label": `Details for row ${row.id}`,
+      children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "yable-detail-cell", colSpan, role: "cell", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "yable-detail-panel", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "yable-detail-panel-inner", children: content }) }) })
+    }
+  );
+}
 function TableBody({
   table,
   clickableRows,
-  colgroup
+  colgroup,
+  onFillHandleMouseDown
 }) {
   const rows = table.getRowModel().rows;
   const visibleColumns = table.getVisibleLeafColumns();
@@ -2067,16 +2545,17 @@ function TableBody({
     range: null,
     isDragging: false
   };
+  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;
@@ -2099,7 +2578,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();
@@ -2110,24 +2589,41 @@ function TableBody({
       window.removeEventListener("mouseup", handleWindowMouseUp);
     };
   }, [table]);
+  const renderRow = (row, rowIndex, pinnedPosition) => /* @__PURE__ */ jsxRuntime.jsx(
+    MemoizedTableRow,
+    {
+      row,
+      table,
+      rowIndex,
+      visibleColumns,
+      isSelected: row.getIsSelected(),
+      isExpanded: row.getIsExpanded(),
+      activeColumnId: activeCell?.rowId === row.id ? activeCell.columnId : void 0,
+      focusedColumnIndex: focusedCell?.rowIndex === rowIndex ? focusedCell.columnIndex : null,
+      hasFocusedCell: focusedCell !== null,
+      cellSelectionKey,
+      pendingValuesKey: getPendingValuesKey(pendingValues[row.id]),
+      clickable: clickableRows,
+      pinnedPosition,
+      onFillHandleMouseDown
+    },
+    row.id
+  );
   if (!enableVirtualization) {
-    return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "yable-tbody", children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-      MemoizedTableRow,
-      {
-        row,
-        table,
-        rowIndex,
-        visibleColumns,
-        isSelected: row.getIsSelected(),
-        isExpanded: row.getIsExpanded(),
-        activeColumnId: activeCell?.rowId === row.id ? activeCell.columnId : void 0,
-        focusedColumnIndex: focusedCell?.rowIndex === rowIndex ? focusedCell.columnIndex : null,
-        hasFocusedCell: focusedCell !== null,
-        cellSelectionKey,
-        clickable: clickableRows
-      },
-      row.id
-    )) });
+    const rowPinning = table.getState().rowPinning;
+    const hasPinnedRows = (rowPinning.top?.length ?? 0) > 0 || (rowPinning.bottom?.length ?? 0) > 0;
+    if (hasPinnedRows) {
+      const topRows = table.getTopRows();
+      const centerRows = table.getCenterRows();
+      const bottomRows = table.getBottomRows();
+      let visualIndex = 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs("tbody", { className: "yable-tbody", children: [
+        topRows.map((row) => renderRow(row, visualIndex++, "top")),
+        centerRows.map((row) => renderRow(row, visualIndex++)),
+        bottomRows.map((row) => renderRow(row, visualIndex++, "bottom"))
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "yable-tbody", children: rows.map((row, rowIndex) => renderRow(row, rowIndex)) });
   }
   const hasPretextData = !!(pretextHeights && pretextPrefixSums);
   const fixedRowHeight = typeof rowHeight === "number" && !hasPretextData ? rowHeight : void 0;
@@ -2176,7 +2672,9 @@ function TableBody({
                       focusedColumnIndex: focusedCell?.rowIndex === vRow.index ? focusedCell.columnIndex : null,
                       hasFocusedCell: focusedCell !== null,
                       cellSelectionKey,
+                      pendingValuesKey: getPendingValuesKey(pendingValues[row.id]),
                       clickable: clickableRows,
+                      onFillHandleMouseDown,
                       virtualStyle: {
                         position: "absolute",
                         top: 0,
@@ -2208,13 +2706,19 @@ function TableRowInner({
   focusedColumnIndex,
   hasFocusedCell,
   cellSelectionKey: _cellSelectionKey,
+  pendingValuesKey: _pendingValuesKey,
   clickable,
-  virtualStyle
+  pinnedPosition,
+  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();
+      }
       if (clickable) {
         table.events.emit("row:click", {
           row,
@@ -2222,9 +2726,9 @@ function TableRowInner({
         });
       }
     },
-    [clickable, table.events, row]
+    [clickable, table, row]
   );
-  const handleDoubleClick = React3.useCallback(
+  const handleDoubleClick = React4.useCallback(
     (e) => {
       table.events.emit("row:dblclick", {
         row,
@@ -2233,7 +2737,7 @@ function TableRowInner({
     },
     [table.events, row]
   );
-  const handleContextMenu = React3.useCallback(
+  const handleContextMenu = React4.useCallback(
     (e) => {
       table.events.emit("row:contextmenu", {
         row,
@@ -2244,15 +2748,26 @@ function TableRowInner({
   );
   const selectionEnabled = Boolean(table.options.enableRowSelection);
   const expansionEnabled = Boolean(table.options.enableExpanding);
+  const rowClassNameDef = table.options.rowClassName;
+  const userRowClassName = typeof rowClassNameDef === "function" ? rowClassNameDef(row) : rowClassNameDef;
+  const rowStyleDef = table.options.rowStyle;
+  const userRowStyle = typeof rowStyleDef === "function" ? rowStyleDef(row) : rowStyleDef;
+  const mergedRowStyle = userRowStyle ? { ...virtualStyle, ...userRowStyle } : virtualStyle;
+  const rowClassName = [
+    "yable-tr",
+    pinnedPosition && `yable-tr--pinned-${pinnedPosition}`,
+    userRowClassName
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "tr",
       {
-        className: "yable-tr",
-        style: virtualStyle,
+        className: rowClassName,
+        style: mergedRowStyle,
         "data-selected": isSelected || void 0,
         "data-expanded": isExpanded || void 0,
         "data-clickable": clickable || void 0,
+        "data-pinned-row": pinnedPosition,
         "data-row-id": row.id,
         "data-row-index": rowIndex,
         "aria-selected": selectionEnabled ? isSelected : void 0,
@@ -2275,7 +2790,8 @@ function TableRowInner({
                   rowIndex,
                   columnIndex,
                   isFocused,
-                  isTabStop
+                  isTabStop,
+                  onFillHandleMouseDown
                 }
               )
             },
@@ -2284,7 +2800,7 @@ function TableRowInner({
         })
       }
     ),
-    isExpanded && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "yable-expand-row", children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "yable-td", colSpan: visibleColumns.length, children: typeof row._renderExpanded === "function" ? row._renderExpanded() : null }) })
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx(MasterDetail, { row, table, colSpan: visibleColumns.length })
   ] });
 }
 function areRowPropsEqual(prev, next) {
@@ -2295,10 +2811,12 @@ function areRowPropsEqual(prev, next) {
   if (prev.isSelected !== next.isSelected) return false;
   if (prev.isExpanded !== next.isExpanded) return false;
   if (prev.clickable !== next.clickable) return false;
+  if (prev.pinnedPosition !== next.pinnedPosition) return false;
   if (prev.activeColumnId !== next.activeColumnId) return false;
   if (prev.focusedColumnIndex !== next.focusedColumnIndex) return false;
   if (prev.hasFocusedCell !== next.hasFocusedCell) return false;
   if (prev.cellSelectionKey !== next.cellSelectionKey) return false;
+  if (prev.pendingValuesKey !== next.pendingValuesKey) return false;
   if (prev.virtualStyle !== next.virtualStyle) {
     if (!prev.virtualStyle || !next.virtualStyle) return false;
     if (prev.virtualStyle.transform !== next.virtualStyle.transform) return false;
@@ -2307,7 +2825,17 @@ 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("|");
+}
+function isInteractiveClickTarget2(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  return Boolean(
+    target.closest('input, textarea, select, button, a[href], [contenteditable="true"]')
+  );
+}
 function TableFooter({ table }) {
   const footerGroups = table.getFooterGroups();
   if (!footerGroups.length) return null;
@@ -2515,8 +3043,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)) });
@@ -2595,53 +3123,97 @@ function StatusBar({
   ] });
 }
 function SearchIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "yable-sidebar-search-icon", width: "13", height: "13", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6.25", cy: "6.25", r: "4.25", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.5 9.5L12.5 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: "yable-sidebar-search-icon",
+      width: "13",
+      height: "13",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6.25", cy: "6.25", r: "4.25", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.5 9.5L12.5 12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+      ]
+    }
+  );
 }
 function VisibilityIcon({ visible }) {
   if (visible) {
     return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 7s2.5-4 6-4 6 4 6 4-2.5 4-6 4-6-4-6-4z", stroke: "currentColor", strokeWidth: "1.2", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M1 7s2.5-4 6-4 6 4 6 4-2.5 4-6 4-6-4-6-4z",
+          stroke: "currentColor",
+          strokeWidth: "1.2",
+          strokeLinejoin: "round"
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "2", stroke: "currentColor", strokeWidth: "1.2" })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 7s2.5-4 6-4 6 4 6 4-2.5 4-6 4-6-4-6-4z", stroke: "currentColor", strokeWidth: "1.2", strokeLinejoin: "round", opacity: "0.3" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", y1: "2", x2: "12", y2: "12", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", opacity: "0.5" })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M1 7s2.5-4 6-4 6 4 6 4-2.5 4-6 4-6-4-6-4z",
+        stroke: "currentColor",
+        strokeWidth: "1.2",
+        strokeLinejoin: "round",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: "2",
+        y1: "2",
+        x2: "12",
+        y2: "12",
+        stroke: "currentColor",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        opacity: "0.5"
+      }
+    )
   ] });
 }
-function ColumnsPanel({
-  table
-}) {
-  const [search, setSearch] = React3.useState("");
-  const [draggedId, setDraggedId] = React3.useState(null);
-  const columns = table.getAllLeafColumns();
+function ColumnsPanel({ table }) {
+  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) => {
+    const ia = columnOrder.indexOf(a.id);
+    const ib = columnOrder.indexOf(b.id);
+    return (ia === -1 ? Number.MAX_SAFE_INTEGER : ia) - (ib === -1 ? Number.MAX_SAFE_INTEGER : ib);
+  }) : allColumns;
   const visibleCount = columns.filter((c) => c.getIsVisible()).length;
   const filteredColumns = search ? columns.filter((col) => {
     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;
@@ -2766,7 +3338,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)
@@ -2774,7 +3346,7 @@ function FiltersPanel({
     },
     [table]
   );
-  const handleClearAll = React3.useCallback(() => {
+  const handleClearAll = React4.useCallback(() => {
     table.resetColumnFilters(true);
     table.resetGlobalFilter(true);
   }, [table]);
@@ -2868,8 +3440,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();
@@ -2877,7 +3449,7 @@ function Sidebar({
     },
     [open, onClose]
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [handleKeyDown]);
@@ -2959,11 +3531,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) {
@@ -3044,10 +3616,11 @@ function ContextMenu({
   y,
   onClose,
   table,
+  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;
@@ -3059,11 +3632,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();
@@ -3087,6 +3660,17 @@ function ContextMenu({
     },
     [onClose]
   );
+  const resolveSortColumn = () => {
+    if (targetColumnId) {
+      const column = table.getColumn(targetColumnId);
+      if (column) return column;
+    }
+    const focused = table.getFocusedCell();
+    if (focused) {
+      return table.getVisibleLeafColumns()[focused.columnIndex];
+    }
+    return void 0;
+  };
   const defaultItems = [
     {
       id: "copy",
@@ -3135,14 +3719,14 @@ function ContextMenu({
           id: "sort-asc",
           label: "Sort Ascending",
           action: () => {
-            table.setSorting([]);
+            resolveSortColumn()?.toggleSorting(false);
           }
         },
         {
           id: "sort-desc",
           label: "Sort Descending",
           action: () => {
-            table.setSorting([]);
+            resolveSortColumn()?.toggleSorting(true);
           }
         },
         {
@@ -3230,24 +3814,27 @@ 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 open = React3.useCallback(
-    (clientX, clientY, table) => {
+  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);
       setTargetTable(table);
+      setTargetColumnId(columnId);
       setIsOpen(true);
     },
     []
   );
-  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();
@@ -3260,7 +3847,7 @@ function useContextMenu() {
       document.removeEventListener("click", handleClick);
     };
   }, [isOpen, close]);
-  return { isOpen, x, y, targetTable, open, close };
+  return { isOpen, x, y, targetTable, targetColumnId, open, close };
 }
 function useKeyboardNavigation(table, options = {}) {
   const {
@@ -3271,7 +3858,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;
@@ -3286,7 +3873,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;
@@ -3360,7 +3947,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;
@@ -3369,7 +3956,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;
@@ -3460,6 +4047,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,
@@ -3473,6 +4139,8 @@ function Table({
   bordered: borderedProp,
   compact: compactProp,
   theme: themeProp,
+  config,
+  configProfile,
   clickableRows,
   footer,
   loading,
@@ -3490,7 +4158,7 @@ function Table({
   statusBar,
   statusBarPanels,
   sidebar,
-  sidebarPanels = ["columns", "filters"],
+  sidebarPanels,
   defaultSidebarPanel,
   floatingFilters,
   columnVirtualization,
@@ -3498,20 +4166,34 @@ function Table({
   ariaLabel: ariaLabelProp,
   ...rest
 }) {
-  const { tableProps: providerTableProps } = useYableDefaults();
-  const stickyHeader = stickyHeaderProp ?? providerTableProps?.stickyHeader;
-  const striped = stripedProp ?? providerTableProps?.striped;
-  const bordered = borderedProp ?? providerTableProps?.bordered;
-  const compact = compactProp ?? providerTableProps?.compact;
-  const theme = themeProp ?? providerTableProps?.theme;
-  const direction = directionProp ?? providerTableProps?.direction;
-  const ariaLabel = ariaLabelProp ?? providerTableProps?.ariaLabel;
-  const [sidebarOpen, setSidebarOpen] = React3.useState(false);
-  const [sidebarPanel, setSidebarPanel] = React3.useState(
-    defaultSidebarPanel ?? "columns"
+  const providerDefaults = useYableDefaults();
+  const { tableProps: providerTableProps } = providerDefaults;
+  const profile = resolveYableProfile(
+    config ?? providerDefaults.config,
+    configProfile ?? providerDefaults.tableProfile
+  );
+  const profileTableProps = profile.table;
+  const stickyHeader = stickyHeaderProp ?? profileTableProps?.stickyHeader ?? providerTableProps?.stickyHeader;
+  const striped = stripedProp ?? profileTableProps?.striped ?? providerTableProps?.striped;
+  const bordered = borderedProp ?? profileTableProps?.bordered ?? providerTableProps?.bordered;
+  const compact = compactProp ?? profileTableProps?.compact ?? providerTableProps?.compact;
+  const theme = themeProp ?? profileTableProps?.theme ?? providerTableProps?.theme;
+  const direction = directionProp ?? profileTableProps?.direction ?? providerTableProps?.direction;
+  const ariaLabel = ariaLabelProp ?? profileTableProps?.ariaLabel ?? providerTableProps?.ariaLabel;
+  const resolvedClickableRows = clickableRows ?? profileTableProps?.clickableRows;
+  const resolvedStatusBar = statusBar ?? profileTableProps?.statusBar;
+  const resolvedSidebar = sidebar ?? profileTableProps?.sidebar;
+  const resolvedSidebarPanels = sidebarPanels ?? profileTableProps?.sidebarPanels ?? ["columns", "filters"];
+  const resolvedDefaultSidebarPanel = defaultSidebarPanel ?? profileTableProps?.defaultSidebarPanel;
+  const resolvedFloatingFilters = floatingFilters ?? profileTableProps?.floatingFilters;
+  const resolvedColumnVirtualization = columnVirtualization ?? profileTableProps?.columnVirtualization;
+  const resolvedColumnVirtualizationOverscan = columnVirtualizationOverscan ?? profileTableProps?.columnVirtualizationOverscan;
+  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",
@@ -3532,14 +4214,16 @@ function Table({
   const allVisibleColumns = table.getVisibleLeafColumns();
   const hasPinnedColumns = table.getLeftVisibleLeafColumns().length > 0 || table.getRightVisibleLeafColumns().length > 0;
   const hasGroupedHeaders = table.getHeaderGroups().length > 1;
-  const canVirtualizeColumns = Boolean(columnVirtualization) && !hasPinnedColumns && !hasGroupedHeaders && allVisibleColumns.length > 0;
+  const canVirtualizeColumns = Boolean(resolvedColumnVirtualization) && !hasPinnedColumns && !hasGroupedHeaders && allVisibleColumns.length > 0;
+  const allVisibleColumnSizeSignature = allVisibleColumns.map((column) => `${column.id}:${column.getSize()}`).join("|");
   const columnVirtualState = useColumnVirtualization({
     containerRef: horizontalScrollRef,
     columns: allVisibleColumns,
-    overscan: columnVirtualizationOverscan ?? 2,
-    enabled: canVirtualizeColumns
+    overscan: resolvedColumnVirtualizationOverscan ?? 2,
+    enabled: canVirtualizeColumns,
+    sizingKey: allVisibleColumnSizeSignature
   });
-  const renderTable = React3.useMemo(() => {
+  const renderTable = React4.useMemo(() => {
     if (!canVirtualizeColumns || !columnVirtualState.isVirtualized) {
       return table;
     }
@@ -3565,13 +4249,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;
@@ -3609,21 +4296,22 @@ function Table({
       }
     }
   });
-  const handleContextMenu = React3.useCallback(
+  const handleContextMenu = React4.useCallback(
     (e) => {
       e.preventDefault();
-      contextMenu.open(e.clientX, e.clientY, table);
+      const targetEl = e.target?.closest?.("[data-column-id]");
+      const targetColumnId = targetEl?.getAttribute("data-column-id") ?? void 0;
+      contextMenu.open(e.clientX, e.clientY, table, targetColumnId);
     },
     [contextMenu, table]
   );
-  const enableRowVirtualization = renderTable.options.enableVirtualization ?? false;
   const visibleLeafColumns = renderTable.getVisibleLeafColumns();
-  const columnSizing = renderTable.getState().columnSizing;
-  const colgroup = React3.useMemo(() => {
-    if (visibleLeafColumns.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: visibleLeafColumns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: col.getSize() } }, col.id)) });
-  }, [visibleLeafColumns, columnSizing]);
-  const outerTableStyle = React3.useMemo(() => {
+  const visibleColumnTotalSize = visibleLeafColumns.reduce(
+    (sum, column) => sum + column.getSize(),
+    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 = React4.useMemo(() => {
     if (columnVirtualState.isVirtualized) {
       return {
         width: columnVirtualState.visibleWidth,
@@ -3632,15 +4320,15 @@ function Table({
         tableLayout: "fixed"
       };
     }
-    if (enableRowVirtualization) {
-      return { tableLayout: "fixed" };
-    }
-    return void 0;
+    return {
+      minWidth: visibleColumnTotalSize || void 0,
+      tableLayout: "fixed"
+    };
   }, [
     columnVirtualState.isVirtualized,
     columnVirtualState.visibleWidth,
     columnVirtualState.startOffset,
-    enableRowVirtualization
+    visibleColumnTotalSize
   ]);
   const tableNode = /* @__PURE__ */ jsxRuntime.jsxs(
     "table",
@@ -3649,9 +4337,17 @@ function Table({
       style: outerTableStyle,
       "data-column-virtualized": columnVirtualState.isVirtualized || void 0,
       children: [
-        enableRowVirtualization && colgroup,
-        /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { table: renderTable, floatingFilters }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableBody, { table: renderTable, clickableRows, colgroup }),
+        colgroup,
+        /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { table: renderTable, floatingFilters: resolvedFloatingFilters }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TableBody,
+          {
+            table: renderTable,
+            clickableRows: resolvedClickableRows,
+            colgroup,
+            onFillHandleMouseDown
+          }
+        ),
         footer && /* @__PURE__ */ jsxRuntime.jsx(TableFooter, { table: renderTable })
       ]
     }
@@ -3717,18 +4413,43 @@ function Table({
             }
           ))
         ] }),
-        sidebar && /* @__PURE__ */ jsxRuntime.jsx(
+        resolvedSidebar && !sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "yable-sidebar-trigger",
+            "aria-label": "Open tool panel",
+            title: "Open tool panel",
+            onClick: () => setSidebarOpen(true),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: "3",
+                  y: "4",
+                  width: "18",
+                  height: "16",
+                  rx: "2",
+                  stroke: "currentColor",
+                  strokeWidth: "2"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14", y1: "4", x2: "14", y2: "20", stroke: "currentColor", strokeWidth: "2" })
+            ] })
+          }
+        ),
+        resolvedSidebar && /* @__PURE__ */ jsxRuntime.jsx(
           Sidebar,
           {
             table,
             open: sidebarOpen,
             onClose: () => setSidebarOpen(false),
-            panels: sidebarPanels,
+            panels: resolvedSidebarPanels,
             activePanel: sidebarPanel,
             onPanelChange: setSidebarPanel
           }
         ),
-        statusBar && /* @__PURE__ */ jsxRuntime.jsx(StatusBar, { table, panels: statusBarPanels }),
+        resolvedStatusBar && /* @__PURE__ */ jsxRuntime.jsx(StatusBar, { table, panels: statusBarPanels }),
         children,
         contextMenu.isOpen && /* @__PURE__ */ jsxRuntime.jsx(
           ContextMenu,
@@ -3736,7 +4457,8 @@ function Table({
             x: contextMenu.x,
             y: contextMenu.y,
             onClose: contextMenu.close,
-            table
+            table,
+            targetColumnId: contextMenu.targetColumnId
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -3947,12 +4669,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);
@@ -3967,13 +4689,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();
@@ -3982,10 +4704,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);
@@ -4030,7 +4752,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);
@@ -4055,7 +4777,7 @@ function CellInput({
       }
     }
   };
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if ((isEditing || autoFocus) && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -4091,8 +4813,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);
@@ -4173,7 +4895,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);
@@ -4187,7 +4909,7 @@ function CellDatePicker({
       table.commitEdit();
     }
   };
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (isEditing && inputRef.current) {
       inputRef.current.focus();
     }
@@ -4222,7 +4944,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();
@@ -4234,7 +4956,7 @@ function useClipboard(table, options = {}) {
     },
     [table, clipboardOptions, onCopy]
   );
-  const handleCut = React3.useCallback(
+  const handleCut = React4.useCallback(
     (e) => {
       if (isEditableTarget2(e.target)) return;
       e.preventDefault();
@@ -4246,7 +4968,7 @@ function useClipboard(table, options = {}) {
     },
     [table, clipboardOptions, onCut]
   );
-  const handlePaste = React3.useCallback(
+  const handlePaste = React4.useCallback(
     (e) => {
       if (isEditableTarget2(e.target)) return;
       e.preventDefault();
@@ -4291,7 +5013,7 @@ function useClipboard(table, options = {}) {
     },
     [table, clipboardOptions, onPaste]
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!enabled) return;
     const container = containerRef?.current ?? document;
     container.addEventListener("copy", handleCopy);
@@ -4313,110 +5035,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",
@@ -4449,7 +5067,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";
@@ -4478,10 +5096,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,
@@ -4580,7 +5198,7 @@ function useRowDrag({
     },
     [data, dragState, onDataChange, onReorder, table]
   );
-  const getDragHandleProps = React3.useCallback(
+  const getDragHandleProps = React4.useCallback(
     (rowId) => ({
       onDragStart: (e) => {
         e.dataTransfer.effectAllowed = "move";
@@ -4607,7 +5225,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) {
@@ -4664,33 +5282,6 @@ function TreeToggle({
     }
   );
 }
-function MasterDetail({
-  row,
-  table,
-  colSpan,
-  renderDetailPanel,
-  animationClass
-}) {
-  const renderer = renderDetailPanel ?? table.options.renderDetailPanel;
-  if (!renderer) return null;
-  const content = renderer(row);
-  if (content == null) return null;
-  const classes = [
-    "yable-detail-row",
-    "yable-detail-row--animated",
-    animationClass
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "tr",
-    {
-      className: classes,
-      "data-detail-for": row.id,
-      role: "row",
-      "aria-label": `Details for row ${row.id}`,
-      children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "yable-detail-cell", colSpan, role: "cell", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "yable-detail-panel", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "yable-detail-panel-inner", children: content }) }) })
-    }
-  );
-}
 function ExpandIcon({
   isExpanded,
   onClick,
@@ -4704,7 +5295,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);
@@ -4769,20 +5360,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;
@@ -4825,7 +5416,7 @@ function PivotConfigPanel({
       onValueFieldsChange
     ]
   );
-  const handleAggregationChange = React3.useCallback(
+  const handleAggregationChange = React4.useCallback(
     (field, aggregation) => {
       onValueFieldsChange(
         valueFields.map(
@@ -4835,7 +5426,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));
@@ -5025,8 +5616,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();
@@ -5091,16 +5682,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;
@@ -5147,12 +5738,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 {
@@ -5374,10 +5965,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);
@@ -5385,7 +5976,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) {
@@ -5414,14 +6005,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}`);
     },
@@ -5431,9 +6022,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();
@@ -5451,7 +6042,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;
@@ -5573,8 +6164,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");
@@ -5616,23 +6207,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");
@@ -5640,8 +6231,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);
@@ -5663,10 +6254,11 @@ function selectColumn(options = {}) {
   const { id = "_select", size = 40, headerAriaLabel = "Select all rows" } = options;
   return {
     id,
-    header: ({ table }) => /* @__PURE__ */ jsxRuntime.jsx(
+    header: ({ table }) => /* @__PURE__ */ jsxRuntime.jsx("label", { className: "yable-checkbox-hitbox", onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         type: "checkbox",
+        className: "yable-checkbox",
         checked: table.getIsAllPageRowsSelected(),
         ref: (el) => {
           if (el)
@@ -5675,19 +6267,21 @@ function selectColumn(options = {}) {
         onChange: () => table.toggleAllPageRowsSelected(),
         "aria-label": headerAriaLabel
       }
-    ),
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(
+    ) }),
+    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx("label", { className: "yable-checkbox-hitbox", onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         type: "checkbox",
+        className: "yable-checkbox",
         checked: row.getIsSelected(),
         disabled: !row.getCanSelect(),
         onChange: row.getToggleSelectedHandler(),
-        "aria-label": `Select row`
+        "aria-label": "Select row"
       }
-    ),
+    ) }),
     size,
-    enableSorting: false,
+    enableSorting: true,
+    sortingFn: (rowA, rowB) => Number(rowA.getIsSelected()) - Number(rowB.getIsSelected()),
     enableColumnFilter: false,
     enableResizing: false,
     enableReorder: false,
@@ -6020,11 +6614,15 @@ exports.Tooltip = Tooltip;
 exports.TreeToggle = TreeToggle;
 exports.YableProvider = YableProvider;
 exports.actionsColumn = actionsColumn;
+exports.applyYableConfigToColumns = applyYableConfigToColumns;
+exports.createYableConfig = createYableConfig;
 exports.expandColumn = expandColumn;
 exports.getMeasureRecipeForCellType = getMeasureRecipeForCellType;
 exports.getRegisteredCellTypes = getRegisteredCellTypes;
+exports.getYableDefaultColumnDef = getYableDefaultColumnDef;
 exports.mergeEditChanges = mergeEditChanges;
 exports.resolveMeasureRecipe = resolveMeasureRecipe;
+exports.resolveYableProfile = resolveYableProfile;
 exports.rowNumberColumn = rowNumberColumn;
 exports.selectColumn = selectColumn;
 exports.useAutoMeasurements = useAutoMeasurements;
@@ -6038,6 +6636,7 @@ exports.usePretextMeasurement = usePretextMeasurement;
 exports.usePrintLayout = usePrintLayout;
 exports.useRowAnimation = useRowAnimation;
 exports.useRowDrag = useRowDrag;
+exports.useServerTable = useServerTable;
 exports.useTable = useTable;
 exports.useTableContext = useTableContext;
 exports.useTablePersistence = useTablePersistence;