xontable 0.1.3 → 0.1.4

package/README.md

@@ -139,12 +139,27 @@ Values are `true` / `false`.
 
 ## Column Groups
 
+Group columns by giving the same `group` name:
+
+```ts
+const columns: ColumnDef<Row>[] = [
+  { key: "name", label: "Name", group: "User" },
+  { key: "active", label: "Active", type: "checkbox", group: "User" },
+  { key: "group", label: "Group", type: "select", group: "Account Details" },
+  { key: "subgroup", label: "Subgroup", type: "select", group: "Account Details" },
+  { key: "city", label: "City", type: "select", group: "Login info" },
+];
+```
+
+Collapsible groups:
+
 ```ts
-{ key: "name", label: "Name", group: "User" }
 { key: "active", label: "Active", group: "User", groupCollapsible: true }
 ```
 
-Groups render a top header row and can be collapsed if `groupCollapsible` is true.
+Notes:
+- The top header row shows group labels.
+- If any column in a group has `groupCollapsible: true`, the group is collapsible.
 
 ## Filters
 Each column header shows a filter icon.

package/dist/XOnTable.js

@@ -171,7 +171,7 @@ export function XOnTable(props) {
         onGridKeyDown(e);
     }, [active.c, active.r, onGridKeyDown, selection]);
     useOutsideClick({ isOpen: filters.filterOpenKey != null, onClose: filters.closeFilter });
-    return (_jsxs("div", { className: `xontable-wrap theme-${theme}${readOnly ? " is-readonly" : ""}`, children: [_jsx("textarea", { ref: clipRef, className: "xontable-clip", name: "xontable-clip", "aria-hidden": "true", tabIndex: -1, onCopy: onCopy, onPaste: onPaste, onKeyDown: onGridKeyDownWithCopy, readOnly: true }), _jsx("div", { className: "xontable-surface", tabIndex: 0, onFocus: (e) => {
+    return (_jsxs("div", { className: `xontable-wrap theme-${theme}${readOnly ? " is-readonly" : ""}`, children: [_jsx("textarea", { ref: clipRef, className: "xontable-clip", name: "xontable-clip", "aria-hidden": "true", tabIndex: -1, onCopy: onCopy, onPaste: onPaste, onKeyDown: onGridKeyDownWithCopy, readOnly: true }), _jsx("div", { className: `xontable-surface${filters.filterOpenKey ? " is-filter-open" : ""}`, tabIndex: 0, onFocus: (e) => {
                     const target = e.target;
                     if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA"))
                         return;

package/dist/styles/xontable.base.css

@@ -1,5 +1,6 @@
 .xontable-wrap { display: block; width: 100%; height: 100%; border: 1px solid #e3e5ea; border-radius: 8px; overflow: hidden; background: #fff; --xontable-range: #1a73e8; --xontable-copy: #1a1a1a; }
-.xontable-surface { outline: none; width: 100%; height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: #b9c1cd transparent; }
+.xontable-surface { outline: none; width: 100%; height: 100%; min-height: 220px; overflow: auto; scrollbar-width: thin; scrollbar-color: #b9c1cd transparent; }
+.xontable-surface.is-filter-open { overflow-x: auto; overflow-y: visible; }
 .xontable-surface::-webkit-scrollbar { width: 8px; height: 8px; }
 .xontable-surface::-webkit-scrollbar-thumb { background: #b9c1cd; border-radius: 999px; }
 .xontable-surface::-webkit-scrollbar-track { background: transparent; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xontable",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",