@react-fabric/data 1.0.0-beta.9 → 1.0.2

package/src/pagination/Pagination.tsx

@@ -21,8 +21,8 @@
  * 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";
-import classNames from "classnames";
+import { Icon } from "@react-fabric/core";
+import { cn } from "@react-fabric/utilities";
 import { Fragment, memo, useMemo } from "react";
 
 export interface PaginationProps {
@@ -48,110 +48,109 @@ export interface PaginationProps {
   onPageChange: (page: number) => void;
 }
 
-export const Pagination = memo(
-  ({ page, ranges, totalPages, minimal, onPageChange }: PaginationProps) => {
-    const [start, mid, last] = ranges;
+const PaginationComponent = ({ page, ranges, totalPages, minimal, onPageChange }: PaginationProps) => {
+  const [start, mid, last] = ranges;
 
-    const pageBody = useMemo(
-      () => (
-        <Fragment>
-          {start?.map((pg) => (
-            <button
-              key={pg}
-              onClick={() => onPageChange(pg)}
-              className={classNames(
-                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
-                page === pg && "bg-primary-500 text-white pointer-events-none",
-              )}
-            >
-              {pg + 1}
-            </button>
-          ))}
-          {mid && (
-            <span className="leading-none inline-block w-8 text-center text-dimmed">
-              ...
-            </span>
-          )}
-          {mid?.map((pg) => (
-            <button
-              key={pg}
-              onClick={() => onPageChange(pg)}
-              className={classNames(
-                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
-                page === pg && "bg-primary-500 text-white pointer-events-none",
-              )}
-            >
-              {pg + 1}
-            </button>
-          ))}
-          {last && (
-            <span className="leading-none inline-block w-8 text-center text-dimmed">
-              ...
-            </span>
-          )}
-          {last?.map((pg) => (
-            <button
-              key={pg}
-              onClick={() => onPageChange(pg)}
-              className={classNames(
-                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
-                page === pg && "bg-primary-500 text-white pointer-events-none",
-              )}
-            >
-              {pg + 1}
-            </button>
-          ))}
-        </Fragment>
-      ),
-      [start, mid, last, page],
-    );
+  const pageBody = useMemo(
+    () => (
+      <Fragment>
+        {start?.map((pg) => (
+          <button
+            key={pg}
+            onClick={() => onPageChange(pg)}
+            className={cn(
+              "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
+              page === pg && "bg-primary-500 text-white pointer-events-none",
+            )}
+          >
+            {pg + 1}
+          </button>
+        ))}
+        {mid && <span className="leading-none inline-block w-8 text-center text-dimmed">...</span>}
+        {mid?.map((pg) => (
+          <button
+            key={pg}
+            onClick={() => onPageChange(pg)}
+            className={cn(
+              "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
+              page === pg && "bg-primary-500 text-white pointer-events-none",
+            )}
+          >
+            {pg + 1}
+          </button>
+        ))}
+        {last && <span className="leading-none inline-block w-8 text-center text-dimmed">...</span>}
+        {last?.map((pg) => (
+          <button
+            key={pg}
+            onClick={() => onPageChange(pg)}
+            className={cn(
+              "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
+              page === pg && "bg-primary-500 text-white pointer-events-none",
+            )}
+          >
+            {pg + 1}
+          </button>
+        ))}
+      </Fragment>
+    ),
+    [start, mid, last, page, onPageChange],
+  );
 
-    return (
-      <div className="inline-flex items-center">
-        <button
-          onClick={() => onPageChange(0)}
-          className={classNames(
-            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
-            page === 0 && "pointer-events-none text-tint-300",
-          )}
-        >
-          <Icon icon={CoreIcons.chevronsLeft} rtlFlip />
-        </button>
-        <button
-          onClick={() => onPageChange(page - 1)}
-          className={classNames(
-            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
-            page === 0 && "pointer-events-none text-tint-300",
-          )}
-        >
-          <Icon icon={CoreIcons.chevronLeft} rtlFlip />
-        </button>
-        {!minimal && pageBody}
-        {minimal && (
-          <label className="leading-none inline-block px-1 text-center text-sm select-none fixed-numbers">
-            {page + 1}/{totalPages}
-          </label>
+  return (
+    <div className="inline-flex items-center">
+      <button
+        onClick={() => onPageChange(0)}
+        className={cn(
+          "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
+          page === 0 && "pointer-events-none text-tint-300",
         )}
-        <button
-          onClick={() => onPageChange(page + 1)}
-          className={classNames(
-            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
-            page + 1 >= totalPages && "pointer-events-none text-tint-300",
-          )}
-        >
-          <Icon icon={CoreIcons.chevronRight} rtlFlip />
-        </button>
-        <button
-          onClick={() => onPageChange(totalPages - 1)}
-          className={classNames(
-            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
-            page + 1 >= totalPages && "pointer-events-none text-tint-300",
-          )}
-        >
-          <Icon icon={CoreIcons.chevronsRight} rtlFlip />
-        </button>
-      </div>
-    );
-  },
-);
+      >
+        <Icon icon="icon-[mdi--chevron-double-left]" rtlFlip />
+      </button>
+      <button
+        onClick={() => onPageChange(page - 1)}
+        className={cn(
+          "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
+          page === 0 && "pointer-events-none text-tint-300",
+        )}
+      >
+        <Icon icon="icon-[mdi--chevron-left]" rtlFlip />
+      </button>
+      {!minimal && pageBody}
+      {minimal && (
+        <label className="leading-none inline-block px-1 text-center text-sm select-none fixed-numbers">
+          {page + 1}/{totalPages}
+        </label>
+      )}
+      <button
+        onClick={() => onPageChange(page + 1)}
+        className={cn(
+          "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
+          page + 1 >= totalPages && "pointer-events-none text-tint-300",
+        )}
+      >
+        <Icon icon="icon-[mdi--chevron-right]" rtlFlip />
+      </button>
+      <button
+        onClick={() => onPageChange(totalPages - 1)}
+        className={cn(
+          "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
+          page + 1 >= totalPages && "pointer-events-none text-tint-300",
+        )}
+      >
+        <Icon icon="icon-[mdi--chevron-double-right]" rtlFlip />
+      </button>
+    </div>
+  );
+};
+
+/**
+ * Pagination component to navigate through pages of data.
+ * It displays buttons for navigating to the first, previous, next, and last pages,
+ * as well as buttons for specific page numbers based on the provided ranges.
+ * The component supports a minimal view that shows the current page and total pages.
+ * It uses memoization to optimize rendering performance.
+ */
+export const Pagination = memo(PaginationComponent);
 Pagination.displayName = "Pagination";

package/src/table/AddColumn.tsx

@@ -21,23 +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 { CoreIcons, Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
+import { Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
 import { type TableColumn } from "./types";
 
-export const AddColumn = ({
-  columns,
-  onClick,
-}: {
-  columns: TableColumn[];
-  onClick: (id: string) => void;
-}) => {
+export function AddColumn({ columns, onClick }: { columns: TableColumn[]; onClick: (id: string) => void }) {
   return (
-    <div className="group font-medium w-6 flex flex-nowrap text-start items-end">
+    <div className="group font-medium w-6 flex flex-nowrap text-start items-center">
       <Dropdown placement="bottom-end">
-        <Icon
-          icon={CoreIcons.insert}
-          className="p-1 rounded-t rounded-b-none hover:outline"
-        />
+        <Icon icon="icon-[mdi--plus-circle-outline]" className="p-1 rounded-t rounded-b-none hover:outline" />
         <Menu className="text-sm" onClick={onClick}>
           {columns.map((col) => (
             <MenuItem
@@ -45,11 +36,11 @@ export const AddColumn = ({
               id={String(col.id)}
               data-dropdown-dismiss="false"
               label={`${col.label ?? String(col.id)}`}
-              icon={!col.hidden ? CoreIcons.tick : ""}
+              icon={!col.hidden ? "icon-[mdi--check]" : ""}
             />
           ))}
         </Menu>
       </Dropdown>
     </div>
   );
-};
+}

package/src/table/BodyCell.tsx

@@ -22,59 +22,48 @@
  */
 
 import { DateDisplay } from "@react-fabric/date";
-import { Format, getByPath, isTrue } from "@react-fabric/utilities";
-import classNames from "classnames";
+import { cn, Format, getByPath, isArray, isObject, isTrue } from "@react-fabric/utilities";
 import { useMemo } from "react";
-import { useTableContext } from "./Context";
-import {
-  COL_DEFAULT_WIDTH,
-  COL_MAX_WIDTH,
-  COL_MIN_WIDTH,
-  type TableColumn,
-} from "./types";
+import { useTableContext } from "./context";
+import { COL_DEFAULT_WIDTH, COL_MAX_WIDTH, COL_MIN_WIDTH, type TableColumn } from "./types";
 
-export const BodyCell = ({
-  column,
-  item,
-  index,
-}: {
-  column: TableColumn;
-  item: KeyValue;
-  index: number;
-}) => {
+export function BodyCell({ column, item, index }: { column: TableColumn; item: KeyValue; index: number }) {
   const { widths } = useTableContext();
 
-  const width = useMemo(
-    () => widths.get(column.id.toString()) ?? column.width,
-    [widths, column],
-  );
+  const width = useMemo(() => widths.get(column.id.toString()) ?? column.width, [widths, column]);
 
-  const content = useMemo(() => {
+  const content = useMemo<React.ReactNode>(() => {
     const value = getByPath(item, column.id.toString());
     if (column.renderer != null) {
-      return column.renderer(item[column.id], item, index);
+      return column.renderer(value, item, index);
     }
     if (column.dataType === "boolean") {
-      const map = column.valueMap ?? { true: "Yes", false: "no" };
+      const map = column.valueMap ?? { true: "Yes", false: "No" };
       return map[`${isTrue(value) ? "true" : "false"}`];
     }
     if (column.valueMap != null) {
-      if (column.dataType === "string" && value in column.valueMap) {
-        return column.valueMap[value];
+      if (["number", "string"].includes(column.dataType ?? "string") && (value as string) in column.valueMap) {
+        return column.valueMap[value as string];
       }
     }
-    if (column.dataType === "date") {
-      return <DateDisplay date={value} format={column.format} />;
+    if (["date", "time", "datetime"].includes(column.dataType ?? "")) {
+      return <DateDisplay date={value as string} format={column.format} />;
     }
     if (column.dataType === "number") {
-      return Format.number(value, column.format);
+      return Format.number(value as string, column.format);
+    }
+    if (isObject(value)) {
+      return JSON.stringify(value);
+    }
+    if (isArray(value)) {
+      return value.join(", ");
     }
-    return value ?? "";
-  }, [item, column]);
+    return (value as string) ?? "";
+  }, [item, column, index]);
 
   return (
     <div
-      className="overflow-hidden bg-inherit start-0"
+      className="overflow-hidden bg-inherit inset-s-0 border-e group/table-col"
       style={{
         width: width ?? COL_DEFAULT_WIDTH,
         minWidth: column.minWidth ?? COL_MIN_WIDTH,
@@ -82,8 +71,10 @@ export const BodyCell = ({
       }}
     >
       <div
-        className={classNames(
-          "px-2 py-1 border-e truncate",
+        className={cn(
+          "px-2 py-1",
+          column.className,
+          column.truncate && "truncate",
           column.align === "center" && "text-center",
           column.align === "end" && "text-end",
         )}
@@ -92,4 +83,4 @@ export const BodyCell = ({
       </div>
     </div>
   );
-};
+}

package/src/table/BodyRow.tsx

@@ -21,13 +21,13 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import classNames from "classnames";
+import { Icon } from "@react-fabric/core";
+import { cn } from "@react-fabric/utilities";
 import { BodyCell } from "./BodyCell";
 import { CheckboxCell } from "./CheckboxCell";
 import { type TableColumn } from "./types";
-import { CoreIcons, Icon } from "@react-fabric/core";
 
-export const BodyRow = ({
+export function BodyRow<T extends KeyValue = KeyValue>({
   rowKey,
   index,
   data,
@@ -46,97 +46,74 @@ export const BodyRow = ({
   toggleExpand,
   expandRow,
 }: {
-  rowKey: Key;
+  rowKey: keyof T;
   index: number;
-  data: KeyValue;
-  keyProperty?: Key;
-  measureElement: AnyObject;
+  data: T;
+  keyProperty?: keyof T;
   state: KeyValue<TableColumn[]>;
   hideableColumns?: boolean;
   wrapperStart: string;
   wrapperEnd: string;
   checkableRows?: boolean;
   checked: 0 | 1;
-  onRowClick?: AnyObject;
-  canExpand?: AnyObject;
-  expandRow?: AnyObject;
   expanded: boolean;
+  measureElement: (el: HTMLDivElement) => void;
+  expandRow?: (data: T) => React.ReactElement<unknown>;
+  canExpand?: (data: T) => boolean;
+  onRowClick?: (data: T) => void;
   toggleExpand: (key: Key) => void;
   toggleChecked: (key: Key) => void;
-}) => {
+}) {
   return (
-    <div
-      ref={measureElement}
-      data-index={index}
-      className={index % 2 ? "bg-even" : "bg-odd"}
-    >
+    <div ref={measureElement} data-index={index} className={index % 2 ? "bg-even" : "bg-odd"}>
       <div
         role="none"
         data-row={index}
-        className={classNames(
-          "flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500",
-          onRowClick && "hover:bg-primary-50 active:bg-primary-100",
+        className={cn(
+          "flex flex-nowrap datatable-row data-hilight:outline-1 -outline-offset-1 outline-primary-500 group/table-row",
+          !!onRowClick && "hover:bg-primary-50 active:bg-primary-100",
+          index % 2 ? "bg-even" : "bg-odd",
         )}
-        onClick={() =>
-          checkableRows && keyProperty && !onRowClick
-            ? toggleChecked(data[keyProperty])
-            : onRowClick?.(data)
-        }
+        onClick={() => {
+          if (checkableRows && keyProperty && !onRowClick) toggleChecked(data[keyProperty]);
+          else onRowClick?.(data);
+        }}
       >
         <div className={wrapperStart}>
           {!!canExpand && (
-            <div
-              className={classNames(
-                "group font-medium w-6 flex flex-nowrap text-start items-center",
+            <button
+              type="button"
+              className={cn(
+                "group font-medium w-6 flex flex-nowrap text-start py-1",
                 !canExpand(data) && "pointer-events-none opacity-35",
               )}
+              onClick={(e) => [keyProperty && toggleExpand(data[keyProperty]), e.stopPropagation()]}
             >
               <Icon
                 className="p-1 text-tint-700 hover:text-primary-600"
-                icon={expanded ? CoreIcons.collapse : CoreIcons.expand}
-                onClick={(e) => [
-                  keyProperty && toggleExpand(data[keyProperty]),
-                  e.stopPropagation(),
-                ]}
+                icon={expanded ? "icon-[mdi--minus-box]" : "icon-[mdi--plus-box]"}
               />
-            </div>
-          )}
-          {checkableRows && keyProperty && (
-            <CheckboxCell
-              onClick={() => toggleChecked(data[keyProperty])}
-              state={checked}
-            />
+            </button>
           )}
+          {checkableRows && keyProperty && <CheckboxCell onClick={() => toggleChecked(data[keyProperty])} state={checked} />}
           {state.start?.map((col, ids) => (
-            <BodyCell
-              key={`${String(rowKey)}:${ids}`}
-              column={col}
-              item={data}
-              index={ids}
-            />
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            <BodyCell key={`${String(rowKey)}:${ids}`} column={col} item={data} index={ids} />
           ))}
         </div>
         {state.cols?.map((col, idc) => (
-          <BodyCell
-            key={`${String(rowKey)}:${idc}`}
-            column={col}
-            item={data}
-            index={idc}
-          />
+          // eslint-disable-next-line @eslint-react/no-array-index-key
+          <BodyCell key={`${String(rowKey)}:${idc}`} column={col} item={data} index={idc} />
         ))}
         <div className={wrapperEnd}>
           {state.end?.map((col, ide) => (
-            <BodyCell
-              key={`${String(rowKey)}:${ide}`}
-              column={col}
-              item={data}
-              index={ide}
-            />
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            <BodyCell key={`${String(rowKey)}:${ide}`} column={col} item={data} index={ide} />
           ))}
           {hideableColumns && <div className="w-6" />}
         </div>
       </div>
-      {expanded && expandRow(data)}
+      {expanded && expandRow?.(data)}
     </div>
   );
-};
+}

package/src/table/CheckboxCell.tsx

@@ -21,28 +21,25 @@
  * 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";
+import { Icon } from "@react-fabric/core";
 
-export const CheckboxCell = ({
-  state,
-  onClick,
-}: {
-  state: 0 | 1 | 2;
-  onClick?: () => void;
-}) => {
+export function CheckboxCell({ state, onClick }: { state: number; onClick?: () => void }) {
   return (
-    <div className="group font-medium border-e w-6 flex flex-nowrap text-start items-center">
+    <button
+      type="button"
+      className="group font-medium border-e w-6 flex flex-nowrap text-start py-1"
+      onClick={(e) => [onClick?.(), e.stopPropagation()]}
+    >
       <Icon
         icon={
           state === 2
-            ? CoreIcons.checkboxInt
+            ? "icon-[mdi--checkbox-intermediate]"
             : state === 1
-              ? CoreIcons.checkboxOn
-              : CoreIcons.checkboxOff
+              ? "icon-[mdi--checkbox-marked]"
+              : "icon-[mdi--checkbox-blank-outline]"
         }
         className="p-1 text-tint-700 hover:text-primary-600"
-        onClick={(e) => [onClick?.(), e.stopPropagation()]}
       />
-    </div>
+    </button>
   );
-};
+}

package/src/table/ColumnFilters.tsx

@@ -0,0 +1,93 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 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 { Button, DropdownDismiss } from "@react-fabric/core";
+import { Checkbox, Input, Search } from "@react-fabric/form";
+import { EMPTY_ARRAY, isString, matchString } from "@react-fabric/utilities";
+import { useState } from "react";
+import { useFilteredList } from "../hooks/useFilteredList";
+import { type TableColumn } from "./types";
+
+interface FilterProps {
+  type: TableColumn["dataType"];
+  onFilter: (value: AnyObject) => void;
+  list?: Array<string | { id: string; label: string }>;
+  filter?: string | string[];
+}
+
+function ListFilter({ list = EMPTY_ARRAY, filter, onFilter }: Partial<FilterProps>) {
+  const [selected, setSelected] = useState<Set<string>>(() => new Set(filter));
+
+  const { filteredList, query, onSearch } = useFilteredList(list, (item, query) => {
+    return matchString(isString(item) ? item : item.id, query);
+  });
+
+  return (
+    <div className="flex flex-col">
+      <div>
+        <Search {...{ autoFocus: true }} value={query} onSearch={onSearch} searchOnChange />
+      </div>
+      <div className="flex-1 overflow-auto scroll-thin">
+        {filteredList.map((v, idx) => (
+          // eslint-disable-next-line @eslint-react/no-array-index-key
+          <div key={idx} className="flex gap-x-1 text-xs items-center">
+            <Checkbox
+              checked={selected.has(isString(v) ? v : v.id)}
+              onChange={(b) => {
+                const set = new Set(Array.from(selected.values()));
+                if (b) set.add(isString(v) ? v : v.id);
+                else set.delete(isString(v) ? v : v.id);
+                setSelected(set);
+              }}
+              label={<span className="truncate">{isString(v) ? v : v.label}</span>}
+            />
+          </div>
+        ))}
+        {filteredList.length === 0 && <span className="text-muted text-xs">No items found</span>}
+      </div>
+      <div className="flex justify-end">
+        <DropdownDismiss>
+          <Button size="xs" onClick={() => onFilter?.(Array.from(selected))}>
+            Apply
+          </Button>
+        </DropdownDismiss>
+      </div>
+    </div>
+  );
+}
+
+export function ColumnFilters({ type, list, filter, onFilter }: FilterProps) {
+  return (
+    <div className="flex flex-col min-w-[16rem]">
+      {list && <ListFilter list={list} filter={filter} onFilter={onFilter} />}
+      {!list && type === "string" && (
+        <Input
+          {...{ autoFocus: true }}
+          allowClear
+          value={filter as string}
+          onEnterPressed={(e) => onFilter(e.currentTarget.value ?? "")}
+        />
+      )}
+    </div>
+  );
+}