@ceed/ads 1.30.0 → 1.30.1

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

@@ -45,9 +45,7 @@ The default InfoSign displays a question-mark icon that reveals a tooltip on hov
 />
 ```
 
-## Common Use Cases
-
-### Form Field Help
+## InfoSign Form Field Help
 
 ```tsx
 import { InfoSign } from '@ceed/ads';
@@ -69,7 +67,7 @@ function PasswordField() {
 }
 ```
 
-### Table Column Header
+## InfoSign Table Column Header
 
 ```tsx
 import { InfoSign } from '@ceed/ads';
@@ -93,7 +91,7 @@ function TableHeader() {
 }
 ```
 
-### Dashboard Metric Explanation
+## InfoSign Dashboard Metric Explanation
 
 ```tsx
 import { InfoSign, Typography, Stack } from '@ceed/ads';
@@ -114,6 +112,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/Markdown.md

@@ -43,9 +43,7 @@ function ArticleContent({ content }) {
 }
 ```
 
-## Examples
-
-### Playground
+## Playground
 
 Interactive example with basic markdown formatting.
 
@@ -55,7 +53,7 @@ Interactive example with basic markdown formatting.
 />
 ```
 
-### Default Level
+## Default Level
 
 Control the base typography level for the content.
 
@@ -71,7 +69,7 @@ Control the base typography level for the content.
 </Stack>
 ```
 
-### Text Alignment
+## Text Alignment
 
 Align text to left, center, or right.
 
@@ -82,7 +80,7 @@ Align text to left, center, or right.
 />
 ```
 
-### Colors
+## Colors
 
 Apply different color themes to the markdown content.
 
@@ -96,7 +94,7 @@ Apply different color themes to the markdown content.
 </div>
 ```
 
-### Text Color
+## Text Color
 
 Use specific text colors from the theme palette.
 
@@ -108,7 +106,7 @@ Use specific text colors from the theme palette.
 </Stack>
 ```
 
-### Accent Color
+## Accent Color
 
 Highlight text with custom accent color using `||text||` syntax.
 
@@ -119,7 +117,7 @@ Highlight text with custom accent color using `||text||` syntax.
 </Stack>
 ```
 
-### Bold Font Weight
+## Bold Font Weight
 
 Customize the weight of bold text.
 
@@ -139,7 +137,7 @@ Customize the weight of bold text.
 </Stack>
 ```
 
-### Strikethrough
+## Strikethrough
 
 GFM strikethrough support using `~text~` syntax.
 
@@ -147,7 +145,7 @@ GFM strikethrough support using `~text~` syntax.
 <Markdown content="I am markdown with ~strikethrough~" />
 ```
 
-### Tables
+## Tables
 
 Full GFM table support with alignment options.
 
@@ -157,7 +155,7 @@ Full GFM table support with alignment options.
 />
 ```
 
-### Code Blocks
+## Code Blocks
 
 Inline code and fenced code blocks with syntax highlighting.
 
@@ -167,7 +165,7 @@ Inline code and fenced code blocks with syntax highlighting.
 />
 ````
 
-### Task Lists
+## Task Lists
 
 Interactive task list checkboxes.
 
@@ -177,7 +175,7 @@ Interactive task list checkboxes.
 />
 ```
 
-### Blockquotes
+## Blockquotes
 
 Styled blockquotes for quoted content.
 
@@ -187,7 +185,7 @@ Styled blockquotes for quoted content.
 />
 ```
 
-### Lists
+## Lists
 
 Ordered and unordered lists with nesting support.
 
@@ -197,7 +195,7 @@ Ordered and unordered lists with nesting support.
 />
 ```
 
-### GFM Complete
+## GFM Complete
 
 Full demonstration of all GFM features.
 
@@ -227,9 +225,7 @@ Full demonstration of all GFM features.
 - **Critical UI text**: Use Typography for button labels, form labels, etc.
 - **Structured data**: Use DataTable or custom components for tabular data
 
-## Common Use Cases
-
-### Article/Blog Content
+## Article/Blog Content
 
 ```tsx
 function ArticlePage({ article }) {
@@ -257,7 +253,7 @@ function ArticlePage({ article }) {
 }
 ```
 
-### Comment with Formatting
+## Comment with Formatting
 
 ```tsx
 function Comment({ comment }) {
@@ -283,7 +279,7 @@ function Comment({ comment }) {
 }
 ```
 
-### Release Notes
+## Release Notes
 
 ```tsx
 function ReleaseNotes({ version, notes }) {
@@ -321,7 +317,7 @@ const releaseNotes = `
 `;
 ```
 
-### Help Documentation
+## Help Documentation
 
 ```tsx
 function HelpArticle({ title, content }) {
@@ -369,7 +365,7 @@ Contact us at [support@example.com](mailto:support@example.com).
 `;
 ```
 
-### Task Description with Checklist
+## Task Description with Checklist
 
 ```tsx
 function TaskDetails({ task }) {
@@ -406,7 +402,7 @@ Make sure to follow the ||coding standards|| and add proper error handling.
 `;
 ```
 
-### Notification Content
+## Notification Content
 
 ```tsx
 function NotificationDetail({ notification }) {
@@ -431,7 +427,7 @@ const notification = {
 };
 ```
 
-### Email Preview
+## Email Preview
 
 ```tsx
 function EmailPreview({ subject, body }) {
@@ -453,7 +449,7 @@ function EmailPreview({ subject, body }) {
 }
 ```
 
-### API Documentation
+## API Documentation
 
 ```tsx
 function APIDocumentation({ endpoint }) {

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}>
@@ -60,11 +60,9 @@ function MyComponent() {
 }
 ```
 
-## Examples
+## Table Basic Examples
 
-### Basic Examples
-
-가장 기본적인 Table 사용법들입니다.
+The most basic Table usage patterns.
 
 ```tsx
 <Table aria-label="basic table" {...args}>
@@ -86,9 +84,9 @@ function MyComponent() {
 </Table>
 ```
 
-### With Hover Effect
+## Table With Hover Effect
 
-행에 마우스 오버시 하이라이트 효과를 적용할 수 있습니다.
+You can apply a highlight effect when hovering over rows.
 
 ```tsx
 <Table
@@ -97,9 +95,9 @@ function MyComponent() {
 />
 ```
 
-### With Checkbox Selection
+## Table With Checkbox Selection
 
-체크박스를 포함한 선택 가능한 테이블입니다.
+A selectable table that includes checkboxes.
 
 ```tsx
 <Table aria-label="checkbox table" hoverRow {...args}>
@@ -121,11 +119,9 @@ function MyComponent() {
 </Table>
 ```
 
-## Common Use Cases
-
-### User Management Table
+## 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>
@@ -300,9 +296,9 @@ function MyComponent() {
 </Table>
 ```
 
-### Product Inventory Table
+## 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>
@@ -419,9 +415,9 @@ function MyComponent() {
 </Table>
 ```
 
-### Task Management Table
+## 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>
@@ -572,9 +568,9 @@ function MyComponent() {
 </Table>
 ```
 
-### Sales Report with Cell Merging
+## Sales Report Table 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">
@@ -768,9 +764,9 @@ function MyComponent() {
 </Table>
 ```
 
-### Comparison Table
+## Comparison Table
 
-플랜이나 제품을 비교하는 테이블입니다. 불린 값을 시각적으로 표현합니다.
+A table for comparing plans or products. It visually represents boolean values.
 
 ```tsx
 <Table aria-label="plan comparison table">
@@ -927,9 +923,9 @@ function MyComponent() {
 </Table>
 ```
 
-### Empty State Table
+## Empty State Table
 
-데이터가 없을 때의 상태를 표시하는 테이블입니다.
+A table that displays an empty state when no data is available.
 
 ```tsx
 <Stack spacing={2}>
@@ -994,9 +990,9 @@ function MyComponent() {
 </Stack>
 ```
 
-### Advanced Features Table
+## Advanced Features Table
 
-고급 기능들(고정 헤더, 스크롤, 반응형)을 포함한 테이블입니다.
+A table that includes advanced features such as sticky headers, scrolling, and responsiveness.
 
 ```tsx
 <Box sx={{
@@ -1073,9 +1069,9 @@ function MyComponent() {
 </Box>
 ```
 
-### Drag and Drop Headers Table
+## 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}>
@@ -1125,13 +1121,11 @@ function MyComponent() {
 </Stack>
 ```
 
-## Detailed Code Examples
+## Table Implementation Guidelines
 
-### Implementation Guidelines
+The Canvas examples above are fully working components. The Table component can be used in two ways:
 
-위에서 보여준 Canvas 예제들은 실제 동작하는 컴포넌트들입니다. Table 컴포넌트는 두 가지 방식으로 사용할 수 있습니다:
-
-#### 1. TableHead와 TableBody 사용 (간단한 데이터)
+### Using TableHead and TableBody
 
 ```tsx
 import { Table, TableHead, TableBody } from '@ceed/ads';
@@ -1160,9 +1154,9 @@ function SimpleTable() {
 }
 ```
 
-#### 2. HTML 테이블 구조 사용 (복잡한 UI)
+### Using the HTML Table Structure for 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/ads';
@@ -1216,9 +1210,9 @@ function ComplexTable() {
 }
 ```
 
-#### Cell Merging with rowSpan and colSpan
+### Cell Merging with rowSpan and colSpan
 
-복잡한 테이블 레이아웃을 위해 직접 HTML 테이블 구조를 사용할 수 있습니다:
+For complex table layouts, you can use the HTML table structure directly:
 
 ```tsx
 <Table>
@@ -1239,13 +1233,11 @@ function ComplexTable() {
 </Table>
 ```
 
-## Advanced Features
-
-Table 컴포넌트는 다양한 고급 기능을 지원합니다:
+## Table Sticky Headers
 
-### Sticky Headers
+The Table component supports various advanced features:
 
-스크롤 시 헤더가 고정되는 기능:
+Keeps the header fixed while scrolling:
 
 ```tsx
 <Table stickyHeader sx={{
@@ -1260,9 +1252,9 @@ Table 컴포넌트는 다양한 고급 기능을 지원합니다:
 </Table>
 ```
 
-### Empty States
+## Table Empty States
 
-데이터가 없을 때의 적절한 빈 상태 표시:
+Displays an appropriate empty state when no data is available:
 
 ```tsx
 <tbody>
@@ -1279,9 +1271,9 @@ Table 컴포넌트는 다양한 고급 기능을 지원합니다:
 </tbody>
 ```
 
-### Responsive Design
+## Table Responsive Design
 
-반응형 디자인을 위한 가이드:
+Guidance for responsive design:
 
 ```tsx
 <Table sx={{
@@ -1296,11 +1288,29 @@ Table 컴포넌트는 다양한 고급 기능을 지원합니다:
 </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="사용자 목록">
@@ -1319,12 +1329,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.