feat: 테이블 정렬 개선 - 헤더 가운데, 숫자 우측 정렬
- 모든 테이블 헤더를 가운데 정렬 (text-center) - 숫자 타입(number, decimal) 데이터를 우측 정렬 - TableListComponent: inputType 기반 숫자 판단 - InteractiveDataTable: widgetType 기반 숫자 판단 - 체크박스는 기존대로 가운데 정렬 유지 - 일반 텍스트는 좌측 정렬 유지 더 읽기 쉬운 테이블 레이아웃 완성
This commit is contained in:
parent
5376d7198d
commit
516bcafb2c
|
|
@ -1974,7 +1974,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
|
||||||
<TableHead
|
<TableHead
|
||||||
key={column.id}
|
key={column.id}
|
||||||
ref={(el) => (columnRefs.current[column.id] = el)}
|
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={{
|
style={{
|
||||||
width: columnWidth ? `${columnWidth}px` : undefined,
|
width: columnWidth ? `${columnWidth}px` : undefined,
|
||||||
userSelect: 'none'
|
userSelect: 'none'
|
||||||
|
|
@ -2067,11 +2067,18 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
|
||||||
/>
|
/>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
)}
|
)}
|
||||||
{visibleColumns.map((column: DataTableColumn) => (
|
{visibleColumns.map((column: DataTableColumn) => {
|
||||||
<TableCell key={column.id} className="px-4 text-sm font-medium text-gray-900">
|
const isNumeric = column.widgetType === "number" || column.widgetType === "decimal";
|
||||||
{formatCellValue(row[column.columnName], column, row)}
|
return (
|
||||||
</TableCell>
|
<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>
|
</TableRow>
|
||||||
))
|
))
|
||||||
|
|
|
||||||
|
|
@ -1067,7 +1067,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
column.sortable && "cursor-pointer"
|
column.sortable && "cursor-pointer"
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{
|
||||||
textAlign: column.columnName === "__checkbox__" ? "center" : (column.align || "left"),
|
textAlign: column.columnName === "__checkbox__" ? "center" : "center",
|
||||||
width: column.columnName === "__checkbox__" ? '48px' : (columnWidth ? `${columnWidth}px` : undefined),
|
width: column.columnName === "__checkbox__" ? '48px' : (columnWidth ? `${columnWidth}px` : undefined),
|
||||||
minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
|
minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
|
||||||
maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
|
maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
|
||||||
|
|
@ -1191,6 +1191,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
|
const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
|
||||||
const cellValue = row[mappedColumnName];
|
const cellValue = row[mappedColumnName];
|
||||||
|
|
||||||
|
const meta = columnMeta[column.columnName];
|
||||||
|
const inputType = meta?.inputType || column.inputType;
|
||||||
|
const isNumeric = inputType === "number" || inputType === "decimal";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<td
|
<td
|
||||||
key={column.columnName}
|
key={column.columnName}
|
||||||
|
|
@ -1199,7 +1203,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||||
column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3"
|
column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3"
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{
|
||||||
textAlign: column.columnName === "__checkbox__" ? "center" : (column.align || "left"),
|
textAlign: column.columnName === "__checkbox__" ? "center" : (isNumeric ? "right" : (column.align || "left")),
|
||||||
width: column.columnName === "__checkbox__" ? '48px' : `${100 / visibleColumns.length}%`,
|
width: column.columnName === "__checkbox__" ? '48px' : `${100 / visibleColumns.length}%`,
|
||||||
minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
|
minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
|
||||||
maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
|
maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue