@vuu-ui/vuu-table 0.6.25-debug → 0.6.26-debug

package/types/RowBasedTable.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { TableImplementationProps } from "./dataTableTypes";
-export declare const RowBasedTable: ({ columns, columnsWithinViewport, data, headings, onColumnResize, onHeaderCellDragStart, onContextMenu, onRemoveColumnFromGroupBy, onRowClick, onSort, onToggleGroup, virtualColSpan, rowCount, rowHeight, }: TableImplementationProps) => JSX.Element;
+import "./RowBasedTable.css";
+export declare const RowBasedTable: ({ columns, columnsWithinViewport, data, getRowOffset, headings, onColumnResize, onHeaderCellDragStart, onContextMenu, onRemoveColumnFromGroupBy, onRowClick, onSort, onToggleGroup, tableId, virtualColSpan, rowCount, }: TableImplementationProps) => JSX.Element;

package/types/Table.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { TableProps } from "./dataTableTypes";
 import "./Table.css";
-export declare const Table: ({ allowConfigEditing: showSettings, className: classNameProp, config, dataSource, headerHeight, height, id: idProp, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, onShowConfigEditor: onShowSettings, renderBufferSize, rowHeight, selectionModel, style: styleProp, tableLayout: tableLayoutProp, width, zebraStripes, ...props }: TableProps) => JSX.Element;
+import "./Table-loading.css";
+export declare const Table: ({ allowConfigEditing: showSettings, className: classNameProp, config, dataSource, headerHeight, height, id: idProp, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, onShowConfigEditor: onShowSettings, renderBufferSize, rowHeight, selectionModel, style: styleProp, width, zebraStripes, ...props }: TableProps) => JSX.Element;

package/types/TableCell.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TableCellProps } from "@vuu-ui/vuu-datagrid-types";
 import "./TableCell.css";
-export declare const TableCell: import("react").MemoExoticComponent<({ className: classNameProp, column, onClick, row }: TableCellProps) => JSX.Element>;
+export declare const TableCell: import("react").MemoExoticComponent<({ className: classNameProp, column, columnMap, onClick, row, }: TableCellProps) => JSX.Element>;

package/types/TableGroupHeaderCell.d.ts

@@ -4,10 +4,10 @@ import "./TableGroupHeaderCell.css";
 import { GroupColumnDescriptor, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
 export interface ColHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
     column: KeyedColumnDescriptor;
-    onRemoveColumn?: (column: KeyedColumnDescriptor) => void;
+    onRemove?: (column?: KeyedColumnDescriptor) => void;
 }
 export interface TableGroupHeaderCellProps extends Omit<TableHeaderCellProps, "onDragStart" | "onDrag" | "onDragEnd"> {
     column: GroupColumnDescriptor;
-    onRemoveColumn?: (column: KeyedColumnDescriptor) => void;
+    onRemoveColumn?: (column?: KeyedColumnDescriptor) => void;
 }
 export declare const TableGroupHeaderCell: ({ column: groupColumn, className: classNameProp, onRemoveColumn, onResize, ...props }: TableGroupHeaderCellProps) => JSX.Element;

package/types/TableRow.d.ts

@@ -1,12 +1,13 @@
 import { DataSourceRow } from "@vuu-ui/vuu-data";
 import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { ColumnMap } from "@vuu-ui/vuu-utils";
 import { HTMLAttributes } from "react";
 import { RowClickHandler } from "./dataTableTypes";
 import "./TableRow.css";
 export interface RowProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onClick"> {
+    columnMap: ColumnMap;
     columns: KeyedColumnDescriptor[];
-    height: number;
-    index: number;
+    offset: number;
     onClick?: RowClickHandler;
     onToggleGroup?: (row: DataSourceRow, column: KeyedColumnDescriptor) => void;
     row: DataSourceRow;

package/types/dataTableTypes.d.ts

@@ -1,7 +1,6 @@
 import { DataSource, DataSourceRow, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
 import { KeyedColumnDescriptor, GridConfig, TableHeadings, SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
 import { HTMLAttributes, MouseEvent } from "react";
-export type tableLayoutType = "row" | "column";
 export interface TableProps extends HTMLAttributes<HTMLDivElement> {
     allowConfigEditing?: boolean;
     config: Omit<GridConfig, "headings">;
@@ -25,7 +24,6 @@ export interface TableProps extends HTMLAttributes<HTMLDivElement> {
     renderBufferSize?: number;
     rowHeight?: number;
     selectionModel?: TableSelectionModel;
-    tableLayout?: tableLayoutType;
     width?: number;
     zebraStripes?: boolean;
 }
@@ -34,19 +32,20 @@ export interface TableImplementationProps {
     columns: KeyedColumnDescriptor[];
     columnsWithinViewport: KeyedColumnDescriptor[];
     data: DataSourceRow[];
+    getRowOffset: (row: DataSourceRow) => number;
     headerHeight: number;
     headings: TableHeadings;
     onColumnResize?: TableColumnResizeHandler;
     onHeaderCellDragEnd?: () => void;
     onHeaderCellDragStart?: (evt: MouseEvent) => void;
     onContextMenu?: (evt: MouseEvent<HTMLElement>) => void;
-    onRemoveColumnFromGroupBy?: (column: KeyedColumnDescriptor) => void;
+    onRemoveColumnFromGroupBy?: (column?: KeyedColumnDescriptor) => void;
     onRowClick?: RowClickHandler;
     onSort: (column: KeyedColumnDescriptor, isAdditive: boolean) => void;
     onToggleGroup?: (row: DataSourceRow, column: KeyedColumnDescriptor) => void;
+    tableId: string;
     virtualColSpan?: number;
     rowCount: number;
-    rowHeight: number;
 }
 type MeasureStatus = "unmeasured" | "measured";
 export interface TableMeasurements {
@@ -59,12 +58,10 @@ export interface TableMeasurements {
     top: number;
 }
 export interface Viewport {
-    fillerHeight: number;
     maxScrollContainerScrollHorizontal: number;
     maxScrollContainerScrollVertical: number;
     pinnedWidthLeft: number;
     rowCount: number;
-    scrollContentWidth: number;
 }
 export type RowClickHandler = (row: DataSourceRow, rangeSelect: boolean, keepExistingSelection: boolean) => void;
 export {};

package/types/useDraggableColumn.d.ts

@@ -1,12 +1,9 @@
-import { MouseEvent, RefObject } from "react";
+import { MouseEvent } from "react";
 export interface DraggableColumnHookProps {
     onDrop: (fromIndex: number, toIndex: number) => void;
-    tableContainerRef: RefObject<HTMLDivElement>;
-    tableLayout: "column" | "row";
 }
-export declare const useDraggableColumn: ({ onDrop, tableContainerRef, tableLayout: tableLayoutProp, }: DraggableColumnHookProps) => {
+export declare const useDraggableColumn: ({ onDrop }: DraggableColumnHookProps) => {
     draggable: JSX.Element | undefined;
     draggedItemIndex: number | undefined;
-    tableLayout: "column" | "row";
-    onHeaderCellDragStart: ((evt: MouseEvent) => void) | undefined;
+    onHeaderCellDragStart: (evt: MouseEvent) => void;
 };

package/types/{useDataTable.d.ts → useTable.d.ts}

@@ -2,9 +2,9 @@ import { DataSource, DataSourceRow, VuuFeatureInvocationMessage, VuuFeatureMessa
 import { GridConfig, KeyedColumnDescriptor, SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
 import { VuuSortType } from "@vuu-ui/vuu-protocol-types";
 import { MouseEvent } from "react";
-import { TableColumnResizeHandler, tableLayoutType } from "./dataTableTypes";
+import { TableColumnResizeHandler } from "./dataTableTypes";
 import { MeasuredProps } from "./useMeasuredContainer";
-export interface DataTableHookProps extends MeasuredProps {
+export interface TableHookProps extends MeasuredProps {
     config: Omit<GridConfig, "headings">;
     dataSource: DataSource;
     headerHeight: number;
@@ -15,13 +15,11 @@ export interface DataTableHookProps extends MeasuredProps {
     rowHeight: number;
     onSelectionChange?: SelectionChangeHandler;
     selectionModel: TableSelectionModel;
-    tableLayout: tableLayoutType;
 }
-export declare const useDataTable: ({ config, dataSource, headerHeight, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, renderBufferSize, rowHeight, selectionModel, tableLayout, ...measuredProps }: DataTableHookProps) => {
+export declare const useTable: ({ config, dataSource, headerHeight, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, renderBufferSize, rowHeight, selectionModel, ...measuredProps }: TableHookProps) => {
     draggable: JSX.Element | undefined;
     draggedItemIndex: number | undefined;
-    tableLayout: "column" | "row";
-    onHeaderCellDragStart: ((evt: MouseEvent<Element, globalThis.MouseEvent>) => void) | undefined;
+    onHeaderCellDragStart: (evt: MouseEvent<Element, globalThis.MouseEvent>) => void;
     containerMeasurements: import("./useMeasuredContainer").MeasuredContainerHookResult;
     containerProps: {
         onClick: (evt: MouseEvent<Element, globalThis.MouseEvent>) => void;
@@ -32,23 +30,32 @@ export declare const useDataTable: ({ config, dataSource, headerHeight, onConfig
     columnsWithinViewport: KeyedColumnDescriptor[];
     data: DataSourceRow[];
     dispatchColumnAction: import("react").Dispatch<import("./useTableModel").GridModelAction>;
+    getRowOffset: import("@vuu-ui/vuu-utils").RowOffsetFunc;
     handleContextMenuAction: import("@vuu-ui/vuu-popups").MenuActionHandler;
     headings: import("@vuu-ui/vuu-datagrid-types").TableHeadings;
     onColumnResize: TableColumnResizeHandler;
     onContextMenu: (evt: MouseEvent<HTMLElement>) => void;
-    onRemoveColumnFromGroupBy: (column: KeyedColumnDescriptor) => void;
+    onRemoveColumnFromGroupBy: (column?: KeyedColumnDescriptor) => void;
     onRowClick: import("./dataTableTypes").RowClickHandler;
     onSort: (column: KeyedColumnDescriptor, extendSort?: any, sortType?: VuuSortType) => void;
     onToggleGroup: (row: DataSourceRow, column: KeyedColumnDescriptor) => void;
     virtualColSpan: number;
     scrollProps: {
-        scrollbarContainerRef: import("react").RefObject<HTMLDivElement>;
-        onScrollbarContainerScroll: () => void;
-        contentContainerRef: import("react").RefObject<HTMLDivElement>;
-        onContentContainerScroll: () => void;
-        tableContainerRef: import("react").RefObject<HTMLDivElement>;
-        onTableContainerScroll: () => void;
+        scrollbarContainerRef: (el: HTMLDivElement | null) => void;
+        contentContainerRef: (el: HTMLDivElement | null) => void;
     };
     rowCount: number;
-    viewportMeasurements: import("./useTableViewport").ViewportMeasurements;
+    viewportMeasurements: {
+        contentHeight: number;
+        horizontalScrollbarHeight: number;
+        maxScrollContainerScrollHorizontal: number;
+        maxScrollContainerScrollVertical: number;
+        pinnedWidthLeft: number;
+        pinnedWidthRight: number;
+        rowCount: number;
+        contentWidth: number;
+        totalHeaderHeight: number;
+        verticalScrollbarWidth: number;
+        viewportBodyHeight: number;
+    };
 };

package/types/useTableScroll.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Viewport } from "./dataTableTypes";
 export interface ScrollRequestEnd {
     type: "scroll-end";
@@ -16,23 +15,15 @@ export type ScrollRequest = ScrollRequestPage | ScrollRequestDistance | ScrollRe
 export type ScrollRequestHandler = (request: ScrollRequest) => void;
 export interface TableScrollHookProps {
     onHorizontalScroll?: (scrollLeft: number) => void;
-    onVerticalScroll?: (scrollTop: number) => void;
+    onVerticalScroll?: (scrollTop: number, pctScrollTop: number) => void;
     viewportHeight: number;
     viewport: Viewport;
 }
 export declare const useTableScroll: ({ onHorizontalScroll, onVerticalScroll, viewport, }: TableScrollHookProps) => {
     /** Ref to be assigned to ScrollbarContainer */
-    scrollbarContainerRef: import("react").RefObject<HTMLDivElement>;
-    /** Scroll handler to be attached to ScrollbarContainer */
-    onScrollbarContainerScroll: () => void;
+    scrollbarContainerRef: (el: HTMLDivElement | null) => void;
     /** Ref to be assigned to ContentContainer */
-    contentContainerRef: import("react").RefObject<HTMLDivElement>;
-    /** Scroll handler to be attached to ContentContainer */
-    onContentContainerScroll: () => void;
-    /** Ref to be assigned to TableContainer */
-    tableContainerRef: import("react").RefObject<HTMLDivElement>;
-    /** Scroll handler to be attached to TableContainer */
-    onTableContainerScroll: () => void;
+    contentContainerRef: (el: HTMLDivElement | null) => void;
     /** Scroll the table  */
     requestScroll: ScrollRequestHandler;
 };

package/types/useTableViewport.d.ts

@@ -5,6 +5,7 @@
  */
 import { KeyedColumnDescriptor, TableHeadings } from "@vuu-ui/vuu-datagrid-types";
 import { MeasuredSize } from "./useMeasuredContainer";
+import { RowAtPositionFunc, RowOffsetFunc } from "@vuu-ui/vuu-utils";
 export interface TableViewportHookProps {
     columns: KeyedColumnDescriptor[];
     headerHeight: number;
@@ -14,15 +15,21 @@ export interface TableViewportHookProps {
     size?: MeasuredSize;
 }
 export interface ViewportMeasurements {
-    fillerHeight: number;
+    contentHeight: number;
+    horizontalScrollbarHeight: number;
     maxScrollContainerScrollHorizontal: number;
     maxScrollContainerScrollVertical: number;
     pinnedWidthLeft: number;
     pinnedWidthRight: number;
     rowCount: number;
-    scrollContentHeight: number;
-    scrollbarSize: number;
-    scrollContentWidth: number;
+    contentWidth: number;
     totalHeaderHeight: number;
+    verticalScrollbarWidth: number;
+    viewportBodyHeight: number;
 }
-export declare const useTableViewport: ({ columns, headerHeight, headings, rowCount, rowHeight, size, }: TableViewportHookProps) => ViewportMeasurements;
+export interface TableViewportHookResult extends ViewportMeasurements {
+    getRowAtPosition: RowAtPositionFunc;
+    getRowOffset: RowOffsetFunc;
+    setPctScrollTop: (scrollPct: number) => void;
+}
+export declare const useTableViewport: ({ columns, headerHeight, headings, rowCount, rowHeight, size, }: TableViewportHookProps) => TableViewportHookResult;

package/types/useVirtualViewport.d.ts

@@ -1,9 +1,10 @@
 import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { RowAtPositionFunc } from "@vuu-ui/vuu-utils";
 import { VuuRange } from "@vuu-ui/vuu-protocol-types";
 import { ViewportMeasurements } from "./useTableViewport";
 export interface VirtualViewportHookProps {
     columns: KeyedColumnDescriptor[];
-    rowHeight: number;
+    getRowAtPosition: RowAtPositionFunc;
     setRange: (range: VuuRange) => void;
     viewportMeasurements: ViewportMeasurements;
 }
@@ -13,4 +14,4 @@ export interface VirtualViewportHookResult {
     columnsWithinViewport: KeyedColumnDescriptor[];
     virtualColSpan: number;
 }
-export declare const useVirtualViewport: ({ columns, rowHeight, setRange, viewportMeasurements, }: VirtualViewportHookProps) => VirtualViewportHookResult;
+export declare const useVirtualViewport: ({ columns, getRowAtPosition, setRange, viewportMeasurements, }: VirtualViewportHookProps) => VirtualViewportHookResult;

package/types/ColumnBasedTable.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { TableImplementationProps } from "./dataTableTypes";
-export declare const ColumnBasedTable: ({ columns, data, headerHeight, onHeaderCellDragEnd, rowHeight, }: TableImplementationProps) => JSX.Element;