sellmate-design-system-react 0.1.0

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,117 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type IconName } from '../Icon';
+import { type SelectOption } from '../Select';
+export type Row = Record<string, any>;
+export interface TableColumn {
+    name: string;
+    label: string;
+    /** 값 접근: 필드명 또는 접근 함수 */
+    field: string | ((row: Row) => any);
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+    /** 고정폭 없이 자동 너비 (sticky/resize 계산에서 제외) */
+    autoWidth?: boolean;
+    /** 리사이즈 최소/최대 너비 (px) */
+    minWidth?: number;
+    maxWidth?: number;
+    /** 표시 포맷 */
+    format?: (value: any, row: Row) => string;
+    visible?: boolean;
+    icon?: IconName;
+    iconColor?: string;
+    /** 셀 커스텀 렌더 (React 확장) */
+    render?: (row: Row, value: any) => ReactNode;
+    tdClass?: string;
+    /** 헤더 셀 커스텀 클래스/스타일 (sd-table thClass/thStyle) */
+    thClass?: string;
+    thStyle?: CSSProperties;
+}
+export interface TablePagination {
+    page: number;
+    rowsPerPage: number;
+    lastPage?: number;
+}
+export interface TableStickyColumn {
+    left?: number;
+    right?: number;
+}
+/** Table ref 명령형 API (sd-table @Method 대응) */
+export interface TableHandle {
+    /** 행 선택 여부 */
+    isRowSelected: (row: Row) => boolean;
+    /** 주어진 행들의 전체 선택 상태 (true/false/null=indeterminate) */
+    getIsAllChecked: (rows: Row[]) => boolean | null;
+    /** 내부 페이지네이션 정보 (useInternalPagination 아니면 null) */
+    getPaginationInfo: () => {
+        startIndex: number;
+        endIndex: number;
+        currentPage: number;
+        rowsPerPage: number;
+    } | null;
+    /** 컬럼 sticky 스타일 (CSS 변수 + 고정폭) */
+    getStickyStyle: (colIdx: number) => CSSProperties;
+    /** 가상 스크롤 총 행 수 설정 */
+    setRowCount: (count: number) => void;
+    /** 단일 행 선택 토글 (sd-table updateRowSelect) — onSelectedChange 발생 */
+    updateRowSelect: (row: Row) => void;
+    /** 주어진 행들 전체 선택/해제 (sd-table toggleSelectAll) — onSelectedChange 발생 */
+    toggleSelectAll: (checked: boolean, rows: Row[]) => void;
+}
+export interface TableProps {
+    columns?: TableColumn[];
+    rows?: Row[];
+    /** 행 식별 필드 */
+    rowKey?: string;
+    /** 행 선택 체크박스 */
+    selectable?: boolean;
+    selected?: Row[];
+    onSelectedChange?: (rows: Row[]) => void;
+    /** 컬럼 너비 조절 */
+    resizable?: boolean;
+    width?: string;
+    height?: string;
+    /** 헤더 고정 */
+    stickyHeader?: boolean;
+    /** 고정할 좌/우 컬럼 수 */
+    stickyColumn?: TableStickyColumn;
+    /** border-radius 제어 */
+    radius?: 'default' | 'useTop' | 'full';
+    noDataLabel?: string;
+    isLoading?: boolean;
+    dense?: boolean;
+    /** 페이지네이션 (있으면 하단 표시) */
+    pagination?: TablePagination;
+    onPageChange?: (page: number) => void;
+    /** 테이블 내부에서 페이지네이션을 직접 관리 (rows를 내부 슬라이싱) */
+    useInternalPagination?: boolean;
+    /** 페이지당 행 수 셀렉트 표시 */
+    useRowsPerPageSelect?: boolean;
+    rowsPerPageOption?: SelectOption[];
+    onRowsPerPageChange?: (perPage: number) => void;
+    /** 가상 스크롤 */
+    useVirtualScroll?: boolean;
+    rowHeight?: number;
+    virtualBuffer?: number;
+    virtualEndThreshold?: number;
+    onVirtualUpdate?: (range: {
+        from: number;
+        to: number;
+    }) => void;
+    onVirtualReachEnd?: (info: {
+        from: number;
+        to: number;
+        rowCount: number;
+        threshold: number;
+    }) => void;
+    /** 테이블 식별자 (없으면 자동 생성) */
+    tableId?: string;
+    /** 행 클릭 */
+    onRowClick?: (row: Row) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Table — sd-table 포팅. 컬럼/행 + 선택 + sticky 헤더/컬럼 + 리사이즈 +
+ * 내부 페이지네이션 + rows-per-page + 가상 스크롤 + 로딩 + dense.
+ */
+export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<TableHandle>>;