# Component/Table/VirtualizedDataTable ## Props | Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | `stickyHeader` | `boolean | undefined` | No | | | | `estimateSize` | `number` | Yes | | 가상화를 위한 Row의 높이 | | `className` | `string | undefined` | No | | | | `loading` | `boolean | undefined` | No | false | 테이블 Loading 여부 | | `resize` | `boolean | undefined` | No | false | 테이블의 컬럼 리사이즈 활성화 여부 - width값 지정된 컬럼은 resize가 불가합니다. - table-layout이 fixed 처리됩니다.(기본 auto) | | `columns` | `DataTableColumnsType` | Yes | | 테이블 컬럼 목록 - useMemo를 통한 메모이제이션된 값을 권장합니다. | | `rows` | `DataTableRowsType` | Yes | | 테이블 로우 목록 - useMemo를 통한 메모이제이션된 값을 권장합니다. | | `cellDisabledStyle` | `boolean | undefined` | No | true | 테이블 로우 disabled 스타일 사용 유무 - column cellAttributes 스타일 커스텀시 로우 전체 disabled 스타일을 제한할 수 있습니다. | | `scroll` | `Scroll | undefined` | No | | 테이블 스크롤 영역 너비/높이를 지정할 수 있습니다. - { x: number | string, y: number | string } - x: 가로 스크롤을 설정하고 스크롤 영역의 너비를 지정합니다. - y: 세로 스크롤을 설정하고 스크롤 영역의 높이를 지정합니다. - stickyHeader를 객체로 전달한 page mode에서는 viewport 스크롤을 기준으로 하므로 y는 무시됩니다. - stickyHeader를 객체로 전달한 page mode에서도 x는 floating header 동기화에 사용됩니다. - x 사용시 table-layout이 fixed 처리됩니다.(기본 auto) - y 기본값은 600px입니다. | | `cellHoverStyle` | `boolean | undefined` | No | true | 테이블 로우 호버 스타일 사용 유무 - column cellAttributes 스타일 커스텀시 로우 전체 호버 스타일을 제한할 수 있습니다. - rowspan to highlight all relevant rows 이슈 처리전 임시 props으로 사용할 수 있습니다. | | `rowColor` | `((row: DataType, index: number) => string | undefined) | undefined` | No | | Row 배경색을 지정하는 함수 혹은 컬러값을 전달합니다. hover는 auto code 정책을 따릅니다. | | `sortBy` | `string | undefined` | No | | Sort 대상 컬럼 아이디 | | `sortDirection` | `undefined "desc" "default" "asc"` | No | | | | `selectableRows` | `DataTableSelectableRows | undefined` | No | | Row Selection 사용 유무 - true거나 값이 지정된 경우 각 테이블 로우는 고유 key가 존재해야 합니다. - cellAttributes가 지정된 경우 체크박스 셀을 렌더링할 때 해당 함수를 호출합니다. | | `clickableRows` | `boolean | undefined` | No | | Row 클릭으로 Selection 사용 유무 - 먼저 selectableRows가 true여야 하며, Row 클릭으로도 선택/해제가 가능합니다. - 해당 옵션 사용시 ROW 내부에 버튼, 링크 등 추가적인 클릭이벤트가 있을 경우 stopPropagation 처리가 필요합니다. | | `rowSelection` | `RowSelectState | undefined` | No | | Row 선택 상태 정보 - 이하 두가지 타입으로 로우 셀렉 상태를 받습니다. - ((row: DataType) => boolean): 함수형태로 전달할 경우 해당 조건에 일치하는 row 목록 선택 상태가 업데이트됩니다. - Key[]: 키목록으로 전달할 경우 해당 키를 포함하는 row 목록 선택 상태가 업데이트됩니다. | | `hideSelectAll` | `boolean | undefined` | No | | Row All Select 사용 유무 - selectableRows true가 선행되어야 하며 column의 전체 선택 체크박스 disabled 여부를 선택할 수 있습니다. | | `autoResetRowSelection` | `boolean | undefined` | No | true | 자동 Row 전체 select 상태 초기화 여부 - rows 변경시 자동으로 row 선택이 초기화됩니다. | | `noDataText` | `ReactNode` | No | '데이터가 없습니다' | Table 데이터가 없을 경우 노출되는 텍스트를 지정할 수 있습니다. | | `noDataPadding` | `number | undefined` | No | 120 | Table 데이터가 없을 경우 노출되는 텍스트의 상하 여백입니다. | | `expandableButton` | `boolean | undefined` | No | true | expandableButton 노출 유무 | | `rowExpansion` | `RowSelectState | undefined` | No | | 테이블 로우 확장 상태 - 각 테이블 로우에 고유 key가 존재해야 합니다. | | `onExpandRows` | `((expandedRowKeys: Key[]) => void) | undefined` | No | | 확장된 로우의 키 리스트를 전달합니다. | | `renderExpandedRow` | `DataTableRenderExpandedRow | undefined` | No | | 열 하위에 확장된 Row를 렌더링합니다. - 각 테이블 로우에 고유 key가 존재해야 합니다. - row의 expanded 값으로 row의 확장 여부를 전달합니다. | | `dividerRows` | `((row: DataType, index: number) => boolean) | undefined` | No | | 각 row의 하단에 구분자를 추가할 수 있습니다. - (row, index) => true 이면 해당 row 하단에 구분자가 추가됩니다. | | `rowKeyExtractor` | `((row: DataType, index: number) => Key) | undefined` | No | | Row 고유 key를 지정하는 함수를 전달합니다. 지정되지 않은 경우 index를 사용합니다. | | `rowSelectionKeyExtractor` | `((row: DataType, index: number) => Key) | undefined` | No | | Row의 기능(selectable, expandable)의 동작하는 key를 지정하는 함수를 전달합니다. 지정되지 않은 경우 row.key를 사용합니다. | | `onSortBy` | `((sortBy: string) => void) | undefined` | No | | Sort 이벤트, 대상 Column 아이디를 전달합니다. | | `onSelectRows` | `((selectedRowKeys: Key[], selectedRows: DataTableRowsType) => void) | undefined` | No | | Select 이벤트, 선택된 rows, rows key 리스트를 전달합니다. | | `setContainerRef` | `((node: HTMLDivElement | null) => void) | undefined` | No | | 테이블 컨테이너 ref를 set하기 위한 함수 | | `virtualizedProps` | `{ virtualizedItems: VirtualItem[]; beforePadding: number; afterPadding: number; } | undefined` | No | | | | `ref` | `Ref | undefined` | No | | | ## Subcomponents ### ColumnType #### Props | Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | `id` | `string` | Yes | | 테이블 컬럼 unique id - Row data object와 연결할 key name으로 사용됩니다. | | `cellAttributes` | `CellAttributesProps | undefined` | No | | 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다. - (row: DataType, index: index) => ({ rowSpan: number, hidden: boolean }) | | `cell` | `CellProps | undefined` | No | | 테이블 컬럼에 해당하는 셀 렌더를 지정할 수 있습니다. - 해당 컬럼의 row, cell value, index를 받을 수 있습니다. - 반환값은 ReactNode여야 합니다. - ({ row, value, index }: { row: DataType; value: CellValue; index: number }) => ReactNode | | `text` | `ReactNode` | Yes | | 테이블 컬럼 텍스트 | | `sortable` | `boolean | undefined` | No | | Column Sort 여부 | | `width` | `number | undefined` | No | | Column 너비를 지정할 수 있습니다. - minWidth 속성없이 사용된다면 자동으로 해당 width값으로 minWidth 처리됩니다. - table-layout 'auto'일 경우 - 모든 셀의 너비가 고정된다면 모든 셀의 너비를 더한 값보다 브라우저 크기가 커질때 동적으로 변할 수 있습니다. - 특정 셀의 너비를 필수로 고정해야한다면 모든 셀의 너비를 지정하지 않고 고정할 셀만 너비를 지정하세요. 너비를 지정하지 않은 셀들은 가변으로, 지정된 셀은 너비를 보장할 수 있습니다. | | `minWidth` | `number | undefined` | No | | Column 최소 너비를 지정할 수 있습니다. - width 속성없이 minWidth만 사용된다면 가변 너비를 가지되 최소 너비를 보장합니다. - width 속성과 함께 사용된다면 해당 width값으로 너비를 기본을 가지되 작아질 경우 minWidth 최소 너비를 보장합니다. | | `fixed` | `boolean | undefined` | No | | 가로 스크롤 발생시 Column 고정 여부 - true일 경우 width값 지정이 필수 입니다. - columnGroup이 있을 경우 적용되지 않습니다. | | `align` | `undefined "center" "left" "right"` | No | 'left' | 컬럼 정렬을 지정할 수 있습니다. | | `cellAlign` | `undefined "center" "left" "right"` | No | 'left' | 셀 정렬을 지정할 수 있습니다. - 지정하지 않을 경우 컬럼 정렬값을 따릅니다. | | `disabled` | `boolean | undefined` | No | | 노출과 순서 조정 불가 여부 | ### ColumnGroupType #### Props | Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | `columnGroup` | `DataTableColumnsType | undefined` | No | | 테이블 컬럼 그룹 - 상위 컬럼은 id 속성이 없습니다. - 매칭할 row 데이터 key 속성은 각 group 하위 컬럼 id입니다. | | `cellAttributes` | `CellAttributesProps | undefined` | No | | 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다. - (row: DataType, index: index) => ({ rowSpan: number, hidden: boolean }) | | `cell` | `CellProps | undefined` | No | | 테이블 컬럼에 해당하는 셀 렌더를 지정할 수 있습니다. - 해당 컬럼의 row, cell value, index를 받을 수 있습니다. - 반환값은 ReactNode여야 합니다. - ({ row, value, index }: { row: DataType; value: CellValue; index: number }) => ReactNode | | `text` | `ReactNode` | Yes | | 테이블 컬럼 텍스트 | | `sortable` | `boolean | undefined` | No | | Column Sort 여부 | | `width` | `number | undefined` | No | | Column 너비를 지정할 수 있습니다. - minWidth 속성없이 사용된다면 자동으로 해당 width값으로 minWidth 처리됩니다. - table-layout 'auto'일 경우 - 모든 셀의 너비가 고정된다면 모든 셀의 너비를 더한 값보다 브라우저 크기가 커질때 동적으로 변할 수 있습니다. - 특정 셀의 너비를 필수로 고정해야한다면 모든 셀의 너비를 지정하지 않고 고정할 셀만 너비를 지정하세요. 너비를 지정하지 않은 셀들은 가변으로, 지정된 셀은 너비를 보장할 수 있습니다. | | `minWidth` | `number | undefined` | No | | Column 최소 너비를 지정할 수 있습니다. - width 속성없이 minWidth만 사용된다면 가변 너비를 가지되 최소 너비를 보장합니다. - width 속성과 함께 사용된다면 해당 width값으로 너비를 기본을 가지되 작아질 경우 minWidth 최소 너비를 보장합니다. | | `fixed` | `boolean | undefined` | No | | 가로 스크롤 발생시 Column 고정 여부 - true일 경우 width값 지정이 필수 입니다. - columnGroup이 있을 경우 적용되지 않습니다. | | `align` | `undefined "center" "left" "right"` | No | 'left' | 컬럼 정렬을 지정할 수 있습니다. | | `cellAlign` | `undefined "center" "left" "right"` | No | 'left' | 셀 정렬을 지정할 수 있습니다. - 지정하지 않을 경우 컬럼 정렬값을 따릅니다. | | `disabled` | `boolean | undefined` | No | | 노출과 순서 조정 불가 여부 | ### Rows #### Props | Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | `key` | `Key | undefined` | No | | Key: number | string - 테이블 로우 데이터 unique key값, selectableRows가 true일 경우 필수로 존재해야합니다. - DataType & { key: Key } | | `selectable` | `boolean | undefined` | No | | selectableRows가 true일 경우 체크박스 비활성화 여부를 제어합니다. - DataType & { selectable: boolean } | | `disabled` | `boolean | undefined` | No | | 체크박스 비활성화 및 row의 비활성화 스타일 여부를 제어합니다. - selectable에 우선하므로 disabled 스타일을 적용할 경우 disabled만 지정할 것을 권장드립니다. - DataType & { disabled: boolean } |