feat: 테이블 정렬 개선 - 헤더 가운데, 숫자 우측 정렬

- 모든 테이블 헤더를 가운데 정렬 (text-center)
- 숫자 타입(number, decimal) 데이터를 우측 정렬
- TableListComponent: inputType 기반 숫자 판단
- InteractiveDataTable: widgetType 기반 숫자 판단
- 체크박스는 기존대로 가운데 정렬 유지
- 일반 텍스트는 좌측 정렬 유지

더 읽기 쉬운 테이블 레이아웃 완성
This commit is contained in:
kjs
2025-11-03 13:25:57 +09:00
parent 5376d7198d
commit 516bcafb2c
2 changed files with 19 additions and 8 deletions

View File

@@ -1974,7 +1974,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
<TableHead
key={column.id}
ref={(el) => (columnRefs.current[column.id] = el)}
className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none"
className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none text-center"
style={{
width: columnWidth ? `${columnWidth}px` : undefined,
userSelect: 'none'
@@ -2067,11 +2067,18 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
/>
</TableCell>
)}
{visibleColumns.map((column: DataTableColumn) => (
<TableCell key={column.id} className="px-4 text-sm font-medium text-gray-900">
{formatCellValue(row[column.columnName], column, row)}
</TableCell>
))}
{visibleColumns.map((column: DataTableColumn) => {
const isNumeric = column.widgetType === "number" || column.widgetType === "decimal";
return (
<TableCell
key={column.id}
className="px-4 text-sm font-medium text-gray-900"
style={{ textAlign: isNumeric ? 'right' : 'left' }}
>
{formatCellValue(row[column.columnName], column, row)}
</TableCell>
);
})}
{/* 자동 파일 셀 표시 제거됨 - 명시적으로 추가된 파일 컬럼만 표시 */}
</TableRow>
))