# Component/Table/DataTable

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `className` | `string | undefined` | No |  |  |
| `columns` | `DataTableColumnsType<DataType>` | Yes |  | 테이블 컬럼 목록  - useMemo를 통한 메모이제이션된 값을 권장합니다. |
| `rows` | `DataTableRowsType<DataType>` | Yes |  | 테이블 로우 목록  - useMemo를 통한 메모이제이션된 값을 권장합니다. |
| `scroll` | `Scroll | undefined` | No |  | 테이블 스크롤 영역 너비/높이를 지정할 수 있습니다.  - { x: number | string, y: number | string }  - x: 가로 스크롤을 설정하고 스크롤 영역의 너비를 지정합니다.  - y: 세로 스크롤을 설정하고 스크롤 영역의 높이를 지정합니다.  - x 사용시 table-layout이 fixed 처리됩니다.(기본 auto)  - y 기본값은 600px입니다. |
| `loading` | `boolean | undefined` | No | false | 테이블 Loading 여부 |
| `stickyHeader` | `boolean | undefined` | No | true | 테이블 헤더 고정 여부, 세로 스크롤 발생시 자동 고정되며 사용처에서 재정의할 수 있습니다. |
| `sortBy` | `string | undefined` | No |  | Sort 대상 컬럼 아이디 |
| `sortDirection` | `undefined "default" "desc" "asc"` | No |  |  |
| `selectableRows` | `DataTableSelectableRows<DataType> | undefined` | No |  | Row Selection 사용 유무  - true거나 값이 지정된 경우 각 테이블 로우는 고유 key가 존재해야 합니다.  - cellAttributes가 지정된 경우 체크박스 셀을 렌더링할 때 해당 함수를 호출합니다. |
| `clickableRows` | `boolean | undefined` | No |  | Row 클릭으로 Selection 사용 유무  - 먼저 selectableRows가 true여야 하며, Row 클릭으로도 선택/해제가 가능합니다.  - 해당 옵션 사용시 ROW 내부에 버튼, 링크 등 추가적인 클릭이벤트가 있을 경우 stopPropagation 처리가 필요합니다. |
| `rowSelection` | `RowSelectState<DataType> | 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 데이터가 없을 경우 노출되는 텍스트의 상하 여백입니다. |
| `resize` | `boolean | undefined` | No | false | 테이블의 컬럼 리사이즈 활성화 여부   - width값 지정된 컬럼은 resize가 불가합니다.   - table-layout이 fixed 처리됩니다.(기본 auto) |
| `cellHoverStyle` | `boolean | undefined` | No | true | 테이블 로우 호버 스타일 사용 유무   - column cellAttributes 스타일 커스텀시 로우 전체 호버 스타일을 제한할 수 있습니다.   - rowspan to highlight all relevant rows 이슈 처리전 임시 props으로 사용할 수 있습니다. |
| `cellDisabledStyle` | `boolean | undefined` | No | true | 테이블 로우 disabled 스타일 사용 유무   - column cellAttributes 스타일 커스텀시 로우 전체 disabled 스타일을 제한할 수 있습니다. |
| `expandableButton` | `boolean | undefined` | No | true | expandableButton 노출 유무 |
| `rowExpansion` | `RowSelectState<DataType> | undefined` | No |  | 테이블 로우 확장 상태  - 각 테이블 로우에 고유 key가 존재해야 합니다. |
| `onExpandRows` | `((expandedRowKeys: Key[]) => void) | undefined` | No |  | 확장된 로우의 키 리스트를 전달합니다. |
| `renderExpandedRow` | `DataTableRenderExpandedRow<DataType> | undefined` | No |  | 열 하위에 확장된 Row를 렌더링합니다.  - 각 테이블 로우에 고유 key가 존재해야 합니다.  - row의 expanded 값으로 row의 확장 여부를 전달합니다. |
| `dividerRows` | `((row: DataType, index: number) => boolean) | undefined` | No |  | 각 row의 하단에 구분자를 추가할 수 있습니다.   - (row, index) => true 이면 해당 row 하단에 구분자가 추가됩니다. |
| `rowColor` | `((row: DataType, index: number) => string | undefined) | undefined` | No |  | Row 배경색을 지정하는 함수 혹은 컬러값을 전달합니다. hover는 auto code 정책을 따릅니다. |
| `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<DataType>) => 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<HTMLTableElement> | undefined` | No |  |  |


## Subcomponents


### ColumnType



#### Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `id` | `string` | Yes |  | 테이블 컬럼 unique id  - Row data object와 연결할 key name으로 사용됩니다. |
| `cellAttributes` | `CellAttributesProps<DataType> | undefined` | No |  | 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다.  - (row: DataType, index: index) => ({ rowSpan: number, hidden: boolean }) |
| `cell` | `CellProps<DataType> | 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<DataType> | undefined` | No |  | 테이블 컬럼 그룹  - 상위 컬럼은 id 속성이 없습니다.  - 매칭할 row 데이터 key 속성은 각 group 하위 컬럼 id입니다. |
| `cellAttributes` | `CellAttributesProps<DataType> | undefined` | No |  | 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다.  - (row: DataType, index: index) => ({ rowSpan: number, hidden: boolean }) |
| `cell` | `CellProps<DataType> | 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 } |
