@react-fabric/data 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/cjs/table/Table.js

@@ -19,7 +19,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Table = function Table(_ref) {
   var _state$start, _state$cols, _state$end, _items$, _state$start3, _state$cols3, _state$end3;
-  var data = _ref.data,
+  var ref = _ref.ref,
+    data = _ref.data,
     columns = _ref.columns,
     keyProperty = _ref.keyProperty,
     checkableRows = _ref.checkableRows,
@@ -46,12 +47,42 @@ var Table = function Table(_ref) {
     getData = _useVirtualTable.getData,
     totalSize = _useVirtualTable.totalSize,
     measureElement = _useVirtualTable.measureElement;
+  var refBody = react.useRef(null);
   var wrapperStart = react.useMemo(function () {
     return "bg-inherit sticky start-0 flex flex-nowrap z-1";
   }, []);
   var wrapperEnd = react.useMemo(function () {
     return "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px";
   }, []);
+  react.useImperativeHandle(ref, function () {
+    return {
+      hilight: function hilight(row) {
+        var _refBody$current, _refBody$current2;
+        (_refBody$current = refBody.current) === null || _refBody$current === void 0 || _refBody$current.querySelectorAll(".datatable-row[data-hilight=\"true\"]").forEach(function (el) {
+          return el && (el.dataset.hilight = undefined);
+        });
+        var el = (_refBody$current2 = refBody.current) === null || _refBody$current2 === void 0 ? void 0 : _refBody$current2.querySelector("[data-row=\"".concat(row, "\"]"));
+        el === null || el === void 0 || el.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+        el && (el.dataset.hilight = "true");
+      },
+      unhilight: function unhilight() {
+        var _refBody$current3;
+        (_refBody$current3 = refBody.current) === null || _refBody$current3 === void 0 || _refBody$current3.querySelectorAll(".datatable-row[data-hilight=\"true\"]").forEach(function (el) {
+          return el && (el.dataset.hilight = undefined);
+        });
+      },
+      scrollTo: function scrollTo(row) {
+        var _refBody$current4;
+        var el = (_refBody$current4 = refBody.current) === null || _refBody$current4 === void 0 ? void 0 : _refBody$current4.querySelector("[data-row=\"".concat(row, "\"]"));
+        el === null || el === void 0 || el.scrollIntoView({
+          behavior: "smooth"
+        });
+      }
+    };
+  }, []);
   return /*#__PURE__*/jsxRuntime.jsx(Context.TableProvider, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "grid area-content overflow-auto relative",
@@ -96,6 +127,7 @@ var Table = function Table(_ref) {
         style: {
           height: totalSize()
         },
+        ref: refBody,
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
             height: (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.start
@@ -107,7 +139,8 @@ var Table = function Table(_ref) {
           var data = getData(index);
           return /*#__PURE__*/jsxRuntime.jsxs("div", {
             role: "none",
-            className: classNames("flex flex-nowrap", index % 2 ? "bg-even" : "bg-odd", onRowClick && "hover:bg-primary-50 active:bg-primary-100"),
+            "data-row": index,
+            className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500", index % 2 ? "bg-even" : "bg-odd", onRowClick && "hover:bg-primary-50 active:bg-primary-100"),
             onClick: function onClick() {
               return checkableRows && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
             },

package/dist/cjs/tree/TreePanel.js

@@ -11,12 +11,13 @@ var types = require('./types.js');
 var useTree = require('./useTree.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
+var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TreePanel = function TreePanel(_ref) {
   var _virtualItems$;
-  var items = _ref.items,
+  var ref = _ref.ref,
+    items = _ref.items,
     selected = _ref.selected,
     checked = _ref.checked,
     checkable = _ref.checkable,
@@ -48,6 +49,7 @@ var TreePanel = function TreePanel(_ref) {
     expandAll = _useTree.expandAll,
     collapseAll = _useTree.collapseAll,
     select = _useTree.select,
+    expand = _useTree.expand,
     onFilter = _useTree.onFilter;
   var scrollerRef = react.useRef(null);
   var virtualizer = reactVirtual.useVirtualizer({
@@ -66,6 +68,16 @@ var TreePanel = function TreePanel(_ref) {
     if (expander === "folder") return [core.CoreIcons.folderClosed, core.CoreIcons.folderOpen];
     return [core.CoreIcons.expand, core.CoreIcons.collapse];
   }, [expander]);
+  react.useImperativeHandle(ref, function () {
+    return {
+      open: function open(id) {
+        return expand(id);
+      },
+      select: function select(id) {
+        return expand(id);
+      }
+    };
+  }, []);
   return /*#__PURE__*/jsxRuntime.jsxs(core.Section, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(core.Header, {
       flex: true,

package/dist/cjs/tree/useTree.js

@@ -151,6 +151,12 @@ var useTree = function useTree(_ref) {
       id: id
     });
   }, []);
+  var expand = react.useCallback(function (id) {
+    dispatch({
+      type: "expand",
+      id: id
+    });
+  }, []);
   var expandAll = react.useCallback(function () {
     dispatch({
       type: "expandAll"
@@ -174,6 +180,7 @@ var useTree = function useTree(_ref) {
     collapseAll: collapseAll,
     toggleCheck: toggleCheck,
     select: select,
+    expand: expand,
     onFilter: onFilter
   };
 };

package/dist/esm/table/Table.js

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { useDebounce, Loading, EmptyContent } from '@react-fabric/core';
 import classNames from 'classnames';
-import { useMemo } from 'react';
+import { useRef, useMemo, useImperativeHandle } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AddColumn } from './AddColumn.js';
 import { BodyCell } from './BodyCell.js';
@@ -19,7 +19,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Table = function Table(_ref) {
   var _state$start, _state$cols, _state$end, _items$, _state$start3, _state$cols3, _state$end3;
-  var data = _ref.data,
+  var ref = _ref.ref,
+    data = _ref.data,
     columns = _ref.columns,
     keyProperty = _ref.keyProperty,
     checkableRows = _ref.checkableRows,
@@ -46,12 +47,42 @@ var Table = function Table(_ref) {
     getData = _useVirtualTable.getData,
     totalSize = _useVirtualTable.totalSize,
     measureElement = _useVirtualTable.measureElement;
+  var refBody = useRef(null);
   var wrapperStart = useMemo(function () {
     return "bg-inherit sticky start-0 flex flex-nowrap z-1";
   }, []);
   var wrapperEnd = useMemo(function () {
     return "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px";
   }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      hilight: function hilight(row) {
+        var _refBody$current, _refBody$current2;
+        (_refBody$current = refBody.current) === null || _refBody$current === void 0 || _refBody$current.querySelectorAll(".datatable-row[data-hilight=\"true\"]").forEach(function (el) {
+          return el && (el.dataset.hilight = undefined);
+        });
+        var el = (_refBody$current2 = refBody.current) === null || _refBody$current2 === void 0 ? void 0 : _refBody$current2.querySelector("[data-row=\"".concat(row, "\"]"));
+        el === null || el === void 0 || el.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+        el && (el.dataset.hilight = "true");
+      },
+      unhilight: function unhilight() {
+        var _refBody$current3;
+        (_refBody$current3 = refBody.current) === null || _refBody$current3 === void 0 || _refBody$current3.querySelectorAll(".datatable-row[data-hilight=\"true\"]").forEach(function (el) {
+          return el && (el.dataset.hilight = undefined);
+        });
+      },
+      scrollTo: function scrollTo(row) {
+        var _refBody$current4;
+        var el = (_refBody$current4 = refBody.current) === null || _refBody$current4 === void 0 ? void 0 : _refBody$current4.querySelector("[data-row=\"".concat(row, "\"]"));
+        el === null || el === void 0 || el.scrollIntoView({
+          behavior: "smooth"
+        });
+      }
+    };
+  }, []);
   return /*#__PURE__*/jsx(TableProvider, {
     children: /*#__PURE__*/jsxs("div", {
       className: "grid area-content overflow-auto relative",
@@ -96,6 +127,7 @@ var Table = function Table(_ref) {
         style: {
           height: totalSize()
         },
+        ref: refBody,
         children: [/*#__PURE__*/jsx("div", {
           style: {
             height: (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.start
@@ -107,7 +139,8 @@ var Table = function Table(_ref) {
           var data = getData(index);
           return /*#__PURE__*/jsxs("div", {
             role: "none",
-            className: classNames("flex flex-nowrap", index % 2 ? "bg-even" : "bg-odd", onRowClick && "hover:bg-primary-50 active:bg-primary-100"),
+            "data-row": index,
+            className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500", index % 2 ? "bg-even" : "bg-odd", onRowClick && "hover:bg-primary-50 active:bg-primary-100"),
             onClick: function onClick() {
               return checkableRows && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
             },

package/dist/esm/tree/TreePanel.js

@@ -5,18 +5,19 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { CoreIcons, Section, Header, Icon, ButtonGroup, Button } from '@react-fabric/core';
 import { Search } from '@react-fabric/form';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef, useMemo } from 'react';
+import { useRef, useMemo, useImperativeHandle } from 'react';
 import { TreeNode } from './TreeNode.js';
 import { iconExpandAll, iconCollapseAll } from './types.js';
 import { useTree } from './useTree.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
+var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TreePanel = function TreePanel(_ref) {
   var _virtualItems$;
-  var items = _ref.items,
+  var ref = _ref.ref,
+    items = _ref.items,
     selected = _ref.selected,
     checked = _ref.checked,
     checkable = _ref.checkable,
@@ -48,6 +49,7 @@ var TreePanel = function TreePanel(_ref) {
     expandAll = _useTree.expandAll,
     collapseAll = _useTree.collapseAll,
     select = _useTree.select,
+    expand = _useTree.expand,
     onFilter = _useTree.onFilter;
   var scrollerRef = useRef(null);
   var virtualizer = useVirtualizer({
@@ -66,6 +68,16 @@ var TreePanel = function TreePanel(_ref) {
     if (expander === "folder") return [CoreIcons.folderClosed, CoreIcons.folderOpen];
     return [CoreIcons.expand, CoreIcons.collapse];
   }, [expander]);
+  useImperativeHandle(ref, function () {
+    return {
+      open: function open(id) {
+        return expand(id);
+      },
+      select: function select(id) {
+        return expand(id);
+      }
+    };
+  }, []);
   return /*#__PURE__*/jsxs(Section, {
     children: [/*#__PURE__*/jsxs(Header, {
       flex: true,

package/dist/esm/tree/useTree.js

@@ -151,6 +151,12 @@ var useTree = function useTree(_ref) {
       id: id
     });
   }, []);
+  var expand = useCallback(function (id) {
+    dispatch({
+      type: "expand",
+      id: id
+    });
+  }, []);
   var expandAll = useCallback(function () {
     dispatch({
       type: "expandAll"
@@ -174,6 +180,7 @@ var useTree = function useTree(_ref) {
     collapseAll: collapseAll,
     toggleCheck: toggleCheck,
     select: select,
+    expand: expand,
     onFilter: onFilter
   };
 };

package/dist/types/index.d.ts

@@ -3,7 +3,9 @@ export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
 export { Table } from "./table/Table";
+export { type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";
+export { type TreeNodeType as TreeNode } from "./tree/types";
 export { VirtualGallery, type VirtualGalleryRef } from "./virtual/Gallery";
 export { VirtualList, type VirtualListRef } from "./virtual/List";
 export * from "./hooks/useFilteredList";

package/dist/types/table/Table.d.ts

@@ -1,2 +1,2 @@
 import { type TableProps } from "./types";
-export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ data, columns, keyProperty, checkableRows, hideableColumns, sort, loading, onSort, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ ref, data, columns, keyProperty, checkableRows, hideableColumns, sort, loading, onSort, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/table/types.d.ts

@@ -1,4 +1,4 @@
-import { type CssProp, type IconProps, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type CssProp, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement } from "react";
 export declare const COL_MIN_WIDTH = "3rem";
 export declare const COL_MAX_WIDTH = "64rem";
@@ -22,7 +22,12 @@ export interface ColumnType<T = KeyValue> extends CssProp, IconProps, TestProps
     format?: string;
     renderer?: (value: AnyObject, data: T) => void;
 }
-export interface TableProps<T = KeyValue> {
+export interface TableRef {
+    hilight: (row: number) => void;
+    unhilight: () => void;
+    scrollTo: (row: number) => void;
+}
+export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
     columns: Array<ColumnType<T>>;
     data: T[];
     keyProperty: keyof T;

package/dist/types/tree/TreePanel.d.ts

@@ -1,2 +1,2 @@
 import { type TreePanelProps } from "./types";
-export declare const TreePanel: <T extends KeyValue<any>>({ items, selected, checked, checkable, noLines, renderer, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, onSelect, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TreePanel: <T extends KeyValue<any>>({ ref, items, selected, checked, checkable, noLines, renderer, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, onSelect, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/tree/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type BadgeType, type ChildProp, type CssProp, type Elements, type IconProps, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type BadgeType, type ChildProp, type CssProp, type Elements, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
 interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
     id: string;
     /**
@@ -70,7 +70,11 @@ export interface TreeNodeProps extends ChildProp {
     onSelect: (id: string) => void;
     onChecked: (id: string) => void;
 }
-export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps {
+export interface TreeRef {
+    select: (id: string) => void;
+    open: (id: string) => void;
+}
+export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps, RefProp<TreeRef> {
     items?: Array<TreeNodeType<T>>;
     /**
      * make tree searchable

package/dist/types/tree/useTree.d.ts

@@ -13,6 +13,7 @@ export declare const useTree: <T extends KeyValue<any>>({ items, checked, select
     collapseAll: () => void;
     toggleCheck: (id: string) => void;
     select: (id: string) => void;
+    expand: (id: string) => void;
     onFilter: {
         (...args: any): void;
         cancel(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -33,8 +33,8 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.1",
-    "@react-fabric/form": "^1.0.0-beta.1",
+    "@react-fabric/core": "^1.0.0-beta.3",
+    "@react-fabric/form": "^1.0.0-beta.3",
     "@react-fabric/utilities": "^1.0.0-beta.1",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
@@ -51,5 +51,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "e0712d7ea2c945de876bef813b5d2dcec1218ed7"
+  "gitHead": "2ce2a968f48d6ffc338f5da3a0cf67232d0c6864"
 }

package/src/index.ts

@@ -27,7 +27,9 @@ export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
 export { Table } from "./table/Table";
+export { type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";
+export { type TreeNodeType as TreeNode } from "./tree/types";
 export { VirtualGallery, type VirtualGalleryRef } from "./virtual/Gallery";
 export { VirtualList, type VirtualListRef } from "./virtual/List";
 

package/src/table/Table.tsx

@@ -23,7 +23,7 @@
 
 import { EmptyContent, Loading, useDebounce } from "@react-fabric/core";
 import classNames from "classnames";
-import { useMemo } from "react";
+import { useImperativeHandle, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { AddColumn } from "./AddColumn";
 import { BodyCell } from "./BodyCell";
@@ -36,6 +36,7 @@ import { useTableColumns } from "./useTableColumns";
 import { useVirtualTable } from "./useVirtualTable";
 
 export const Table = <T extends KeyValue = KeyValue>({
+  ref,
   data,
   columns,
   keyProperty,
@@ -64,6 +65,7 @@ export const Table = <T extends KeyValue = KeyValue>({
     totalSize,
     measureElement,
   } = useVirtualTable(data, keyProperty, fireCheckChanged);
+  const refBody = useRef<HTMLDivElement>(null);
 
   const wrapperStart = useMemo(
     () => "bg-inherit sticky start-0 flex flex-nowrap z-1",
@@ -74,6 +76,32 @@ export const Table = <T extends KeyValue = KeyValue>({
     [],
   );
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      hilight: (row: number) => {
+        refBody.current
+          ?.querySelectorAll<HTMLElement>(`.datatable-row[data-hilight="true"]`)
+          .forEach((el) => el && (el.dataset.hilight = undefined));
+        const el = refBody.current?.querySelector<HTMLElement>(
+          `[data-row="${row}"]`,
+        );
+        el?.scrollIntoView({ behavior: "smooth", block: "center" });
+        el && (el.dataset.hilight = "true");
+      },
+      unhilight: () => {
+        refBody.current
+          ?.querySelectorAll<HTMLElement>(`.datatable-row[data-hilight="true"]`)
+          .forEach((el) => el && (el.dataset.hilight = undefined));
+      },
+      scrollTo: (row: number) => {
+        const el = refBody.current?.querySelector(`[data-row="${row}"]`);
+        el?.scrollIntoView({ behavior: "smooth" });
+      },
+    }),
+    [],
+  );
+
   return (
     <TableProvider>
       <div
@@ -116,6 +144,7 @@ export const Table = <T extends KeyValue = KeyValue>({
           <div
             className="area-content flex flex-col flex-nowrap"
             style={{ height: totalSize() }}
+            ref={refBody}
           >
             <div style={{ height: items[0]?.start }} />
             {items.map(({ index, key }) => {
@@ -124,8 +153,9 @@ export const Table = <T extends KeyValue = KeyValue>({
                 <div
                   key={key}
                   role="none"
+                  data-row={index}
                   className={classNames(
-                    "flex flex-nowrap",
+                    "flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500",
                     index % 2 ? "bg-even" : "bg-odd",
                     onRowClick && "hover:bg-primary-50 active:bg-primary-100",
                   )}

package/src/table/types.ts

@@ -24,6 +24,7 @@
 import {
   type CssProp,
   type IconProps,
+  type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
 import { type ReactElement } from "react";
@@ -62,7 +63,13 @@ export interface ColumnType<T = KeyValue>
   renderer?: (value: AnyObject, data: T) => void;
 }
 
-export interface TableProps<T = KeyValue> {
+export interface TableRef {
+  hilight: (row: number) => void;
+  unhilight: () => void;
+  scrollTo: (row: number) => void;
+}
+
+export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
   columns: Array<ColumnType<T>>;
   data: T[];
   keyProperty: keyof T;

package/src/tree/TreePanel.tsx

@@ -31,7 +31,7 @@ import {
 } from "@react-fabric/core";
 import { Search } from "@react-fabric/form";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useMemo, useRef } from "react";
+import { useImperativeHandle, useMemo, useRef } from "react";
 import { TreeNode } from "./TreeNode";
 import { iconCollapseAll, iconExpandAll, type TreePanelProps } from "./types";
 import { useTree } from "./useTree";
@@ -39,6 +39,7 @@ import { useTree } from "./useTree";
 // TODO: implement keyboard handler for navigating tree
 
 export const TreePanel = <T extends KeyValue>({
+  ref,
   items,
   selected,
   checked,
@@ -64,6 +65,7 @@ export const TreePanel = <T extends KeyValue>({
     expandAll,
     collapseAll,
     select,
+    expand,
     onFilter,
   } = useTree({
     items,
@@ -93,6 +95,15 @@ export const TreePanel = <T extends KeyValue>({
     return [CoreIcons.expand, CoreIcons.collapse];
   }, [expander]);
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: (id: string) => expand(id),
+      select: (id: string) => expand(id),
+    }),
+    [],
+  );
+
   return (
     <Section>
       <Header

package/src/tree/types.ts

@@ -27,6 +27,7 @@ import {
   type CssProp,
   type Elements,
   type IconProps,
+  type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
 
@@ -105,8 +106,14 @@ export interface TreeNodeProps extends ChildProp {
   onChecked: (id: string) => void;
 }
 
+export interface TreeRef {
+  select: (id: string) => void;
+  open: (id: string) => void;
+}
+
 export interface TreePanelProps<T extends KeyValue = KeyValue>
-  extends TestProps {
+  extends TestProps,
+    RefProp<TreeRef> {
   items?: Array<TreeNodeType<T>>;
   /**
    * make tree searchable

package/src/tree/useTree.ts

@@ -203,6 +203,10 @@ export const useTree = <T extends KeyValue>({
     dispatch({ type: "select", id });
   }, []);
 
+  const expand = useCallback((id: string) => {
+    dispatch({ type: "expand", id });
+  }, []);
+
   const expandAll = useCallback(() => {
     dispatch({ type: "expandAll" });
   }, []);
@@ -222,6 +226,7 @@ export const useTree = <T extends KeyValue>({
     collapseAll,
     toggleCheck,
     select,
+    expand,
     onFilter,
   };
 };