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

fix: TableListComponent 체크박스 컬럼 48px 고정 

- 체크박스 컬럼(__checkbox__)을 48px 고정 너비로 설정
- width, minWidth, maxWidth 모두 48px 적용
- 체크박스 컬럼에서 리사이즈 핸들 제거
- 초기 너비 측정 시 체크박스 컬럼 제외
- 테이블 헤더와 본문 셀 모두 적용
- InteractiveDataTable과 일관된 체크박스 컬럼 스타일
This commit is contained in:
kjs 2025-11-03 12:24:28 +09:00
parent 3a75549ffe
commit 6aa25fa852
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -804,6 +804,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
let hasAnyWidth = false;
visibleColumns.forEach((column) => {
// 체크박스 컬럼은 제외 (고정 48px)
if (column.columnName === "__checkbox__") return;
const thElement = columnRefs.current[column.columnName];
if (thElement) {
const measuredWidth = thElement.offsetWidth;
@ -1064,7 +1067,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
)}
style={{
textAlign: column.align || "left",
width: columnWidth ? `${columnWidth}px` : undefined,
width: column.columnName === "__checkbox__" ? '48px' : (columnWidth ? `${columnWidth}px` : undefined),
minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
userSelect: 'none'
}}
onClick={() => column.sortable && handleSort(column.columnName)}
@ -1079,8 +1084,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
)}
</div>
)}
{/* 리사이즈 핸들 */}
{columnIndex < visibleColumns.length - 1 && (
{/* 리사이즈 핸들 (체크박스 제외) */}
{columnIndex < visibleColumns.length - 1 && column.columnName !== "__checkbox__" && (
<div
className="absolute right-0 top-0 h-full w-2 cursor-col-resize hover:bg-blue-500 z-20"
style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
@ -1193,7 +1198,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
)}
style={{
textAlign: column.align || "left",
width: `${100 / visibleColumns.length}%`, // 컬럼 수에 따라 균등 분배
width: column.columnName === "__checkbox__" ? '48px' : `${100 / visibleColumns.length}%`,
minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
}}
>
{column.columnName === "__checkbox__"