@vef-framework/starter 2.0.10 → 2.1.0

package/dist/types/components/login/styles.d.ts

@@ -1,10 +1,21 @@
 import { SerializedStyles } from '@emotion/serialize';
 export declare const login: SerializedStyles;
+export declare const backgroundOrbs: SerializedStyles;
+export declare const orb: SerializedStyles;
+export declare const orbPrimary: SerializedStyles;
+export declare const orbSecondary: SerializedStyles;
+export declare const orbAccent: SerializedStyles;
 export declare const logo: SerializedStyles;
 export declare const title: SerializedStyles;
 export declare const icon: SerializedStyles;
 export declare const leftContent: SerializedStyles;
 export declare const rightContent: SerializedStyles;
+export declare const formHeader: SerializedStyles;
 export declare const formControl: SerializedStyles;
+export declare const submitButton: SerializedStyles;
 export declare const date: SerializedStyles;
 export declare const copyright: SerializedStyles;
+export declare const description: SerializedStyles;
+export declare const formSubtitle: SerializedStyles;
+export declare const dateHighlight: SerializedStyles;
+export declare const formIcon: SerializedStyles;

package/dist/types/components/logo-icon/index.d.ts

@@ -1,3 +1,3 @@
-import { LogoIconProps } from './props';
-export declare function LogoIcon({ primaryColor, ...props }: LogoIconProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export { type LogoIconProps } from './props';
+import { LogoIconProps } from './props.js';
+export declare function LogoIcon({ primaryColor, ...props }: LogoIconProps): React.ReactElement;
+export type { LogoIconProps } from './props.js';

package/dist/types/components/logo-icon/props.d.ts

@@ -1,10 +1,4 @@
 import { SVGProps } from 'react';
-/**
- * The props for the `IconLogo` component.
- */
 export interface LogoIconProps extends SVGProps<SVGSVGElement> {
-    /**
-     * The primary color of the logo.
-     */
     primaryColor?: string;
 }

package/dist/types/components/n-progress/components/bar.d.ts

@@ -1,5 +1,5 @@
 interface BarProps {
     progress: number;
 }
-export declare function Bar({ progress }: BarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Bar({ progress }: BarProps): React.ReactNode;
 export {};

package/dist/types/components/n-progress/components/container.d.ts

@@ -3,5 +3,5 @@ interface ContainerProps {
     animationDuration: number;
     isFinished: boolean;
 }
-export declare function Container({ animationDuration, isFinished, children }: PropsWithChildren<ContainerProps>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Container({ animationDuration, children, isFinished }: PropsWithChildren<ContainerProps>): React.ReactNode;
 export {};

package/dist/types/components/n-progress/event.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '@vef-framework/shared';
-type NProgressEvent = {
-    start: void;
+interface NProgressEvent {
     complete: void;
-};
+    start: void;
+}
 export declare const nProgressEventEmitter: EventEmitter<NProgressEvent>;
 export {};

package/dist/types/components/n-progress/index.d.ts

@@ -1,2 +1,2 @@
-export declare function NProgress(): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function NProgress(): React.ReactNode;
 export { nProgressEventEmitter } from './event';

package/dist/types/components/not-found/index.d.ts

@@ -1 +1 @@
-export declare function NotFound(): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function NotFound(): React.ReactNode;

package/dist/types/components/page/components/aside-panel.d.ts

@@ -0,0 +1,11 @@
+import { SerializedStyles } from '@emotion/react';
+import { ReactNode } from 'react';
+import { AsideWidth } from '../props';
+export interface AsidePanelProps {
+    children: ReactNode;
+    className?: string;
+    containerStyle: SerializedStyles;
+    position: "left" | "right";
+    width?: AsideWidth;
+}
+export declare function AsidePanel({ children, className, containerStyle, position, width }: AsidePanelProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/page/components/index.d.ts

@@ -0,0 +1,3 @@
+export { AsidePanel } from './aside-panel';
+export { ResizeHandle } from './resize-handle';
+export { ScrollContent } from './scroll-content';

package/dist/types/components/page/components/resize-handle.d.ts

@@ -0,0 +1,7 @@
+import { MouseEvent, default as React } from 'react';
+export interface ResizeHandleProps {
+    isDragging: boolean;
+    position: "left" | "right";
+    onMouseDown: (event: MouseEvent) => void;
+}
+export declare function ResizeHandle({ isDragging, position, onMouseDown }: ResizeHandleProps): React.JSX.Element;

package/dist/types/components/page/{scroll-content.d.ts → components/scroll-content.d.ts}

@@ -4,5 +4,5 @@ interface ScrollContentProps extends PropsWithChildren {
     actionBar?: ReactNode;
     actionBarClassName?: string;
 }
-export declare function ScrollContent({ className, actionBar, actionBarClassName, children }: ScrollContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ScrollContent({ className, actionBar, actionBarClassName, children }: ScrollContentProps): React.JSX.Element;
 export {};

package/dist/types/components/page/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { usePageKey } from './use-page-key';
+export { useResize } from './use-resize';

package/dist/types/components/page/hooks/use-resize.d.ts

@@ -0,0 +1,15 @@
+import { MouseEvent as ReactMouseEvent } from 'react';
+export interface UseResizeOptions {
+    defaultWidth: number;
+    minWidth?: number;
+    maxWidth?: number;
+    /**
+     * true for left panel (drag right to increase), false for right panel (drag left to increase)
+     */
+    isLeftPanel?: boolean;
+}
+export declare function useResize(options: UseResizeOptions): {
+    width: number;
+    isDragging: boolean;
+    handleMouseDown: (event: ReactMouseEvent) => void;
+};

package/dist/types/components/page/index.d.ts

@@ -1,4 +1,4 @@
 import { PageProps } from './props';
-export declare function Page({ className, aside, asideClassName, asideWidth, header, headerClassName, footer, footerClassName, actionBar, actionBarClassName, scrollable, children }: PageProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export { type PageProps } from './props';
+export declare function Page({ className, mainClassName, leftAside, leftAsideClassName, leftAsideWidth, rightAside, rightAsideClassName, rightAsideWidth, header, headerClassName, headerPosition, footer, footerClassName, footerPosition, actionBar, actionBarClassName, scrollable, scrollMargin, margin, gap, children }: PageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export { type AsideWidth, type PageProps, type Position, type ResizableWidth } from './props';
 export { useViewportHeight } from './viewport-context';

package/dist/types/components/page/props.d.ts

@@ -1,25 +1,91 @@
 import { Length } from '@vef-framework/components';
 import { PropsWithChildren, ReactNode } from 'react';
+/**
+ * Position type for header and footer.
+ * - `"inside"`: Inside the main content area
+ * - `"outside"`: Spans the full width of the page (including asides)
+ */
+export type Position = "inside" | "outside";
+/**
+ * Resizable width configuration for aside panels.
+ */
+export interface ResizableWidth {
+    /**
+     * Default width of the panel.
+     */
+    defaultWidth?: Length;
+    /**
+     * Minimum width constraint.
+     */
+    minWidth?: Length;
+    /**
+     * Maximum width constraint.
+     */
+    maxWidth?: Length;
+}
+/**
+ * Width type: fixed value or resizable configuration.
+ * - `string | number`: Fixed width, not resizable
+ * - `ResizableWidth`: Resizable with optional constraints
+ */
+export type AsideWidth = Length | ResizableWidth;
 /**
  * The props of the Page component.
  */
 export interface PageProps extends PropsWithChildren {
     /**
-     * The class name of the main content of the page.
+     * The class name of the page container.
      */
     className?: string;
     /**
-     * The aside content of the page.
+     * Whether the page container has margin.
+     * When true, applies var(--vef-spacing-md) margin to the container.
+     *
+     * @default false
+     */
+    margin?: boolean;
+    /**
+     * The gap between grid cells.
+     *
+     * @default "var(--vef-spacing-md)"
      */
-    aside?: ReactNode;
+    gap?: Length;
     /**
-     * The class name of the aside.
+     * The class name of the main content area.
      */
-    asideClassName?: string;
+    mainClassName?: string;
     /**
-     * The width of the aside.
+     * The left aside content of the page.
      */
-    asideWidth?: Length;
+    leftAside?: ReactNode;
+    /**
+     * The class name of the left aside.
+     */
+    leftAsideClassName?: string;
+    /**
+     * The width of the left aside.
+     * - `number | string`: Fixed width
+     * - `{ defaultWidth?, minWidth?, maxWidth? }`: Resizable with constraints
+     *
+     * @default 280
+     */
+    leftAsideWidth?: AsideWidth;
+    /**
+     * The right aside content of the page.
+     */
+    rightAside?: ReactNode;
+    /**
+     * The class name of the right aside.
+     */
+    rightAsideClassName?: string;
+    /**
+     * The width of the right aside.
+     * - `number | string`: Fixed width
+     * - `{ defaultWidth?, minWidth?, maxWidth? }`: Resizable with constraints
+     *
+     * @default 280
+     */
+    rightAsideWidth?: AsideWidth;
     /**
      * The header of the page.
      */
@@ -28,6 +94,14 @@ export interface PageProps extends PropsWithChildren {
      * The class name of the header.
      */
     headerClassName?: string;
+    /**
+     * The position of the header.
+     * - `"inside"`: Header is inside the main content area (default)
+     * - `"outside"`: Header spans the full width of the page (including asides)
+     *
+     * @default "inside"
+     */
+    headerPosition?: Position;
     /**
      * The footer of the page.
      */
@@ -36,6 +110,14 @@ export interface PageProps extends PropsWithChildren {
      * The class name of the footer.
      */
     footerClassName?: string;
+    /**
+     * The position of the footer.
+     * - `"inside"`: Footer is inside the main content area (default)
+     * - `"outside"`: Footer spans the full width of the page (including asides)
+     *
+     * @default "inside"
+     */
+    footerPosition?: Position;
     /**
      * The action bar of the page.
      */
@@ -48,4 +130,11 @@ export interface PageProps extends PropsWithChildren {
      * Whether the page main content is scrollable.
      */
     scrollable?: boolean;
+    /**
+     * Whether the scrollable content has automatic margin for scrollbar spacing.
+     * Only effective when scrollable is true.
+     *
+     * @default false
+     */
+    scrollMargin?: boolean;
 }

package/dist/types/components/page/styles.d.ts

@@ -1,11 +1,17 @@
 import { SerializedStyles } from '@emotion/serialize';
 export declare const page: SerializedStyles;
-export declare const aside: SerializedStyles;
+export declare const leftAside: SerializedStyles;
+export declare const rightAside: SerializedStyles;
+export declare const asideContent: SerializedStyles;
+export declare const resizeHandleGrip: SerializedStyles;
+export declare const resizeHandleLeft: SerializedStyles;
+export declare const resizeHandleRight: SerializedStyles;
 export declare const main: SerializedStyles;
 export declare const header: SerializedStyles;
+export declare const headerOutside: SerializedStyles;
 export declare const content: SerializedStyles;
-export declare const defaultContent: SerializedStyles;
 export declare const scrollWrapper: SerializedStyles;
 export declare const scrollContainer: SerializedStyles;
 export declare const footer: SerializedStyles;
+export declare const footerOutside: SerializedStyles;
 export declare const actionBar: SerializedStyles;

package/dist/types/components/pro-search/components/search-actions.d.ts

@@ -1,21 +1,9 @@
 import { ProSearchProps } from '../props';
 import { MemoExoticComponent } from 'react';
 interface SearchActionsProps {
-    /**
-     * Loading state
-     */
     loading?: boolean;
-    /**
-     * Search button props
-     */
     searchButtonProps?: ProSearchProps<never>["searchButtonProps"];
-    /**
-     * Reset button props, or false to hide the reset button
-     */
     resetButtonProps?: ProSearchProps<never>["resetButtonProps"];
-    /**
-     * Callback when search is reset
-     */
     onReset?: () => void;
 }
 export declare const SearchActions: MemoExoticComponent<({ loading, searchButtonProps, resetButtonProps, onReset }: SearchActionsProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/types/components/pro-table/components/column-setting-item.d.ts

@@ -0,0 +1,12 @@
+import { Key } from '@vef-framework/shared';
+import { ReactNode, NamedExoticComponent } from 'react';
+interface ColumnSettingItemProps {
+    columnId: Key;
+    title: ReactNode;
+    fixed?: "start" | "end" | false;
+    width?: number;
+    visible: boolean;
+    index: number;
+}
+export declare const ColumnSettingItem: NamedExoticComponent<ColumnSettingItemProps>;
+export {};

package/dist/types/components/pro-table/components/column-settings-panel.d.ts

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const ColumnSettingsPanel: MemoExoticComponent<() => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/types/components/pro-table/components/column-settings.d.ts

@@ -0,0 +1,6 @@
+import { NamedExoticComponent } from 'react';
+interface ColumnSettingsProps {
+    className?: string;
+}
+export declare const ColumnSettings: NamedExoticComponent<ColumnSettingsProps>;
+export {};

package/dist/types/components/pro-table/components/index.d.ts

@@ -1,4 +1,8 @@
+export { ColumnSettingItem } from './column-setting-item';
+export { ColumnSettings } from './column-settings';
+export { ColumnSettingsPanel } from './column-settings-panel';
 export { OperationButtonGroup, type OperationButtonGroupProps } from './operation-button-group';
 export { ProTableRefHolder } from './ref';
 export { NonPaginatedTable, PaginatedTable } from './table';
 export { TableSubscriber, type TableSubscriberProps } from './table-subscriber';
+export { WidthPopover } from './width-popover';

package/dist/types/components/pro-table/components/table.d.ts

@@ -1,6 +1,12 @@
+import { AnyObject } from '@vef-framework/shared';
 import { NonPaginatedProTableProps, PaginatedProTableProps } from '../props';
-type PaginatedTableProps<TRow extends object, TParams extends object> = Pick<PaginatedProTableProps<TRow, TParams>, "className" | "style" | "queryFn" | "queryEnabled" | "queryParams" | "columns" | "rowKey" | "rowSelection" | "showSequenceColumn" | "operationColumn" | "selectedRowKeys" | "virtual" | "title" | "summary" | "onSelectedRowKeysChange">;
-type NonPaginatedTableProps<TRow extends object, TParams extends object> = Pick<NonPaginatedProTableProps<TRow, TParams>, "className" | "style" | "queryFn" | "queryEnabled" | "queryParams" | "columns" | "rowKey" | "rowSelection" | "showSequenceColumn" | "operationColumn" | "selectedRowKeys" | "virtual" | "title" | "summary" | "onSelectedRowKeysChange">;
-export declare function PaginatedTable<TRow extends object, TParams extends object>({ className, style, queryFn, columns, rowKey, rowSelection, queryEnabled, queryParams, showSequenceColumn, operationColumn, selectedRowKeys, virtual, title, summary, onSelectedRowKeysChange }: PaginatedTableProps<TRow, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function NonPaginatedTable<TRow extends object, TParams extends object>({ className, style, queryFn, columns, rowKey, rowSelection, queryEnabled, queryParams, showSequenceColumn, operationColumn, selectedRowKeys, virtual, title, summary, onSelectedRowKeysChange }: NonPaginatedTableProps<TRow, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
+import { ColumnSettingsProp } from '../types';
+type PaginatedTableProps<TRow extends AnyObject, TParams extends AnyObject> = Pick<PaginatedProTableProps<TRow, TParams>, "className" | "style" | "size" | "queryFn" | "queryEnabled" | "queryParams" | "columns" | "rowKey" | "rowSelection" | "showSequenceColumn" | "operationColumn" | "selectedRowKeys" | "virtual" | "title" | "summary" | "onSelectedRowKeysChange"> & {
+    columnSettings: ColumnSettingsProp;
+};
+type NonPaginatedTableProps<TRow extends AnyObject, TParams extends AnyObject> = Pick<NonPaginatedProTableProps<TRow, TParams>, "className" | "style" | "size" | "queryFn" | "queryEnabled" | "queryParams" | "columns" | "rowKey" | "rowSelection" | "showSequenceColumn" | "operationColumn" | "selectedRowKeys" | "virtual" | "title" | "summary" | "onSelectedRowKeysChange"> & {
+    columnSettings: ColumnSettingsProp;
+};
+export declare function PaginatedTable<TRow extends AnyObject, TParams extends AnyObject>({ className, style, size, queryFn, columns, columnSettings, rowKey, rowSelection, queryEnabled, queryParams, showSequenceColumn, operationColumn, selectedRowKeys, virtual, title, summary, onSelectedRowKeysChange }: PaginatedTableProps<TRow, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function NonPaginatedTable<TRow extends AnyObject, TParams extends AnyObject>({ className, style, size, queryFn, columns, columnSettings, rowKey, rowSelection, queryEnabled, queryParams, showSequenceColumn, operationColumn, selectedRowKeys, virtual, title, summary, onSelectedRowKeysChange }: NonPaginatedTableProps<TRow, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/pro-table/components/width-popover.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, NamedExoticComponent } from 'react';
+interface WidthPopoverProps {
+    currentWidth?: number;
+    disabled?: boolean;
+    children: ReactNode;
+    onWidthChange: (width: number) => void;
+}
+export declare const WidthPopover: NamedExoticComponent<WidthPopoverProps>;
+export {};

package/dist/types/components/pro-table/context.d.ts

@@ -1,3 +1,5 @@
 import { Provider } from 'react';
 export declare const DataProvider: Provider<readonly unknown[]>;
 export declare function useData(): readonly unknown[];
+export declare const ColumnSettingsStorageKeyProvider: Provider<string | undefined>;
+export declare function useColumnSettingsStorageKey(): string | undefined;

package/dist/types/components/pro-table/hooks/index.d.ts

@@ -1,2 +1,3 @@
+export { clearColumnSettingsStorage, useColumnSettingsPersistence } from './use-column-settings-persistence';
 export { useRowSelection } from './use-row-selection';
 export { useTableColumns } from './use-table-columns';

package/dist/types/components/pro-table/hooks/use-column-settings-persistence.d.ts

@@ -0,0 +1,7 @@
+export declare function clearColumnSettingsStorage(storageKey: string): {
+    skipNextSave: () => void;
+};
+/**
+ * Hook to handle column settings persistence to localStorage
+ */
+export declare function useColumnSettingsPersistence(storageKey: string | undefined): void;

package/dist/types/components/pro-table/hooks/use-row-selection.d.ts

@@ -2,11 +2,6 @@ import { TableRowSelection } from '@vef-framework/components';
 import { Key } from '@vef-framework/shared';
 import { RowSelectionConfig } from '../types';
 /**
- * Hook to create row selection configuration for ProTable
- *
- * @param config - The row selection configuration
- * @param selectedRowKeys - The currently selected row keys
- * @param onSelectedRowKeysChange - Callback when selected row keys change
- * @returns The table row selection configuration
+ * Hook to create row selection configuration for ProTable.
  */
-export declare function useRowSelection<TRow extends object>(config: RowSelectionConfig<TRow> | true | undefined, selectedRowKeys?: Key[], onSelectedRowKeysChange?: (selectedRowKeys: Key[], selectedRows: TRow[]) => void): TableRowSelection<TRow> | undefined;
+export declare function useRowSelection<TRow>(config: RowSelectionConfig<TRow> | true | undefined, selectedRowKeys?: Key[], onSelectedRowKeysChange?: (selectedRowKeys: Key[], selectedRows: TRow[]) => void): TableRowSelection<TRow> | undefined;

package/dist/types/components/pro-table/hooks/use-table-columns.d.ts

@@ -1,11 +1,13 @@
 import { TableColumn } from '@vef-framework/components';
-import { OperationColumnConfig } from '../types';
+import { AnyObject } from '@vef-framework/shared';
+import { ColumnSettingsProp, OperationColumnConfig } from '../types';
 /**
  * The hook to use the table columns.
  *
  * @param tableColumns - The columns of the table.
  * @param operationColumn - The operation column of the table.
  * @param showSequenceColumn - Whether to show the sequence column. Default is true.
+ * @param columnSettingsProp - Column settings configuration.
  * @returns The table columns.
  */
-export declare function useTableColumns<TRow extends object>(tableColumns: Array<TableColumn<TRow>>, operationColumn?: OperationColumnConfig<TRow>, showSequenceColumn?: boolean): Array<TableColumn<TRow>>;
+export declare function useTableColumns<TRow extends AnyObject>(tableColumns: Array<TableColumn<TRow>>, operationColumn?: OperationColumnConfig<TRow>, showSequenceColumn?: boolean, columnSettingsProp?: ColumnSettingsProp): Array<TableColumn<TRow>>;

package/dist/types/components/pro-table/index.d.ts

@@ -1,11 +1,11 @@
-import { Awaitable } from '@vef-framework/shared';
+import { AnyObject, Awaitable } from '@vef-framework/shared';
 import { FC, ReactNode } from 'react';
 import { ProTableProps } from './props';
 import { ProTableRef } from './types';
-export declare const ProTable: (<TRow extends object, TParams extends object>(props: ProTableProps<TRow, TParams> & {
+export declare const ProTable: (<TRow extends AnyObject, TParams extends AnyObject>(props: ProTableProps<TRow, TParams> & {
     ref?: React.Ref<ProTableRef>;
 }) => Awaitable<ReactNode>) & Pick<FC, "displayName">;
 export { OperationButtonGroup, TableSubscriber as ProTableSubscriber, type OperationButtonGroupProps, type TableSubscriberProps as ProTableSubscriberProps } from './components';
 export type { ProTableProps } from './props';
 export type { ProTableState } from './store';
-export type { OperationColumnConfig, ParamsWithPagination, ParamsWithSort, ProTableRef, RowSelectionConfig } from './types';
+export type { ColumnSettingsConfig, ColumnSettingsProp, OperationColumnConfig, ParamsWithPagination, ParamsWithSort, ProTableRef, RowSelectionConfig } from './types';

package/dist/types/components/pro-table/props.d.ts

@@ -1,15 +1,15 @@
-import { TableColumn } from '@vef-framework/components';
+import { TableColumn, TableProps } from '@vef-framework/components';
 import { PaginationResult, QueryFunction } from '@vef-framework/core';
-import { DeepKeys, Key } from '@vef-framework/shared';
+import { AnyObject, DeepKeys, Key } from '@vef-framework/shared';
 import { CSSProperties, ReactNode } from 'react';
-import { OperationColumnConfig, ParamsWithPagination, ParamsWithSort, RowSelectionConfig } from './types';
+import { ColumnSettingsProp, OperationColumnConfig, ParamsWithPagination, ParamsWithSort, RowSelectionConfig } from './types';
 /**
  * Base props for ProTable component
  *
  * @template TRow - The type of table row data
  * @template TParams - The type of query parameters
  */
-interface BaseProTableProps<TRow, TParams> {
+interface BaseProTableProps<TRow extends AnyObject, TParams extends AnyObject> extends Pick<TableProps<TRow>, "size"> {
     /**
      * Class name for the table container
      */
@@ -22,22 +22,31 @@ interface BaseProTableProps<TRow, TParams> {
      * Table column definitions
      */
     columns: Array<TableColumn<NoInfer<TRow>>>;
+    /**
+     * Column settings configuration.
+     * - `false`: Disable column settings feature
+     * - `{ storageKey?: string }`: Enable with optional localStorage persistence
+     *
+     * @default {}
+     */
+    columnSettings?: ColumnSettingsProp;
     /**
      * Whether to show the sequence (row number) column. Default is true.
-    */
+     */
     showSequenceColumn?: boolean;
     /**
-      * Row key extractor: either a deep key of the row model or a function
-    */
+     * Row key extractor: either a deep key of the row model or a function
+     */
     rowKey?: DeepKeys<NoInfer<TRow>> | ((row: NoInfer<TRow>) => Key);
     /**
      * Enable virtual scrolling for the table to improve performance with large datasets
+     *
      * @default false
      */
     virtual?: boolean;
     /**
-   * Currently selected row keys
-   */
+     * Currently selected row keys
+     */
     selectedRowKeys?: Key[];
     /**
      * Operation column configuration for per-row actions
@@ -85,7 +94,7 @@ interface BaseProTableProps<TRow, TParams> {
  * @template TRow - The type of table row data
  * @template TParams - The type of query parameters
  */
-export interface PaginatedProTableProps<TRow, TParams> extends BaseProTableProps<TRow, TParams> {
+export interface PaginatedProTableProps<TRow extends AnyObject, TParams extends AnyObject> extends BaseProTableProps<TRow, TParams> {
     /**
      * Enable pagination mode. Default is true.
      */
@@ -101,7 +110,7 @@ export interface PaginatedProTableProps<TRow, TParams> extends BaseProTableProps
  * @template TRow - The type of table row data
  * @template TParams - The type of query parameters
  */
-export interface NonPaginatedProTableProps<TRow, TParams> extends BaseProTableProps<TRow, TParams> {
+export interface NonPaginatedProTableProps<TRow extends AnyObject, TParams extends AnyObject> extends BaseProTableProps<TRow, TParams> {
     /**
      * Disable pagination mode for this variant
      */
@@ -114,5 +123,5 @@ export interface NonPaginatedProTableProps<TRow, TParams> extends BaseProTablePr
 /**
  * Discriminated union of paginated and non-paginated ProTable props
  */
-export type ProTableProps<TRow, TParams> = PaginatedProTableProps<TRow, TParams> | NonPaginatedProTableProps<TRow, TParams>;
+export type ProTableProps<TRow extends AnyObject, TParams extends AnyObject> = PaginatedProTableProps<TRow, TParams> | NonPaginatedProTableProps<TRow, TParams>;
 export {};

package/dist/types/components/pro-table/store.d.ts

@@ -1,8 +1,38 @@
-import { PaginationParams, StoreProviderProps, UseStore, UnboundStore } from '@vef-framework/core';
-import { EventEmitter } from '@vef-framework/shared';
+import { TableColumn } from '@vef-framework/components';
+import { DragDropEvents, PaginationParams, StoreProviderProps, UseStore, UnboundStore } from '@vef-framework/core';
+import { EventEmitter, Key } from '@vef-framework/shared';
+import { ReactNode, ComponentType } from 'react';
 import { OrderSpec } from '../../types';
 import { ProTableEvents } from './event';
-import { ComponentType } from 'react';
+/**
+ * Column setting configuration
+ */
+export interface ColumnSetting {
+    /**
+     * Column unique identifier
+     */
+    id: Key;
+    /**
+     * Column display title
+     */
+    title: ReactNode;
+    /**
+     * Column fixed position
+     */
+    fixed?: "start" | "end" | false;
+    /**
+     * Column width in pixels
+     */
+    width?: number;
+    /**
+     * Whether the column is visible
+     */
+    visible: boolean;
+    /**
+     * Original column index for reference
+     */
+    originalIndex: number;
+}
 /**
  * State for the ProTable component
  */
@@ -31,5 +61,45 @@ export interface ProTableState {
      * Refetch data with current query params, current pagination and sort parameters
      */
     refetch: () => void;
+    /**
+     * Column settings state for customization
+     */
+    columnSettings: ColumnSetting[];
+    /**
+     * Original column settings for reset functionality
+     */
+    originalColumnSettings: ColumnSetting[];
+    /**
+     * Initialize column settings from columns prop
+     */
+    initColumnSettings: (columns: TableColumn[]) => void;
+    /**
+     * Set column settings directly
+     */
+    setColumnSettings: (settings: ColumnSetting[]) => void;
+    /**
+     * Reorder columns by drag event
+     */
+    reorderColumns: (event: Parameters<DragDropEvents["dragend"]>[0]) => void;
+    /**
+     * Toggle column fixed state
+     */
+    setColumnFixed: (id: Key, fixed: "start" | "end" | false) => void;
+    /**
+     * Update column width
+     */
+    setColumnWidth: (id: Key, width: number) => void;
+    /**
+     * Toggle column visibility
+     */
+    setColumnVisible: (id: Key, visible: boolean) => void;
+    /**
+     * Reset column settings to original state
+     *
+     * @param clearStorage - Optional callback to clear localStorage
+     */
+    resetColumnSettings: (clearStorage?: () => void) => void;
 }
+export declare function getColumnId(column: TableColumn, index: number): string;
+export declare function createColumnSetting(column: TableColumn, index: number): ColumnSetting;
 export declare const ProTableStoreProvider: ComponentType<StoreProviderProps<never>>, useProTableStore: UseStore<ProTableState>, useProTableStoreApi: <TStrictState extends ProTableState = ProTableState>() => UnboundStore<TStrictState>;