@croquiscom/pds 7.5.0 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @croquiscom/pds
 
+## 8.1.0
+
+### Minor Changes
+
+- d9be52c: ## 신규 색상 추가
+  - `colors`에 zigzag_pink_new 컬러가 추가 되었습니다
+  - `semantic_colors`에 graph 컬러가 추가 되었습니다
+
+### Patch Changes
+
+- 0b1735a: TableCol 스타일만 참조하도록 변경
+
+  Table 마이그레이션 스크립트변경 안되는 케이스추가
+
+## 8.0.0
+
+### Major Changes
+
+- d9c5c90: 테이블 컴포넌트 분리
+
 ## 7.5.0
 
 ### Minor Changes

package/dist/components/column-view-controller/ColumnViewController.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
-import { TableColumnType } from '../table';
-export interface TableColumnViewType<DataType> extends TableColumnType<DataType> {
+import { DataTableColumnType } from '../table';
+export interface TableColumnViewType<DataType> extends DataTableColumnType<DataType> {
     isOn?: boolean;
 }
 export interface ColumnViewControllerProps<DataType> {

package/dist/components/table/DataTable.d.ts

@@ -0,0 +1,102 @@
+import React, { Key, PropsWithChildren, ReactElement, ReactNode, Ref } from 'react';
+import { RowSelectState, Scroll, SortDirection, DataTableColumnsType, DataTableRowsType } from './types';
+export interface DataTableProps<DataType> {
+    className?: string;
+    /**
+     * 테이블 컬럼 목록
+     *  - useMemo를 통한 메모이제이션된 값을 권장합니다.
+     */
+    columns: DataTableColumnsType<DataType>;
+    /**
+     * 테이블 로우 목록
+     *  - useMemo를 통한 메모이제이션된 값을 권장합니다.
+     */
+    rows: DataTableRowsType<DataType>;
+    /**
+     * 테이블 스크롤 영역 너비/높이를 지정할 수 있습니다.
+     *  - { x: number | string, y: number | string }
+     *  - x: 가로 스크롤을 설정하고 스크롤 영역의 너비를 지정합니다.
+     *  - y: 세로 스크롤을 설정하고 스크롤 영역의 높이를 지정합니다.
+     *  - x 사용시 table-layout이 fixed 처리됩니다.(기본 auto)
+     */
+    scroll?: Scroll;
+    /**
+     * 테이블 Loading 여부
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 테이블 헤더 고정 여부, 세로 스크롤 발생시 고정됩니다.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Sort 대상 컬럼 아이디
+     */
+    sortBy?: string;
+    /**
+     * Sort 정렬 기준
+     */
+    sortDirection?: SortDirection;
+    /**
+     * Row Selection 사용 유무
+     *  - true일 경우 각 테이블 로우는 고유 key가 존재해야 합니다.
+     */
+    selectableRows?: boolean;
+    /**
+     * Row 클릭으로 Selection 사용 유무
+     *  - 먼저 selectableRows가 true여야 하며, Row 클릭으로도 선택/해제가 가능합니다.
+     *  - 해당 옵션 사용시 ROW 내부에 버튼, 링크 등 추가적인 클릭이벤트가 있을 경우 stopPropagation 처리가 필요합니다.
+     */
+    clickableRows?: boolean;
+    /**
+     * Row 선택 상태 정보
+     *  - 이하 두가지 타입으로 로우 셀렉 상태를 받습니다.
+     *  - ((row: DataType) => boolean): 함수형태로 전달할 경우 해당 조건에 일치하는 row 목록 선택 상태가 업데이트됩니다.
+     *  - Key[]: 키목록으로 전달할 경우 해당 키를 포함하는 row 목록 선택 상태가 업데이트됩니다.
+     */
+    rowSelection?: RowSelectState<DataType>;
+    /**
+     * Row All Select 사용 유무
+     *  - selectableRows true가 선행되어야 하며 column의 전체 선택 체크박스 disabled 여부를 선택할 수 있습니다.
+     */
+    hideSelectAll?: boolean;
+    /**
+     * 자동 Row 전체 select 상태 초기화 여부
+     *  - rows 변경시 자동으로 row 선택이 초기화됩니다.
+     * @default true
+     */
+    autoResetRowSelection?: boolean;
+    /**
+     * Table 데이터가 없을 경우 노출되는 텍스트를 지정할 수 있습니다.
+     * @default '데이터가 없습니다'
+     */
+    noDataText?: ReactNode;
+    /**
+     * 테이블의 컬럼 리사이즈 활성화 여부
+     *   - width값 지정된 컬럼은 resize가 불가합니다.
+     *   - table-layout이 fixed 처리됩니다.(기본 auto)
+     * @default false
+     */
+    resize?: boolean;
+    /**
+     * 테이블 로우 호버 스타일 사용 유무
+     *   - column cellAttributes 스타일 커스텀시 로우 전체 호버 스타일을 제한할 수 있습니다.
+     *   - rowspan to highlight all relevant rows 이슈 처리전 임시 props으로 사용할 수 있습니다.
+     * @default true
+     */
+    cellHoverStyle?: boolean;
+    /**
+     * Sort 이벤트, 대상 Column 아이디를 전달합니다.
+     */
+    onSortBy?: (sortBy: string) => void;
+    /**
+     * Select 이벤트, 선택된 rows, rows key 리스트를 전달합니다.
+     */
+    onSelectRows?: (selectedRowKeys: Key[], selectedRows: DataTableRowsType<DataType>) => void;
+}
+export declare const DataTable: <DataType extends object = any>(props: DataTableProps<DataType> & {
+    children?: React.ReactNode;
+} & {
+    ref?: Ref<HTMLTableElement>;
+}) => ReactElement;

package/dist/components/table/DataTable.stories.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(<DataType_1 extends object = any>(props: import("./DataTable").DataTableProps<DataType_1> & {
+    children?: React.ReactNode;
+} & {
+    ref?: React.Ref<HTMLTableElement>;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;
+export default _default;
+export declare const Base: any;
+export declare const ColumnAlign: any;
+export declare const ColumnWidthMinWidth: any;
+export declare const CustomColumnCell: any;
+export declare const CustomRowCell: any;
+export declare const CustomRowCellStyle: any;
+export declare const Loading: any;
+export declare const Resize: any;
+export declare const NoData: any;
+export declare const CustomNoDataText: any;
+export declare const ColumnGroup: any;
+export declare const CellSpan: any;
+export declare const ColumnFixed: any;
+export declare const StickyHeader: any;
+export declare const Scroll: any;
+export declare const Selection: any;
+export declare const ClickableSelection: any;
+export declare const AutoResetRowSelectOn: any;
+export declare const AutoResetRowSelectOff: any;
+export declare const BeforehandSelectionByKey: any;
+export declare const BeforehandSelectionByFunction: any;
+export declare const Sort: any;
+export declare const WithPagination: any;
+export declare const Disabled: any;

package/dist/components/table/DataTableHeader.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DataTableProps } from './DataTable';
+import { SelectRowsAction, DataTableRowsType } from './types';
+export interface DataTableHeaderProps<DataType> extends Pick<DataTableProps<DataType>, 'columns' | 'rows' | 'stickyHeader' | 'sortBy' | 'sortDirection' | 'onSortBy' | 'selectableRows' | 'hideSelectAll' | 'resize'> {
+    allSelected?: boolean;
+    selectedRows?: DataTableRowsType<DataType>;
+    onSelectedRows?: (action: SelectRowsAction<DataType>) => void;
+}
+export declare const DataTableHeader: <DataType extends object = any>({ columns, rows, stickyHeader, sortBy, sortDirection, allSelected, selectedRows, selectableRows, hideSelectAll, resize, onSelectedRows, onSortBy, }: DataTableHeaderProps<DataType>) => JSX.Element;

package/dist/components/table/DataTableRows.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { DataTableProps } from './DataTable';
+import { SelectRowAction, DataTableRowsType } from './types';
+interface DataTableRowsProps<DataType> extends Pick<DataTableProps<DataType>, 'columns' | 'rows' | 'noDataText' | 'loading' | 'selectableRows' | 'clickableRows' | 'cellHoverStyle' | 'resize'> {
+    tableContainerAttribute: number;
+    allSelected?: boolean;
+    selectedRows?: DataTableRowsType<DataType>;
+    onSelectedRow?: (action: SelectRowAction<DataType>) => void;
+}
+export declare const DataTableRows: <DataType extends object = any>({ columns, rows, loading, selectableRows, clickableRows, selectedRows, noDataText, cellHoverStyle, tableContainerAttribute, resize, onSelectedRow, }: DataTableRowsProps<DataType>) => JSX.Element;
+export {};

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

@@ -1,17 +1,7 @@
-import React, { Key, ReactElement, PropsWithChildren, Ref, ReactNode } from 'react';
-import { SortDirection, Scroll, TableColumnsType, TableRowsType, RowSelectState } from './types';
-export interface TableProps<DataType> {
-    className?: string;
-    /**
-     * 테이블 컬럼 목록
-     *  - useMemo를 통한 메모이제이션된 값을 권장합니다.
-     */
-    columns: TableColumnsType<DataType>;
-    /**
-     * 테이블 로우 목록
-     *  - useMemo를 통한 메모이제이션된 값을 권장합니다.
-     */
-    rows: TableRowsType<DataType>;
+import React, { TableHTMLAttributes } from 'react';
+import { Scroll } from '../table/types';
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    children: React.ReactNode;
     /**
      * 테이블 스크롤 영역 너비/높이를 지정할 수 있습니다.
      *  - { x: number | string, y: number | string }
@@ -20,58 +10,6 @@ export interface TableProps<DataType> {
      *  - x 사용시 table-layout이 fixed 처리됩니다.(기본 auto)
      */
     scroll?: Scroll;
-    /**
-     * 테이블 Loading 여부
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * 테이블 헤더 고정 여부, 세로 스크롤 발생시 고정됩니다.
-     * @default false
-     */
-    stickyHeader?: boolean;
-    /**
-     * Sort 대상 컬럼 아이디
-     */
-    sortBy?: string;
-    /**
-     * Sort 정렬 기준
-     */
-    sortDirection?: SortDirection;
-    /**
-     * Row Selection 사용 유무
-     *  - true일 경우 각 테이블 로우는 고유 key가 존재해야 합니다.
-     */
-    selectableRows?: boolean;
-    /**
-     * Row 클릭으로 Selection 사용 유무
-     *  - 먼저 selectableRows가 true여야 하며, Row 클릭으로도 선택/해제가 가능합니다.
-     *  - 해당 옵션 사용시 ROW 내부에 버튼, 링크 등 추가적인 클릭이벤트가 있을 경우 stopPropagation 처리가 필요합니다.
-     */
-    clickableRows?: boolean;
-    /**
-     * Row 선택 상태 정보
-     *  - 이하 두가지 타입으로 로우 셀렉 상태를 받습니다.
-     *  - ((row: DataType) => boolean): 함수형태로 전달할 경우 해당 조건에 일치하는 row 목록 선택 상태가 업데이트됩니다.
-     *  - Key[]: 키목록으로 전달할 경우 해당 키를 포함하는 row 목록 선택 상태가 업데이트됩니다.
-     */
-    rowSelection?: RowSelectState<DataType>;
-    /**
-     * Row All Select 사용 유무
-     *  - selectableRows true가 선행되어야 하며 column의 전체 선택 체크박스 disabled 여부를 선택할 수 있습니다.
-     */
-    hideSelectAll?: boolean;
-    /**
-     * 자동 Row 전체 select 상태 초기화 여부
-     *  - rows 변경시 자동으로 row 선택이 초기화됩니다.
-     * @default true
-     */
-    autoResetRowSelection?: boolean;
-    /**
-     * Table 데이터가 없을 경우 노출되는 텍스트를 지정할 수 있습니다.
-     * @default '데이터가 없습니다'
-     */
-    noDataText?: ReactNode;
     /**
      * 테이블의 컬럼 리사이즈 활성화 여부
      *   - width값 지정된 컬럼은 resize가 불가합니다.
@@ -79,24 +17,6 @@ export interface TableProps<DataType> {
      * @default false
      */
     resize?: boolean;
-    /**
-     * 테이블 로우 호버 스타일 사용 유무
-     *   - column cellAttributes 스타일 커스텀시 로우 전체 호버 스타일을 제한할 수 있습니다.
-     *   - rowspan to highlight all relevant rows 이슈 처리전 임시 props으로 사용할 수 있습니다.
-     * @default true
-     */
-    cellHoverStyle?: boolean;
-    /**
-     * Sort 이벤트, 대상 Column 아이디를 전달합니다.
-     */
-    onSortBy?: (sortBy: string) => void;
-    /**
-     * Select 이벤트, 선택된 rows, rows key 리스트를 전달합니다.
-     */
-    onSelectRows?: (selectedRowKeys: Key[], selectedRows: TableRowsType<DataType>) => void;
+    className?: string;
 }
-export declare const Table: <DataType extends object = any>(props: TableProps<DataType> & {
-    children?: React.ReactNode;
-} & {
-    ref?: Ref<HTMLTableElement>;
-}) => ReactElement;
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;

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

@@ -1,32 +1,5 @@
 import React from 'react';
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<(<DataType_1 extends object = any>(props: import("./Table").TableProps<DataType_1> & {
-    children?: React.ReactNode;
-} & {
-    ref?: React.Ref<HTMLTableElement>;
-}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./Table").TableProps & React.RefAttributes<HTMLTableElement>>>;
 export default _default;
 export declare const Base: any;
-export declare const ColumnAlign: any;
-export declare const ColumnWidthMinWidth: any;
-export declare const CustomColumnCell: any;
-export declare const CustomRowCell: any;
-export declare const CustomRowCellStyle: any;
-export declare const Loading: any;
-export declare const Resize: any;
-export declare const NoData: any;
-export declare const CustomNoDataText: any;
-export declare const ColumnGroup: any;
-export declare const CellSpan: any;
-export declare const ColumnFixed: any;
-export declare const StickyHeader: any;
-export declare const Scroll: any;
-export declare const Selection: any;
-export declare const ClickableSelection: any;
-export declare const AutoResetRowSelectOn: any;
-export declare const AutoResetRowSelectOff: any;
-export declare const BeforehandSelectionByKey: any;
-export declare const BeforehandSelectionByFunction: any;
-export declare const Sort: any;
-export declare const WithPagination: any;
-export declare const Disabled: any;

package/dist/components/table/TableCell.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, TdHTMLAttributes } from 'react';
+import { ColumnAlign } from '../table/types';
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    children: ReactNode;
+    id?: string;
+    fixed?: boolean;
+    fixedColWidth?: number;
+    isEmpty?: boolean;
+    disabled?: boolean;
+    align?: ColumnAlign;
+    resize?: boolean;
+    colSpan?: number;
+}
+export declare const TableCell: ({ children, className, colSpan, id, ...props }: TableCellProps) => JSX.Element;
+export {};

package/dist/components/table/TableCol.d.ts

@@ -1,20 +1,19 @@
-import React from 'react';
-import { TableColumnBase, SortDirection } from './types';
-export declare const COLUMN_MIN_WIDTH = 48;
-export declare const COLUMN_MIN_HEIGHT = 48;
-interface TableColProps extends TableColumnBase {
-    id: string;
+import React, { ReactNode, ThHTMLAttributes } from 'react';
+import { TableSortIndicatorProps } from '../table/TableSortIndicator';
+import { ColumnAlign } from '../table/types';
+interface TableColProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    children: ReactNode;
+    id?: string;
+    width?: number;
+    fixed?: boolean;
     fixedColWidth?: number;
-    groupColumn?: boolean;
     stickyHeader?: boolean;
-    sortBy?: string;
-    sortDirection?: SortDirection;
+    groupColumn?: boolean;
+    sortable?: boolean;
     resize?: boolean;
-    onClick?: (sortBy: string) => void;
+    align?: ColumnAlign;
+    sortProps?: TableSortIndicatorProps;
+    onClick?: () => void;
 }
 export declare const TableCol: React.ForwardRefExoticComponent<TableColProps & React.RefAttributes<HTMLTableCellElement>>;
-export declare const TableColumn: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType<any>;
-} & Omit<TableColProps, "id" | "text">, React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
 export {};

package/dist/components/table/TableColGroup.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface TableColGroupProps {
+    cols: Array<{
+        width?: number;
+        minWidth?: number;
+    }>;
+}
+export declare const TableColGroup: ({ cols }: TableColGroupProps) => JSX.Element;
+export {};

package/dist/components/table/TableContainer.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+import { Scroll } from '../table/types';
+interface TableContainerProps {
+    children: ReactNode;
+    scroll?: Scroll;
+    className?: string;
+}
+export declare const TableContainer: React.ForwardRefExoticComponent<TableContainerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/table/TableRow.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode, TableHTMLAttributes } from 'react';
+interface TableRowProps extends TableHTMLAttributes<HTMLTableRowElement> {
+    children: ReactNode;
+    selected?: boolean;
+    isEmpty?: boolean;
+    cellHoverStyle?: boolean;
+    clickable?: boolean;
+    selectable?: boolean;
+    disabled?: boolean;
+}
+export declare const TableRow: ({ children, className, ...props }: TableRowProps) => JSX.Element;
+export {};

package/dist/components/table/TableSortIndicator.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { SortDirection } from './types';
-interface TableSortIndicatorProps {
+export interface TableSortIndicatorProps {
     isSorted: boolean;
     sortDirection: SortDirection;
 }
 export declare const TableSortIndicator: ({ isSorted, sortDirection }: TableSortIndicatorProps) => JSX.Element;
-export {};

package/dist/components/table/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const COLUMN_MIN_WIDTH = 48;
+export declare const COLUMN_MIN_HEIGHT = 48;

package/dist/components/table/index.d.ts

@@ -1,2 +1,8 @@
-export * from './Table';
+export * from './DataTable';
 export * from './types';
+export * from './TableContainer';
+export * from './Table';
+export * from './TableColGroup';
+export * from './TableRow';
+export * from './TableCol';
+export * from './TableCell';

package/dist/components/table/reducer.d.ts

@@ -1,2 +1,2 @@
-import { TableState, TableAction } from './types';
-export declare function tableReducer<DataType>(state: TableState<DataType>, action: TableAction<DataType>): TableState<DataType>;
+import { DataTableState, DataTableAction } from './types';
+export declare function dataTableReducer<DataType>(state: DataTableState<DataType>, action: DataTableAction<DataType>): DataTableState<DataType>;

package/dist/components/table/storybook-helper/custom.argTypes.d.ts

@@ -1,7 +1,7 @@
 import { Key } from 'react';
-import { TableColumnBase, TableColumnsType, CellProps, CellAttributesProps } from '../types';
+import { DataTableColumnBase, DataTableColumnsType, CellProps, CellAttributesProps } from '../types';
 /** storybook table type helper용 컴포넌트 */
-export interface HelperTableColumnTypeProps<DataType> extends TableColumnBase {
+export interface HelperTableColumnTypeProps<DataType> extends DataTableColumnBase {
     /**
      * 테이블 컬럼 unique id
      *  - Row data object와 연결할 key name으로 사용됩니다.
@@ -21,13 +21,13 @@ export interface HelperTableColumnTypeProps<DataType> extends TableColumnBase {
     cell?: CellProps<DataType>;
 }
 export declare const HelperTableColumnType: <DataType extends object = any>(props: HelperTableColumnTypeProps<DataType>) => any;
-export interface HelperTableColumnGroupTypeProps<DataType> extends TableColumnBase {
+export interface HelperTableColumnGroupTypeProps<DataType> extends DataTableColumnBase {
     /**
      * 테이블 컬럼 그룹
      *  - 상위 컬럼은 id 속성이 없습니다.
      *  - 매칭할 row 데이터 key 속성은 각 group 하위 컬럼 id입니다.
      */
-    columnGroup?: TableColumnsType<DataType>;
+    columnGroup?: DataTableColumnsType<DataType>;
     /**
      * 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다.
      *  - (row: DataType, index: index) => ({ rowSpan: number, hidden: boolean })

package/dist/components/table/storybook-helper/sampleData.d.ts

@@ -1,5 +1,5 @@
 import { Key } from 'react';
-import { TableColumnsType, TableRowsType } from '../index';
+import { DataTableColumnsType, DataTableRowsType } from '../index';
 export interface DataType {
     key?: Key;
     disabled?: boolean;
@@ -12,19 +12,19 @@ export interface DataType {
     price: string;
     amount: number;
 }
-export declare const columns: TableColumnsType<DataType>;
-export declare const rows: TableRowsType<DataType>;
-export declare const customColumns: TableColumnsType<DataType>;
-export declare const customWidthColumns: TableColumnsType<DataType>;
-export declare const customColumnCell: TableColumnsType<DataType>;
-export declare const customRowCellColumns: TableColumnsType<DataType>;
-export declare const groupColumns: TableColumnsType<DataType>;
-export declare const groupRows: TableRowsType<DataType>;
-export declare const SpanColumns: TableColumnsType<DataType>;
-export declare const SpanRows: TableRowsType<DataType>;
-export declare const fixedColumns: TableColumnsType<DataType>;
-export declare const selectionRows: TableRowsType<DataType>;
-export declare const selectionRows2: TableRowsType<DataType>;
-export declare const sortColumns: TableColumnsType<DataType>;
-export declare const customRowStyleColumns: TableColumnsType<DataType>;
-export declare const comprehensiveCustomColumns: TableColumnsType<DataType>;
+export declare const columns: DataTableColumnsType<DataType>;
+export declare const rows: DataTableRowsType<DataType>;
+export declare const customColumns: DataTableColumnsType<DataType>;
+export declare const customWidthColumns: DataTableColumnsType<DataType>;
+export declare const customColumnCell: DataTableColumnsType<DataType>;
+export declare const customRowCellColumns: DataTableColumnsType<DataType>;
+export declare const groupColumns: DataTableColumnsType<DataType>;
+export declare const groupRows: DataTableRowsType<DataType>;
+export declare const SpanColumns: DataTableColumnsType<DataType>;
+export declare const SpanRows: DataTableRowsType<DataType>;
+export declare const fixedColumns: DataTableColumnsType<DataType>;
+export declare const selectionRows: DataTableRowsType<DataType>;
+export declare const selectionRows2: DataTableRowsType<DataType>;
+export declare const sortColumns: DataTableColumnsType<DataType>;
+export declare const customRowStyleColumns: DataTableColumnsType<DataType>;
+export declare const comprehensiveCustomColumns: DataTableColumnsType<DataType>;

package/dist/components/table/styles.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ColumnAlign } from './types';
+export declare const StyledTableCol: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+} & {
+    fixed?: boolean;
+    fixedColWidth?: number;
+    stickyHeader?: boolean;
+    groupColumn?: boolean;
+    sortable?: boolean;
+    resize?: boolean;
+    align?: ColumnAlign;
+}, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;

package/dist/components/table/types.d.ts

@@ -19,7 +19,7 @@ export type CellProps<DataType> = ({ row, value, index, }: {
     value: CellValue<any>;
     index: number;
 }) => ReactNode;
-export type TableColumnBase = {
+export type DataTableColumnBase = {
     /**
      * 테이블 컬럼 텍스트
      */
@@ -60,7 +60,7 @@ export type TableColumnBase = {
      */
     cellAlign?: ColumnAlign;
 };
-export interface TableColumnType<DataType> extends TableColumnBase {
+export interface DataTableColumnType<DataType> extends DataTableColumnBase {
     id: Extract<keyof DataType, string>;
     /**
      * 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다.
@@ -75,11 +75,11 @@ export interface TableColumnType<DataType> extends TableColumnBase {
      */
     cell?: CellProps<DataType>;
 }
-export interface TableColumnGroupType<DataType> extends Omit<TableColumnType<DataType>, 'id'> {
-    columnGroup: TableColumnsType<DataType>;
+export interface DataTableColumnGroupType<DataType> extends Omit<DataTableColumnType<DataType>, 'id'> {
+    columnGroup: DataTableColumnsType<DataType>;
 }
-export type TableColumnsType<DataType = unknown> = Array<TableColumnType<DataType> | TableColumnGroupType<DataType>>;
-export type TableRowType<DataType> = DataType & {
+export type DataTableColumnsType<DataType = unknown> = Array<DataTableColumnType<DataType> | DataTableColumnGroupType<DataType>>;
+export type DataTableRowType<DataType> = DataType & {
     key?: Key;
     selectable?: boolean;
     /**
@@ -87,34 +87,34 @@ export type TableRowType<DataType> = DataType & {
      */
     disabled?: boolean;
 };
-export type TableRowsType<DataType = unknown> = Array<TableRowType<DataType>>;
-export interface TableState<DataType = unknown> {
+export type DataTableRowsType<DataType = unknown> = Array<DataTableRowType<DataType>>;
+export interface DataTableState<DataType = unknown> {
     allSelected?: boolean;
     selectedRowsKey?: Key[];
-    selectedRows?: TableRowsType<DataType>;
+    selectedRows?: DataTableRowsType<DataType>;
     emitSelectedEvent?: boolean;
     autoResetRowSelection?: boolean;
 }
 export interface SelectRowsAction<DataType> {
     type: 'SELECT_ROWS';
-    rows: TableRowsType<DataType>;
+    rows: DataTableRowsType<DataType>;
 }
 export interface SelectRowAction<DataType> {
     type: 'SELECT_ROW';
-    rows: TableRowsType<DataType>;
-    row: TableRowType<DataType>;
+    rows: DataTableRowsType<DataType>;
+    row: DataTableRowType<DataType>;
     selected: boolean;
 }
 export interface SelectControlledRowAction<DataType> {
     type: 'SELECT_CONTROLLED_ROW';
-    controlledRows: TableRowsType<DataType>;
-    rows: TableRowsType<DataType>;
+    controlledRows: DataTableRowsType<DataType>;
+    rows: DataTableRowsType<DataType>;
 }
 export interface ResetSelectRowsAction {
     type: 'RESET_SELECTED_ROWS';
 }
 export interface CheckAllSelectedRowsAction<DataType> {
     type: 'CHECK_ALL_SELECTED_ROWS';
-    rows: TableRowsType<DataType>;
+    rows: DataTableRowsType<DataType>;
 }
-export type TableAction<DataType> = SelectRowsAction<DataType> | SelectRowAction<DataType> | SelectControlledRowAction<DataType> | ResetSelectRowsAction | CheckAllSelectedRowsAction<DataType>;
+export type DataTableAction<DataType> = SelectRowsAction<DataType> | SelectRowAction<DataType> | SelectControlledRowAction<DataType> | ResetSelectRowsAction | CheckAllSelectedRowsAction<DataType>;

package/dist/components/table/utils.d.ts

@@ -1,10 +1,10 @@
 import { Key } from 'react';
-import { TableColumnsType, TableRowsType } from './types';
+import { DataTableColumnsType, DataTableRowsType } from './types';
 export interface UseTableColumnsProps<DataType> {
-    columns: TableColumnsType<DataType>;
+    columns: DataTableColumnsType<DataType>;
 }
 export declare function getColGroup<DataType>({ columns }: UseTableColumnsProps<DataType>): any[];
-export declare function getGroupColumns<DataType>({ columns }: UseTableColumnsProps<DataType>): TableColumnsType<DataType>;
-export declare function getFlattenColumns<DataType>({ columns }: UseTableColumnsProps<DataType>): TableColumnsType<DataType>;
-export declare function getFixedMergeColumn<DataType>(columns: TableColumnsType<DataType>, selectableRows: boolean, columnCount: number): number;
-export declare function getRowsKey<DataType>(rows: TableRowsType<DataType>): Key[];
+export declare function getGroupColumns<DataType>({ columns }: UseTableColumnsProps<DataType>): DataTableColumnsType<DataType>;
+export declare function getFlattenColumns<DataType>({ columns, }: UseTableColumnsProps<DataType>): DataTableColumnsType<DataType>;
+export declare function getFixedMergeColumn<DataType>(columns: DataTableColumnsType<DataType>, selectableRows: boolean, columnCount: number): number;
+export declare function getRowsKey<DataType>(rows: DataTableRowsType<DataType>): Key[];