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

package/dist/esm/virtual/Scroller.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { ButtonGroup, Button, CoreIcons } from '@react-fabric/core';
+import { ButtonGroup, Button } from '@react-fabric/core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /*
@@ -39,35 +39,43 @@ var Scroller = function Scroller(_ref) {
     variant: "link",
     className: "outline",
     children: [/*#__PURE__*/jsx(Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll to top",
-      icon: vertical ? CoreIcons.chevronsUp : CoreIcons.chevronsLeft,
+      icon: {
+        icon: vertical ? "icon-[mdi--chevron-double-up]" : "icon-[mdi--chevron-double-left]",
+        rtlFlip: true
+      },
       disabled: (scrollActive & 2) === 0,
       onClick: onStart
     }), /*#__PURE__*/jsx(Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll up",
-      icon: vertical ? CoreIcons.chevronUp : CoreIcons.chevronLeft,
+      icon: {
+        icon: vertical ? "icon-[mdi--chevron-up]" : "icon-[mdi--chevron-left]",
+        rtlFlip: true
+      },
       disabled: (scrollActive & 2) === 0,
       onClick: onPrevious
     }), /*#__PURE__*/jsx(Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll down",
-      icon: vertical ? CoreIcons.chevronDown : CoreIcons.chevronRight,
+      icon: {
+        icon: vertical ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]",
+        rtlFlip: true
+      },
       disabled: scrollActive % 2 === 0,
       onClick: onNext
     }), /*#__PURE__*/jsx(Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll to bottom",
-      icon: vertical ? CoreIcons.chevronsDown : CoreIcons.chevronsRight,
+      icon: {
+        icon: vertical ? "icon-[mdi--chevron-double-down]" : "icon-[mdi--chevron-double-right]",
+        rtlFlip: true
+      },
       disabled: scrollActive % 2 === 0,
       onClick: onEnd
     })]

package/dist/types/checklist/CheckList.d.ts

@@ -1,12 +1,12 @@
-import { type BadgeType, type TestProps } from "@react-fabric/core/dist/types/types";
-import { type FC } from "react";
+import type { BadgeType } from "@react-fabric/core/dist/types/components/badge/Badge";
+import { type TestProps } from "@react-fabric/core/dist/types/types";
 import { type SelectableProps } from "../hooks/useSelectableList";
-export interface CheckListItem extends KeyValue {
+export interface CheckListItem {
     id: string;
     label: string;
-    icon?: string;
+    icon?: string | React.ReactElement;
     badge?: BadgeType;
-    isDisabled?: boolean;
+    disabled?: boolean;
 }
 export interface CheckListProps extends SelectableProps, TestProps {
     /**
@@ -27,4 +27,23 @@ export interface CheckListProps extends SelectableProps, TestProps {
     emptyMessage?: string;
     sortItems?: boolean;
 }
-export declare const CheckList: FC<CheckListProps>;
+/**
+ * CheckList component to display a list of selectable items with checkboxes.
+ * It supports selection, deselection, and allows for negative selections.
+ *
+ * @example
+ * ```jsx
+ * <CheckList
+ *   items={[
+ *     { id: "1", label: "Item 1", icon: "icon1" },
+ *     { id: "2", label: "Item 2", icon: "icon2", badge: { text: "New" } },
+ *   ]}
+ *   maxCount={5}
+ *   allowNegative={true}
+ *   emptyMessage="No items available"
+ *   onChange={(selectedItems) => console.log(selectedItems)}
+ *   onClick={(itemId, isNegative) => console.log(itemId, isNegative)}
+ * />
+ * ```
+ */
+export declare function CheckList({ items, maxCount, allowNegative, emptyMessage, sortItems, selected, nonselected, onChange, onClick, ...aria }: CheckListProps): import("react").JSX.Element;

package/dist/types/histogram/Histogram.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { type ColorType, type PaletteType, type TestProps } from "@react-fabric/core/dist/types/types";
+import type { CustomColors, TestProps } from "@react-fabric/core/dist/types/types";
 interface HistogramItem {
     id: string;
     label: string;
@@ -19,7 +18,7 @@ export interface HistogramProps extends TestProps {
     /**
      * histogram bar color
      */
-    color?: ColorType | PaletteType;
+    color?: CustomColors;
     /**
      * sorted list
      */
@@ -27,15 +26,38 @@ export interface HistogramProps extends TestProps {
     /**
      * title when histo list is empty
      */
-    emptyTitle?: string | JSX.Element;
+    emptyTitle?: string | React.ReactElement;
     /**
      * message when histo list is empty
      */
-    emptyMessage?: string | JSX.Element;
+    emptyMessage?: string | React.ReactElement;
     /**
      * handle histo click
      */
     onClick?: (id: string, negative?: true) => void;
 }
-export declare const Histogram: ({ items, total, color, sortBy, emptyTitle, emptyMessage, onClick, ...aria }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Histogram component displays a bar chart of items with counts.
+ * It allows users to visualize the distribution of counts across different items.
+ * The component supports sorting, custom colors, and click handling for each item.
+ * It also provides an empty state when there are no items to display.
+ *
+ * @example
+ * ```jsx
+ * <Histogram
+ *   items={[
+ *     { id: "1", label: "Item 1", count: 10 },
+ *     { id: "2", label: "Item 2", count: 20 },
+ *     { id: "3", label: "Item 3", count: 5, disabled: true },
+ *   ]}
+ *   total={30}
+ *   color="primary-500"
+ *   sortBy="count"
+ *   emptyTitle="No Data Available"
+ *   emptyMessage="Please check back later."
+ *   onClick={(id, negative) => console.log(`Clicked on ${id}`, negative ? "Negative" : "Positive")}
+ * />
+ * ```
+ */
+export declare function Histogram({ items, total, color, sortBy, emptyTitle, emptyMessage, onClick, }: HistogramProps): import("react").JSX.Element;
 export {};

package/dist/types/hooks/useFilteredList.d.ts

@@ -1,7 +1,64 @@
-/// <reference types="react" />
-export declare const useFilteredList: <T extends unknown = KeyValue<any>, Q extends unknown = string>(items: T[], matcher?: (item: T, query: Q) => boolean) => {
-    onSearch: import("react").Dispatch<import("react").SetStateAction<Q | undefined>>;
-    query: Q | undefined;
+interface RetType<T, Q> {
+    onSearch: (query?: Q) => void;
+    query: Q;
     filteredList: T[];
     isSearching: boolean;
-};
+}
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+export declare function useFilteredList<T extends AnyObject = KeyValue, Q extends AnyObject = string>(items: T[], matchAll?: boolean): RetType<T, Q>;
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matcher - An optional function to match items against the query.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ */
+export declare function useFilteredList<T extends AnyObject = KeyValue, Q extends AnyObject = string>(items: T[], matcher?: (item: T, query: Q) => boolean): RetType<T, Q>;
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @param matcher - An optional function to match items against the query.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ */
+export declare function useFilteredList<T extends AnyObject = KeyValue, Q extends AnyObject = string>(items: T[], matchAll?: boolean, matcher?: (item: T, query: Q) => boolean): RetType<T, Q>;
+export {};

package/dist/types/hooks/usePagination.d.ts

@@ -16,10 +16,26 @@ export interface PaginationOptions {
      */
     onChange?: (page: number) => void;
 }
-export declare const usePagination: ({ totalRecords, currentPage, perPage, onChange, }: PaginationOptions) => {
+/**
+ * Custom hook to manage pagination state and logic.
+ * It calculates the total number of pages, generates page ranges,
+ * and provides a way to change the current page.
+ * It also handles the transition of page changes to optimize performance.
+ *
+ * @example
+ * ```jsx
+ * const { page, totalPages, headLabel, ranges, onPageChange } = usePagination({
+ *   totalRecords: 100,
+ *   currentPage: 0,
+ *   perPage: 10,
+ *   onChange: (newPage) => console.log("Page changed to:", newPage),
+ * });
+ * ```
+ */
+export declare function usePagination({ totalRecords, currentPage, perPage, onChange }: PaginationOptions): {
     page: number;
     totalPages: number;
-    headLabel: import("react/jsx-runtime").JSX.Element;
+    headLabel: import("react").JSX.Element;
     ranges: number[][];
     onPageChange: (page: number) => void;
 };

package/dist/types/hooks/useSelectableList.d.ts

@@ -4,6 +4,7 @@ export interface SelectableProps {
      */
     items: Array<{
         label: string;
+        id: string;
     } & KeyValue>;
     /**
      * selected item ids
@@ -22,7 +23,29 @@ export interface SelectableProps {
      */
     onClick?: (id: string, isNegative: boolean) => void;
 }
-export declare const useSelectableList: ({ items, selected, nonselected, onChange, onClick, }: SelectableProps) => {
+/**
+ * Custom hook to manage selection of items in a list.
+ * It allows toggling selection state of items, handling both selected and non-selected states.
+ * The hook maintains a selection state and provides a function to toggle the selection of items.
+ * It also supports callbacks for when the selection changes or when an item is clicked.
+ *
+ * @example
+ * ```jsx
+ * const { selection, toggleSelection } = useSelectableList({
+ *   items: [{ id: '1', label: 'Item 1' }, { id: '2', label: 'Item 2' }],
+ *   selected: ['1'],
+ *   nonselected: ['2'],
+ *   onChange: (selectedIds, nonSelectedIds) => {
+ *     console.log('Selected:', selectedIds);
+ *     console.log('Non-selected:', nonSelectedIds);
+ *   },
+ *   onClick: (id, isNegative) => {
+ *     console.log(`Item ${id} clicked, isNegative: ${isNegative}`);
+ *   },
+ * });
+ * ```
+ */
+export declare function useSelectableList({ items, selected, nonselected, onChange, onClick }: SelectableProps): {
     selection: KeyValue<number>;
     toggleSelection: (id: string, isNegative?: boolean) => void;
 };

package/dist/types/index.d.ts

@@ -1,8 +1,35 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 declare const DATA_PACKAGE = "@react-fabric/data";
+export declare const DATA_VERSION = "1.0.0";
 import "./i18n";
 export { CheckList } from "./checklist/CheckList";
 export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
+export { HtmlTable } from "./table/HtmlTable";
 export { Table } from "./table/Table";
 export { type TableColumn, type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";

package/dist/types/json/JsonViewer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type CssProp } from "@react-fabric/core/dist/types/types";
 export interface JsonViewProps<T> extends CssProp {
     /**
@@ -54,6 +53,27 @@ export interface JsonViewProps<T> extends CssProp {
     /**
      * render function for custom value display
      */
-    formatter?: (path?: string, value?: AnyObject) => string | JSX.Element | undefined;
+    formatter?: (path?: string, value?: AnyObject) => string | React.ReactElement | undefined;
 }
-export declare const JsonViewer: <T extends KeyValue<any> = KeyValue<any>>({ className, json, copy, propertyScheme, filters, inline, labelWidth, formatter, labeler, onFilter, emptyMessage, showPropertyTree, ...rest }: JsonViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * JsonViewer component to display JSON data in a structured format.
+ * It supports inline display, property filtering, and custom formatting.
+ * The component can handle nested objects and arrays, displaying them in a tree-like structure.
+ * It also provides options for copying values and filtering properties.
+ *
+ * @example
+ * ```jsx
+ * <JsonViewer
+ *   json={{ name: "John", age: 30, address: { city: "New York", zip: "10001" } }}
+ *   copy={true}
+ *   filters={true}
+ *   propertyScheme={{ date: ["createdAt"], phone: ["contact"] }}
+ *   inline={true}
+ *   labelWidth="25%"
+ *   formatter={(path, value) => (path === "age" ? `${value} years` : value)}
+ *   labeler={(path) => path.replace(/_/g, " ").toUpperCase()}
+ *   onFilter={(path, value, negate) => console.log(`Filter ${negate ? "negate" : ""} on ${path}:`, value)}
+ * />
+ * ```
+ */
+export declare function JsonViewer<T extends KeyValue = KeyValue>({ className, json, copy, propertyScheme, filters, inline, labelWidth, formatter, labeler, onFilter, emptyMessage, showPropertyTree, ...rest }: JsonViewProps<T>): import("react").JSX.Element;

package/dist/types/pagination/Pagination.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface PaginationProps {
     /**
      * currrent page number
@@ -21,4 +20,11 @@ export interface PaginationProps {
      */
     onPageChange: (page: number) => void;
 }
-export declare const Pagination: import("react").MemoExoticComponent<({ page, ranges, totalPages, minimal, onPageChange }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * 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 declare const Pagination: import("react").MemoExoticComponent<({ page, ranges, totalPages, minimal, onPageChange }: PaginationProps) => import("react").JSX.Element>;

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

@@ -1,5 +1,5 @@
 import { type TableColumn } from "./types";
-export declare const AddColumn: ({ columns, onClick, }: {
+export declare function AddColumn({ columns, onClick }: {
     columns: TableColumn[];
     onClick: (id: string) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { type TableColumn } from "./types";
-export declare const BodyCell: ({ column, item, index, }: {
+export declare function BodyCell({ column, item, index }: {
     column: TableColumn;
     item: KeyValue;
     index: number;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

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

@@ -1,20 +1,20 @@
 import { type TableColumn } from "./types";
-export declare const BodyRow: ({ rowKey, index, data, keyProperty, measureElement, state, hideableColumns, wrapperStart, wrapperEnd, onRowClick, checkableRows, checked, toggleChecked, canExpand, expanded, toggleExpand, expandRow, }: {
-    rowKey: Key;
+export declare function BodyRow<T extends KeyValue = KeyValue>({ rowKey, index, data, keyProperty, measureElement, state, hideableColumns, wrapperStart, wrapperEnd, onRowClick, checkableRows, checked, toggleChecked, canExpand, expanded, toggleExpand, expandRow, }: {
+    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;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

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

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

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

@@ -0,0 +1,12 @@
+import { type TableColumn } from "./types";
+interface FilterProps {
+    type: TableColumn["dataType"];
+    onFilter: (value: AnyObject) => void;
+    list?: Array<string | {
+        id: string;
+        label: string;
+    }>;
+    filter?: string | string[];
+}
+export declare function ColumnFilters({ type, list, filter, onFilter }: FilterProps): import("react").JSX.Element;
+export {};

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

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

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

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

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

@@ -0,0 +1,21 @@
+interface Props<T = KeyValue> {
+    data: T[];
+    columns: Array<{
+        id: keyof T;
+        label?: string;
+        width?: number | string;
+        maxWidth?: number | string;
+        align?: "start" | "center" | "end";
+        className?: string;
+        headRenderer?: React.ReactNode;
+        renderer?: (value: AnyObject, row: T, index: number) => React.ReactNode;
+    }>;
+    /**
+     * Number of pagination buttons to show, default is 25
+     * If set to 0, pagination will be hidden
+     */
+    paginationSize?: number;
+    className?: string;
+}
+export declare function HtmlTable<T extends KeyValue = KeyValue>({ data, columns, paginationSize, className }: Props<T>): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import { type ChildrenProp } from "@react-fabric/core/dist/types/types";
+export declare function TableProvider({ children }: ChildrenProp): import("react").JSX.Element;

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

@@ -1,2 +1,11 @@
 import { type TableProps } from "./types";
-export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ ref, data, columns, keyProperty, checkableRows, initialScroll, hideableColumns, sort, loading, emptyDisplay, canExpand, children, onSort, onScroll, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @see {@link https://tanstack.com/table/v8/docs/api/virtual}
+ */
+export declare function Table<T extends KeyValue = KeyValue>({ ref, data, columns, keyProperty, groupProperty, checkableRows, initialScroll, hideableColumns, sort, loading, checked, emptyDisplay, groupRenderer, canExpand, children, onSort, onFilter, onScroll, onRowClick, onCheckedChanged, total, onLoadMore, }: TableProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+interface Context {
+    widths: Map<string, number>;
+    startResize: (col: HTMLElement) => void;
+}
+export declare const TableContext: import("react").Context<Context>;
+export declare const useTableContext: () => Context;
+export {};

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

@@ -1,28 +1,64 @@
-import { type CssProp, type Elements, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
+import { type CssProp, type NestedKeys, 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 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?: string | string[];
+    filterOptions?: Array<string | {
+        id: string;
+        label: string;
+    }>;
     width?: string | number;
     minWidth?: string | number;
     maxWidth?: string | number;
     dataType?: "string" | "number" | "boolean" | "datetime" | "date" | "time" | "unknown";
     format?: string;
-    valueMap?: KeyValue;
-    renderer?: (value: AnyObject, data: T, index: number) => Elements<AnyObject>;
+    valueMap?: KeyValue<string>;
+    renderer?: (value: AnyObject, data: T, index: number) => React.ReactElement<unknown>;
 }
 export interface TableRef {
     hilight: (row: number) => void;
@@ -32,13 +68,16 @@ 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
      */
@@ -56,5 +95,8 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
     initialScroll?: number;
     onScroll?: (firstItem: number) => void;
     canExpand?: (record: T) => boolean;
-    children?: (record: T) => Elements<AnyObject>;
+    children?: (record: T) => React.ReactElement<unknown>;
+    onFilter?: (id: NestedKeys<T> | string, value?: AnyObject) => void;
+    total?: number;
+    onLoadMore?: (lastIndex?: number) => void;
 }

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

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

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

@@ -1,5 +1,5 @@
 import { type TableColumn } from "./types";
-export declare const useTableColumns: (columns: TableColumn[]) => {
+export declare function useTableColumns(columns: TableColumn[]): {
     state: {
         start: TableColumn<KeyValue<any>>[];
         end: TableColumn<KeyValue<any>>[];