@vuu-ui/vuu-table 0.8.8-debug → 0.8.9-debug

package/types/table/Table.d.ts

@@ -2,4 +2,4 @@
 import { TableProps } from "./dataTableTypes";
 import "./Table.css";
 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, ...htmlAttributes }: TableProps) => JSX.Element;
+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, ...htmlAttributes }: TableProps) => JSX.Element;

package/types/table/dataTableTypes.d.ts

@@ -1,14 +1,33 @@
-import { DataSource, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
+import { DataSource, SchemaColumn, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
 import { DataSourceRow } from "@vuu-ui/vuu-data-types";
-import { GridConfig, KeyedColumnDescriptor, SelectionChangeHandler, TableConfig, TableHeadings, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
-import { HTMLAttributes, MouseEvent } from "react";
+import { KeyedColumnDescriptor, SelectionChangeHandler, TableConfig, TableHeadings, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
+import { VuuDataRow } from "packages/vuu-protocol-types";
+import { FC, HTMLAttributes, MouseEvent } from "react";
+import { RowProps } from "../table-next/Row";
+export type TableRowClickHandler = (row: VuuDataRow) => void;
 export interface TableProps extends HTMLAttributes<HTMLDivElement> {
+    Row?: FC<RowProps>;
     allowConfigEditing?: boolean;
+    /**
+     * required if a fully featured column picker is to be available
+     */
+    availableColumns?: SchemaColumn[];
     config: TableConfig;
     dataSource: DataSource;
     headerHeight?: number;
     height?: number;
-    onConfigChange?: (config: Omit<GridConfig, "headings">) => void;
+    /**
+     * required if a fully featured column picker is to be available.
+     * Available columns can be changed by the addition or removal of
+     * one or more calculated columns.
+     */
+    onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;
+    /**
+     * This callback will be invoked any time a config attribute of TableConfig
+     * is changed. By persisting this value and providing it to the Table as a
+     * prop, table state can be persisted across sessions.
+     */
+    onConfigChange?: (config: TableConfig) => void;
     /**
      * Features like context menu actions and visual links are enabled by the Vuu server.
      * This callback allows us to receive a notification when such a feature is available.
@@ -20,6 +39,11 @@ export interface TableProps extends HTMLAttributes<HTMLDivElement> {
      * response must be handled. This callback provides that response.
      */
     onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
+    /**
+     * callback invoked when user 'clicks' a table row. CLick triggered either
+     * via mouse click or keyboard (default ENTER);
+     */
+    onRowClick?: TableRowClickHandler;
     onShowConfigEditor?: () => void;
     onSelectionChange?: SelectionChangeHandler;
     renderBufferSize?: number;
@@ -31,8 +55,12 @@ export interface TableProps extends HTMLAttributes<HTMLDivElement> {
      */
     selectionBookendWidth?: number;
     selectionModel?: TableSelectionModel;
+    /**
+     * if false, table rendered without headers. Useful when table is being included in a
+     * composite component.
+     */
+    showColumnHeaders?: boolean;
     width?: number;
-    zebraStripes?: boolean;
 }
 export type TableColumnResizeHandler = (phase: "begin" | "resize" | "end", columnName: string, width?: number) => void;
 export interface TableImplementationProps {

package/types/table/index.d.ts

@@ -6,5 +6,5 @@ export * from "./useMeasuredContainer";
 export * from "./useSelection";
 export * from "./useTableColumnResize";
 export * from "./useTableModel";
-export * from "./useTableViewport";
+export * from "../table-next/useTableViewport";
 export * from "./cell-renderers";

package/types/table/useTableModel.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDescriptor, GridConfig, KeyedColumnDescriptor, PinLocation } from "@vuu-ui/vuu-datagrid-types";
+import { ColumnDescriptor, GridConfig, KeyedColumnDescriptor, PinLocation, TableConfig } from "@vuu-ui/vuu-datagrid-types";
 import { Reducer } from "react";
 import { DataSourceConfig } from "@vuu-ui/vuu-data";
 import { TableSchema } from "@vuu-ui/vuu-data/src/message-utils";
@@ -8,7 +8,7 @@ export interface TableModel extends Omit<GridConfig, "columns"> {
 }
 export interface ColumnActionInit {
     type: "init";
-    tableConfig: Omit<GridConfig, "headings">;
+    tableConfig: TableConfig;
     dataSourceConfig?: DataSourceConfig;
 }
 export interface ColumnActionHide {

package/types/table/useVirtualViewport.d.ts

@@ -1,7 +1,7 @@
 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";
+import { ViewportMeasurements } from "../table-next/useTableViewport";
 export interface VirtualViewportHookProps {
     columns: KeyedColumnDescriptor[];
     getRowAtPosition: RowAtPositionFunc;

package/types/table-next/Row.d.ts

@@ -1,17 +1,19 @@
 import { DataSourceRow } from "@vuu-ui/vuu-data-types";
-import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { DataCellEditHandler, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
 import { RowClickHandler } from "@vuu-ui/vuu-table";
 import { ColumnMap } from "@vuu-ui/vuu-utils";
 import { CSSProperties } from "react";
 import "./Row.css";
-export type HtmlRowProps = {
+export interface RowProps {
     className?: string;
     columnMap: ColumnMap;
     columns: KeyedColumnDescriptor[];
     row: DataSourceRow;
-    offset?: number;
+    offset: number;
     onClick?: RowClickHandler;
+    onDataEdited?: DataCellEditHandler;
     onToggleGroup?: (row: DataSourceRow, column: KeyedColumnDescriptor) => void;
     style?: CSSProperties;
-};
-export declare const Row: import("react").MemoExoticComponent<({ className: classNameProp, columnMap, columns, row, offset, onClick, onToggleGroup, ...htmlAttributes }: HtmlRowProps) => JSX.Element>;
+    zebraStripes?: boolean;
+}
+export declare const Row: import("react").MemoExoticComponent<({ className: classNameProp, columnMap, columns, row, offset, onClick, onDataEdited, onToggleGroup, zebraStripes, ...htmlAttributes }: RowProps) => JSX.Element>;

package/types/table-next/TableNext.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TableProps } from "@vuu-ui/vuu-table";
 import "./TableNext.css";
-export declare const TableNext: ({ className: classNameProp, config, dataSource, headerHeight, height, id: idProp, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, onShowConfigEditor: onShowSettings, renderBufferSize, rowHeight, selectionModel, style: styleProp, width, ...htmlAttributes }: TableProps) => JSX.Element;
+export declare const TableNext: ({ Row, availableColumns, className: classNameProp, config, dataSource, id: idProp, onAvailableColumnsChange, onConfigChange, onFeatureEnabled, onFeatureInvocation, onRowClick: onRowClickProp, onSelectionChange, onShowConfigEditor: onShowSettings, renderBufferSize, rowHeight, selectionModel, showColumnHeaders, headerHeight, style: styleProp, ...htmlAttributes }: TableProps) => JSX.Element;

package/types/table-next/cell-renderers/dropdown-cell/DropdownCell.d.ts

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

package/types/table-next/cell-renderers/dropdown-cell/index.d.ts

@@ -0,0 +1 @@
+export * from "./DropdownCell";

package/types/table-next/cell-renderers/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./dropdown-cell";
+export * from "./input-cell";

package/types/table-next/cell-renderers/input-cell/InputCell.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TableCellRendererProps } from "@vuu-ui/vuu-datagrid-types";
+import "./InputCell.css";
+export declare const InputCell: ({ column, columnMap, onCommit, row, }: TableCellRendererProps) => JSX.Element;

package/types/table-next/cell-renderers/input-cell/index.d.ts

@@ -0,0 +1 @@
+export * from "./InputCell";

package/types/table-next/column-header-pill/ColumnHeaderPill.d.ts

@@ -0,0 +1,9 @@
+import { KeyedColumnDescriptor } from "packages/vuu-datagrid-types";
+import { HTMLAttributes } from "react";
+import "./ColumnHeaderPill.css";
+export interface ColumnHeaderPillProps extends HTMLAttributes<HTMLDivElement> {
+    column: KeyedColumnDescriptor;
+    removable?: boolean;
+    onRemove?: (column: KeyedColumnDescriptor) => void;
+}
+export declare const ColumnHeaderPill: ({ children, className, column, onRemove, removable, ...htmlAttributes }: ColumnHeaderPillProps) => JSX.Element;

package/types/table-next/column-header-pill/GroupColumnPill.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { KeyedColumnDescriptor } from "packages/vuu-datagrid-types";
+import { ColumnHeaderPillProps } from "./ColumnHeaderPill";
+import "./GroupColumnPill.css";
+export interface GroupColumnPillProps extends ColumnHeaderPillProps {
+    column: KeyedColumnDescriptor;
+}
+export declare const GroupColumnPill: ({ column, ...columnHeaderProps }: GroupColumnPillProps) => JSX.Element;

package/types/table-next/column-header-pill/SortIndicator.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import "./SortIndicator.css";
+export interface SortIndicatorProps {
+    column: KeyedColumnDescriptor;
+}
+export declare const SortIndicator: ({ column }: SortIndicatorProps) => JSX.Element | null;

package/types/table-next/column-header-pill/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ColumnHeaderPill";
+export * from "./GroupColumnPill";
+export * from "./SortIndicator";

package/types/table-next/column-menu/index.d.ts

@@ -0,0 +1 @@
+export * from "./ColumnMenu";

package/types/table-next/column-resizing/useTableColumnResize.d.ts

@@ -1,13 +1,13 @@
 import { Heading, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
 import { RefObject } from "react";
-export type TableColumnResizeHandler = (phase: "begin" | "resize" | "end", columnName: string, width?: number) => void;
+import { ResizePhase } from "../useTableModel";
+export type TableColumnResizeHandler = (phase: ResizePhase, columnName: string, width?: number) => void;
 export type ResizeHandler = (evt: MouseEvent, moveBy: number) => void;
 export interface CellResizeHookProps {
     column: KeyedColumnDescriptor | Heading;
-    onResize?: (phase: resizePhase, columnName: string, width?: number) => void;
+    onResize?: (phase: ResizePhase, columnName: string, width?: number) => void;
     rootRef: RefObject<HTMLDivElement>;
 }
-type resizePhase = "begin" | "resize" | "end";
 export interface CellResizeHookResult {
     isResizing: boolean;
     onDrag: (evt: MouseEvent, moveBy: number) => void;
@@ -15,4 +15,3 @@ export interface CellResizeHookResult {
     onDragEnd: (evt: MouseEvent) => void;
 }
 export declare const useTableColumnResize: ({ column, onResize, rootRef, }: CellResizeHookProps) => CellResizeHookResult;
-export {};

package/types/table-next/context-menu/useTableContextMenu.d.ts

@@ -11,6 +11,11 @@ export interface ContextMenuOptions {
 }
 export interface ContextMenuHookProps {
     dataSource?: DataSource;
+    /**
+     * A persistent Column Operation is any manipulation of a table column that should be
+     * persisted across user sessions. e.g. if user pins a column, column should still be
+     * pinned next time user opens app.
+     */
     onPersistentColumnOperation: (action: PersistentColumnAction) => void;
 }
 export declare const useTableContextMenu: ({ dataSource, onPersistentColumnOperation, }: ContextMenuHookProps) => MenuActionHandler;

package/types/table-next/header-cell/GroupHeaderCell.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { GroupColumnDescriptor, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { HeaderCellProps } from "./HeaderCell";
+import "./GroupHeaderCell.css";
+export interface GroupHeaderCellProps extends Omit<HeaderCellProps, "onDragStart" | "onDrag" | "onDragEnd"> {
+    column: GroupColumnDescriptor;
+    onRemoveColumn: (column: KeyedColumnDescriptor) => void;
+}
+export declare const GroupHeaderCell: ({ column: groupColumn, className: classNameProp, onRemoveColumn, onResize, ...htmlAttributes }: GroupHeaderCellProps) => JSX.Element;

package/types/table-next/header-cell/GroupHeaderCellNext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { GroupColumnDescriptor, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { HeaderCellProps } from "./HeaderCell";
+import "./GroupHeaderCell.css";
+export interface GroupHeaderCellNextProps extends Omit<HeaderCellProps, "onDragStart" | "onDrag" | "onDragEnd"> {
+    column: GroupColumnDescriptor;
+    onRemoveColumn: (column: KeyedColumnDescriptor) => void;
+}
+export declare const GroupHeaderCellNext: ({ column: groupColumn, className: classNameProp, onRemoveColumn, onResize, ...htmlAttributes }: GroupHeaderCellNextProps) => JSX.Element;

package/types/table-next/{HeaderCell.d.ts → header-cell/HeaderCell.d.ts}

@@ -1,11 +1,10 @@
 import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
 import { HTMLAttributes } from "react";
-import { TableColumnResizeHandler } from "./column-resizing";
+import { TableColumnResizeHandler } from "../column-resizing";
 import "./HeaderCell.css";
 export interface HeaderCellProps extends HTMLAttributes<HTMLDivElement> {
     classBase?: string;
     column: KeyedColumnDescriptor;
-    idx: number;
     onResize?: TableColumnResizeHandler;
 }
-export declare const HeaderCell: ({ classBase: classBaseProp, column, onClick, onResize, idx, }: HeaderCellProps) => JSX.Element;
+export declare const HeaderCell: ({ className: classNameProp, column, onClick, onResize, ...htmlAttributes }: HeaderCellProps) => JSX.Element;

package/types/table-next/header-cell/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./GroupHeaderCell";
+export * from "./GroupHeaderCellNext";
+export * from "./HeaderCell";

package/types/table-next/index.d.ts

@@ -1,2 +1,5 @@
+export { GroupHeaderCellNext } from "./header-cell";
 export * from "./TableNext";
 export * from "./table-config";
+export * from "./cell-renderers";
+export type { RowProps } from "./Row";

package/types/table-next/moving-window.d.ts

@@ -0,0 +1,14 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data-types";
+import { VuuRange } from "@vuu-ui/vuu-protocol-types";
+export declare class MovingWindow {
+    data: DataSourceRow[];
+    rowCount: number;
+    private range;
+    constructor({ from, to }: VuuRange);
+    setRowCount: (rowCount: number) => void;
+    add(data: DataSourceRow): void;
+    getAtIndex(index: number): DataSourceRow | undefined;
+    isWithinRange(index: number): boolean;
+    setRange({ from, to }: VuuRange): void;
+    getSelectedRows(): DataSourceRow[];
+}

package/types/table-next/table-cell/TableCell.d.ts

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

package/types/table-next/table-cell/TableGroupCell.d.ts

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

package/types/table-next/table-cell/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TableCell";
+export * from "./TableGroupCell";

package/types/table-next/table-config.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDescriptor, TableConfig } from "packages/vuu-datagrid-types";
+import { ColumnDescriptor, TableConfig } from "@vuu-ui/vuu-datagrid-types";
 export type MoveColumnTableConfigAction = {
     type: "col-move";
     column: ColumnDescriptor;

package/types/table-next/table-dom-utils.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from "react";
+export type CellPos = [number, number];
+export declare const headerCellQuery: (colIdx: number) => string;
+export declare const dataCellQuery: (rowIdx: number, colIdx: number) => string;
+export declare const getTableCell: (containerRef: RefObject<HTMLElement>, [rowIdx, colIdx]: CellPos) => HTMLElement;
+export declare const cellIsEditable: (cell: HTMLDivElement) => boolean;
+export declare const cellIsTextInput: (cell: HTMLDivElement) => boolean;

package/types/table-next/useCellEditing.d.ts

@@ -0,0 +1,7 @@
+import { KeyboardEvent as ReactKeyboardEvent } from "react";
+export interface CellEditingHookProps {
+    navigate: () => void;
+}
+export declare const useCellEditing: ({ navigate }: CellEditingHookProps) => {
+    onKeyDown: (e: ReactKeyboardEvent<HTMLElement>) => void;
+};

package/types/table-next/useDataSource.d.ts

@@ -1,10 +1,17 @@
-import { DataSource } from "@vuu-ui/vuu-data";
+import { DataSource, DataSourceSubscribedMessage, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
 import { DataSourceRow } from "@vuu-ui/vuu-data-types";
 import { VuuRange } from "@vuu-ui/vuu-protocol-types";
-export declare const useDataSource: ({ dataSource, initialRange, }: {
+export interface DataSourceHookProps {
     dataSource: DataSource;
-    initialRange: VuuRange;
-}) => {
+    onFeatureEnabled?: (message: VuuFeatureMessage) => void;
+    onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
+    onSizeChange: (size: number) => void;
+    onSubscribed: (subscription: DataSourceSubscribedMessage) => void;
+    range?: VuuRange;
+    renderBufferSize?: number;
+}
+export declare const useDataSource: ({ dataSource, onFeatureEnabled, onFeatureInvocation, onSizeChange, onSubscribed, range, renderBufferSize, }: DataSourceHookProps) => {
     data: DataSourceRow[];
+    range: VuuRange;
     setRange: (range: VuuRange) => void;
 };

package/types/table-next/useKeyboardNavigation.d.ts

@@ -0,0 +1,27 @@
+import { VuuRange } from "@vuu-ui/vuu-protocol-types";
+import { KeyboardEvent, MouseEvent, RefObject } from "react";
+import { ScrollRequestHandler } from "./useTableScroll";
+export declare const isNavigationKey: (key: string) => key is NavigationKey;
+type ArrowKey = "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
+type PageKey = "Home" | "End" | "PageUp" | "PageDown";
+type NavigationKey = PageKey | ArrowKey;
+export declare const isPagingKey: (key: string) => key is PageKey;
+export interface NavigationHookProps {
+    containerRef: RefObject<HTMLElement>;
+    columnCount?: number;
+    disableHighlightOnFocus?: boolean;
+    label?: string;
+    viewportRange: VuuRange;
+    requestScroll?: ScrollRequestHandler;
+    restoreLastFocus?: boolean;
+    rowCount?: number;
+    selected?: unknown;
+    viewportRowCount: number;
+}
+export declare const useKeyboardNavigation: ({ columnCount, containerRef, disableHighlightOnFocus, requestScroll, rowCount, viewportRowCount, }: NavigationHookProps) => {
+    navigate: () => void;
+    onClick: (evt: MouseEvent) => void;
+    onFocus: () => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+};
+export {};

package/types/table-next/useMeasuredContainer.d.ts

@@ -0,0 +1,30 @@
+import { RefObject } from "react";
+export interface ClientSize {
+    clientHeight: number;
+    clientWidth: number;
+}
+export interface MeasuredProps {
+    defaultHeight?: number;
+    defaultWidth?: number;
+    height?: number;
+    width?: number;
+}
+export interface Size {
+    height: number | "100%";
+    width: number | "100%";
+}
+export interface MeasuredSize {
+    height: number;
+    width: number;
+}
+export type CssSize = {
+    height: string;
+    width: string;
+};
+export interface MeasuredContainerHookResult {
+    containerRef: RefObject<HTMLDivElement>;
+    cssSize: CssSize;
+    outerSize: Size;
+    innerSize?: MeasuredSize;
+}
+export declare const useMeasuredContainer: ({ defaultHeight, defaultWidth, height, width, }: MeasuredProps) => MeasuredContainerHookResult;

package/types/table-next/useResizeObserver.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from "react";
+export declare const WidthHeight: string[];
+export declare const WidthOnly: string[];
+export type measurements<T = string | number> = {
+    height?: T;
+    clientHeight?: number;
+    clientWidth?: number;
+    contentHeight?: number;
+    contentWidth?: number;
+    scrollHeight?: number;
+    scrollWidth?: number;
+    width?: T;
+};
+export type ResizeHandler = (measurements: measurements<number>) => void;
+export declare function useResizeObserver(ref: RefObject<Element | HTMLElement | null>, dimensions: string[], onResize: ResizeHandler, reportInitialSize?: boolean): void;

package/types/table-next/useTableContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data-types";
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { MouseEvent } from "react";
+export interface TableContextMenuHookProps {
+    columns: KeyedColumnDescriptor[];
+    data: DataSourceRow[];
+}
+export declare const useTableContextMenu: ({ columns, data, }: TableContextMenuHookProps) => (evt: MouseEvent<HTMLElement>) => void;

package/types/table-next/useTableModel.d.ts

@@ -1,9 +1,24 @@
-import { ColumnDescriptor, GridConfig, KeyedColumnDescriptor, PinLocation, TableConfig } from "@vuu-ui/vuu-datagrid-types";
-import { Reducer } from "react";
+import { ColumnDescriptor, KeyedColumnDescriptor, PinLocation, TableAttributes, TableConfig, TableHeadings } from "@vuu-ui/vuu-datagrid-types";
 import { DataSourceConfig } from "@vuu-ui/vuu-data";
 import { TableSchema } from "@vuu-ui/vuu-data/src/message-utils";
-export interface TableModel extends Omit<GridConfig, "columns"> {
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { Reducer } from "react";
+/**
+ * TableModel represents state used internally to manage Table. It is
+ * derived initially from the TableConfig provided by user, along with the
+ * data-related config from DataSource.
+ */
+export interface TableModel extends TableAttributes {
     columns: KeyedColumnDescriptor[];
+    headings: TableHeadings;
+}
+/**
+ * InternalTableModel describes the state managed within the TableModel
+ * reducer. It is the same as TableModel but with the addition of a
+ * readonly copy of the original TableConfig.
+ */
+interface InternalTableModel extends TableModel {
+    tableConfig: Readonly<TableConfig>;
 }
 export interface ColumnActionInit {
     type: "init";
@@ -29,10 +44,11 @@ export interface ColumnActionPin {
     column: ColumnDescriptor;
     pin?: PinLocation;
 }
+export type ResizePhase = "begin" | "resize" | "end";
 export interface ColumnActionResize {
     type: "resizeColumn";
     column: KeyedColumnDescriptor;
-    phase: "begin" | "resize" | "end";
+    phase: ResizePhase;
     width?: number;
 }
 export interface ColumnActionSetTableSchema {
@@ -58,7 +74,9 @@ export interface ColumnActionTableConfig extends DataSourceConfig {
 }
 export interface ColumnActionColumnSettings extends DataSourceConfig {
     type: "columnSettings";
-    column: KeyedColumnDescriptor;
+    column: ColumnDescriptor;
+    /** required only for calculated coplumns */
+    vuuTable?: VuuTable;
 }
 export interface ColumnActionTableSettings extends DataSourceConfig {
     type: "tableSettings";
@@ -70,10 +88,19 @@ export declare const isShowTableSettings: (action: PersistentColumnAction) => ac
  */
 export type PersistentColumnAction = ColumnActionPin | ColumnActionHide | ColumnActionColumnSettings | ColumnActionTableSettings;
 export type GridModelAction = ColumnActionHide | ColumnActionInit | ColumnActionMove | ColumnActionPin | ColumnActionResize | ColumnActionSetTableSchema | ColumnActionShow | ColumnActionUpdate | ColumnActionUpdateProp | ColumnActionTableConfig;
-export type GridModelReducer = Reducer<TableModel, GridModelAction>;
+export type GridModelReducer = Reducer<InternalTableModel, GridModelAction>;
 export type ColumnActionDispatch = (action: GridModelAction) => void;
-export declare const useTableModel: (tableConfig: TableConfig, dataSourceConfig?: DataSourceConfig) => {
+export declare const useTableModel: (tableConfigProp: TableConfig, dataSourceConfig?: DataSourceConfig) => {
     columns: KeyedColumnDescriptor[];
     dispatchColumnAction: import("react").Dispatch<GridModelAction>;
-    headings: import("@vuu-ui/vuu-datagrid-types").TableHeadings;
+    headings: TableHeadings;
+    tableAttributes: {
+        columnDefaultWidth?: number | undefined;
+        columnFormatHeader?: "capitalize" | "uppercase" | undefined;
+        columnSeparators?: boolean | undefined;
+        rowSeparators?: boolean | undefined;
+        zebraStripes?: boolean | undefined;
+    };
+    tableConfig: Readonly<TableConfig>;
 };
+export {};

package/types/table-next/useTableNext.d.ts

@@ -1,40 +1,44 @@
-import { DataSource, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
-import { GridConfig, KeyedColumnDescriptor, SelectionChangeHandler, TableConfig, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
-import { MouseEvent } from "react";
-import { MeasuredProps } from "../table";
+import { DataSourceRow } from "@vuu-ui/vuu-data-types";
+import { DataCellEditHandler, KeyedColumnDescriptor, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
+import { MeasuredSize } from "@vuu-ui/vuu-layout";
+import { KeyboardEvent, MouseEvent, RefObject } from "react";
+import { MeasuredProps, RowClickHandler, TableProps } from "../table";
 import { TableColumnResizeHandler } from "./column-resizing";
-export interface TableHookProps extends MeasuredProps {
-    config: Omit<GridConfig, "headings">;
-    dataSource: DataSource;
+export interface TableHookProps extends MeasuredProps, Pick<TableProps, "availableColumns" | "config" | "dataSource" | "onAvailableColumnsChange" | "onConfigChange" | "onFeatureEnabled" | "onFeatureInvocation" | "onSelectionChange" | "onRowClick" | "renderBufferSize"> {
+    containerRef: RefObject<HTMLDivElement>;
     headerHeight: number;
-    onConfigChange?: (config: TableConfig) => void;
-    onFeatureEnabled?: (message: VuuFeatureMessage) => void;
-    onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
-    renderBufferSize?: number;
     rowHeight: number;
-    onSelectionChange?: SelectionChangeHandler;
     selectionModel: TableSelectionModel;
 }
-export declare const useTable: ({ config, dataSource, headerHeight, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, rowHeight, selectionModel, ...measuredProps }: TableHookProps) => {
+export declare const useTable: ({ availableColumns, config, containerRef, dataSource, headerHeight, onAvailableColumnsChange, onConfigChange, onFeatureEnabled, onFeatureInvocation, onRowClick: onRowClickProp, onSelectionChange, renderBufferSize, rowHeight, selectionModel, }: TableHookProps) => {
+    onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
     columnMap: import("@vuu-ui/vuu-utils").ColumnMap;
     columns: KeyedColumnDescriptor[];
-    containerRef: import("react").RefObject<HTMLDivElement>;
-    containerMeasurements: {
-        cssSize: import("../table").CssSize;
-        outerSize: import("../table").Size;
-        innerSize?: import("../table").MeasuredSize | undefined;
+    data: DataSourceRow[];
+    handleContextMenuAction: import("@vuu-ui/vuu-data-types").MenuActionHandler;
+    headerProps: {
+        onClick: (evt: MouseEvent) => void;
+        onMouseDown: import("react").MouseEventHandler<Element> | undefined;
+        onResize: TableColumnResizeHandler;
     };
-    data: import("packages/vuu-data-types").DataSourceRow[];
-    handleContextMenuAction: import("packages/vuu-data-types").MenuActionHandler;
-    menuBuilder: import("packages/vuu-data-types").MenuBuilder<string, unknown>;
-    onContextMenu: (evt: MouseEvent<HTMLElement>) => void;
-    onHeaderClick: (evt: MouseEvent) => void;
-    onHeaderResize: TableColumnResizeHandler;
-    onRowClick: import("../table").RowClickHandler;
+    menuBuilder: import("@vuu-ui/vuu-data-types").MenuBuilder<string, unknown>;
+    onContextMenu: (evt: MouseEvent<HTMLElement, globalThis.MouseEvent>) => void;
+    onDataEdited: DataCellEditHandler;
+    onRemoveGroupColumn: (column: KeyedColumnDescriptor) => void;
+    onResize: (size: MeasuredSize) => void;
+    onRowClick: RowClickHandler;
+    onToggleGroup: (row: DataSourceRow, column: KeyedColumnDescriptor) => void;
     scrollProps: {
         scrollbarContainerRef: (el: HTMLDivElement | null) => void;
         contentContainerRef: (el: HTMLDivElement | null) => void;
     };
+    tableAttributes: {
+        columnDefaultWidth?: number | undefined;
+        columnFormatHeader?: "capitalize" | "uppercase" | undefined;
+        columnSeparators?: boolean | undefined;
+        rowSeparators?: boolean | undefined;
+        zebraStripes?: boolean | undefined;
+    };
     viewportMeasurements: {
         contentHeight: number;
         horizontalScrollbarHeight: number;
@@ -48,4 +52,14 @@ export declare const useTable: ({ config, dataSource, headerHeight, onConfigChan
         verticalScrollbarWidth: number;
         viewportBodyHeight: number;
     };
+    dragDropHook: {
+        draggable?: JSX.Element | undefined;
+        dropIndicator?: JSX.Element | undefined;
+        draggedItemIndex?: number | undefined;
+        isDragging: boolean;
+        isScrolling: RefObject<boolean>;
+        revealOverflowedItems: boolean;
+    };
+    onClick: (evt: MouseEvent<Element, globalThis.MouseEvent>) => void;
+    onFocus: () => void;
 };