Table Props

<StkTable
  ...[props]
/>

API

width

Table width

width?: string;

minWidth

Minimum table width @deprecated 0.9.1 Use css selector .stk-table-main to set

minWidth?: string;

maxWidth

Maximum table width @deprecated 0.9.1 Use css selector .stk-table-main to set

maxWidth?: string;

stripe

Zebra stripes

stripe?: boolean;

fixedMode

Whether to use table-layout:fixed

fixedMode?: boolean;

headless

Whether to hide table header

headless?: boolean;

theme

Theme, light or dark

theme?: 'light' | 'dark';

rowHeight

Row height

• When props.autoRowHeight is true, this represents the expected row height for calculation. It no longer affects the actual row height.
• Can be changed dynamically: the visible row count and scroll height are recalculated automatically (row height is driven by --row-height, which stays in sync).

rowHeight?: number;

autoRowHeight

Whether to use variable row height

• When set to true, props.rowHeight represents the expected row height for calculation. It no longer affects the actual row height.

autoRowHeight?: boolean | {
  /** Estimated row height (higher priority than rowHeight) */
  expectedHeight?: number | ((row: DT) => number);
};

rowHover

Whether to highlight the row on mouse hover

rowHover?: boolean;

rowActive

Whether to highlight the selected row

rowActive?: boolean | {
  /** Whether to enable row selection function default: true */
  enabled?: boolean;
  /** Whether to disable row selection default: () => false */
  disabled?: (row: DT) => boolean;
  /** Whether selection can be revoked default: true */
  revokable?: boolean;
};

headerRowHeight

Header row height. default = rowHeight

• Can be changed dynamically: the number of body rows occupied by the header (pageSize) is recalculated accordingly.

headerRowHeight?: number | null;

footerRowHeight

Footer row height. default = rowHeight

• Can be changed dynamically. Footer rows stick to the bottom of the scroll area and are not counted in the virtual scroll total height.

footerRowHeight?: number | string | null;

virtual

Virtual scrolling

virtual?: boolean;

virtualX

Horizontal virtual scrolling (must set column width)

virtualX?: boolean;

columns

Table column configuration

Shallow listen, please modify the reference when changed

columns?: StkTableColumn<any>[];

dataSource

Data source

Shallow listen, please modify the reference when changed

dataSource?: any[];

rowKey

Row unique key (row unique value cannot be undefined)

rowKey?: UniqKeyProp;

colKey

Column unique key. Default is dataIndex

colKey?: UniqKeyProp;

emptyCellText

Empty cell display text

emptyCellText?: string | ((option: { row: DT; col: StkTableColumn<DT> }) => string);

noDataFull

Whether the fallback height for no data fills the container

noDataFull?: boolean;

showNoData

Whether to show no data message

showNoData?: boolean;

sortRemote

Whether to use server-side sorting, true means not sorting data

sortRemote?: boolean;

showHeaderOverflow

Whether header content overflows with ellipsis

showHeaderOverflow?: boolean;

showOverflow

Whether body content overflows with ellipsis

showOverflow?: boolean;

showTrHoverClass

Whether to add row hover class

showTrHoverClass?: boolean;

cellHover

Whether to highlight the cell on mouse hover

cellHover?: boolean;

cellActive

Whether to highlight the selected cell

cellActive?: boolean;

selectedCellRevokable

Whether clicking the cell again can deselect it (cellActive=true)

selectedCellRevokable?: boolean;

areaSelection

Whether to enable cell range selection (drag selection)

areaSelection?: boolean | {
  /**
   * Custom cell text formatter for clipboard copy.
   * If you use customCell to render cells, you should provide this callback to ensure the copied text matches the displayed content.
   * @param row Row data
   * @param col Column configuration
   * @param rawValue row[col.dataIndex] raw value
   * @returns Text to be copied to clipboard
   */
  formatCellForClipboard?: (row: DT, col: StkTableColumn<DT>, rawValue: any) => string;
  /**
   * Whether to enable keyboard control for selection area.
   * When enabled, arrow keys / Tab / Shift+Tab can control selection area movement, similar to Excel behavior.
   * When this feature is enabled, the original keyboard scrolling behavior will be disabled.
   * @default false
   */
  keyboard?: boolean;
};

headerDrag

Whether header can be dragged. Supports callback function.

headerDrag?:
  | boolean
  | {
      /**
       * Column swap mode
       * - none - Do nothing
       * - insert - Insert (default)
       * - swap - Swap
       */
      mode?: 'none' | 'insert' | 'swap';
      /** Columns that are disabled from dragging */
      disabled?: (col: StkTableColumn<DT>) => boolean;
    };

rowClassName

Add className to rows

rowClassName?: (row: any, i: number) => string;

colResizable

Whether column width is resizable (requires setting v-model:columns) Do not set column minWidth, must set width When resizing column width, each column must have a width, and minWidth/maxWidth will not take effect. Table width will become "fit-content".

• Will automatically update the width property in props.columns

colResizable?: boolean | {
  /** Columns that are disabled from resizing */
  disabled?: (col: StkTableColumn<DT>) => boolean;
};

colMinWidth

Minimum column width when resizing

colMinWidth?: number;

bordered

Cell border. Default has both horizontal and vertical borders "h" - Only show horizontal lines "v" - Only show vertical lines "body-v" - Only show vertical lines in body "body-h" - Only show horizontal lines in body

bordered?: boolean | 'h' | 'v' | 'body-v' | 'body-h';

autoResize

Automatically recalculate virtual scroll height and width. Default true [Non-reactive] Passing a method represents a callback after resize

autoResize?: boolean | (() => void);

fixedColShadow

Whether to show fixed column shadow. For performance, default false.

fixedColShadow?: boolean;

optimizeVue2Scroll

Optimize vue2 scrolling

optimizeVue2Scroll?: boolean;

sortConfig

Sort configuration

sortConfig?: {
  /** Whether empty values are sorted at the bottom */
  emptyToBottom: boolean,
  /** Default sort (1. Triggered on initialization 2. Triggered when sort direction is null) */
  defaultSort?: {
      dataIndex: keyof T;
      order: Order;
  };
  /**
   * Whether to use String.prototype.localCompare for string sorting
   * Default true (due to historical design issues, default is true for compatibility)
   */
  stringLocaleCompare?: boolean;
},

hideHeaderTitle

Hide header mouse hover title. Can pass dataIndex array

hideHeaderTitle?: boolean | string[];

highlightConfig

Highlight configuration

highlightConfig?: {
  /** Highlight duration (s) */
  duration?: number;
  /** Highlight frame rate */
  fps?: number;
};

seqConfig

Sequence column configuration

seqConfig?: {
  /** Sequence column start index for pagination adaptation */
  startIndex?: number;
};

expandConfig

Expand row configuration

expandConfig?: {
  height?: number;
};

dragRowConfig

Row drag configuration

dragRowConfig?: {
  mode?: 'none' | 'insert' | 'swap';
};

cellFixedMode

Fixed header and column implementation method. [Non-reactive] relative: Fixed columns can only be placed on both sides of props.columns.

• Use with caution if column width may change.
• Use with caution for fixed columns in multi-level headers

Older browsers can only use 'relative',

cellFixedMode?: 'sticky' | 'relative';

smoothScroll

Whether to enable smooth scrolling

• default: chrome < 85 || chrome > 120 ? true : false
• false: Use wheel event for scrolling. To prevent white screen caused by scrolling too fast.
• true: Do not use wheel event for scrolling. Smoother scrolling with mouse wheel. May cause white screen when scrolling too fast.

smoothScroll?: boolean;

scrollRowByRow

Scroll vertically by integer rows

• scrollbar: Only effective when dragging the scrollbar, can be used to solve the white screen problem when dragging (v0.7.2)

scrollRowByRow?: boolean | 'scrollbar';

scrollbar

Custom scrollbar configuration

• false: Disable custom scrollbar
• true: Enable custom scrollbar with default configuration
• ScrollbarOptions: Enable and configure custom scrollbar

scrollbar?: boolean | {
  /** Whether to enable scrollbar */
  enabled?: boolean;
  /** Vertical scrollbar width default: 8 */
  width?: number;
  /** Horizontal scrollbar height default: 8 */
  height?: number;
  /** Scrollbar thumb minimum width default: 20 */
  minWidth?: number;
  /** Scrollbar thumb minimum height default: 20 */
  minHeight?: number;
};

treeConfig

Tree configuration

treeConfig?: {
  /** Whether to expand all tree nodes by default */
  defaultExpandAll?: boolean;
  /** Keys of nodes to expand by default */
  defaultExpandKeys?: UniqKey[];
  /** Level to expand to by default */
  defaultExpandLevel?: number;
  /** Enable lazy load of children, default false <Badge type="tip" text="^1.2.7" /> */
  lazy?: boolean;
  /** Lazy load function returning a Promise resolving to child rows <Badge type="tip" text="^1.2.7" /> */
  loadMethod?: (row: DT, col: StkTableColumn<DT>) => Promise<DT[]>;
  /** Field marking "has children" in lazy mode, default 'hasChildren' <Badge type="tip" text="^1.2.7" /> */
  hasChildField?: string;
  /** Callback when loadMethod rejects <Badge type="tip" text="^1.2.7" /> */
  onLoadError?: (error: unknown, row: DT, col: StkTableColumn<DT>) => void;
  /** Draw per-level vertical guide lines in the tree-node column, default false <Badge type="tip" text="^1.2.7" /> */
  showGuide?: boolean;
};

Lazy load (lazy)

• When enabled, expanding a row "marked as having children but not yet loaded" calls loadMethod(row, col); resolved children are merged into the flattened data automatically.
• Expandable check: the arrow shows when children exists or row[hasChildField] (default hasChildren) is truthy; neither means a leaf node.
• While loading, a @private __T_LOADING__ field is set on the row, the whole row (<tr>) gets an is-tree-loading class and a built-in loading icon appears at the arrow position. Successes are cached (no re-request); failures keep the row collapsed and retry on next expand, firing onLoadError.
• With lazy, defaultExpandAll / defaultExpandLevel and setTreeExpand(..., { all: true } / { level }) stop at unloaded branches (no implicit chained loads); setTreeExpand(row, { parents: true }) chain-loads unloaded ancestors on demand.

See Tree - Lazy Load Children.

Indent Guide Lines (showGuide)

• When enabled, the tree-node column draws one vertical guide line per level within each row's indentation; lines only cover the ancestor slots; a row never draws a line through its own control slot. Default false; when disabled the existing padding-only indentation is kept.
• Style via CSS variables: --tree-guide-color (color), --tree-guide-width (line width, default 1px), --tree-guide-mask (dash mask, default none = solid; set a vertical repeating gradient to intersect, e.g. repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 8px)); the dark theme has its own defaults.
• When swapping in a wider arrow/icon, override --tree-indent-width (default 16px) so the indent cell, the control placeholder and the guide line pitch scale together. Rendering the whole cell through customCell on a tree-node column (folder open/close example included) is covered in File Management Tree.

See Tree - Indent Guide Lines.

experimental

Experimental configuration

experimental?: {
  /** Use transform to simulate scroll */
  scrollY?: boolean;
};

footerData

Footer summary row data

footerData?: DT[];