@vuu-ui/vuu-table 0.0.26

package/types/useTableModel.d.ts

@@ -0,0 +1,103 @@
+import { ColumnDescriptor, PinLocation, ResizePhase, RuntimeColumnDescriptor, TableAttributes, TableConfig, TableHeadings } from "@vuu-ui/vuu-table-types";
+import { DataSource, DataSourceConfig, TableSchema } from "@vuu-ui/vuu-data-types";
+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: RuntimeColumnDescriptor[];
+    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";
+    tableConfig: TableConfig;
+    dataSource: DataSource;
+}
+export interface ColumnActionHide {
+    type: "hideColumns";
+    columns: RuntimeColumnDescriptor[];
+}
+export interface ColumnActionShow {
+    type: "showColumns";
+    columns: RuntimeColumnDescriptor[];
+}
+export interface ColumnActionMove {
+    type: "moveColumn";
+    column: RuntimeColumnDescriptor;
+    moveBy?: 1 | -1;
+}
+export interface ColumnActionPin {
+    type: "pinColumn";
+    column: ColumnDescriptor;
+    pin?: PinLocation;
+}
+export interface ColumnActionResize {
+    type: "resizeColumn";
+    column: RuntimeColumnDescriptor;
+    phase: ResizePhase;
+    width?: number;
+}
+export interface ColumnActionSetTableSchema {
+    type: "setTableSchema";
+    tableSchema: TableSchema;
+}
+export interface ColumnActionUpdate {
+    type: "updateColumn";
+    column: ColumnDescriptor;
+}
+export interface ColumnActionUpdateProp {
+    align?: ColumnDescriptor["align"];
+    column: RuntimeColumnDescriptor;
+    hidden?: ColumnDescriptor["hidden"];
+    label?: ColumnDescriptor["label"];
+    resizing?: RuntimeColumnDescriptor["resizing"];
+    type: "updateColumnProp";
+    width?: ColumnDescriptor["width"];
+}
+export interface ColumnActionTableConfig extends DataSourceConfig {
+    confirmed?: boolean;
+    type: "tableConfig";
+}
+export interface ColumnActionColumnSettings extends DataSourceConfig {
+    type: "columnSettings";
+    column: ColumnDescriptor;
+    /** required only for calculated coplumns */
+    vuuTable?: VuuTable;
+}
+export interface ColumnActionTableSettings extends DataSourceConfig {
+    type: "tableSettings";
+}
+export declare const isShowColumnSettings: (action: PersistentColumnAction) => action is ColumnActionColumnSettings;
+export declare const isShowTableSettings: (action: PersistentColumnAction) => action is ColumnActionTableSettings;
+/**
+ * PersistentColumnActions are those actions that require us to persist user changes across sessions
+ */
+export type PersistentColumnAction = ColumnActionPin | ColumnActionHide | ColumnActionColumnSettings | ColumnActionTableSettings;
+export type GridModelAction = ColumnActionHide | ColumnActionInit | ColumnActionMove | ColumnActionPin | ColumnActionResize | ColumnActionSetTableSchema | ColumnActionShow | ColumnActionUpdate | ColumnActionUpdateProp | ColumnActionTableConfig;
+export type GridModelReducer = Reducer<InternalTableModel, GridModelAction>;
+export type ColumnActionDispatch = (action: GridModelAction) => void;
+export declare const useTableModel: (tableConfigProp: TableConfig, dataSource: DataSource) => {
+    columns: RuntimeColumnDescriptor[];
+    dispatchTableModelAction: import("react").Dispatch<GridModelAction>;
+    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/useTableScroll.d.ts

@@ -0,0 +1,57 @@
+import { RowAtPositionFunc } from "@vuu-ui/vuu-utils";
+import type { VuuRange } from "@vuu-ui/vuu-protocol-types";
+import { ForwardedRef } from "react";
+import type { ViewportMeasurements } from "./useTableViewport";
+import type { RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
+export type ScrollDirectionVertical = "up" | "down";
+export type ScrollDirectionHorizontal = "left" | "right";
+export type ScrollDirection = ScrollDirectionVertical | ScrollDirectionHorizontal;
+/**
+ * scroll into view the row at given index posiiton.
+ */
+export interface ScrollRequestRow {
+    rowIndex: number;
+    type: "scroll-row";
+}
+export interface ScrollRequestEnd {
+    type: "scroll-end";
+    direction: "home" | "end";
+}
+export interface ScrollRequestPage {
+    type: "scroll-page";
+    direction: ScrollDirectionVertical;
+}
+export type ScrollRequest = ScrollRequestPage | ScrollRequestEnd | ScrollRequestRow;
+export type ScrollRequestHandler = (request: ScrollRequest) => void;
+export interface ScrollingAPI {
+    scrollToIndex: (itemIndex: number) => void;
+    scrollToKey: (rowKey: string) => void;
+}
+export declare const noScrolling: ScrollingAPI;
+export interface TableScrollHookProps {
+    columns: RuntimeColumnDescriptor[];
+    getRowAtPosition: RowAtPositionFunc;
+    onHorizontalScroll?: (scrollLeft: number) => void;
+    onVerticalScroll?: (scrollTop: number, pctScrollTop: number) => void;
+    /**
+     * When we have a virtualized scroll container, keyboard navigation is
+     * performed `in situ`. We shift the range of rows rendered within the
+     * viewport, whithout actually moving the scroll position
+     */
+    onVerticalScrollInSitu?: (rowIndexOffsetCount: number) => void;
+    rowHeight: number;
+    scrollingApiRef?: ForwardedRef<ScrollingAPI>;
+    setRange: (range: VuuRange) => void;
+    viewportMeasurements: ViewportMeasurements;
+}
+export declare const useTableScroll: ({ columns, getRowAtPosition, onHorizontalScroll, onVerticalScroll, onVerticalScrollInSitu, rowHeight, scrollingApiRef, setRange, viewportMeasurements, }: TableScrollHookProps) => {
+    columnsWithinViewport: RuntimeColumnDescriptor[];
+    /** Ref to be assigned to ScrollbarContainer */
+    scrollbarContainerRef: (el: HTMLDivElement | null) => void;
+    /** Ref to be assigned to ContentContainer */
+    contentContainerRef: (el: HTMLDivElement | null) => void;
+    /** Scroll the table  */
+    requestScroll: ScrollRequestHandler;
+    /** number of leading columns not rendered because of virtualization  */
+    virtualColSpan: number;
+};

package/types/useTableViewport.d.ts

@@ -0,0 +1,41 @@
+/**
+ * This hook measures and calculates the values needed to manage layout
+ * and virtualisation of the table. This includes measurements required
+ * to support pinned columns.
+ */
+import { RuntimeColumnDescriptor, TableHeadings } from "@vuu-ui/vuu-table-types";
+import { MeasuredSize } from "@vuu-ui/vuu-ui-controls";
+import { RowAtPositionFunc, RowOffsetFunc } from "@vuu-ui/vuu-utils";
+export interface TableViewportHookProps {
+    columns: RuntimeColumnDescriptor[];
+    headerHeight: number;
+    headings: TableHeadings;
+    rowCount: number;
+    rowHeight: number;
+    /**
+     * this is the solid left/right `border` rendered on the selection block
+     */
+    selectionEndSize?: number;
+    size: MeasuredSize | undefined;
+}
+export interface ViewportMeasurements {
+    appliedPageSize: number;
+    contentHeight: number;
+    horizontalScrollbarHeight: number;
+    isVirtualScroll: boolean;
+    pinnedWidthLeft: number;
+    pinnedWidthRight: number;
+    rowCount: number;
+    contentWidth: number;
+    totalHeaderHeight: number;
+    verticalScrollbarWidth: number;
+    viewportBodyHeight: number;
+    viewportWidth: number;
+}
+export interface TableViewportHookResult extends ViewportMeasurements {
+    getRowAtPosition: RowAtPositionFunc;
+    getRowOffset: RowOffsetFunc;
+    setInSituRowOffset: (rowIndexOffset: number) => void;
+    setScrollTop: (scrollTop: number, scrollPct: number) => void;
+}
+export declare const useTableViewport: ({ columns, headerHeight, headings, rowCount, rowHeight, selectionEndSize, size, }: TableViewportHookProps) => TableViewportHookResult;