@react-fabric/data 1.0.0-beta.6 → 1.0.0-beta.61

package/src/table/HeaderCell.tsx

@@ -22,14 +22,18 @@
  */
 
 import {
-  CoreIcons,
+  Button,
+  Divider,
   DropdownTool,
+  getIconProps,
   Icon,
   Menu,
   MenuItem,
   Tooltip,
 } from "@react-fabric/core";
+import { isEmpty } from "@react-fabric/utilities";
 import { useCallback, useMemo } from "react";
+import { ColumnFilters } from "./ColumnFilters";
 import { useTableContext } from "./Context";
 import {
   COL_DEFAULT_WIDTH,
@@ -41,13 +45,15 @@ import {
 
 export const HeaderCell = ({
   id,
+  field,
+  dataType,
   label,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   actions,
   locked,
+  filter,
+  filterable,
+  filterOptions,
   tooltip,
   sortable,
   resizable,
@@ -56,7 +62,8 @@ export const HeaderCell = ({
   minWidth,
   sort,
   onSort,
-}: TableColumn & Pick<TableProps, "sort" | "onSort">) => {
+  onFilter,
+}: TableColumn & Pick<TableProps, "sort" | "onSort" | "onFilter">) => {
   const { startResize, widths } = useTableContext();
 
   const width = useMemo(
@@ -64,39 +71,77 @@ export const HeaderCell = ({
     [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 handleSort = useCallback(
+    (order?: "asc" | "desc") => {
+      sortable &&
+        onSort?.({
+          id: id.toString(),
+          order:
+            order ?? (sort?.id === id && sort.order === "asc" ? "desc" : "asc"),
+        });
+    },
+    [onSort, sort, sortable],
+  );
 
   const menus = useMemo(() => {
-    const ret = [];
+    let ret = [];
+    if (filterable && (dataType ?? filterOptions)) {
+      ret.push(
+        <Menu
+          key="filters"
+          label="Filter"
+          icon={filter ? "icon-[mdi--check]" : ""}
+          trigger="click"
+        >
+          <ColumnFilters
+            type={dataType}
+            list={filterOptions}
+            filter={filter}
+            onFilter={(value) => onFilter?.(field ?? id, value)}
+          />
+        </Menu>,
+      );
+    }
     if (sortable) {
       ret.push(
         <MenuItem
           key="sort-asc"
           label="Sort ascending"
-          icon={CoreIcons.sortAsc}
+          icon="icon-[mdi--sort-ascending]"
+          onClick={() => handleSort("asc")}
         />,
         <MenuItem
           key="sort-desc"
           label="Sort descending"
-          icon={CoreIcons.sortDesc}
+          icon="icon-[mdi--sort-descending]"
+          onClick={() => handleSort("desc")}
         />,
       );
     }
+    if (actions) {
+      ret.push(<Divider key="div" />);
+      ret.push(...actions);
+    }
+    if (ret.length === 1) {
+      ret = [
+        <ColumnFilters
+          key="filters"
+          type={dataType}
+          list={filterOptions}
+          filter={filter}
+          onFilter={(value) => onFilter?.(field ?? id, value)}
+        />,
+      ];
+    }
     return ret;
-  }, [sortable]);
+  }, [sortable, actions, onFilter, handleSort]);
 
   return (
     <div
       role="none"
       data-id={id}
-      onClick={handleSort}
-      className="group font-medium border-e flex flex-nowrap text-start items-center table-header-cell"
+      onClick={() => handleSort()}
+      className="group/tool font-medium border-e flex flex-nowrap text-start items-center table-header-cell"
       style={{
         width: width ?? COL_DEFAULT_WIDTH,
         minWidth: minWidth ?? COL_MIN_WIDTH,
@@ -105,9 +150,7 @@ export const HeaderCell = ({
     >
       <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} />
-          )}
+          {icon && <Icon {...getIconProps(icon)} />}
           <span>{label ?? " "}</span>
         </div>
       </Tooltip>
@@ -123,6 +166,16 @@ export const HeaderCell = ({
           <Menu className="text-sm">{menus}</Menu>
         </DropdownTool>
       )}
+      {filterable && !isEmpty(filter) && (
+        <Button
+          size="sm"
+          variant="link"
+          aria-label="clear filter"
+          stopPropagation
+          icon="icon-[mdi--filter-remove]"
+          onClick={() => onFilter?.(id)}
+        />
+      )}
       {resizable && (
         <div
           role="none"

package/src/table/Table.tsx

@@ -21,8 +21,14 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { EmptyContent, Loading, useDebounce } from "@react-fabric/core";
+import {
+  EmptyContent,
+  Icon,
+  LoadingLine,
+  useDebounce,
+} from "@react-fabric/core";
 import { debounce } from "@react-fabric/utilities";
+import classNames from "classnames";
 import {
   useEffect,
   useImperativeHandle,
@@ -41,23 +47,42 @@ import { type TableProps } from "./types";
 import { useTableColumns } from "./useTableColumns";
 import { useVirtualTable } from "./useVirtualTable";
 
+/**
+ * Table component for displaying data in a tabular format with features like sorting, filtering, and virtual scrolling.
+ * It supports expandable rows, checkable rows, and customizable columns.
+ * The component is designed to handle large datasets efficiently by rendering only the visible rows.
+ * It also provides a way to manage column visibility and allows for custom rendering of group headers.
+ * Uses TanStack's `useVirtual` for virtualization and React's `useMemo` for performance optimization.
+ *
+ * @param {TableProps<T>} props - The properties for the Table component.
+ * @returns {JSX.Element} The rendered Table component.
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/data-table--table}
+ * @see {@link https://tanstack.com/table/v8/docs/api/virtual}
+ */
 export const Table = <T extends KeyValue = KeyValue>({
   ref,
   data,
   columns,
-  keyProperty,
+  keyProperty = "id" as any,
+  groupProperty,
   checkableRows,
   initialScroll,
   hideableColumns,
   sort,
   loading,
+  checked,
   emptyDisplay,
+  groupRenderer,
   canExpand,
   children,
   onSort,
+  onFilter,
   onScroll,
   onRowClick,
   onCheckedChanged,
+  total = 0,
+  onLoadMore,
 }: TableProps<T>) => {
   const { t } = useTranslation("data");
   const fireCheckChanged = useDebounce(
@@ -72,13 +97,24 @@ export const Table = <T extends KeyValue = KeyValue>({
     top,
     checkState,
     virtualizer,
+    hasActiveSticky,
     toggleExpand,
     toggleChecked,
     toggleAllChecked,
+    toggleGroupExpand,
     getData,
     totalSize,
+    isActiveSticky,
     measureElement,
-  } = useVirtualTable(data, keyProperty, fireCheckChanged);
+  } = useVirtualTable(data, {
+    checked,
+    keyProperty,
+    groupProperty,
+    total,
+    loading,
+    onLoadMore,
+    onCheckChanged: fireCheckChanged,
+  });
   const refBody = useRef<HTMLDivElement>(null);
 
   const wrapperStart = useMemo(
@@ -142,9 +178,13 @@ export const Table = <T extends KeyValue = KeyValue>({
         style={{
           gridTemplate: `"head" auto "loader" auto "content" 1fr "foot" auto/1fr`,
         }}
+        data-ref="tableScroller"
         ref={scrollerRef}
       >
-        <div className="bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2">
+        <div
+          data-ref="tableHeader"
+          className="bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-3"
+        >
           <div className={wrapperStart}>
             {canExpand && <div className="w-6" />}
             {checkableRows && (
@@ -154,15 +194,33 @@ export const Table = <T extends KeyValue = KeyValue>({
               />
             )}
             {state.start?.map((col, idx) => (
-              <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
+              <HeaderCell
+                key={idx}
+                {...col}
+                sort={sort}
+                onSort={onSort}
+                onFilter={onFilter}
+              />
             ))}
           </div>
           {state.cols?.map((col, idx) => (
-            <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
+            <HeaderCell
+              key={idx}
+              {...col}
+              sort={sort}
+              onSort={onSort}
+              onFilter={onFilter}
+            />
           ))}
           <div className={wrapperEnd}>
             {state.end?.map((col, idx) => (
-              <HeaderCell key={idx} {...col} sort={sort} onSort={onSort} />
+              <HeaderCell
+                key={idx}
+                {...col}
+                sort={sort}
+                onSort={onSort}
+                onFilter={onFilter}
+              />
             ))}
 
             {hideableColumns && (
@@ -173,19 +231,56 @@ export const Table = <T extends KeyValue = KeyValue>({
             )}
           </div>
         </div>
-        {loading && <Loading />}
+        {loading && <LoadingLine />}
         {data.length > 0 && (
           <div
-            className="area-content flex flex-col flex-nowrap"
+            className="area-content flex flex-col flex-nowrap min-h-full"
             style={{ height: totalSize() }}
             ref={refBody}
           >
-            <div style={{ height: items[0]?.start }} />
+            <div
+              style={{
+                height: items[hasActiveSticky ? 1 : 0]?.start,
+              }}
+            />
             {items.map(({ index, key }) => {
               const data = getData(index);
-              return (
+              return "__GROUP__" in data ? (
+                <div
+                  key={key}
+                  ref={measureElement}
+                  data-index={index}
+                  className={classNames(
+                    "text-md bg-base border-y border-tint-100 border-t-0 cursor-pointer flex items-center justify-start gap-1 z-2",
+                    isActiveSticky(index) && "sticky top-8",
+                  )}
+                  role="none"
+                  onClick={() => toggleGroupExpand(data.key)}
+                >
+                  <div
+                    className={classNames(
+                      "px-2 py-1 flex items-center gap-1 z-2 sticky start-0",
+                    )}
+                  >
+                    <Icon
+                      rtlFlip
+                      icon={
+                        data.open
+                          ? "icon-[mdi--chevron-down]"
+                          : "icon-[mdi--chevron-right]"
+                      }
+                    />
+                    {groupRenderer?.(data) ?? (
+                      <div className="flex gap-1 items-center">
+                        <span>{data.key}</span>
+                        <span className="text-sm">({data.itemCount})</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ) : (
                 <BodyRow
-                  rowKey={key}
+                  rowKey={key.toString()}
                   index={index}
                   checkableRows={checkableRows}
                   checked={

package/src/table/types.ts

@@ -21,10 +21,11 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
 import {
   type CssProp,
   type Elements,
-  type IconProps,
+  type NestedKeys,
   type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
@@ -34,22 +35,51 @@ 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 | string;
+/**
+ * TableColumn interface defines the structure of a column in a table.
+ * It includes properties for column identification, display options, alignment,
+ * visibility, resizing, sorting, filtering, and rendering.
+ *
+ * @template T - The type of data the column will represent, defaulting to KeyValue.
+ * @property {keyof T | string} id - Unique identifier for the column.
+ * @property {"string" | "number" | "boolean" | "datetime" | "date" | "time" | "unknown"} [dataType] - Data type of the column values.
+ * @property {string} [label] - Display label for the column header.
+ * @property {string} [tooltip] - Tooltip text for the column header.
+ * @property {string} [format] - Format string for displaying the column values.
+ * @property {"start" | "center" | "end"} [align] - Text alignment within the column.
+ * @property {"start" | "end"} [locked] - Indicates if the column is locked at the start or end.
+ * @property {boolean} [hidden] - Whether the column is hidden.
+ * @property {boolean} [truncate] - Whether to truncate the text in the column.
+ * @property {boolean} [hideable] - Whether the column can be hidden by the user.
+ * @property {boolean} [resizable] - Whether the column can be resized by the user.
+ * @property {boolean} [sortable] - Whether the column can be sorted.
+ * @property {boolean} [filterable] - Whether the column can be filtered.
+ * @property {AnyObject} [filter] - Filter criteria for the column.
+ * @property {ReactElement[]} [actions] - Array of action elements to be displayed in the column.
+ * @property {AnyObject[]} [filterOptions] - Options for filtering the column.
+ * @property {string | number} [width] - Width of the column.
+ * @property {string | number} [minWidth] - Minimum width of the column.
+ * @property {string | number} [maxWidth] - Maximum width of the column.
+ * @property {KeyValue} [valueMap] - Mapping of values for the column.
+ * @property {(value: AnyObject, data: T, index: number) => Elements<AnyObject>} [renderer] - Custom renderer function for the column values.
+ */
+export interface TableColumn<T = KeyValue> extends CssProp, TestProps {
+  id: NestedKeys<T>;
+  field?: string;
   label?: string;
   tooltip?: string;
-  actions?: ReactElement;
+  icon?: IconProps;
+  actions?: ReactElement[];
   align?: "start" | "center" | "end";
   locked?: "start" | "end";
   hidden?: boolean;
+  truncate?: boolean;
   hideable?: boolean;
   resizable?: boolean;
   sortable?: boolean;
   filterable?: boolean;
-  filterList?: AnyObject[];
+  filter?: AnyObject;
+  filterOptions?: AnyObject[];
   width?: string | number;
   minWidth?: string | number;
   maxWidth?: string | number;
@@ -75,13 +105,17 @@ export interface TableRef {
 export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
   columns: Array<TableColumn<T>>;
   data: T[];
-  keyProperty?: keyof T;
+  keyProperty?: NestedKeys<T>;
+  groupProperty?: NestedKeys<T>;
+  groupRenderer?: (key: AnyObject) => ReactElement;
   emptyDisplay?: ReactElement;
+
   /**
    * checkable rows
    */
+  checked?: AnyObject[];
   checkableRows?: boolean;
-  onCheckedChanged?: (rows: Array<keyof T>) => void;
+  onCheckedChanged?: (rows: AnyObject[]) => void;
   /**
    * sorting
    */
@@ -98,4 +132,9 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
 
   canExpand?: (record: T) => boolean;
   children?: (record: T) => Elements<AnyObject>;
+
+  onFilter?: (id: NestedKeys<T> | string, value?: AnyObject) => void;
+
+  total?: number;
+  onLoadMore?: (lastIndex?: number) => void;
 }

package/src/table/useResizer.ts

@@ -47,13 +47,15 @@ export const useResizer = (
   /** ***************** attach handlers *******************/
   const box = colEl.getBoundingClientRect();
   if (colEl.parentElement != null) {
-    const parentBox = colEl.parentElement?.getBoundingClientRect();
+    const parentBox = colEl
+      .closest("[data-ref='tableScroller']")
+      ?.getBoundingClientRect() as unknown as DOMRect;
     if (isRtl) {
       placeholder.style.left = "unset";
-      placeholder.style.right = `${box.right - parentBox.right}px`;
+      placeholder.style.right = `${parentBox.width - box.right}px`;
     } else {
       placeholder.style.right = "unset";
-      placeholder.style.left = `${box.left - parentBox.left}px`;
+      placeholder.style.left = `${box.left}px`;
     }
   }
   placeholder.style.width = `${colEl.offsetWidth}px`;