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

package/src/table/Table.tsx

@@ -21,21 +21,49 @@
  * 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 { EmptyContent, Loading, useDebounce } from "@react-fabric/core";
+import classNames from "classnames";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { AddColumn } from "./AddColumn";
 import { BodyCell } from "./BodyCell";
+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>({
   data,
   columns,
+  keyProperty,
+  checkableRows,
+  hideableColumns,
+  sort,
+  loading,
+  onSort,
+  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,
+    checkState,
+    toggleChecked,
+    toggleAllChecked,
+    getData,
+    totalSize,
+    measureElement,
+  } = useVirtualTable(data, keyProperty, fireCheckChanged);
 
   const wrapperStart = useMemo(
     () => "bg-inherit sticky start-0 flex flex-nowrap z-1",
@@ -45,99 +73,131 @@ 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) => (
+
+  return (
+    <TableProvider>
       <div
-        key={`blank:${idc}`}
-        className="overflow-hidden border-e"
+        className="grid area-content overflow-auto relative"
         style={{
-          width: col.width ?? "12rem",
-          minWidth: col.minWidth ?? "2rem",
-          maxWidth: col.maxWidth ?? "32rem",
+          gridTemplate: `"head" auto "loader" auto "content" 1fr "foot" auto/1fr`,
         }}
-      />
-    ),
-    [],
-  );
-
-  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} />
+        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}>
+            {checkableRows && (
+              <CheckboxCell
+                state={checkState.allChecked}
+                onClick={toggleAllChecked}
+              />
+            )}
+            {state.start?.map((col, idx) => (
+              <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
+            ))}
+          </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>
-        {columnMap.cols?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
-        <div className={wrapperEnd}>
-          {columnMap.end?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
-        </div>
-      </div>
-      <div
-        className="area-content flex flex-col flex-nowrap"
-        style={{ height: totalSize() }}
-      >
-        <div style={{ height: items[0]?.start }} />
-        {items.map(({ index, key }) => (
+        {loading && <Loading />}
+        {data.length > 0 && (
           <div
-            key={key}
-            className={classNames(
-              "flex flex-nowrap",
-              index % 2 ? "bg-even" : "bg-odd",
-            )}
-            data-index={index}
-            ref={measureElement}
+            className="area-content flex flex-col flex-nowrap"
+            style={{ height: totalSize() }}
           >
-            <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={wrapperEnd}>
-              {columnMap.end?.map((col, ide) => (
-                <BodyCell
-                  key={`${key}:${ide}`}
-                  column={col}
-                  item={getData(index)}
-                />
+            <div style={{ height: items[0]?.start }} />
+            {items.map(({ index, key }) => {
+              const data = getData(index);
+              return (
+                <div
+                  key={key}
+                  role="none"
+                  className={classNames(
+                    "flex flex-nowrap",
+                    index % 2 ? "bg-even" : "bg-odd",
+                    onRowClick && "hover:bg-primary-50 active:bg-primary-100",
+                  )}
+                  onClick={() =>
+                    checkableRows && !onRowClick
+                      ? toggleChecked(data[keyProperty])
+                      : onRowClick?.(data)
+                  }
+                  data-index={index}
+                  ref={measureElement}
+                >
+                  <div className={wrapperStart}>
+                    {checkableRows && (
+                      <CheckboxCell
+                        onClick={() => toggleChecked(data[keyProperty])}
+                        state={
+                          checkState.checked.includes(data[keyProperty]) ? 1 : 0
+                        }
+                      />
+                    )}
+                    {state.start?.map((col, ids) => (
+                      <BodyCell
+                        key={`${key}:${ids}`}
+                        column={col}
+                        item={data}
+                      />
+                    ))}
+                  </div>
+                  {state.cols?.map((col, idc) => (
+                    <BodyCell key={`${key}:${idc}`} column={col} item={data} />
+                  ))}
+                  <div className={wrapperEnd}>
+                    {state.end?.map((col, ide) => (
+                      <BodyCell
+                        key={`${key}:${ide}`}
+                        column={col}
+                        item={data}
+                      />
+                    ))}
+                    {hideableColumns && <div className="w-6" />}
+                  </div>
+                </div>
+              );
+            })}
+            <div className="flex-1 flex flex-nowrap">
+              <div className={wrapperStart}>
+                {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} />
-          ))}
-        </div>
-        {columnMap.cols?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
-        <div className={wrapperEnd}>
-          {columnMap.end?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
-        </div>
+        )}
+        {!loading && data.length === 0 && (
+          <EmptyContent
+            size="sm"
+            className="bg-dimmed"
+            message={t("datagrid.empty")}
+          />
+        )}
       </div>
-    </div>
+    </TableProvider>
   );
 };

package/src/table/types.ts

@@ -28,6 +28,10 @@ import {
 } from "@react-fabric/core/dist/types/types";
 import { type ReactElement } from "react";
 
+export const COL_MIN_WIDTH = "3rem";
+export const COL_MAX_WIDTH = "64rem";
+export const COL_DEFAULT_WIDTH = "12rem";
+
 export interface ColumnType<T = KeyValue>
   extends CssProp,
     IconProps,
@@ -61,5 +65,20 @@ export interface ColumnType<T = KeyValue>
 export interface TableProps<T = KeyValue> {
   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/src/table/useResizer.ts

@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+
+export const useResizer = (
+  colEl: HTMLElement,
+  ghostEl: HTMLElement,
+  callback: (width: number) => void,
+) => {
+  const placeholder = ghostEl.firstElementChild as HTMLElement;
+  const isRtl = getComputedStyle(colEl).direction === "rtl";
+
+  const onResize = (evt: MouseEvent) => {
+    /** ***************** check if reverse enabled of RTL *******************/
+    const box = colEl.getBoundingClientRect();
+    const x = isRtl ? box.left - evt.clientX : evt.clientX - box.right;
+    placeholder.style.width = `${colEl.offsetWidth + x}px`;
+  };
+
+  /** ***************** dettach handlers on mouseup *******************/
+  const onResizeEnd = () => {
+    callback(placeholder.offsetWidth);
+    ghostEl.style.display = "none";
+    document.removeEventListener("mousemove", onResize);
+    document.removeEventListener("mouseup", onResizeEnd);
+  };
+
+  /** ***************** attach handlers *******************/
+  const box = colEl.getBoundingClientRect();
+  if (colEl.parentElement != null) {
+    const parentBox = colEl.parentElement?.getBoundingClientRect();
+    if (isRtl) {
+      placeholder.style.left = "unset";
+      placeholder.style.right = `${box.right - parentBox.right}px`;
+    } else {
+      placeholder.style.right = "unset";
+      placeholder.style.left = `${box.left - parentBox.left}px`;
+    }
+  }
+  placeholder.style.width = `${colEl.offsetWidth}px`;
+  placeholder.style.minWidth = colEl.style.minWidth || "48px";
+  placeholder.style.maxWidth = colEl.style.maxWidth || "75vw";
+  ghostEl.style.display = "block";
+
+  document.addEventListener("mousemove", onResize);
+  document.addEventListener("mouseup", onResizeEnd);
+};

package/src/table/useTableColumns.ts

@@ -22,31 +22,64 @@
  */
 
 import { groupBy } from "@react-fabric/utilities";
-import { useEffect, useState } from "react";
+import { useEffect, useReducer } from "react";
 import { type ColumnType } from "./types";
 
-export const useTableColumns = (columns: ColumnType[]) => {
-  const [columnMap, setColumnMap] = useState<{
-    start: ColumnType[];
-    end: ColumnType[];
-    cols: ColumnType[];
-  }>({
-    start: [],
-    end: [],
-    cols: [],
-  });
+interface ColumnState {
+  columns: ColumnType[];
+  start: ColumnType[];
+  end: ColumnType[];
+  cols: ColumnType[];
+}
 
-  useEffect(() => {
-    setColumnMap(
-      groupBy(
-        columns.filter((col) => !(col.hideable && col.hidden)),
+type ColumnActions =
+  | { type: "columns"; columns: ColumnType[] }
+  | { type: "hide"; id: string };
+
+export const useTableColumns = (columns: ColumnType[]) => {
+  const [state, dispatch] = useReducer(
+    (state: ColumnState, action: ColumnActions) => {
+      if (action.type === "columns") {
+        state.columns = action.columns;
+      }
+      if (action.type === "hide") {
+        const col = state.columns.find((col) => col.id === action.id);
+        col &&
+          state.columns.splice(state.columns.indexOf(col), 1, {
+            ...col,
+            hidden: col.hidden !== true,
+          });
+      }
+      const {
+        start = [],
+        end = [],
+        cols = [],
+      } = groupBy(
+        state.columns.filter((col) => col.hidden !== true),
         "locked",
         "cols",
-      ) as AnyObject,
-    );
+      );
+      return {
+        ...state,
+        start,
+        end,
+        cols,
+      };
+    },
+    {
+      columns: [],
+      start: [],
+      end: [],
+      cols: [],
+    },
+  );
+
+  useEffect(() => {
+    dispatch({ type: "columns", columns });
   }, [columns]);
 
   return {
-    columnMap,
+    state,
+    onHide: (id: string) => dispatch({ type: "hide", id }),
   };
 };

package/src/table/useVirtualTable.ts

@@ -22,9 +22,20 @@
  */
 
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback, useRef } from "react";
+import { useCallback, useReducer, useRef } from "react";
 
-export const useVirtualTable = (data: KeyValue[]) => {
+interface DataState {
+  checked: Key[];
+  allChecked: 0 | 1 | 2;
+}
+
+type DataAction = { type: "check"; key: Key } | { type: "checkall" };
+
+export const useVirtualTable = (
+  data: KeyValue[],
+  keyProperty: Key,
+  onCheckChanged: (checked: Key[]) => void,
+) => {
   // TODO: refactor data into item list, apply grouping if groupColumn provided
   // TODO: when grouping maintain map of group with children, {___GROUP___:true, label, items, open}
 
@@ -35,6 +46,37 @@ export const useVirtualTable = (data: KeyValue[]) => {
     estimateSize: () => 24,
   });
 
+  const [state, dispatch] = useReducer(
+    (state: DataState, action: DataAction) => {
+      if (action.type === "check") {
+        if (state.checked.includes(action.key))
+          state.checked.splice(state.checked.indexOf(action.key), 1);
+        else state.checked.push(action.key);
+      }
+      if (action.type === "checkall") {
+        if (state.allChecked !== 0) {
+          state.checked = [];
+        } else {
+          state.checked = data.map((item) => item[keyProperty]);
+        }
+      }
+      onCheckChanged(state.checked);
+      return {
+        ...state,
+        allChecked:
+          state.checked.length === data.length
+            ? 1
+            : state.checked.length
+              ? 2
+              : 0,
+      } as DataState;
+    },
+    {
+      checked: [],
+      allChecked: 0,
+    },
+  );
+
   const virtualItems = virtualizer.getVirtualItems();
 
   const getData = useCallback(
@@ -47,8 +89,11 @@ export const useVirtualTable = (data: KeyValue[]) => {
   return {
     scrollerRef,
     items: virtualItems,
+    checkState: state,
     getData,
     totalSize: virtualizer.getTotalSize,
     measureElement: virtualizer.measureElement,
+    toggleChecked: (key: Key) => dispatch({ type: "check", key }),
+    toggleAllChecked: () => dispatch({ type: "checkall" }),
   };
 };