chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 모든 테이블 헤더를 가운데 정렬 (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
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/lib/registry/components/table-list/TableListComponent.tsx
View File

@@ -1067,7 +1067,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
column.sortable && "cursor-pointer"
)}
style={{
textAlign: column.columnName === "__checkbox__" ? "center" : (column.align || "left"),
textAlign: column.columnName === "__checkbox__" ? "center" : "center",
width: column.columnName === "__checkbox__" ? '48px' : (columnWidth ? `${columnWidth}px` : undefined),
minWidth: 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 cellValue = row[mappedColumnName];
const meta = columnMeta[column.columnName];
const inputType = meta?.inputType || column.inputType;
const isNumeric = inputType === "number" || inputType === "decimal";
return (
<td
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"
)}
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}%`,
minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,