@prt-ts/fluent-react-table-v2 9.46.8-build.3.0 → 9.46.8-build.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.46.8-build.3.0",
+  "version": "9.46.8-build.5.0",
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
@@ -9,9 +9,13 @@
   },
   "dependencies": {
     "@tanstack/react-table": ">=8.10.7",
-    "react-dnd": ">=16.0.1",
-    "react-dnd-html5-backend": ">=16.0.1",
-    "react-virtual": ">=2.10.4"
+    "@tanstack/react-virtual": ">=3.0.0",
+    "@dnd-kit/core": ">6.0.0",
+    "@dnd-kit/modifiers": ">=7.0.0",
+    "@dnd-kit/sortable": ">=8.0.0",
+    "@dnd-kit/utilities": ">=3.2.2",
+    "react-virtual": ">=2.10.4",
+    "@prt-ts/react-control-flow": "latest"
   },
   "license": "MIT",
   "publishConfig": {

package/src/lib/components/GridContainer.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { TableProps, TableRef } from "../types";
-export declare function AdvancedTable<TItem extends object>(props: TableProps<TItem>, ref: React.ForwardedRef<TableRef<TItem>>): import("react/jsx-runtime").JSX.Element;
-export declare const ForwardedAdvancedTable: <TItem extends object>(props: TableProps<TItem> & {
+import { RowData } from "@tanstack/react-table";
+export declare function AdvancedTable<TItem extends RowData>(props: TableProps<TItem>, ref: React.ForwardedRef<TableRef<TItem>>): import("react/jsx-runtime").JSX.Element;
+export declare const ForwardedAdvancedTable: <TItem extends unknown>(props: TableProps<TItem> & {
     ref?: React.ForwardedRef<TableRef<TItem>> | undefined;
 }) => React.ReactElement<TableProps<TItem> & {
     ref?: React.ForwardedRef<TableRef<TItem>> | undefined;

package/src/lib/components/filters/Filter.d.ts

@@ -1,5 +1,5 @@
 import { Column, Table } from '@tanstack/react-table';
-export declare const Filter: <TItem extends object>({ column, table, }: {
+export declare const Filter: <TItem extends unknown>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filters/FilterDate.d.ts

@@ -1,7 +1,7 @@
-import { Column, Table } from '@tanstack/react-table';
-type FilterNumberRangeProps<TItem extends object> = {
+import { Column, RowData, Table } from '@tanstack/react-table';
+type FilterNumberRangeProps<TItem extends RowData> = {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 };
-export declare const FilterDate: <TItem extends object>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterDate: <TItem extends unknown>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/filters/FilterDateRange.d.ts

@@ -1,7 +1,7 @@
-import { Column, Table } from '@tanstack/react-table';
-type FilterNumberRangeProps<TItem extends object> = {
+import { Column, RowData, Table } from '@tanstack/react-table';
+type FilterNumberRangeProps<TItem extends RowData> = {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 };
-export declare const FilterDateRange: <TItem extends object>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterDateRange: <TItem extends unknown>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/filters/FilterDrawer.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Table } from '@tanstack/react-table';
+import { RowData, Table } from '@tanstack/react-table';
 import { ActionType, DrawerTableState } from '../reducer';
-type FilterDrawerProps<TItem extends object> = {
+type FilterDrawerProps<TItem extends RowData> = {
     drawerState: DrawerTableState;
     dispatch: React.Dispatch<ActionType<string>>;
     table: Table<TItem>;
 };
-export declare const FilterDrawer: <TItem extends object>({ drawerState, dispatch, table }: FilterDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterDrawer: <TItem extends unknown>({ drawerState, dispatch, table }: FilterDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/filters/FilterMultiSelectCheckbox.d.ts

@@ -1,5 +1,5 @@
 import { Column, Table } from '@tanstack/react-table';
-export declare const FilterMultiSelectCheckbox: <TItem extends object>({ column, table, }: {
+export declare const FilterMultiSelectCheckbox: <TItem extends unknown>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/filters/FilterNumberRange.d.ts

@@ -1,7 +1,7 @@
-import { Column, Table } from '@tanstack/react-table';
-type FilterNumberRangeProps<TItem extends object> = {
+import { Column, RowData, Table } from '@tanstack/react-table';
+type FilterNumberRangeProps<TItem extends RowData> = {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 };
-export declare const FilterNumberRange: <TItem extends object>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterNumberRange: <TItem extends unknown>(props: FilterNumberRangeProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/filters/FilterSelectRadio.d.ts

@@ -1,5 +1,5 @@
 import { Column, Table } from "@tanstack/react-table";
-export declare const FilterSelectRadio: <TItem extends object>({ column, table, }: {
+export declare const FilterSelectRadio: <TItem extends unknown>({ column, table, }: {
     column: Column<TItem, unknown>;
     table: Table<TItem>;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/grid-header/GridHeader.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Table, TableState } from '@tanstack/react-table';
+import { RowData, Table, TableState } from '@tanstack/react-table';
 import { ActionType, DrawerTableState } from '../reducer';
-type GridHeaderProps<TItem extends object> = {
+type GridHeaderProps<TItem extends RowData> = {
     table: Table<TItem>;
     gridTitle: JSX.Element | React.ReactNode;
     headerMenu?: JSX.Element | React.ReactNode;
@@ -11,5 +11,5 @@ type GridHeaderProps<TItem extends object> = {
     drawerState: DrawerTableState;
     dispatch: React.Dispatch<ActionType<string>>;
 };
-export declare const GridHeader: <TItem extends object>(props: GridHeaderProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const GridHeader: <TItem extends unknown>(props: GridHeaderProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/grid-header/useGridHeaderStyles.d.ts

@@ -1 +1 @@
-export declare const useGridHeaderStyles: () => Record<"tableTopHeaderContainer" | "tableTopHeaderLeft" | "tableTopHeaderRight" | "tableTopHeaderColumnTogglePopover", string>;
+export declare const useGridHeaderStyles: () => Record<"tableTopHeaderContainer" | "tableTopHeaderLeft" | "tableTopHeaderRight" | "tableTopHeaderColumnTogglePopover" | "popoverSurface", string>;

package/src/lib/components/index.d.ts

@@ -1 +1,2 @@
 export { ForwardedAdvancedTable as Table } from "./GridContainer";
+export { useSkipper } from "./useSkipper";

package/src/lib/components/pagination/Pagination.d.ts

@@ -1,7 +1,6 @@
-import { Table } from "@tanstack/react-table";
-type PaginationProps<TItem extends object> = {
+import { RowData, Table } from "@tanstack/react-table";
+type PaginationProps<TItem extends RowData> = {
     table: Table<TItem>;
-    pageSizeOptions?: number[];
 };
-export declare const Pagination: <TItem extends object>(props: PaginationProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: <TItem extends unknown>(props: PaginationProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/table/Table.d.ts

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { Table } from '@tanstack/react-table';
-type TableContainerProps<TItem extends object> = {
-    rowSelectionMode?: 'single' | 'multiple';
+import { RowData, Table } from '@tanstack/react-table';
+type TableContainerProps<TItem extends RowData> = {
     table: Table<TItem>;
     noItemPage?: React.ReactNode;
     noFilterMatchPage?: React.ReactNode;
     isLoading: boolean;
     data: TItem[];
 };
-export declare const TableContainer: <TItem extends object>(props: TableContainerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableContainer: <TItem extends unknown>(props: TableContainerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/tbody/TableBody.d.ts

@@ -1,11 +1,8 @@
-import { Row } from '@tanstack/react-table';
-import { TableProps } from '../../types';
-import { VirtualItem } from 'react-virtual';
-type TableBodyProps<TItem extends object> = {
-    rows: Row<TItem>[];
-    rowSelectionMode?: TableProps<TItem>['rowSelectionMode'];
-    virtualRows: VirtualItem[];
-    totalSize: number;
+/// <reference types="react" />
+import { RowData, Table } from '@tanstack/react-table';
+type TableBodyProps<TItem extends RowData> = {
+    table: Table<TItem>;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
 };
-export declare function TableBody<TItem extends object>(props: TableBodyProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare function TableBody<TItem extends RowData>(props: TableBodyProps<TItem>): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/tbody/TableCell.d.ts

@@ -1,7 +1,7 @@
-import { Cell, Row } from '@tanstack/react-table';
-type TableCellProps<TItem extends object> = {
+import { Cell, Row, RowData } from '@tanstack/react-table';
+type TableCellProps<TItem extends RowData> = {
     cell: Cell<TItem, unknown>;
     row: Row<TItem>;
 };
-export declare function TableCell<TItem extends object>({ cell, row }: TableCellProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare function TableCell<TItem extends RowData>({ cell, row }: TableCellProps<TItem>): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/tbody/TableRow.d.ts

@@ -1,8 +1,12 @@
-import { Row } from '@tanstack/react-table';
+/// <reference types="react" />
+import { Row, RowData } from '@tanstack/react-table';
 import { TableProps } from '../../types';
-type TableRowProps<TItem extends object> = {
+type TableRowProps<TItem extends RowData> = {
     row: Row<TItem>;
     rowSelectionMode?: TableProps<TItem>['rowSelectionMode'];
+    bottomRowLength?: number;
+    style?: React.CSSProperties;
 };
-export declare function TableRow<TItem extends object>({ row, rowSelectionMode }: TableRowProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare function TableRow<TItem extends RowData>({ row, rowSelectionMode, style }: TableRowProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare function PinnedRow<TItem extends RowData>({ row, rowSelectionMode, style, bottomRowLength }: TableRowProps<TItem>): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/tbody/useTableBodyStyles.d.ts

@@ -1 +1 @@
-export declare const useTableBodyStyles: () => Record<"tBody" | "tBodyRow" | "tBodySelectedRow" | "tBodyCell", string>;
+export declare const useTableBodyStyles: () => Record<"tBody" | "tBodyRow" | "tBodySelectedRow" | "tBodyCell" | "tBodyRowPinnedCell" | "tBodyPinnedCell" | "tBodySelectedCell", string>;

package/src/lib/components/thead/HeaderCell.d.ts

@@ -1,10 +1,10 @@
-import { Header, Table } from "@tanstack/react-table";
-type HeaderCellProps<TItem extends object> = {
+import { Header, RowData, Table } from "@tanstack/react-table";
+type HeaderCellProps<TItem extends RowData> = {
     header: Header<TItem, unknown>;
     table: Table<TItem>;
     hideMenu?: boolean;
     headerDepth: number;
     totalNumberOfHeaderDepth: number;
 };
-export declare function HeaderCell<TItem extends object>({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }: HeaderCellProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderCell<TItem extends RowData>({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }: HeaderCellProps<TItem>): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/thead/HeaderRow.d.ts

@@ -1,10 +1,10 @@
-import { HeaderGroup, Table } from '@tanstack/react-table';
+import { HeaderGroup, RowData, Table } from '@tanstack/react-table';
 import { TableProps } from '../../types';
-type HeaderRowProps<TItem extends object> = {
+type HeaderRowProps<TItem extends RowData> = {
     table: Table<TItem>;
     rowSelectionMode?: TableProps<TItem>['rowSelectionMode'];
     headerGroup: HeaderGroup<TItem>;
     headerGroupsLength: number;
 };
-export declare function HeaderRow<TItem extends object>(props: HeaderRowProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderRow<TItem extends RowData>(props: HeaderRowProps<TItem>): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/thead/TableHeader.d.ts

@@ -1,9 +1,9 @@
-import { HeaderGroup, Table } from '@tanstack/react-table';
+import { HeaderGroup, RowData, Table } from '@tanstack/react-table';
 import { TableProps } from '../../types';
-type HeaderRowProps<TItem extends object> = {
+type HeaderRowProps<TItem extends RowData> = {
     table: Table<TItem>;
     rowSelectionMode?: TableProps<TItem>['rowSelectionMode'];
     headerGroups: HeaderGroup<TItem>[];
 };
-export declare function TableHeader<TItem extends object>(props: HeaderRowProps<TItem>): import("react/jsx-runtime").JSX.Element;
+export declare function TableHeader<TItem extends RowData>(props: HeaderRowProps<TItem>): import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/thead/useTableHeaderStyles.d.ts

@@ -1 +1 @@
-export declare const useTableHeaderStyles: () => Record<"tHead" | "tHeadRow" | "tHeadCell" | "tHeadNonLeafCell" | "tHeadCellDraggable" | "tHeadCellDragging" | "tHeadCellOver" | "tLeafHeadCellContent" | "tNonLeafHeadCellContent" | "tHeadContentBtn" | "tHeadMenuPopover" | "resizer" | "resizerActive", string>;
+export declare const useTableHeaderStyles: () => Record<"tHead" | "tHeadRow" | "tHeadCell" | "tHeadNonLeafCell" | "tHeadNonLeafCellFakeBorder" | "tHeadCellDraggable" | "tHeadCellDragging" | "tHeadCellOver" | "tLeafHeadCellContent" | "tNonLeafHeadCellContent" | "tHeadContentBtn" | "tHeadMenuPopover" | "resizer" | "resizerActive", string>;

package/src/lib/components/useGridContainer.d.ts

@@ -1,8 +1,7 @@
 import { TableState } from '@tanstack/react-table';
-import { TableProps } from '..';
-import { TableRef, TableView } from '../types';
+import { TableProps, TableRef, TableView } from '../types';
 import * as React from 'react';
-export declare const useGridContainer: <TItem extends object>(props: TableProps<TItem>, ref: React.ForwardedRef<TableRef<TItem>>) => {
+export declare const useGridContainer: <TItem extends unknown>(props: TableProps<TItem>, ref: React.ForwardedRef<TableRef<TItem>>) => {
     table: import("@tanstack/react-table").Table<TItem>;
     globalFilter: string;
     tableViews: TableView[];

package/src/lib/components/useSkipper.d.ts

@@ -0,0 +1 @@
+export declare function useSkipper(): readonly [boolean, () => void];

package/src/lib/components/views/ViewSaveForm.d.ts

@@ -1,9 +1,9 @@
 import { TableProps } from "../../types";
-import { TableState } from '@tanstack/react-table';
-type ViewSaveFormProps<TItem extends object> = {
+import { RowData, TableState } from '@tanstack/react-table';
+type ViewSaveFormProps<TItem extends RowData> = {
     mode: 'create' | 'edit';
     onSave: TableProps<TItem>['onTableViewSave'];
     getTableState: () => TableState;
 };
-export declare const ViewSaveForm: <TItem extends object>(props: ViewSaveFormProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const ViewSaveForm: <TItem extends unknown>(props: ViewSaveFormProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/views/ViewsDrawer.d.ts

@@ -1,16 +1,14 @@
 import * as React from 'react';
-import { TableProps, TableView } from '../../types';
-import { Table, TableState } from '@tanstack/react-table';
+import { TableView } from '../../types';
+import { RowData, Table, TableState } from '@tanstack/react-table';
 import { ActionType, DrawerTableState } from '../reducer';
-type ViewsDrawerProps<TItem extends object> = {
+type ViewsDrawerProps<TItem extends RowData> = {
     drawerState: DrawerTableState;
     dispatch: React.Dispatch<ActionType<string>>;
     table: Table<TItem>;
     tableViews: TableView[];
     applyTableState: (tableView: TableState) => boolean;
     resetToGridDefaultView: () => boolean;
-    onTableViewSave?: TableProps<TItem>['onTableViewSave'];
-    onTableViewDelete?: TableProps<TItem>['onTableViewDelete'];
 };
-export declare const ViewsDrawer: <TItem extends object>(props: ViewsDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const ViewsDrawer: <TItem extends unknown>(props: ViewsDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/helpers/Helpers.d.ts

@@ -1,2 +1,2 @@
 import { Column } from "@tanstack/react-table";
-export declare const getLeafColumns: <TItem extends object>(columns: Column<TItem, unknown>[]) => Column<TItem, unknown>[];
+export declare const getLeafColumns: <TItem extends unknown>(columns: Column<TItem, unknown>[]) => Column<TItem, unknown>[];

package/src/lib/helpers/StylesHelper.d.ts

@@ -0,0 +1,4 @@
+import { Column } from "@tanstack/react-table";
+import { CSSProperties } from "react";
+export declare const getHeaderCellPinningStyles: <TItem extends unknown>(column: Column<TItem, unknown>) => CSSProperties;
+export declare const getBodyCellPinningStyles: <TItem extends unknown>(column: Column<TItem, unknown>) => CSSProperties;

package/src/lib/index.d.ts

@@ -1,4 +1,5 @@
-import { FilterFn } from "@tanstack/react-table";
+import { FilterFn, RowData } from "@tanstack/react-table";
+import { TableProps } from "./types";
 declare module '@tanstack/table-core' {
     interface FilterFns {
         arrIncludesSome: FilterFn<unknown>;
@@ -11,7 +12,17 @@ declare module '@tanstack/react-table' {
         filterFnDefinition?: (data: TData) => TValue;
     }
 }
-export { Table } from "./components";
+declare module '@tanstack/react-table' {
+    interface TableMeta<TData extends RowData> {
+        rowSelectionMode: TableProps<TData>["rowSelectionMode"];
+        pageSizeOptions: TableProps<TData>["pageSizeOptions"];
+        tableHeight: string;
+        updateData?: (rowIndex: number, columnId: string, value: unknown) => void;
+        onTableViewSave?: TableProps<TData>["onTableViewSave"];
+        onTableViewDelete?: TableProps<TData>["onTableViewDelete"];
+    }
+}
+export { Table, useSkipper } from "./components";
 export type { TableProps, TableRef, TableView } from "./types";
 export type { TableState, ColumnDef } from '@tanstack/react-table';
 export { createColumnHelper } from "@tanstack/react-table";

package/src/lib/types/TableProps.d.ts

@@ -1,14 +1,16 @@
 import * as React from "react";
-import { ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ExpandedState, GroupingState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
+import { ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ExpandedState, GroupingState, RowData, RowPinningState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { TableView } from "./TableView";
-export type TableProps<TItem extends object> = {
+export type TableProps<TItem extends RowData> = {
     /**
      * Table Columns definitions.
      */
+    defaultColumn?: Partial<ColumnDef<TItem>>;
     columns: ColumnDef<TItem>[];
     /**
      * Table data.
      */
+    dataPrimaryKye?: keyof TItem;
     data: TItem[];
     /**
      * Table loading state.
@@ -70,6 +72,10 @@ export type TableProps<TItem extends object> = {
      * Column order state
      */
     columnOrderState?: ColumnOrderState;
+    /**
+     * Row pinning state
+     */
+    rowPinningState?: RowPinningState;
     /**
     * Component visible if the no item match the filter condition
     * @default defaultNoItemComponent
@@ -84,6 +90,12 @@ export type TableProps<TItem extends object> = {
      * Table Views
      */
     views?: TableView[];
+    /**
+     * Max height of the table
+     */
+    tableHeight?: string;
+    autoResetPageIndex?: boolean;
+    onUpdateData?: (rowIndex: number, columnId: string, value: unknown) => void;
     /**
      * Callback when a table view is saved
      */
@@ -92,4 +104,8 @@ export type TableProps<TItem extends object> = {
      * Callback when a table view is deleted
      */
     onTableViewDelete?: (tableView: TableView) => void;
+    /**
+     * disable table header
+     */
+    disableTableHeader?: boolean;
 };

package/src/lib/types/TableRef.d.ts

@@ -1,5 +1,5 @@
-import { Table, TableState } from "@tanstack/react-table";
-export type TableRef<TItem extends object> = {
+import { RowData, Table, TableState } from "@tanstack/react-table";
+export type TableRef<TItem extends RowData> = {
     table: Table<TItem>;
     getTableState: () => TableState;
     applyTableState: (tableState: TableState) => boolean;