intable 0.0.8 → 0.0.9

package/dist/index.js

@@ -0,0 +1,386 @@
+import { unFn } from "./utils.js";
+import { toReactive, useMemo } from "./hooks/index.js";
+import './style.css';;/* empty css      */
+/* empty css      */
+import { CellSelectionPlugin } from "./plugins/CellSelectionPlugin.js";
+import { ClipboardPlugin } from "./plugins/CopyPastePlugin.js";
+import { EditablePlugin } from "./plugins/EditablePlugin.js";
+import { solidComponent } from "./components/utils.js";
+import { RenderPlugin } from "./plugins/RenderPlugin/index.js";
+import { MenuPlugin } from "./plugins/MenuPlugin.js";
+import { CommandPlugin } from "./plugins/CommandPlugin.js";
+import { RowSelectionPlugin } from "./plugins/RowSelectionPlugin.js";
+import { ResizePlugin } from "./plugins/ResizePlugin.js";
+import { DragPlugin } from "./plugins/DragPlugin.js";
+import { RowGroupPlugin } from "./plugins/RowGroupPlugin.js";
+import { ExpandPlugin } from "./plugins/ExpandPlugin.js";
+import { CellMergePlugin } from "./plugins/CellMergePlugin.js";
+import { TreePlugin } from "./plugins/TreePlugin.js";
+import { HeaderGroupPlugin } from "./plugins/HeaderGroup.js";
+import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import { For, batch, createComputed, createContext, createEffect, createMemo, createSignal, getOwner, mapArray, mergeProps as mergeProps$1, on, onCleanup, onMount, runWithOwner, untrack, useContext } from "solid-js";
+import { createMutable, reconcile } from "solid-js/store";
+import { combineProps } from "@solid-primitives/props";
+import { createLazyMemo } from "@solid-primitives/memo";
+import { createElementSize, createResizeObserver, makeResizeObserver } from "@solid-primitives/resize-observer";
+import { createScrollPosition } from "@solid-primitives/scroll";
+import { difference, mapValues, memoize, sumBy } from "es-toolkit";
+var _tmpl$ = /* @__PURE__ */ template("<table>"), _tmpl$2 = /* @__PURE__ */ template("<thead>"), _tmpl$3 = /* @__PURE__ */ template("<tbody>"), _tmpl$4 = /* @__PURE__ */ template("<tr>"), _tmpl$5 = /* @__PURE__ */ template("<th>"), _tmpl$6 = /* @__PURE__ */ template("<td>"), _tmpl$7 = /* @__PURE__ */ template("<div tabindex=-1><div class=data-table__layers></div><table class=data-table--table>");
+const Ctx = createContext({
+	props: {},
+	store: {}
+}), Intable = (K) => {
+	K = mergeProps$1({ rowKey: "id" }, K);
+	let q = getOwner(), J = createMutable({
+		get rawProps() {
+			return K;
+		},
+		get plugins() {
+			return Z();
+		}
+	}), Y = memoize((W) => runWithOwner(q, () => unFn(W, J))), Z = createMemo(() => [
+		...defaultsPlugins,
+		...K.plugins || [],
+		RenderPlugin
+	].map(Y).sort((h, W) => (W.priority || 0) - (h.priority || 0)));
+	createComputed((h) => {
+		let W = difference(Z(), h);
+		return runWithOwner(q, () => {
+			W.forEach((h) => Object.assign(J, h.store?.(J)));
+		}), Z();
+	}, []);
+	let Q = mapArray(Z, () => createSignal());
+	J.props = toReactive(createMemo(() => Q()[Q().length - 1][0]() || K)), createComputed(mapArray(Z, (h, q) => {
+		let Y = createMemo(() => Q()[q() - 1]?.[0]() || K), X = mergeProps$1(Y, toReactive(mapValues(h.rewriteProps || {}, (h) => useMemo(() => h(Y(), { store: J })))));
+		Q()[q()][1](X);
+	})), onMount(() => {
+		createEffect(mapArray(Z, (h) => h.onMount?.(J)));
+	});
+	let $ = createMutable({
+		props: J.props,
+		store: J
+	});
+	return window.store = J, window.ctx = $, createComponent(Ctx.Provider, {
+		value: $,
+		get children() {
+			return createComponent($.props.Table, { get children() {
+				return [createComponent(THead, {}), createComponent(TBody, {})];
+			} });
+		}
+	});
+};
+var THead = () => {
+	let { props: h } = useContext(Ctx);
+	return createComponent(h.Thead, { get children() {
+		return createComponent(h.Tr, { get children() {
+			return createComponent(h.EachCells, {
+				get each() {
+					return h.columns || [];
+				},
+				children: (W, G) => createComponent(h.Th, {
+					get col() {
+						return W();
+					},
+					get x() {
+						return G();
+					},
+					get children() {
+						return W().name;
+					}
+				})
+			});
+		} });
+	} });
+}, TBody = () => {
+	let { props: h } = useContext(Ctx);
+	return createComponent(h.Tbody, { get children() {
+		return createComponent(h.EachRows, {
+			get each() {
+				return h.data;
+			},
+			children: (W, G) => createComponent(h.Tr, {
+				get y() {
+					return G();
+				},
+				get data() {
+					return W();
+				},
+				get children() {
+					return createComponent(h.EachCells, {
+						get each() {
+							return h.columns;
+						},
+						children: (K, q) => createComponent(h.Td, {
+							get col() {
+								return K();
+							},
+							get x() {
+								return q();
+							},
+							get y() {
+								return G();
+							},
+							get data() {
+								return W();
+							},
+							get children() {
+								return W()[K().id];
+							}
+						})
+					});
+				}
+			})
+		});
+	} });
+}, src_default = Intable;
+function BasePlugin() {
+	let W = {
+		col: null,
+		data: null
+	}, G = (h) => (() => {
+		var W = _tmpl$();
+		return spread(W, h, !1, !1), W;
+	})(), K = (h) => (() => {
+		var W = _tmpl$2();
+		return spread(W, h, !1, !1), W;
+	})(), q = (h) => (() => {
+		var W = _tmpl$3();
+		return spread(W, h, !1, !1), W;
+	})(), J = (h) => (() => {
+		var G = _tmpl$4();
+		return spread(G, mergeProps(h, W), !1, !1), G;
+	})(), Y = (h) => (() => {
+		var G = _tmpl$5();
+		return spread(G, mergeProps(h, W), !1, !1), G;
+	})(), X = (h) => (() => {
+		var G = _tmpl$6();
+		return spread(G, mergeProps(h, W), !1, !1), G;
+	})();
+	return {
+		name: "base",
+		priority: Infinity,
+		store: (h) => {
+			let W = makeResizeObserver((W) => {
+				for (let G of W) {
+					let W = G.target, { inlineSize: K, blockSize: q } = G.borderBoxSize[0], J = h.ths.indexOf(W);
+					J >= 0 && W.parentElement && (h.thSizes[J] = {
+						width: K,
+						height: q
+					});
+				}
+			}), G = makeResizeObserver((W) => {
+				for (let G of W) {
+					let W = G.target, { inlineSize: K, blockSize: q } = G.borderBoxSize[0], J = h.trs.indexOf(W);
+					J >= 0 && W.parentElement && (h.trSizes[J] = {
+						width: K,
+						height: q
+					});
+				}
+			});
+			return {
+				thObs: W,
+				trObs: G,
+				ths: [],
+				thSizes: [],
+				trs: [],
+				trSizes: [],
+				internal: Symbol("internal"),
+				raw: Symbol("raw")
+			};
+		},
+		rewriteProps: {
+			data: ({ data: h = [] }) => h,
+			columns: ({ columns: h = [] }) => h,
+			newRow: ({ newRow: h = () => ({}) }) => h,
+			Table: ({ Table: h = G }, { store: W }) => (W) => {
+				let [G, K] = createSignal(), { props: q } = useContext(Ctx);
+				return W = combineProps({
+					ref: K,
+					get class() {
+						return `data-table ${q.class} ${q.border && "data-table--border"} data-table--${q.size}`;
+					},
+					get style() {
+						return q.style;
+					}
+				}, W), createComponent(h, W);
+			},
+			Thead: ({ Thead: h = K }, { store: W }) => (G) => (G = combineProps({ ref: (h) => W.thead = h }, G), createComponent(h, G)),
+			Tbody: ({ Tbody: h = q }, { store: W }) => (G) => (G = combineProps({ ref: (h) => W.tbody = h }, G), createComponent(h, G)),
+			Tr: ({ Tr: h = J }, { store: W }) => (G) => {
+				let [K, q] = createSignal();
+				return G = combineProps({ ref: q }, G), createEffect(() => {
+					let { y: h } = G;
+					h != null && (W.trs[h] = K(), W.trObs.observe(K()), onCleanup(() => {
+						W.trSizes[h] = W.trs[h] = void 0, W.trObs.unobserve(K());
+					}));
+				}), createComponent(h, G);
+			},
+			Th: ({ Th: W = Y }, { store: G }) => (K) => {
+				let [q, J] = createSignal(), { props: Y } = useContext(Ctx), X = combineProps(K, { ref: J }, {
+					get class() {
+						return unFn(Y.cellClass, K);
+					},
+					get style() {
+						return unFn(Y.cellStyle, K);
+					}
+				}, {
+					get class() {
+						return K.col.class;
+					},
+					get style() {
+						return K.col.style;
+					}
+				}, { get style() {
+					return K.col.width ? `width: ${K.col.width}px` : "";
+				} });
+				return createEffect(() => {
+					if (K.covered || (K.colspan ?? 1) != 1) return;
+					let { x: h } = K;
+					G.ths[h] = q(), G.thObs.observe(q()), onCleanup(() => {
+						G.thSizes[h] = G.ths[h] = void 0, G.thObs.unobserve(q());
+					});
+				}), createComponent(W, mergeProps(X, { get children() {
+					return K.children;
+				} }));
+			},
+			Td: ({ Td: W = X }, { store: G }) => (G) => {
+				let { props: K } = useContext(Ctx), q = combineProps(G, {
+					get class() {
+						return unFn(K.cellClass, G);
+					},
+					get style() {
+						return unFn(K.cellStyle, G);
+					}
+				}, {
+					get class() {
+						return G.col.class;
+					},
+					get style() {
+						return G.col.style;
+					}
+				}, { get style() {
+					return G.col.width ? `width: ${G.col.width}px` : "";
+				} });
+				return createComponent(W, mergeProps(q, { get children() {
+					return G.children;
+				} }));
+			},
+			EachRows: ({ EachRows: h }) => h || ((h) => createComponent(For, {
+				get each() {
+					return h.each;
+				},
+				children: (W, G) => h.children(() => W, G)
+			})),
+			EachCells: ({ EachCells: h }) => h || ((h) => createComponent(For, {
+				get each() {
+					return h.each;
+				},
+				children: (W, G) => h.children(() => W, G)
+			})),
+			renderer: ({ renderer: h = (h) => h }) => h
+		}
+	};
+}
+var IndexPlugin = {
+	name: "index",
+	priority: -Infinity,
+	store: (h) => ({ $index: {
+		name: "",
+		id: Symbol("index"),
+		fixed: "left",
+		[h.internal]: 1,
+		width: 40,
+		style: "text-align: center",
+		class: "index",
+		render: solidComponent((h) => memo(() => h.y + 1))
+	} }),
+	rewriteProps: { columns: ({ columns: h }, { store: W }) => W.props?.index ? [W.$index, ...h || []] : h }
+}, StickyHeaderPlugin = {
+	name: "sticky-header",
+	rewriteProps: { Thead: ({ Thead: h }) => (W) => {
+		let { props: G } = useContext(Ctx);
+		return W = combineProps({ get class() {
+			return G.stickyHeader ? "sticky-header" : "";
+		} }, W), createComponent(h, W);
+	} }
+}, FixedColumnPlugin = (W) => {
+	let G = createLazyMemo(() => {
+		let h = {};
+		for (let [G, K] of W.props.columns.entries()) K.fixed === "left" && (h[G] = sumBy(W.thSizes.slice(0, G), (h) => h?.width || 0)), K.fixed === "right" && (h[G] = sumBy(W.thSizes.slice(G + 1), (h) => h?.width || 0));
+		return h;
+	}), K = createLazyMemo(() => W.props.columns.filter((h) => h.fixed == "left").length - 1), q = createLazyMemo(() => W.props.columns.length - W.props.columns.filter((h) => h.fixed == "right").length);
+	return {
+		name: "fixed-column",
+		rewriteProps: {
+			columns: ({ columns: h }) => [
+				...h?.filter((h) => h.fixed == "left") || [],
+				...h?.filter((h) => !h.fixed) || [],
+				...h?.filter((h) => h.fixed == "right") || []
+			],
+			cellClass: ({ cellClass: W }) => (G) => (unFn(W, G) || "") + (G.col.fixed ? ` fixed-${G.col.fixed} ${G.x == K() ? "is-last" : ""} ${G.x == q() ? "is-first" : ""}` : ""),
+			cellStyle: ({ cellStyle: W }) => (K) => (unFn(W, K) || "") + (K.col.fixed ? `; ${K.col.fixed}: ${G()[K.x]}px` : "")
+		}
+	};
+}, FitColWidthPlugin = (h) => {
+	let W = createMutable({ width: 0 });
+	createResizeObserver(() => h.scroll_el, (h, G, K) => W.width = K.contentBoxSize[0].inlineSize);
+	let G = createMutable([]), K = !1;
+	return createEffect(on(() => [W.width, h.props.columns.map((h) => h.width)], async () => {
+		if (!W.width || K) return;
+		G.length = 0, K = !0, await Promise.resolve();
+		let q = (W.width - h.table.getBoundingClientRect().width) / h.props.columns.filter((h) => !h.width).length, J = h.props.columns.map((W, G) => W.width ? null : { width: Math.max((h.ths[G]?.getBoundingClientRect().width || 0) + q, 80) });
+		G.push(...J), K = !1;
+	})), {
+		name: "fit-col-width",
+		priority: -Infinity,
+		rewriteProps: { columns: ({ columns: h }, { store: W }) => (h = h.map((h, K) => ({
+			...h,
+			...G?.[K],
+			[W.raw]: h[W.raw] ?? h
+		})), untrack(() => batch(() => reconcile(h, { key: W.raw })(W.__fit_col_width__cols ??= [])))) }
+	};
+};
+const ScrollPlugin = {
+	name: "scroll",
+	priority: Infinity,
+	rewriteProps: { Table: (h, { store: W }) => (h) => {
+		let G = createScrollPosition(() => W.scroll_el), K = createElementSize(() => W.scroll_el), q = createMemo(() => {
+			let h = W.scroll_el;
+			if (!h) return;
+			let q = G.x == 0, J = G.x >= h.scrollWidth - (K.width || 0);
+			return q && J ? "" : !q && !J ? "is-scroll-mid" : q ? "is-scroll-left" : J ? "is-scroll-right" : "";
+		});
+		h = combineProps(h, {
+			ref: (h) => W.scroll_el = h,
+			class: "data-table--scroll-view"
+		}, { get class() {
+			return q();
+		} });
+		let J = mapArray(() => W.plugins.flatMap((h) => h.layers ?? []), (h) => createComponent(h, W));
+		return (() => {
+			var G = _tmpl$7(), K = G.firstChild, q = K.nextSibling;
+			return spread(G, h, !1, !0), insert(K, J), use((h) => W.table = h, q), insert(q, () => h.children), G;
+		})();
+	} }
+}, defaultsPlugins = [
+	ScrollPlugin,
+	BasePlugin,
+	CommandPlugin,
+	MenuPlugin,
+	CellSelectionPlugin,
+	StickyHeaderPlugin,
+	HeaderGroupPlugin,
+	FixedColumnPlugin,
+	DragPlugin,
+	ClipboardPlugin,
+	ExpandPlugin,
+	RowSelectionPlugin,
+	IndexPlugin,
+	EditablePlugin,
+	CellMergePlugin,
+	TreePlugin,
+	FitColWidthPlugin,
+	RowGroupPlugin,
+	ResizePlugin
+];
+export { Ctx, Intable, ScrollPlugin, src_default as default, defaultsPlugins };

package/dist/loading.js

@@ -0,0 +1,6 @@
+import { spread, template } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ template("<svg width=1.2em height=1.2em xmlns=http://www.w3.org/2000/svg viewBox=\"0 0 24 24\"><g><rect width=2 height=5 x=11 y=1 fill=currentColor opacity=.14></rect><rect width=2 height=5 x=11 y=1 fill=currentColor opacity=.29 transform=\"rotate(30 12 12)\"></rect><rect width=2 height=5 x=11 y=1 fill=currentColor opacity=.43 transform=\"rotate(60 12 12)\"></rect><rect width=2 height=5 x=11 y=1 fill=currentColor opacity=.57 transform=\"rotate(90 12 12)\"></rect><rect width=2 height=5 x=11 y=1 fill=currentColor opacity=.71 transform=\"rotate(120 12 12)\"></rect><rect width=2 height=5 x=11 y=1 fill=currentColor opacity=.86 transform=\"rotate(150 12 12)\"></rect><rect width=2 height=5 x=11 y=1 fill=currentColor transform=\"rotate(180 12 12)\"></rect><animateTransform attributeName=transform calcMode=discrete dur=0.75s repeatCount=indefinite type=rotate values=\"0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12\">"), loading_default = (n = {}) => (() => {
+	var r = _tmpl$();
+	return spread(r, n, !0, !0), r;
+})();
+export { loading_default as default };

package/dist/plugins/CellChangeHighlightPlugin.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from '..';
+export declare function CellChangeHighlightPlugin(): Plugin;

package/dist/plugins/CellChangeHighlightPlugin.js

@@ -0,0 +1,4 @@
+function CellChangeHighlightPlugin() {
+	return {};
+}
+export { CellChangeHighlightPlugin };

package/dist/plugins/CellMergePlugin.d.ts

@@ -0,0 +1,45 @@
+import { createMemo } from 'solid-js';
+import { type Plugin } from '../index';
+declare module '../index' {
+    interface TableProps {
+        /**
+         * Per-cell merge config. Return `{ rowspan?, colspan? }` for an anchor cell.
+         * Covered cells are hidden automatically.
+         *
+         * @example
+         * merge={(row, col, y, x) => {
+         *   if (col.id === 'name' && row.name === data[y - 1]?.name) return null
+         *   if (col.id === 'name') {
+         *     let rowspan = 1
+         *     while (data[y + rowspan]?.name === row.name) rowspan++
+         *     return rowspan > 1 ? { rowspan } : null
+         *   }
+         * }}
+         */
+        merge?: (row: any, col: TableColumn, y: number, x: number) => {
+            rowspan?: number;
+            colspan?: number;
+        } | null | void;
+    }
+    interface TableColumn {
+        /**
+         * Shorthand: auto-merge consecutive rows in this column that share the same cell value.
+         * Equivalent to writing a `merge` function that compares adjacent row values.
+         */
+        mergeRow?: boolean;
+    }
+    interface TableStore {
+        /** Pre-computed merge result: anchor spans and covered cell keys. */
+        _mergeMap?: ReturnType<typeof createMemo<MergeMap>>;
+    }
+}
+type CellKey = `${number},${number}`;
+interface MergeMap {
+    spans: Map<CellKey, {
+        rowspan: number;
+        colspan: number;
+    }>;
+    covered: Set<CellKey>;
+}
+export declare const CellMergePlugin: Plugin;
+export {};

package/dist/plugins/CellMergePlugin.js

@@ -0,0 +1,78 @@
+import { createComponent } from "solid-js/web";
+import { Show, createMemo } from "solid-js";
+import { combineProps } from "@solid-primitives/props";
+function buildMergeMap(e, t, n) {
+	let r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Set();
+	for (let a = 0; a < e.length; a++) for (let o = 0; o < t.length; o++) {
+		let s = `${a},${o}`;
+		if (i.has(s)) continue;
+		let c = t[o], l = e[a], u = 1, d = 1;
+		if (n) {
+			let e = n(l, c, a, o);
+			e && (u = e.rowspan ?? 1, d = e.colspan ?? 1);
+		} else if (c.mergeRow) for (; a + u < e.length && e[a + u]?.[c.id] === l[c.id];) u++;
+		if (u > 1 || d > 1) {
+			r.set(s, {
+				rowspan: u,
+				colspan: d
+			});
+			for (let e = 0; e < u; e++) for (let t = 0; t < d; t++) e === 0 && t === 0 || i.add(`${a + e},${o + t}`);
+		}
+	}
+	return {
+		spans: r,
+		covered: i
+	};
+}
+const CellMergePlugin = {
+	name: "cell-merge",
+	rewriteProps: {
+		Table: ({ Table: t }, { store: r }) => (a) => (r._mergeMap ??= createMemo(() => {
+			let { merge: e, data: t, columns: n } = r.props;
+			return !e && !n?.some((e) => e.mergeRow) || !t?.length || !n?.length ? {
+				spans: /* @__PURE__ */ new Map(),
+				covered: /* @__PURE__ */ new Set()
+			} : buildMergeMap(t, n, e);
+		}), createComponent(t, a)),
+		Td: ({ Td: n }, { store: i }) => (a) => {
+			let o = () => `${a.y},${a.x}`, s = () => i._mergeMap?.().covered.has(o()) ?? !1, c = () => i._mergeMap?.().spans.get(o());
+			return a = combineProps(a, {
+				get rowspan() {
+					return c()?.rowspan;
+				},
+				get colspan() {
+					return c()?.colspan;
+				}
+			}), createComponent(Show, {
+				get when() {
+					return !s();
+				},
+				get children() {
+					return createComponent(n, a);
+				}
+			});
+		},
+		newRow: ({ newRow: e }, { store: t }) => function(n) {
+			let r = e(n), { data: i, columns: a, merge: o } = t.props;
+			return !i?.length || !a?.length || a.forEach((e, a) => {
+				if (e.mergeRow) {
+					let t = i[n] ?? i[n - 1];
+					t != null && (r[e.id] ??= t[e.id]);
+					return;
+				}
+				if (o && t._mergeMap) {
+					let o = `${n},${a}`;
+					if (!t._mergeMap().covered.has(o) || !t._mergeMap().spans.has(o)) return;
+					for (let o = n; o >= 0; o--) {
+						let n = `${o},${a}`, s = t._mergeMap().spans.get(n);
+						if (s && s.rowspan > 1) {
+							r[e.id] ??= i[o]?.[e.id];
+							break;
+						}
+					}
+				}
+			}), r;
+		}
+	}
+};
+export { CellMergePlugin };

package/dist/plugins/CellSelectionPlugin.d.ts

@@ -0,0 +1,15 @@
+import { type Plugin } from '..';
+declare module '../index' {
+    interface TableProps {
+    }
+    interface TableStore {
+        selected: {
+            start: number[];
+            end: number[];
+        };
+    }
+    interface Commands {
+        getAreaRows(): any[];
+    }
+}
+export declare const CellSelectionPlugin: Plugin;

package/dist/plugins/CellSelectionPlugin.js

@@ -0,0 +1,113 @@
+import { usePointerDrag } from "../hooks/index.js";
+import { createComponent, memo, mergeProps, template } from "solid-js/web";
+import { batch, createMemo } from "solid-js";
+import { combineProps } from "@solid-primitives/props";
+var _tmpl$ = /* @__PURE__ */ template("<div class=area>"), inrange = (e, i, a) => e <= a && e >= i;
+const CellSelectionPlugin = {
+	name: "cell-selection",
+	store: () => ({ selected: {
+		start: [],
+		end: []
+	} }),
+	commands: (e) => ({ getAreaRows() {
+		let { start: i, end: a } = e.selected, [o, s] = [i[1], a[1]].sort((e, i) => e - i);
+		return e.props.data.slice(o, s + 1);
+	} }),
+	rewriteProps: {
+		Table: ({ Table: a }, { store: o }) => (s) => (o.cellSelectionRect ??= createMemo(() => {
+			let { start: e, end: i } = o.selected, a = [e[0], i[0]].sort((e, i) => e - i), s = [e[1], i[1]].sort((e, i) => e - i);
+			return {
+				xs: a,
+				ys: s
+			};
+		}), usePointerDrag(() => o.table, {
+			preventDefault: !1,
+			start(e, i, a) {
+				batch(() => {
+					let a = (e) => e.composedPath().find((e) => e.tagName == "TH" || e.tagName == "TD"), s = (e) => [e.getAttribute("x"), e.getAttribute("y")], c = a(e);
+					if (c && !(e.buttons != 1 && c.classList.contains("range-selected"))) {
+						if (c.tagName == "TH") {
+							let [e, l] = s(c);
+							if (e == null) return;
+							o.selected.start = [+e, 0], o.selected.end = [+e, Infinity], i((e) => {
+								let i = a(e);
+								if (!i) return;
+								let [c, l] = s(i);
+								c != null && (o.selected.end = [+c, Infinity]);
+							});
+						}
+						if (c.classList.contains("index")) {
+							let [e, l] = s(c);
+							if (e == null || l == null) return;
+							o.selected.start = [0, +l], o.selected.end = [Infinity, +l], i((e) => {
+								let i = a(e);
+								if (!i) return;
+								let [c, l] = s(i);
+								c == null || l == null || (o.selected.end = [Infinity, +l]);
+							});
+						} else if (c.tagName == "TD") {
+							let [e, l] = s(c);
+							if (e == null || l == null) return;
+							o.selected.start = [+e, +l], o.selected.end = [...o.selected.start], i((e) => {
+								let i = a(e);
+								if (!i) return;
+								let [c, l] = s(i);
+								c == null || l == null || (o.selected.end = [+c, +l]);
+							});
+						}
+					}
+				});
+			}
+		}), s = combineProps({ class: "select-none" }, s), createComponent(a, s)),
+		Th: ({ Th: e }, { store: s }) => (c) => {
+			let u = createMemo(() => {
+				let { start: e, end: i } = s.selected;
+				return inrange(c.x, ...[e[0], i[0]].sort((e, i) => e - i)) ? "col-range-highlight" : "";
+			}), d = combineProps(c, { get class() {
+				return u();
+			} });
+			return createComponent(e, mergeProps(d, { get children() {
+				return [memo(() => d.children), memo(() => memo(() => !!u())() && _tmpl$())];
+			} }));
+		},
+		Td: ({ Td: e }, { store: s }) => (c) => {
+			let u = createMemo(() => {
+				let e = "", { xs: i, ys: a } = s.cellSelectionRect(), o = inrange(c.x, i[0], i[1]), l = inrange(c.y, a[0], a[1]);
+				return o && l && (e += "range-selected ", c.x == i[0] && (e += "range-selected-l "), c.x == i[1] && (e += "range-selected-r "), c.y == a[0] && (e += "range-selected-t "), c.y == a[1] && (e += "range-selected-b ")), c.col.id == s.$index.id && l && (e += "row-range-highlight "), e;
+			}), d = combineProps(c, {
+				get class() {
+					return u();
+				},
+				tabindex: -1
+			});
+			return createComponent(e, mergeProps(d, { get children() {
+				return [memo(() => d.children), memo(() => memo(() => !!u())() && _tmpl$())];
+			} }));
+		}
+	},
+	keybindings: (e) => {
+		let i = () => {
+			let i = e.table?.querySelector(`td[x="${e.selected.start[0]}"][y="${e.selected.start[1]}"]`);
+			i?.scrollIntoViewIfNeeded(!1), i?.focus();
+		};
+		return {
+			ArrowLeft: () => {
+				let { start: a, end: o } = e.selected;
+				a.length && (a[0] = o[0] = Math.max(a[0] - 1, 0), o[1] = a[1], i());
+			},
+			ArrowRight: () => {
+				let { start: a, end: o } = e.selected;
+				a.length && (a[0] = o[0] = Math.min(a[0] + 1, e.props.columns.length - 1), o[1] = a[1], i());
+			},
+			ArrowUp: () => {
+				let { start: a, end: o } = e.selected;
+				a.length && (a[1] = o[1] = Math.max(a[1] - 1, 0), o[0] = a[0], i());
+			},
+			ArrowDown: () => {
+				let { start: a, end: o } = e.selected;
+				a.length && (a[1] = o[1] = Math.min(a[1] + 1, e.props.data.length - 1), o[0] = a[0], i());
+			}
+		};
+	}
+};
+export { CellSelectionPlugin };

package/dist/plugins/CommandPlugin.d.ts

@@ -0,0 +1,14 @@
+import { type Plugin } from '..';
+declare module '../index' {
+    interface TableProps {
+    }
+    interface TableStore {
+        commands: Commands;
+    }
+    interface Plugin {
+        commands?: (store: TableStore, commands: Partial<Commands>) => Partial<Commands> & Record<string, any>;
+    }
+    interface Commands {
+    }
+}
+export declare const CommandPlugin: Plugin;