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

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

@@ -0,0 +1,4 @@
+export declare const CheckboxCell: ({ state, onClick, }: {
+    state: 0 | 1 | 2;
+    onClick?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { type ChildrenProp } from "@react-fabric/core/dist/types/types";
+interface Context {
+    widths: Map<string, number>;
+    startResize: (col: HTMLElement) => void;
+}
+export declare const TableProvider: ({ children }: ChildrenProp) => import("react/jsx-runtime").JSX.Element;
+export declare const useTableContext: () => Context;
+export {};

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

@@ -0,0 +1,2 @@
+import { type ColumnType } from "./types";
+export declare const EmptyCell: ({ id, width: _width, maxWidth, minWidth, }: ColumnType) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-import { type ColumnType } from "./types";
-export declare const HeaderCell: ({ label, icon, iconBg, iconColor, rtlFlip, actions, locked, resizable, width, maxWidth, minWidth, }: ColumnType) => import("react/jsx-runtime").JSX.Element;
+import { type ColumnType, type TableProps } from "./types";
+export declare const HeaderCell: ({ id, label, icon, iconBg, iconColor, rtlFlip, actions, locked, sortable, resizable, width: _width, maxWidth, minWidth, sort, onSort, }: ColumnType & Pick<TableProps, "sort" | "onSort">) => import("react/jsx-runtime").JSX.Element;

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, }: 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,5 +1,8 @@
-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";
+export declare const COL_DEFAULT_WIDTH = "12rem";
 export interface ColumnType<T = KeyValue> extends CssProp, IconProps, TestProps {
     id: keyof T;
     label?: string;
@@ -19,8 +22,32 @@ 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[];
-    autoColumns?: boolean;
+    keyProperty: keyof T;
+    /**
+     * checkable rows
+     */
+    checkableRows?: boolean;
+    onCheckedChanged?: (rows: Array<keyof T>) => void;
+    /**
+     * sorting
+     */
+    sort?: {
+        id: string;
+        order: "asc" | "desc";
+    };
+    onSort?: (sort: {
+        id: string;
+        order: "asc" | "desc";
+    }) => void;
+    loading?: boolean;
+    hideableColumns?: boolean;
+    onRowClick?: (data: T) => void;
 }

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

@@ -0,0 +1 @@
+export declare const useResizer: (colEl: HTMLElement, ghostEl: HTMLElement, callback: (width: number) => void) => void;

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

@@ -1,8 +1,10 @@
 import { type ColumnType } from "./types";
 export declare const useTableColumns: (columns: ColumnType[]) => {
-    columnMap: {
-        start: ColumnType[];
-        end: ColumnType[];
-        cols: ColumnType[];
+    state: {
+        start: ColumnType<KeyValue<any>>[];
+        end: ColumnType<KeyValue<any>>[];
+        cols: ColumnType<KeyValue<any>>[];
+        columns: ColumnType[];
     };
+    onHide: (id: string) => void;
 };

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

@@ -1,8 +1,16 @@
 /// <reference types="react" />
-export declare const useVirtualTable: (data: KeyValue[]) => {
+interface DataState {
+    checked: Key[];
+    allChecked: 0 | 1 | 2;
+}
+export declare const useVirtualTable: (data: KeyValue[], keyProperty: Key, onCheckChanged: (checked: Key[]) => void) => {
     scrollerRef: import("react").RefObject<HTMLDivElement>;
     items: import("@tanstack/virtual-core").VirtualItem<Element>[];
+    checkState: DataState;
     getData: (index: number) => KeyValue<any>;
     totalSize: () => number;
     measureElement: (node: Element | null | undefined) => void;
+    toggleChecked: (key: Key) => void;
+    toggleAllChecked: () => void;
 };
+export {};

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.0",
+  "version": "1.0.0-beta.3",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -33,9 +33,9 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.0",
-    "@react-fabric/form": "^1.0.0-beta.0",
-    "@react-fabric/utilities": "^1.0.0-beta.0",
+    "@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",
     "color": "^4.2.3",
@@ -51,5 +51,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "83fa79064b1d57e71149005432192d506810bbda"
+  "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/AddColumn.tsx

@@ -0,0 +1,55 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CoreIcons, Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
+import { type ColumnType } from "./types";
+
+export const AddColumn = ({
+  columns,
+  onClick,
+}: {
+  columns: ColumnType[];
+  onClick: (id: string) => void;
+}) => {
+  return (
+    <div className="group font-medium w-6 flex flex-nowrap text-start items-end">
+      <Dropdown placement="bottom-end">
+        <Icon
+          icon={CoreIcons.insert}
+          className="p-1 rounded-t rounded-b-none hover:outline"
+        />
+        <Menu className="text-sm" onClick={onClick}>
+          {columns.map((col) => (
+            <MenuItem
+              key={String(col.id)}
+              id={String(col.id)}
+              data-dropdown-dismiss="false"
+              label={`${col.label ?? String(col.id)}`}
+              icon={!col.hidden ? CoreIcons.tick : ""}
+            />
+          ))}
+        </Menu>
+      </Dropdown>
+    </div>
+  );
+};

package/src/table/BodyCell.tsx

@@ -22,7 +22,14 @@
  */
 
 import classNames from "classnames";
-import { type ColumnType } from "./types";
+import { useMemo } from "react";
+import { useTableContext } from "./Context";
+import {
+  COL_DEFAULT_WIDTH,
+  COL_MAX_WIDTH,
+  COL_MIN_WIDTH,
+  type ColumnType,
+} from "./types";
 
 export const BodyCell = ({
   column,
@@ -31,13 +38,20 @@ export const BodyCell = ({
   column: ColumnType;
   item: KeyValue;
 }) => {
+  const { widths } = useTableContext();
+
+  const width = useMemo(
+    () => widths.get(column.id.toString()) ?? column.width,
+    [widths, column],
+  );
+
   return (
     <div
       className="overflow-hidden bg-inherit start-0"
       style={{
-        width: column.width ?? "12rem",
-        minWidth: column.minWidth ?? "2rem",
-        maxWidth: column.maxWidth ?? "32rem",
+        width: width ?? COL_DEFAULT_WIDTH,
+        minWidth: column.minWidth ?? COL_MIN_WIDTH,
+        maxWidth: column.maxWidth ?? COL_MAX_WIDTH,
       }}
     >
       <div

package/src/table/CheckboxCell.tsx

@@ -0,0 +1,48 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CoreIcons, Icon } from "@react-fabric/core";
+
+export const CheckboxCell = ({
+  state,
+  onClick,
+}: {
+  state: 0 | 1 | 2;
+  onClick?: () => void;
+}) => {
+  return (
+    <div className="group font-medium border-e w-6 flex flex-nowrap text-start items-center">
+      <Icon
+        icon={
+          state === 2
+            ? CoreIcons.checkboxInt
+            : state === 1
+              ? CoreIcons.checkboxOn
+              : CoreIcons.checkboxOff
+        }
+        className="p-1 text-tint-700 hover:text-primary-600"
+        onClick={(e) => [onClick?.(), e.stopPropagation()]}
+      />
+    </div>
+  );
+};

package/src/table/Context.tsx

@@ -0,0 +1,70 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { type ChildrenProp } from "@react-fabric/core/dist/types/types";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+import { useResizer } from "./useResizer";
+
+interface Context {
+  widths: Map<string, number>;
+  startResize: (col: HTMLElement) => void;
+}
+
+const TableContext = createContext<Context>({} as Context);
+
+export const TableProvider = ({ children }: ChildrenProp) => {
+  const ghostRef = useRef<HTMLDivElement>(null);
+  const [widths, setWidths] = useState<Map<string, number>>(new Map());
+  const startResize = useCallback(
+    (col: HTMLElement) => {
+      if (col) {
+        ghostRef.current != null &&
+          useResizer(col, ghostRef.current, (width) => {
+            setWidths(new Map(widths.set(col.dataset.id ?? "", width)));
+          });
+      }
+    },
+    [widths],
+  );
+
+  return (
+    <TableContext.Provider value={{ startResize, widths }}>
+      {children}
+
+      <div
+        className="absolute inset-0 hidden z-20 cursor-col-resize"
+        ref={ghostRef}
+      >
+        <div className="absolute inset-y-0 bg-muted opacity-50 border-primary border-e-2" />
+      </div>
+    </TableContext.Provider>
+  );
+};
+
+export const useTableContext = () => useContext(TableContext);

package/src/table/EmptyCell.tsx

@@ -0,0 +1,57 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useMemo } from "react";
+import { useTableContext } from "./Context";
+import {
+  COL_DEFAULT_WIDTH,
+  COL_MAX_WIDTH,
+  COL_MIN_WIDTH,
+  type ColumnType,
+} from "./types";
+
+export const EmptyCell = ({
+  id,
+  width: _width,
+  maxWidth,
+  minWidth,
+}: ColumnType) => {
+  const { widths } = useTableContext();
+
+  const width = useMemo(
+    () => widths.get(id.toString()) ?? _width,
+    [widths, id, _width],
+  );
+
+  return (
+    <div
+      key={`blank:${id.toString()}`}
+      className="overflow-hidden border-e"
+      style={{
+        width: width ?? COL_DEFAULT_WIDTH,
+        minWidth: minWidth ?? COL_MIN_WIDTH,
+        maxWidth: maxWidth ?? COL_MAX_WIDTH,
+      }}
+    />
+  );
+};

package/src/table/HeaderCell.tsx

@@ -21,10 +21,26 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
-import { type ColumnType } from "./types";
+import {
+  CoreIcons,
+  DropdownTool,
+  Icon,
+  Menu,
+  MenuItem,
+  Tooltip,
+} from "@react-fabric/core";
+import { useCallback, useMemo } from "react";
+import { useTableContext } from "./Context";
+import {
+  COL_DEFAULT_WIDTH,
+  COL_MAX_WIDTH,
+  COL_MIN_WIDTH,
+  type ColumnType,
+  type TableProps,
+} from "./types";
 
 export const HeaderCell = ({
+  id,
   label,
   icon,
   iconBg,
@@ -32,38 +48,89 @@ export const HeaderCell = ({
   rtlFlip,
   actions,
   locked,
+  sortable,
   resizable,
-  width,
+  width: _width,
   maxWidth,
   minWidth,
-}: ColumnType) => {
+  sort,
+  onSort,
+}: ColumnType & Pick<TableProps, "sort" | "onSort">) => {
+  const { startResize, widths } = useTableContext();
+
+  const width = useMemo(
+    () => widths.get(id.toString()) ?? _width,
+    [widths, _width, id],
+  );
+
+  const handleSort = useCallback(() => {
+    sortable &&
+      onSort?.({
+        id: id.toString(),
+        order: sort?.id === id && sort.order === "asc" ? "desc" : "asc",
+      });
+  }, [onSort, name, sort, sortable]);
+
+  const menus = useMemo(() => {
+    const ret = [];
+    if (sortable) {
+      ret.push(
+        <MenuItem
+          key="sort-asc"
+          label="Sort ascending"
+          icon={CoreIcons.sortAsc}
+        />,
+        <MenuItem
+          key="sort-desc"
+          label="Sort descending"
+          icon={CoreIcons.sortDesc}
+        />,
+      );
+    }
+    return ret;
+  }, [sortable]);
+
   return (
     <div
-      className="group font-medium border-e flex flex-nowrap text-start items-center"
+      role="none"
+      data-id={id}
+      onClick={handleSort}
+      className="group font-medium border-e flex flex-nowrap text-start items-center table-header-cell"
       style={{
-        width: width ?? "12rem",
-        minWidth: minWidth ?? "2rem",
-        maxWidth: maxWidth ?? "32rem",
+        width: width ?? COL_DEFAULT_WIDTH,
+        minWidth: minWidth ?? COL_MIN_WIDTH,
+        maxWidth: maxWidth ?? COL_MAX_WIDTH,
       }}
     >
-      <div className="flex-1 px-2 py-1 text-sm truncate sticky start-0">
-        {icon && (
-          <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
-        )}
-        <span>{label ?? " "}</span>
-      </div>
-      <Dropdown placement="bottom-start">
-        <Icon
-          icon={CoreIcons.caretDown}
-          className="outline bg-base me-0.5 flex-content hidden group-hover:inline-block data-[dropdown-open]:inline-block"
-        />
-        <Menu className="text-sm">
-          <MenuItem label="Sort ascending" icon={CoreIcons.sortAsc} />
-          <MenuItem label="Sort descending" icon={CoreIcons.sortDesc} />
-        </Menu>
-      </Dropdown>
+      <Tooltip content={label} disabled={!label}>
+        <div className="flex-initial px-2 py-1 text-sm truncate sticky start-0">
+          {icon && (
+            <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
+          )}
+          <span>{label ?? " "}</span>
+        </div>
+      </Tooltip>
+      {sortable && (
+        <div className="text-sm text-tint-300">
+          {sort?.id === id && sort?.order === "desc" && <span>▼</span>}
+          {sort?.id === id && sort?.order === "asc" && <span>▲</span>}
+        </div>
+      )}
+      <div className="flex-1" />
+      {menus.length > 0 && (
+        <DropdownTool groupHover placement="bottom-end">
+          <Menu className="text-sm">{menus}</Menu>
+        </DropdownTool>
+      )}
       {resizable && (
-        <div className="cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch" />
+        <div
+          role="none"
+          className="cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch"
+          onMouseDown={(e) =>
+            e.currentTarget.parentElement &&
+            startResize(e.currentTarget.parentElement)
+          }
+        />
       )}
     </div>
   );