kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Refactor RealtimePreviewDynamic and ResponsiveGridRenderer components to improve layout handling and responsiveness. Update SingleTableWithSticky and TableListComponent for better checkbox handling and styling consistency. Enhance overall user experience with refined component structures and styles.

This commit is contained in:
DDD1542 2026-03-18 10:16:59 +09:00
parent b2a569f908
commit 8630d82a69
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3072,7 +3072,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
if (state.sortDirection) setSortDirection(state.sortDirection); if (state.sortDirection) setSortDirection(state.sortDirection);
if (state.groupByColumns) setGroupByColumns(state.groupByColumns); if (state.groupByColumns) setGroupByColumns(state.groupByColumns);
if (state.frozenColumns) { if (state.frozenColumns) {
// 체크박스 컬럼이 항상 포함되도록 보장 // 체크박스 컬럼은 frozen 대상에서 제외 (배경색 이중 적용 방지)
const restoredFrozenColumns = (state.frozenColumns || []).filter((col: string) => col !== "__checkbox__"); const restoredFrozenColumns = (state.frozenColumns || []).filter((col: string) => col !== "__checkbox__");
setFrozenColumns(restoredFrozenColumns); setFrozenColumns(restoredFrozenColumns);
} }
@ -6227,16 +6227,18 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
: `${100 / visibleColumns.length}%`, : `${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,
...(isFrozen && { ...(isFrozen && {
left: `${leftPosition}px`, left: `${leftPosition}px`,
backgroundColor: "hsl(var(--background))", backgroundColor: index % 2 === 0
}), ? "hsl(var(--background))"
}} : "hsl(var(--muted) / 0.2)",
> }),
}}
>
{column.columnName === "__checkbox__" {column.columnName === "__checkbox__"
? renderCheckboxCell(row, index) ? renderCheckboxCell(row, index)
: formatCellValue(cellValue, column, row)} : formatCellValue(cellValue, column, row)}
</td> </td>
); );
})} })}
</tr> </tr>
@ -6384,7 +6386,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
isModified && !cellValidationError && "bg-amber-100 dark:bg-amber-900/40", isModified && !cellValidationError && "bg-amber-100 dark:bg-amber-900/40",
cellValidationError && "bg-red-50 ring-2 ring-red-500 ring-inset dark:bg-red-950/40", cellValidationError && "bg-red-50 ring-2 ring-red-500 ring-inset dark:bg-red-950/40",
isSearchHighlighted && !isCellFocused && "bg-yellow-200 dark:bg-yellow-700/50", isSearchHighlighted && !isCellFocused && "bg-yellow-200 dark:bg-yellow-700/50",
column.editable === false && "bg-gray-50 dark:bg-gray-900/30", column.editable === false && "bg-muted/10 dark:bg-muted/10",
// 코드 컬럼: mono 폰트 + primary 색상 // 코드 컬럼: mono 폰트 + primary 색상
(inputType === "code" || inputType === "category") && "font-mono text-[10px] text-primary font-medium", (inputType === "code" || inputType === "category") && "font-mono text-[10px] text-primary font-medium",
// 숫자 컬럼: tabular-nums 오른쪽 정렬 // 숫자 컬럼: tabular-nums 오른쪽 정렬
@ -6405,7 +6407,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined, maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
...(isFrozen && { ...(isFrozen && {
left: `${leftPosition}px`, left: `${leftPosition}px`,
backgroundColor: "hsl(var(--background))", backgroundColor: index % 2 === 0
? "hsl(var(--background))"
: "hsl(var(--muted) / 0.2)",
}), }),
}} }}
onClick={(e) => handleCellClick(index, colIndex, e)} onClick={(e) => handleCellClick(index, colIndex, e)}