File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
05-07
05-07
import type {BoardArticleSearchParams} from "../../type/board.types.ts";
type BoardArticleListTableHeaderProps = {
params: BoardArticleSearchParams;
onChange: (params: BoardArticleSearchParams) => void;
}
export const BoardArticleListTableHeader = ({
params,
onChange
}: BoardArticleListTableHeaderProps) => {
const handleSort = (field: string) => {
const nextOrder =
params.searchSortCnd === field &&
params.searchSortOrd === 'ASC'
? 'DESC'
: 'ASC';
onChange({
...params,
searchSortCnd: field,
searchSortOrd: nextOrder,
pageIndex: 1,
});
};
const getSortIcon = (field: string) => {
if (params.searchSortCnd !== field) {
return '-';
}
return params.searchSortOrd === 'ASC'
? '▲'
: '▼';
};
return (
<>
<colgroup>
<col style={{width: "40px"}}/>
<col style={{width: "6%"}}/>
<col style={{width: "auto"}}/>
<col style={{width: "15%"}}/>
<col style={{width: "15%"}}/>
<col style={{width: "10%"}}/>
<col style={{width: "12%"}}/>
<col style={{width: "8%"}}/>
</colgroup>
<thead>
<tr>
<th>
<input type={"checkbox"} name={"checkbox"}/>
<label htmlFor={"checkbox"}></label>
</th>
<th>번호</th>
<th scope={"col"}>
제목
</th>
<th scope={"col"}>
첨부파일
</th>
<th scope={"col"}>
공개여부
</th>
<th scope="col">작성자</th>
<th scope="col">작성일
<button
className={`sort sortBtn ${params.searchSortCnd === 'FRST_REGIST_PNTTM' ? 'active' : ''}`}
onClick={() => handleSort('FRST_REGIST_PNTTM')}
>
{getSortIcon('FRST_REGIST_PNTTM')}
</button>
</th>
<th scope="col">조회수</th>
</tr>
</thead>
</>
)
}