@ceed/cds 1.29.0 → 1.29.1

package/dist/components/data-display/Chip.md

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Chip 컴포넌트는 입력, 속성, 액션을 컴팩트하게 표현하는 UI 요소입니다. 태그, 필터, 연락처, 카테고리 등을 나타내는 데 주로 사용됩니다. 텍스트, 아이콘, 아바타와 함께 사용할 수 있으며, 클릭하거나 삭제할 수 있는 인터랙티브한 기능을 제공합니다.
+The Chip component is a compact UI element used to represent inputs, attributes, and actions. It is commonly used for tags, filters, contacts, categories, and similar items. It can be used with text, icons, or avatars, and provides interactive behaviors such as clicking or deleting.
 
 ```tsx
 <Chip {...args} />
@@ -28,7 +28,10 @@ function MyComponent() {
       <Chip clickable onClick={() => console.log('clicked')}>
         Clickable Chip
       </Chip>
-      <Chip endDecorator={<CloseIcon />} onClick={() => console.log('delete')}>
+      <Chip
+        endDecorator={<CloseIcon />}
+        onClick={() => console.log('delete')}
+      >
         Deletable Chip
       </Chip>
     </div>
@@ -40,7 +43,7 @@ function MyComponent() {
 
 ### Basic Usage
 
-기본적인 Chip 사용법입니다.
+Basic Chip usage.
 
 ```tsx
 <div style={{
@@ -56,7 +59,7 @@ function MyComponent() {
 
 ### Colors
 
-다양한 색상을 적용할 수 있습니다.
+You can apply various colors.
 
 ```tsx
 <div style={{
@@ -74,7 +77,7 @@ function MyComponent() {
 
 ### Variants
 
-다양한 스타일 변형을 제공합니다.
+Provides a variety of style variants.
 
 ```tsx
 <div style={{
@@ -91,7 +94,7 @@ function MyComponent() {
 
 ### Sizes
 
-크기를 조절할 수 있습니다.
+You can adjust the size.
 
 ```tsx
 <div style={{
@@ -108,7 +111,7 @@ function MyComponent() {
 
 ### With Icons
 
-아이콘과 함께 사용할 수 있습니다.
+Can be used with icons.
 
 ```tsx
 <div style={{
@@ -126,7 +129,7 @@ function MyComponent() {
 
 ### With Avatar
 
-아바타와 함께 사용하여 사용자를 나타낼 수 있습니다.
+Can be used with an avatar to represent a user.
 
 ```tsx
 <div style={{
@@ -141,7 +144,7 @@ function MyComponent() {
 
 ### Deletable
 
-삭제 기능을 가진 Chip입니다. 클릭하면 목록에서 제거됩니다.
+A Chip with delete functionality. Clicking it removes it from the list.
 
 ```tsx
 <div style={{
@@ -157,7 +160,7 @@ function MyComponent() {
 
 ### Clickable
 
-클릭 가능한 Chip으로 필터나 탭으로 사용할 수 있습니다.
+A clickable Chip that can be used as a filter or tab.
 
 ```tsx
 <div style={{
@@ -177,7 +180,7 @@ function MyComponent() {
 
 ### Clickable Actions
 
-클릭하여 다양한 액션을 수행할 수 있습니다.
+Can trigger various actions when clicked.
 
 ```tsx
 <div style={{
@@ -197,7 +200,7 @@ function MyComponent() {
 
 ### States
 
-다양한 상태를 표현할 수 있습니다.
+Can represent various states.
 
 ```tsx
 <div style={{
@@ -262,7 +265,11 @@ function MyComponent() {
 ### Filter Controls
 
 ```tsx
-<Chip clickable variant={isActive ? 'solid' : 'outlined'} onClick={() => setFilter('all')}>
+<Chip
+  clickable
+  variant={isActive ? 'solid' : 'outlined'}
+  onClick={() => setFilter('all')}
+>
   All Items
 </Chip>
 ```
@@ -270,21 +277,43 @@ function MyComponent() {
 ### Contact Pills
 
 ```tsx
-<Chip startDecorator={<Avatar size="sm" />} endDecorator={<CloseIcon />} onDelete={() => removeContact(id)}>
+<Chip
+  startDecorator={<Avatar size="sm" />}
+  endDecorator={<CloseIcon />}
+  onDelete={() => removeContact(id)}
+>
   John Doe
 </Chip>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop             | Type                                                           | Default     | Description                            |
+| ---------------- | -------------------------------------------------------------- | ----------- | -------------------------------------- |
+| `children`       | `ReactNode`                                                    | -           | Chip content (text, icons)             |
+| `variant`        | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'soft'`    | Visual style                           |
+| `size`           | `'sm' \| 'md' \| 'lg'`                                         | `'md'`      | Chip size                              |
+| `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme                           |
+| `disabled`       | `boolean`                                                      | `false`     | Disables the chip                      |
+| `onClick`        | `(event: MouseEvent) => void`                                  | -           | Click handler (makes chip interactive) |
+| `startDecorator` | `ReactNode`                                                    | -           | Content before the chip text           |
+| `endDecorator`   | `ReactNode`                                                    | -           | Content after the chip text            |
+| `sx`             | `SxProps`                                                      | -           | Custom styles using the MUI system     |
+
+> **Note**: Chip also accepts all Joy UI Chip props and Framer Motion props.
+
 ## Best Practices
 
-1. **적절한 크기**: 콘텐츠에 맞는 적절한 크기를 선택하세요. 긴 텍스트는 피하고 간결하게 표현하세요.
+1. **Use appropriate sizes**: Choose sizes that fit the content. Keep text concise.
 
-2. **일관된 스타일**: 같은 맥락에서는 일관된 variant와 color를 사용하세요.
+2. **Be consistent**: Use the same variant and color within the same context.
 
-3. **명확한 액션**: clickable이나 deletable 기능을 사용할 때는 사용자에게 명확한 피드백을 제공하세요.
+3. **Clear actions**: When using clickable or deletable behavior, provide clear feedback to the user.
 
-4. **접근성**: 키보드 탐색이 가능하도록 하고, 스크린 리더를 위한 적절한 레이블을 제공하세요.
+4. **Accessibility**: Support keyboard navigation and provide appropriate labels for screen readers.
 
-5. **적절한 간격**: 여러 Chip을 나열할 때는 적절한 간격을 두어 가독성을 높이세요.
+5. **Appropriate spacing**: Use proper spacing when listing multiple Chips to improve readability.
 
-6. **색상 의미**: 색상은 의미를 가지도록 사용하세요 (성공은 초록색, 경고는 주황색 등).
+6. **Semantic color usage**: Use colors with clear meaning, such as green for success and orange for warnings.

package/dist/components/data-display/DataTable.md

@@ -1726,6 +1726,99 @@ This is inspector: {selectedRowId}
 </Stack>
 ```
 
+## Props and Customization
+
+### DataTableProps
+
+| Prop                            | Type                                                                | Default                 | Description                                           |
+| ------------------------------- | ------------------------------------------------------------------- | ----------------------- | ----------------------------------------------------- |
+| `rows`                          | `T[]`                                                               | (required)              | Array of row data objects                             |
+| `columns`                       | `ColumnDef<T, ID>[]`                                                | (required)              | Column definitions array                              |
+| `getId`                         | `(row: T) => ID`                                                    | -                       | Custom row identifier function (defaults to `row.id`) |
+| `checkboxSelection`             | `boolean`                                                           | `false`                 | Enables checkbox selection column                     |
+| `selectionModel`                | `ID[]`                                                              | -                       | Controlled selection state                            |
+| `onSelectionModelChange`        | `(model: ID[], isTotalSelected?: boolean) => void`                  | -                       | Callback when selection changes                       |
+| `isRowSelectable`               | `(params: { row, id }) => boolean`                                  | -                       | Determines if a row can be selected                   |
+| `disableSelectionOnClick`       | `boolean`                                                           | `false`                 | Prevents selection when clicking a row                |
+| `isTotalSelected`               | `boolean`                                                           | `false`                 | Represents total selection state in server pagination |
+| `editMode`                      | `boolean`                                                           | `false`                 | Enables inline cell editing                           |
+| `pagination`                    | `boolean`                                                           | `false`                 | Enables pagination                                    |
+| `paginationMode`                | `'client' \| 'server'`                                              | `'client'`              | Client-side or server-side pagination                 |
+| `paginationModel`               | `{ page: number; pageSize: number }`                                | -                       | Controlled pagination state                           |
+| `onPaginationModelChange`       | `(model: { page, pageSize }) => void`                               | -                       | Callback when page or page size changes               |
+| `rowCount`                      | `number`                                                            | -                       | Total row count (required for server pagination)      |
+| `sortModel`                     | `SortModel<T>[]`                                                    | -                       | Controlled sort state                                 |
+| `sortOrder`                     | `('asc' \| 'desc' \| null)[]`                                       | `['asc', 'desc', null]` | Allowed sort directions cycle                         |
+| `onSortModelChange`             | `(model: SortModel<T>[]) => void`                                   | -                       | Callback when sort changes                            |
+| `pinnedColumns`                 | `{ left?: string[]; right?: string[] }`                             | -                       | Pin columns to left/right edges                       |
+| `columnGroupingModel`           | `ColumnGroupingModel`                                               | -                       | Column header grouping configuration                  |
+| `columnVisibilityModel`         | `Record<string, boolean>`                                           | -                       | Controlled column visibility (false = hidden)         |
+| `onColumnVisibilityModelChange` | `(model: Record<string, boolean>) => void`                          | -                       | Callback when visibility changes                      |
+| `loading`                       | `boolean`                                                           | `false`                 | Shows loading overlay                                 |
+| `hoverRow`                      | `boolean`                                                           | `false`                 | Highlights rows on hover                              |
+| `stickyHeader`                  | `boolean`                                                           | `false`                 | Fixes the header when scrolling                       |
+| `stripe`                        | `'even' \| 'odd'`                                                   | -                       | Applies striped row background                        |
+| `noWrap`                        | `boolean`                                                           | `false`                 | Prevents cell text wrapping                           |
+| `onRowClick`                    | `(params: { row, rowId }, event) => void`                           | -                       | Callback when a row is clicked                        |
+| `slots`                         | `{ checkbox?, toolbar?, footer?, loadingOverlay?, noRowsOverlay? }` | -                       | Custom component slots                                |
+| `slotProps`                     | `{ checkbox?, toolbar?, background?, noRowsOverlay? }`              | -                       | Props passed to slot components                       |
+| `apiRef`                        | `React.RefObject<DataTableApi>`                                     | -                       | Imperative API reference                              |
+| `initialState`                  | `{ sorting?, columns? }`                                            | -                       | Initial state for uncontrolled sort/visibility        |
+
+### ColumnDef Union Type
+
+All column types extend `BaseColumnDef` with shared properties:
+
+| Prop              | Type                                                                                                            | Default    | Description                                      |
+| ----------------- | --------------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------ |
+| `field`           | `keyof T`                                                                                                       | (required) | Row data field to display                        |
+| `headerName`      | `string`                                                                                                        | -          | Column header text                               |
+| `type`            | `'text' \| 'number' \| 'currency' \| 'date' \| 'select' \| 'autocomplete' \| 'longText' \| 'link' \| 'actions'` | `'text'`   | Column type (determines edit UI)                 |
+| `width`           | `string`                                                                                                        | -          | Column width (e.g., `'200px'`, `'30%'`)          |
+| `minWidth`        | `string`                                                                                                        | -          | Minimum column width                             |
+| `maxWidth`        | `string`                                                                                                        | -          | Maximum column width                             |
+| `resizable`       | `boolean`                                                                                                       | `false`    | Enables column resizing by dragging              |
+| `sortable`        | `boolean`                                                                                                       | `true`     | Enables sorting for this column                  |
+| `sortComparator`  | `(params: { rowA, rowB }) => number`                                                                            | -          | Custom sort logic                                |
+| `sortOrder`       | `('asc' \| 'desc' \| null)[]`                                                                                   | -          | Column-specific sort direction cycle             |
+| `required`        | `boolean`                                                                                                       | `false`    | Shows required indicator (\*) in header          |
+| `headerLineClamp` | `1 \| 2`                                                                                                        | `1`        | Max header text lines before truncation          |
+| `description`     | `string`                                                                                                        | -          | Tooltip text for the column header               |
+| `cellClassName`   | `string \| ((params: { row, value }) => string)`                                                                | -          | Dynamic cell CSS class                           |
+| `headerClassName` | `string \| ((params) => string)`                                                                                | -          | Dynamic header CSS class                         |
+| `renderCell`      | `(params: { row, value, rowIndex, colIndex, id }) => ReactNode`                                                 | -          | Custom cell renderer                             |
+| `renderEditCell`  | `(params) => ReactNode`                                                                                         | -          | Custom edit cell renderer                        |
+| `isCellEditable`  | `boolean \| ((params: { row, value, id }) => boolean)`                                                          | `true`     | Whether a cell is editable                       |
+| `componentProps`  | `object \| ((params: { row, id }) => object)`                                                                   | -          | Props passed to the column type's edit component |
+| `onCellEditStart` | `(params: { row, originalRow, value }) => void`                                                                 | -          | Callback when cell editing begins                |
+| `onCellEditStop`  | `(params: { row, originalRow, value }) => void`                                                                 | -          | Callback when cell editing ends                  |
+
+### ActionsColumnDef
+
+For action columns, use `type: 'actions'` with `getActions`:
+
+```tsx
+{
+  field: 'actions',
+  type: 'actions',
+  getActions: ({ row, id }) => [
+    <Button key="edit" size="sm">Edit</Button>,
+    <IconMenuButton key="more" items={[...]} />,
+  ],
+}
+```
+
+### DataTableApi
+
+```tsx
+interface DataTableApi {
+  getRowIndexRelativeToVisibleRows(rowId: string): number;
+  setCellFocus(rowId: string): void;
+}
+```
+
+> **Note**: DataTable also accepts all Joy UI Table props (e.g., `borderAxis`, `size`, `sx`).
+
 ## Constraints and Considerations
 
 ### Required Conditions

package/dist/components/data-display/InfoSign.md

@@ -114,6 +114,18 @@ function MetricCard() {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop        | Type                                                           | Default     | Description                           |
+| ----------- | -------------------------------------------------------------- | ----------- | ------------------------------------- |
+| `message`   | `string`                                                       | (required)  | Tooltip message text                  |
+| `placement` | `TooltipPlacement`                                             | `'top'`     | Tooltip position relative to the icon |
+| `color`     | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Icon color                            |
+| `size`      | `'sm' \| 'md' \| 'lg'`                                         | `'md'`      | Icon size                             |
+| `sx`        | `SxProps`                                                      | -           | Custom styles                         |
+
 ## Best Practices
 
 - **Keep messages concise.** Tooltip messages should be 1-2 sentences that quickly answer "what does this mean?" Avoid paragraphs of text.

package/dist/components/data-display/Table.md

@@ -2,9 +2,9 @@
 
 ## Introduction
 
-> **참고**: 대용량의 데이터를 보여주기 위한 경우 DataTable 컴포넌트가 더 알맞을 수 있으니 참고하세요. Table 컴포넌트는 양이 적지만 커스터마이징이 자유롭고 복잡한 형태의 UI를 Cell에 표현할 때 알맞습니다. rowSpan, colSpan 등 셀 병합이나 단순하지 않은 형태의 테이블도 Table 컴포넌트를 조합하여 구현하는 것을 권장합니다.
+> **Note**: If you need to display large volumes of data, the DataTable component may be a better fit. The Table component is better suited for smaller datasets, flexible customization, and rendering complex UI inside cells. For cell merging with `rowSpan`, `colSpan`, or non-trivial table structures, we recommend composing the Table component directly.
 
-Table 컴포넌트는 구조화된 데이터를 표 형태로 표시하는 기본적인 테이블 컴포넌트입니다. Joy UI의 Table을 기반으로 하며, 유연한 커스터마이징과 복잡한 레이아웃을 지원합니다. 간단한 데이터 표시부터 복잡한 셀 병합, 사용자 정의 콘텐츠까지 다양한 용도로 활용할 수 있습니다.
+The Table component is a foundational table component for displaying structured data in a tabular format. It is based on Joy UI Table and supports flexible customization and complex layouts. It can be used for everything from simple data display to complex cell merging and custom content.
 
 ```tsx
 <Table aria-label="basic table" {...args}>
@@ -51,7 +51,10 @@ function MyComponent() {
   return (
     <Table>
       <TableHead headCells={headCells} />
-      <TableBody rows={rows} cellOrder={['name', 'email', 'role', 'joinDate']} />
+      <TableBody
+        rows={rows}
+        cellOrder={['name', 'email', 'role', 'joinDate']}
+      />
     </Table>
   );
 }
@@ -61,7 +64,7 @@ function MyComponent() {
 
 ### Basic Examples
 
-가장 기본적인 Table 사용법들입니다.
+The most basic Table usage patterns.
 
 ```tsx
 <Table aria-label="basic table" {...args}>
@@ -85,7 +88,7 @@ function MyComponent() {
 
 ### With Hover Effect
 
-행에 마우스 오버시 하이라이트 효과를 적용할 수 있습니다.
+You can apply a highlight effect when hovering over rows.
 
 ```tsx
 <Table
@@ -96,7 +99,7 @@ function MyComponent() {
 
 ### With Checkbox Selection
 
-체크박스를 포함한 선택 가능한 테이블입니다.
+A selectable table that includes checkboxes.
 
 ```tsx
 <Table aria-label="checkbox table" hoverRow {...args}>
@@ -122,7 +125,7 @@ function MyComponent() {
 
 ### User Management Table
 
-사용자 관리에 활용할 수 있는 테이블입니다. 아바타, 역할 표시, 상태 인디케이터, 액션 버튼이 포함되어 있습니다.
+A table for user management. It includes avatars, role labels, status indicators, and action buttons.
 
 ```tsx
 <Table aria-label="user management table" hoverRow>
@@ -299,7 +302,7 @@ function MyComponent() {
 
 ### Product Inventory Table
 
-제품 재고 관리를 위한 테이블입니다. 재고 상태, 가격 표시, 진행률 바 등을 포함합니다.
+A table for product inventory management. It includes stock status, price display, progress bars, and more.
 
 ```tsx
 <Table aria-label="product inventory table" hoverRow>
@@ -418,7 +421,7 @@ function MyComponent() {
 
 ### Task Management Table
 
-프로젝트의 작업 관리를 위한 테이블입니다. 담당자, 우선순위, 진행률, 마감일 등을 표시합니다.
+A table for project task management. It displays assignees, priorities, progress, due dates, and more.
 
 ```tsx
 <Table aria-label="task management table" hoverRow>
@@ -571,7 +574,7 @@ function MyComponent() {
 
 ### Sales Report with Cell Merging
 
-복잡한 셀 병합을 사용한 매출 보고서 테이블입니다. rowSpan과 colSpan을 활용한 예제입니다.
+A sales report table that uses complex cell merging. This example uses `rowSpan` and `colSpan`.
 
 ```tsx
 <Table aria-label="sales report table with merged cells">
@@ -767,7 +770,7 @@ function MyComponent() {
 
 ### Comparison Table
 
-플랜이나 제품을 비교하는 테이블입니다. 불린 값을 시각적으로 표현합니다.
+A table for comparing plans or products. It visually represents boolean values.
 
 ```tsx
 <Table aria-label="plan comparison table">
@@ -926,7 +929,7 @@ function MyComponent() {
 
 ### Empty State Table
 
-데이터가 없을 때의 상태를 표시하는 테이블입니다.
+A table that displays an empty state when no data is available.
 
 ```tsx
 <Stack spacing={2}>
@@ -993,7 +996,7 @@ function MyComponent() {
 
 ### Advanced Features Table
 
-고급 기능들(고정 헤더, 스크롤, 반응형)을 포함한 테이블입니다.
+A table that includes advanced features such as sticky headers, scrolling, and responsiveness.
 
 ```tsx
 <Box sx={{
@@ -1072,7 +1075,7 @@ function MyComponent() {
 
 ### Drag and Drop Headers Table
 
-@atlaskit/pragmatic-drag-and-drop을 사용하여 헤더를 드래그해서 컬럼 순서를 변경할 수 있는 테이블입니다.
+A table that uses `@atlaskit/pragmatic-drag-and-drop` so headers can be dragged to reorder columns.
 
 ```tsx
 <Stack spacing={3}>
@@ -1126,9 +1129,9 @@ function MyComponent() {
 
 ### Implementation Guidelines
 
-위에서 보여준 Canvas 예제들은 실제 동작하는 컴포넌트들입니다. Table 컴포넌트는 두 가지 방식으로 사용할 수 있습니다:
+The Canvas examples above are fully working components. The Table component can be used in two ways:
 
-#### 1. TableHead와 TableBody 사용 (간단한 데이터)
+#### 1. Using TableHead and TableBody (simple data)
 
 ```tsx
 import { Table, TableHead, TableBody } from '@ceed/cds';
@@ -1148,15 +1151,18 @@ function SimpleTable() {
   return (
     <Table aria-label="simple table" hoverRow>
       <TableHead headCells={headCells} />
-      <TableBody rows={rows} cellOrder={['name', 'email', 'role']} />
+      <TableBody
+        rows={rows}
+        cellOrder={['name', 'email', 'role']}
+      />
     </Table>
   );
 }
 ```
 
-#### 2. HTML 테이블 구조 사용 (복잡한 UI)
+#### 2. Using the HTML table structure (complex UI)
 
-복잡한 UI 컴포넌트를 셀에 표현할 때는 HTML 테이블 구조를 직접 사용합니다:
+When rendering complex UI components inside cells, use the HTML table structure directly:
 
 ```tsx
 import { Table, Stack, Avatar, Typography, Chip, IconButton } from '@ceed/cds';
@@ -1178,9 +1184,7 @@ function ComplexTable() {
         <tr>
           <td>
             <Stack direction="row" spacing={2} alignItems="center">
-              <Avatar size="sm" variant="soft" color="primary">
-                김
-              </Avatar>
+              <Avatar size="sm" variant="soft" color="primary">김</Avatar>
               <Stack spacing={0}>
                 <Typography level="title-sm">김철수</Typography>
                 <Typography level="body-xs" color="neutral">
@@ -1214,7 +1218,7 @@ function ComplexTable() {
 
 #### Cell Merging with rowSpan and colSpan
 
-복잡한 테이블 레이아웃을 위해 직접 HTML 테이블 구조를 사용할 수 있습니다:
+For complex table layouts, you can use the HTML table structure directly:
 
 ```tsx
 <Table>
@@ -1237,31 +1241,28 @@ function ComplexTable() {
 
 ## Advanced Features
 
-Table 컴포넌트는 다양한 고급 기능을 지원합니다:
+The Table component supports various advanced features:
 
 ### Sticky Headers
 
-스크롤 시 헤더가 고정되는 기능:
+Keeps the header fixed while scrolling:
 
 ```tsx
-<Table
-  stickyHeader
-  sx={{
-    '& th': {
-      position: 'sticky',
-      top: 0,
-      backgroundColor: 'background.surface',
-      zIndex: 1,
-    },
-  }}
->
+<Table stickyHeader sx={{
+  '& th': {
+    position: 'sticky',
+    top: 0,
+    backgroundColor: 'background.surface',
+    zIndex: 1,
+  }
+}}>
   {/* Table content */}
 </Table>
 ```
 
 ### Empty States
 
-데이터가 없을 때의 적절한 빈 상태 표시:
+Displays an appropriate empty state when no data is available:
 
 ```tsx
 <tbody>
@@ -1280,28 +1281,44 @@ Table 컴포넌트는 다양한 고급 기능을 지원합니다:
 
 ### Responsive Design
 
-반응형 디자인을 위한 가이드:
+Guidance for responsive design:
 
 ```tsx
-<Table
-  sx={{
-    '@media (max-width: 768px)': {
-      '& td, & th': {
-        fontSize: 'sm',
-        px: 1,
-      },
-    },
-  }}
->
+<Table sx={{
+  '@media (max-width: 768px)': {
+    '& td, & th': {
+      fontSize: 'sm',
+      px: 1,
+    }
+  }
+}}>
   {/* Table content */}
 </Table>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop           | Type                                                                          | Default      | Description                         |
+| -------------- | ----------------------------------------------------------------------------- | ------------ | ----------------------------------- |
+| `children`     | `ReactNode`                                                                   | -            | Table content (thead, tbody, tfoot) |
+| `borderAxis`   | `'none' \| 'x' \| 'y' \| 'both' \| 'xBetween' \| 'yBetween' \| 'bothBetween'` | `'xBetween'` | Border display mode                 |
+| `stripe`       | `'odd' \| 'even'`                                                             | -            | Striped row background              |
+| `hoverRow`     | `boolean`                                                                     | `false`      | Highlight rows on hover             |
+| `stickyHeader` | `boolean`                                                                     | `false`      | Fix the header when scrolling       |
+| `size`         | `'sm' \| 'md' \| 'lg'`                                                        | `'md'`       | Table size                          |
+| `variant`      | `'plain' \| 'outlined' \| 'soft' \| 'solid'`                                  | `'plain'`    | Visual style                        |
+| `color`        | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'`                | `'neutral'`  | Color scheme                        |
+| `sx`           | `SxProps`                                                                     | -            | Custom styles                       |
+
+> **Note**: Table also accepts all Joy UI Table props.
+
 ## Best Practices
 
-1. **적절한 컴포넌트 선택**: 대용량 데이터는 DataTable, 복잡한 레이아웃은 Table을 사용하세요.
+1. **Choose the right component**: Use DataTable for large datasets and Table for complex layouts.
 
-2. **접근성 고려**: 적절한 table 태그와 ARIA 속성을 사용하세요.
+2. **Consider accessibility**: Use proper table tags and ARIA attributes.
 
 ```tsx
 <Table aria-label="사용자 목록">
@@ -1320,12 +1337,12 @@ Table 컴포넌트는 다양한 고급 기능을 지원합니다:
 </Table>
 ```
 
-3. **일관된 정렬**: 숫자 데이터는 우측 정렬, 텍스트는 좌측 정렬을 유지하세요.
+3. **Consistent alignment**: Right-align numeric data and left-align text.
 
-4. **적절한 행 높이**: 콘텐츠에 따라 적절한 행 높이를 설정하세요.
+4. **Appropriate row height**: Set row heights that fit the content.
 
-5. **반응형 고려**: 모바일에서는 중요한 컬럼만 표시하거나 카드 형태로 변환하는 것을 고려하세요.
+5. **Responsive considerations**: On mobile, consider showing only key columns or transforming the layout into cards.
 
-6. **성능 최적화**: 긴 목록의 경우 가상화나 페이지네이션을 고려하세요.
+6. **Performance optimization**: For long lists, consider virtualization or pagination.
 
-Table 컴포넌트는 구조화된 데이터를 표현하고 복잡한 레이아웃을 구현하는 데 매우 유용한 도구입니다. 적절한 사용법과 커스터마이징을 통해 다양한 요구사항을 충족할 수 있습니다.
+The Table component is a highly useful tool for presenting structured data and implementing complex layouts. With the right usage patterns and customization, it can satisfy a wide range of requirements.