[Next.js] TailAdmin에 있는 Table Component에 colspan 적용하기

1. 문제 발생

tailAdmin 사용 중인데 테이블에 colspan 적용하려니까 안됨.

chatGPT한테 물어봄

 

Next.js는 React 기반이기 때문에 일반 HTML에서처럼 table의 colspan을 그대로 사용할 수 있습니다.
다만, TableCell과 같이 커스텀 컴포넌트를 사용하는 경우에는 해당 컴포넌트가 내부의 <td> 태그에 colSpan 속성을 전달하도록 구현되어 있어야 합니다.
예를 들어, TableCell 컴포넌트를 아래와 같이 작성하면 colSpan 속성이 제대로 적용됩니다:

 

 

 

2. 해결 방법

테이블 컴포넌트에 들어가봄.

여기에 colSpan이라는 속성을 만들어 넣어서 전달?하도록 해야 할 것 같음

// Props for TableCell
interface TableCellProps {
  children: ReactNode; // Cell content
  isHeader?: boolean; // If true, renders as <th>, otherwise <td>
  className?: string; // Optional className for styling
}

// TableCell Component
const TableCell: React.FC<TableCellProps> = ({
  children,
  isHeader = false,
  className,
}) => {
  const CellTag = isHeader ? "th" : "td";
  return <CellTag className={ ${className}}>{children}</CellTag>;
};

 

 

▼ 아래 처럼 colSpan을 추가함

interface TableCellProps {
  children: ReactNode;
  isHeader?: boolean;
  className?: string;
  colSpan?: number; // colSpan prop 추가
}

const TableCell: React.FC<TableCellProps> = ({
  children,
  isHeader = false,
  className,
  colSpan,
}) => {
  const CellTag = isHeader ? "th" : "td";
  return (
    <CellTag colSpan={colSpan} className={` ${className}`}>
      {children}
    </CellTag>
  );
};

 

 

TableCell에 적용할때는

▼ 아래처럼 colSpan={number} 이런식으로 씀

<TableRow>
  <TableCell>
    셀 내용
  </TableCell>
  <TableCell colSpan={3}>
    셀 내용
  </TableCell>
</TableRow>

 

 

 

끝