Table Props 테이블 설정

<StkTable
  ...[props]
/>

API

width

테이블 너비

width?: string;

minWidth

최소 테이블 너비 @deprecated 0.9.1 CSS 선택자 .stk-table-main로 설정

minWidth?: string;

maxWidth

테이블 최대 너비 @deprecated 0.9.1 CSS 선택자 .stk-table-main로 설정

maxWidth?: string;

stripe

얼룩말 줄무늬

stripe?: boolean;

fixedMode

table-layout:fixed 사용 여부

fixedMode?: boolean;

headless

헤더 숨김 여부

headless?: boolean;

theme

테마, 라이트/다크

theme?: 'light' | 'dark';

rowHeight

행 높이

props.autoRowHeight 가 true 일 때, 기대 행 높이로 사용됩니다. 실제 행 높이에는 영향을 주지 않습니다.
동적으로 변경할 수 있습니다. 변경 후 표시 행 수와 스크롤 높이가 자동으로 재계산됩니다 (행 높이는 --row-height 로 제어되며 함께 갱신됩니다).

rowHeight?: number;

autoRowHeight

가변 행 높이 여부

true 로 설정하면, props.rowHeight 는 기대 행 높이로 사용됩니다. 실제 행 높이에는 영향을 주지 않습니다.

autoRowHeight?: boolean | {
  /** 예상 행 높이(rowHeight보다 높은 우선순위) */
  expectedHeight?: number | ((row: DT) => number);
};

rowHover

마우스 호버 시 행 강조 여부

rowHover?: boolean;

rowActive

선택된 행 강조 여부

rowActive?: boolean | {
  /** 행 선택 기능 활성화 여부 기본값: true */
  enabled?: boolean;
  /** 행 선택 비활성화 기본값: () => false */
  disabled?: (row: DT) => boolean;
  /** 선택 취소 가능 여부 기본값: true */
  revokable?: boolean;
};

headerRowHeight

헤더 행 높이. 기본값 = rowHeight

동적으로 변경할 수 있습니다. 헤더가 차지하는 본문 행 수(pageSize)가 함께 재계산됩니다.

headerRowHeight?: number | null;

footerRowHeight

푸터 행 높이. 기본값 = rowHeight

동적으로 변경할 수 있습니다. 푸터 행은 스크롤 영역 하단에 고정(sticky) 되므로 가상 스크롤 총 높이에 포함되지 않습니다.

footerRowHeight?: number | string | null;

virtual

가상 스크롤

virtual?: boolean;

virtualX

x축 가상 스크롤 (열 너비 설정 필요)

virtualX?: boolean;

columns

테이블 열 설정

얕은 감시, 변경 시 참조를 수정하세요

columns?: StkTableColumn<any>[];

dataSource

데이터 소스

얕은 감시, 변경 시 참조를 수정하세요

dataSource?: any[];

rowKey

행 고유 키 (행 고유 값은 undefined일 수 없음)

rowKey?: UniqKeyProp;

colKey

열 고유 키. 기본값 dataIndex

colKey?: UniqKeyProp;

emptyCellText

빈 값 표시 텍스트

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

noDataFull

데이터 없음 높이 꽉 채우기 여부

noDataFull?: boolean;

showNoData

데이터 없음 표시 여부

showNoData?: boolean;

sortRemote

서버 측 정렬 여부, true면 데이터 정렬 안함

sortRemote?: boolean;

showHeaderOverflow

헤더 오버플로우 표시 여부

showHeaderOverflow?: boolean;

showOverflow

본문 overflow 시 ... 표시 여부

showOverflow?: boolean;

showTrHoverClass

행 호버 class 추가 여부

showTrHoverClass?: boolean;

cellHover

마우스 호버 시 셀 강조 여부

cellHover?: boolean;

cellActive

선택된 셀 강조 여부

cellActive?: boolean;

selectedCellRevokable

셀 다시 클릭 시 선택 취소 가능 여부 (cellActive=true)

selectedCellRevokable?: boolean;

areaSelection

셀 범위 선택 활성화 여부 (드래그 선택 영역)

areaSelection?: boolean | {
  /**
   * 복사 시 셀 텍스트 포맷 콜백.
   * customCell 커스텀 렌더링을 사용한다면, 복사 내용과 표시 내용 일치 여부를 보장하기 위해 이 콜백을 제공해야 합니다.
   * @param row 행 데이터
   * @param col 열 설정
   * @param rawValue row[col.dataIndex]의 원본 값
   * @returns 클립보드에 복사할 텍스트
   */
  formatCellForClipboard?: (row: DT, col: StkTableColumn<DT>, rawValue: any) => string;
  /**
   * 키보드 제어 선택 영역 이동 활성화 여부.
   * 활성화하면, 방향키/Tab/Shift+Tab 로 선택 영역 이동 제어 가능, Excel 동작과 유사.
   * 이 기능 활성화 시, 기존 키보드 스크롤 동작은 무효화됩니다.
   * @default false
   */
  keyboard?: boolean;
};

headerDrag

헤더 드래그 가능 여부. 콜백 함수 지원.

headerDrag?:
  | boolean
  | {
      /**
       * 열 교환 모드
       * - none - 아무것도 안함
       * - insert - 삽입 (기본값)
       * - swap - 교환
       */
      mode?: 'none' | 'insert' | 'swap';
      /** 드래그 비활성화 열 */
      disabled?: (col: StkTableColumn<DT>) => boolean;
    };

rowClassName

행에 className 추가

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

colResizable

열 너비 드래그 가능 여부 (v-model:columns 설정 필요) 설정하지 마세요 열 minWidth, 반드시 width 설정 필요 열 너비 드래그 시, 각 열에는 width 가 반드시 필요하며 minWidth/maxWidth 는 무효화됩니다. 테이블 너비는 "fit-content"가 됩니다.

props.columns 의 width 속성을 자동으로 업데이트합니다

colResizable?: boolean | {
  /** 드래그 비활성화 열 */
  disabled?: (col: StkTableColumn<DT>) => boolean;
};

colMinWidth

드래그 가능한 최소 열 너비

colMinWidth?: number;

bordered

셀 구분선. 기본값 가로 세로 모두 있음 "h" - 가로선만 표시 "v" - 세로선만 표시 "body-v" - 본문만 세로선 표시 "body-h" - 본문만 가로선 표시

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

autoResize

가상 스크롤 높이/너비 자동 재계산. 기본값 true [비반응형] 메서드 전달 시 resize 후 콜백 의미

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

fixedColShadow

고정 열 그림자 표시 여부. 성능 절약 위해 기본값 false.

fixedColShadow?: boolean;

optimizeVue2Scroll

vue2 스크롤 최적화

optimizeVue2Scroll?: boolean;

sortConfig

정렬 설정

sortConfig?: {
  /** 빈 값 하단 정렬 여부 */
  emptyToBottom: boolean,
  /** 기본 정렬 (1.초기화 시 트리거 2.정렬 방향이 null 일 때 트리거) */
  defaultSort?: {
      dataIndex: keyof T;
      order: Order;
  };
  /**
   * string 정렬 시 String.prototype.localCompare 사용 여부
   * 기본값 true (이전 설계 문제, 호환성을 위해 기본값 true)
   */
  stringLocaleCompare?: boolean;
},

hideHeaderTitle

헤더 마우스 호버 title 숨김. dataIndex 배열 전달 가능

hideHeaderTitle?: boolean | string[];

highlightConfig

강조 설정

highlightConfig?: {
  /** 강조 지속 시간(s) */
  duration?: number;
  /** 강조 프레임레이트*/
  fps?: number;
};

seqConfig

순번 열 설정

seqConfig?: {
  /** 순번 열 시작 인덱스 페이지네이션 적응용 */
  startIndex?: number;
};

expandConfig

확장 행 설정

expandConfig?: {
  height?: number;
};

dragRowConfig

행 드래그 설정

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

cellFixedMode

고정 헤더, 고정 열 구현 방식. [비반응형] relative: 고정 열은 props.columns 양쪽에만 배치 가능.

열 너비가 변경되면 주의해서 사용.
멀티 레벨 헤더 고정 열 주의

낮은 버전 브라우저는只能是'relative',

cellFixedMode?: 'sticky' | 'relative';

smoothScroll

부드러운 스크롤 여부

기본값: chrome < 85 || chrome > 120 ? true : false
false: wheel 이벤트 스크롤 사용. 스크롤 너무 빠를 때 백색 화면 방지.
true: wheel 이벤트 스크롤 미사용. 마우스휠 스크롤 시 더 부드러움. 스크롤 너무 빠르면 백색 화면이 나타납니다.

smoothScroll?: boolean;

scrollRowByRow

정수 행 단위 세로 스크롤

scrollbar: 스크롤바만 드래그 시生效, 드래그 백색 화면 문제 처리可用(v0.7.2)

scrollRowByRow?: boolean | 'scrollbar';

scrollbar

커스텀 스크롤바 설정

false: 커스텀 스크롤바 비활성화
true: 기본 설정의 커스텀 스크롤바 활성화
ScrollbarOptions: 커스텀 스크롤바 활성화 및 설정

scrollbar?: boolean | {
  /** 스크롤바 활성화 여부 */
  enabled?: boolean;
  /** 세로 스크롤바 너비 기본값: 8 */
  width?: number;
  /** 가로 스크롤바 높이 기본값: 8 */
  height?: number;
  /** 스크롤바 썸 최소 너비 기본값: 20 */
  minWidth?: number;
  /** 스크롤바 썸 최소 높이 기본값: 20 */
  minHeight?: number;
};

treeConfig

트리 설정

treeConfig?: {
  /** 기본값 모든 트리 노드 확장 */
  defaultExpandAll?: boolean;
  /** 기본값 확장할 노드키 */
  defaultExpandKeys?: UniqKey[];
  /** 기본값 확장할 레벨 */
  defaultExpandLevel?: number;
  /** 자식 노드 지연 로딩 활성화, 기본값 false <Badge type="tip" text="^1.2.7" /> */
  lazy?: boolean;
  /** 자식 행 배열을 resolve하는 Promise를 반환하는 지연 로딩 함수 <Badge type="tip" text="^1.2.7" /> */
  loadMethod?: (row: DT, col: StkTableColumn<DT>) => Promise<DT[]>;
  /** 지연 로딩 시 “자식 있음” 판별 필드명, 기본값 'hasChildren' <Badge type="tip" text="^1.2.7" /> */
  hasChildField?: string;
  /** loadMethod가 reject될 때의 콜백 <Badge type="tip" text="^1.2.7" /> */
  onLoadError?: (error: unknown, row: DT, col: StkTableColumn<DT>) => void;
  /** 트리 열 들여쓰기 영역에 단계별 세로 가이드 라인을 그리기, 기본 false <Badge type="tip" text="^1.2.7" /> */
  showGuide?: boolean;
};

지연 로딩（lazy）

활성화하면 “자식이 있다고 표시되었으나 아직 로딩되지 않은” 행을 펼칠 때 loadMethod(row, col)를 호출하고, resolve된 자식을 평탄화 데이터에 자동 병합합니다.
펼침 가능 판정: 행의 children이 존재하거나 row[hasChildField](기본 hasChildren)가 참이면 펼침 화살표 표시, 둘 다 없으면 리프 노드.
로딩 중 행에 @private 필드 __T_LOADING__이 설정되고 행 전체(<tr>)에 is-tree-loading 클래스가 붙으며 화살표 자리에 내장 로딩 아이콘이 표시됩니다. 성공은 캐시(재요청 없음)되고, 실패 시 접힌 상태로 남아 다음 펼침 시 재시도되며 onLoadError가 호출됩니다.
lazy 상태에서는 defaultExpandAll / defaultExpandLevel과 setTreeExpand(..., { all: true } / { level })가 미로딩 분기에서 펼침을 중지합니다(암시적 연쇄 요청 없음); setTreeExpand(row, { parents: true })는 미로딩 조상을 필요에 따라 연쇄 로딩합니다.

자세한 내용은 트리형 - 자식 노드 지연 로딩을 참고하세요.

들여쓰기 가이드 라인（showGuide）

활성화하면 tree-node 열이 각 행의 들여쓰기 영역에 단계별로 세로 가이드 라인을 그립니다. 조상 슬롯만 그리며, 행 자신의 컨트롤 칸에는 선을 긋지 않습니다. 기본 false, 비활성화 시 기존 들여쓰기만 유지됩니다.
CSS 변수로 외형을 조정할 수 있습니다: --tree-guide-color(색상), --tree-guide-width(선 두께, 기본 1px), --tree-guide-mask(가림 마스크, 기본 none는 실선. 세로 repeating 그라디언트로 교차시켜 점선 예: repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 8px)). 다크 테마는 각각의 기본값을 합니다.
더 넓은 화살표/아이콘으로 바꾸면 --tree-indent-width(기본 16px)를 재정의해 들여쓰기 칸·컨트롤 자리·가이드선 간격이 함께 커지도록 하세요. tree-node 열에 customCell로 셀 전체를 직접 그리는 방법(폴더 열기/닫기 아이콘 예시 포함)은 파일 관리 트리을 참조하세요.

자세한 내용은 트리형 - 들여쓰기 가이드 라인을 참고하세요.

experimental

실험적 기능 설정

experimental?: {
  /** transform 사용하여 스크롤 시뮬레이션 */
  scrollY?: boolean;
};

footerData

테이블 하단 합계 행 데이터

footerData?: DT[];

Table Props 테이블 설정 ​

API ​

width ​

minWidth ​

maxWidth ​

stripe ​

fixedMode ​

headless ​

theme ​

rowHeight ​

autoRowHeight ​

rowHover ​

rowActive ​

headerRowHeight ​

footerRowHeight ​

virtual ​

virtualX ​

columns ​

dataSource ​

rowKey ​

colKey ​

emptyCellText ​

noDataFull ​

showNoData ​

sortRemote ​

showHeaderOverflow ​

showOverflow ​

showTrHoverClass ​

cellHover ​

cellActive ​

selectedCellRevokable ​

areaSelection ​

headerDrag ​

rowClassName ​

colResizable ​

colMinWidth ​

bordered ​

autoResize ​

fixedColShadow ​

optimizeVue2Scroll ​

sortConfig ​

hideHeaderTitle ​

highlightConfig ​

seqConfig ​

expandConfig ​

dragRowConfig ​

cellFixedMode ​

smoothScroll ​

scrollRowByRow ​

scrollbar ​

treeConfig ​

experimental ​

footerData ​