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

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 TableColumn,
+} from "./types";
+
+export const EmptyCell = ({
+  id,
+  width: _width,
+  maxWidth,
+  minWidth,
+}: TableColumn) => {
+  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 TableColumn,
+  type TableProps,
+} from "./types";
 
 export const HeaderCell = ({
+  id,
   label,
   icon,
   iconBg,
@@ -32,38 +48,90 @@ export const HeaderCell = ({
   rtlFlip,
   actions,
   locked,
+  tooltip,
+  sortable,
   resizable,
-  width,
+  width: _width,
   maxWidth,
   minWidth,
-}: ColumnType) => {
+  sort,
+  onSort,
+}: TableColumn & 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={tooltip ?? label} disabled={!(tooltip ?? 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>
   );

package/src/table/Table.tsx

@@ -21,21 +21,65 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useMemo } from "react";
-import { BodyCell } from "./BodyCell";
+import { EmptyContent, Loading, useDebounce } from "@react-fabric/core";
+import { debounce } from "@react-fabric/utilities";
+import {
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { AddColumn } from "./AddColumn";
+import { BodyRow } from "./BodyRow";
+import { CheckboxCell } from "./CheckboxCell";
+import { TableProvider } from "./Context";
+import { EmptyCell } from "./EmptyCell";
 import { HeaderCell } from "./HeaderCell";
-import { type ColumnType, type TableProps } from "./types";
+import { type TableProps } from "./types";
 import { useTableColumns } from "./useTableColumns";
 import { useVirtualTable } from "./useVirtualTable";
-import classNames from "classnames";
 
 export const Table = <T extends KeyValue = KeyValue>({
+  ref,
   data,
   columns,
+  keyProperty,
+  checkableRows,
+  initialScroll,
+  hideableColumns,
+  sort,
+  loading,
+  emptyDisplay,
+  canExpand,
+  children,
+  onSort,
+  onScroll,
+  onRowClick,
+  onCheckedChanged,
 }: TableProps<T>) => {
-  const { columnMap } = useTableColumns(columns);
-  const { scrollerRef, items, getData, totalSize, measureElement } =
-    useVirtualTable(data);
+  const { t } = useTranslation("data");
+  const fireCheckChanged = useDebounce(
+    (checkedIds: Array<keyof T>) => onCheckedChanged?.(checkedIds),
+    [],
+  );
+
+  const { state, onHide } = useTableColumns(columns);
+  const {
+    scrollerRef,
+    items,
+    top,
+    checkState,
+    virtualizer,
+    toggleExpand,
+    toggleChecked,
+    toggleAllChecked,
+    getData,
+    totalSize,
+    measureElement,
+  } = useVirtualTable(data, keyProperty, fireCheckChanged);
+  const refBody = useRef<HTMLDivElement>(null);
 
   const wrapperStart = useMemo(
     () => "bg-inherit sticky start-0 flex flex-nowrap z-1",
@@ -45,99 +89,162 @@ export const Table = <T extends KeyValue = KeyValue>({
     () => "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px",
     [],
   );
-  const emptyCol = useCallback(
-    (col: ColumnType, idc: number) => (
-      <div
-        key={`blank:${idc}`}
-        className="overflow-hidden border-e"
-        style={{
-          width: col.width ?? "12rem",
-          minWidth: col.minWidth ?? "2rem",
-          maxWidth: col.maxWidth ?? "32rem",
-        }}
-      />
-    ),
+
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      initialScroll &&
+        virtualizer.scrollToIndex(initialScroll, { align: "start" });
+    }, 100);
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollTo: (row: number) => {
+        virtualizer.scrollToIndex(row, { align: "start" });
+      },
+      hilight(row) {
+        scrollerRef.current
+          ?.querySelector(".hilight")
+          ?.classList.remove("hilight", "ring-1");
+        virtualizer.scrollToIndex(Math.floor(row), {
+          align: "start",
+        });
+        setTimeout(() => {
+          scrollerRef.current
+            ?.querySelector(`[data-index="${row}"]`)
+            ?.classList.add("hilight", "ring-1");
+        }, 100);
+      },
+      unhilight() {
+        scrollerRef.current
+          ?.querySelector(".hilight")
+          ?.classList.remove("hilight", "ring-1");
+      },
+    }),
     [],
   );
 
+  useEffect(() => {
+    const handle = debounce((top: number) => {
+      onScroll?.(top ?? 0);
+    });
+    handle(top);
+    return () => {
+      handle.cancel();
+    };
+  }, [top]);
+
   return (
-    <div
-      className="grid area-content overflow-auto relative"
-      style={{
-        gridTemplate: `"head" auto "content" 1fr "foot" auto/1fr`,
-      }}
-      ref={scrollerRef}
-    >
-      <div className="bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2">
-        <div className={wrapperStart}>
-          {columnMap.start?.map((col, idx) => (
-            <HeaderCell key={idx} {...col} />
-          ))}
-        </div>
-        {columnMap.cols?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
-        <div className={wrapperEnd}>
-          {columnMap.end?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
-        </div>
-      </div>
+    <TableProvider>
       <div
-        className="area-content flex flex-col flex-nowrap"
-        style={{ height: totalSize() }}
+        className="grid area-content overflow-auto relative"
+        style={{
+          gridTemplate: `"head" auto "loader" auto "content" 1fr "foot" auto/1fr`,
+        }}
+        ref={scrollerRef}
       >
-        <div style={{ height: items[0]?.start }} />
-        {items.map(({ index, key }) => (
-          <div
-            key={key}
-            className={classNames(
-              "flex flex-nowrap",
-              index % 2 ? "bg-even" : "bg-odd",
-            )}
-            data-index={index}
-            ref={measureElement}
-          >
-            <div className={wrapperStart}>
-              {columnMap.start?.map((col, ids) => (
-                <BodyCell
-                  key={`${key}:${ids}`}
-                  column={col}
-                  item={getData(index)}
-                />
-              ))}
-            </div>
-            {columnMap.cols?.map((col, idc) => (
-              <BodyCell
-                key={`${key}:${idc}`}
-                column={col}
-                item={getData(index)}
+        <div className="bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2">
+          <div className={wrapperStart}>
+            {canExpand && <div className="w-6" />}
+            {checkableRows && (
+              <CheckboxCell
+                state={checkState.allChecked}
+                onClick={toggleAllChecked}
               />
+            )}
+            {state.start?.map((col, idx) => (
+              <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
             ))}
-            <div className={wrapperEnd}>
-              {columnMap.end?.map((col, ide) => (
-                <BodyCell
-                  key={`${key}:${ide}`}
-                  column={col}
-                  item={getData(index)}
+          </div>
+          {state.cols?.map((col, idx) => (
+            <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
+          ))}
+          <div className={wrapperEnd}>
+            {state.end?.map((col, idx) => (
+              <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
+            ))}
+
+            {hideableColumns && (
+              <AddColumn
+                onClick={onHide}
+                columns={state.columns.filter((col) => col.hideable !== false)}
+              />
+            )}
+          </div>
+        </div>
+        {loading && <Loading />}
+        {data.length > 0 && (
+          <div
+            className="area-content flex flex-col flex-nowrap"
+            style={{ height: totalSize() }}
+            ref={refBody}
+          >
+            <div style={{ height: items[0]?.start }} />
+            {items.map(({ index, key }) => {
+              const data = getData(index);
+              return (
+                <BodyRow
+                  rowKey={key}
+                  index={index}
+                  checkableRows={checkableRows}
+                  checked={
+                    keyProperty &&
+                    checkState.checked.includes(data[keyProperty])
+                      ? 1
+                      : 0
+                  }
+                  expanded={
+                    !!keyProperty &&
+                    checkState.expanded.includes(data[keyProperty])
+                  }
+                  data={data}
+                  hideableColumns={hideableColumns}
+                  keyProperty={keyProperty}
+                  measureElement={measureElement}
+                  onRowClick={onRowClick}
+                  state={state}
+                  canExpand={canExpand}
+                  toggleExpand={toggleExpand}
+                  expandRow={children}
+                  toggleChecked={toggleChecked}
+                  wrapperEnd={wrapperEnd}
+                  wrapperStart={wrapperStart}
+                  key={key}
                 />
+              );
+            })}
+            <div className="flex-1 flex flex-nowrap">
+              <div className={wrapperStart}>
+                {canExpand && <div className="w-6" />}
+                {checkableRows && <div className="w-6" />}
+                {state.start?.map((col) => (
+                  <EmptyCell key={String(col.id)} {...col} />
+                ))}
+              </div>
+              {state.cols?.map((col) => (
+                <EmptyCell key={String(col.id)} {...col} />
               ))}
+              <div className={wrapperEnd}>
+                {state.end?.map((col) => (
+                  <EmptyCell key={String(col.id)} {...col} />
+                ))}
+
+                {hideableColumns && <div className="w-6" />}
+              </div>
             </div>
           </div>
-        ))}
-        <div className="flex-1 flex flex-nowrap">
-          <div className={wrapperStart}>{columnMap.start?.map(emptyCol)}</div>
-          {columnMap.cols?.map(emptyCol)}
-          <div className={wrapperEnd}>{columnMap.end?.map(emptyCol)}</div>
-        </div>
-      </div>
-      <div className="area-foot bg-dimmed border-t sticky bottom-0 flex flex-nowrap z-2">
-        <div className={wrapperStart}>
-          {columnMap.start?.map((col, idx) => (
-            <HeaderCell key={idx} {...col} />
+        )}
+        {!loading &&
+          data.length === 0 &&
+          (emptyDisplay ?? (
+            <EmptyContent
+              size="sm"
+              className="bg-dimmed"
+              message={t("datagrid.empty")}
+            />
           ))}
-        </div>
-        {columnMap.cols?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
-        <div className={wrapperEnd}>
-          {columnMap.end?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
-        </div>
       </div>
-    </div>
+    </TableProvider>
   );
 };

package/src/table/types.ts

@@ -23,17 +23,24 @@
 
 import {
   type CssProp,
+  type Elements,
   type IconProps,
+  type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
 import { type ReactElement } from "react";
 
-export interface ColumnType<T = KeyValue>
+export const COL_MIN_WIDTH = "3rem";
+export const COL_MAX_WIDTH = "64rem";
+export const COL_DEFAULT_WIDTH = "12rem";
+
+export interface TableColumn<T = KeyValue>
   extends CssProp,
     IconProps,
     TestProps {
-  id: keyof T;
+  id: keyof T | string;
   label?: string;
+  tooltip?: string;
   actions?: ReactElement;
   align?: "start" | "center" | "end";
   locked?: "start" | "end";
@@ -55,11 +62,40 @@ export interface ColumnType<T = KeyValue>
     | "time"
     | "unknown";
   format?: string;
-  renderer?: (value: AnyObject, data: T) => void;
+  valueMap?: KeyValue;
+  renderer?: (value: AnyObject, data: T, index: number) => Elements<AnyObject>;
+}
+
+export interface TableRef {
+  hilight: (row: number) => void;
+  unhilight: () => void;
+  scrollTo: (row: number) => void;
 }
 
-export interface TableProps<T = KeyValue> {
-  columns: Array<ColumnType<T>>;
+export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
+  columns: Array<TableColumn<T>>;
   data: T[];
-  autoColumns?: boolean;
+  keyProperty?: keyof T;
+  emptyDisplay?: ReactElement;
+  /**
+   * 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;
+
+  initialScroll?: number;
+  onScroll?: (firstItem: number) => void;
+
+  canExpand?: (record: T) => boolean;
+  children?: (record: T) => Elements<AnyObject>;
 }