React-Table 라이브러리로 열 너비 설정
React는 프론트엔드 애플리케이션 구축에 가장 많이 사용되는 프레임워크입니다. 최신 앱에는 많은 정보가 포함되어 있는 것이 일반적입니다. 원시 데이터를 테이블로 구성하면 방대한 정보를 더 쉽게 소화할 수 있습니다.
react-table 라이브러리는 React에서 테이블을 생성하는 데 필요한 로직을 제공합니다. 그러나 테이블의 UI는 직접 만들어야 합니다.
이 문서에서는 사용자가 테이블의 모양을 사용자 지정하는 방법(예: 열 너비 조정)을 보여주고자 합니다.
react-table 라이브러리로 열 너비 사용자 지정
react-table은 React에서 테이블을 만들기 위한 헤드리스 UI 라이브러리입니다. 실제 UI가 아닌 로직만 제공합니다.
React 개발자는 react-table 라이브러리의 useTable 후크를 사용하여 원시 데이터 및 열 정보를 기반으로 테이블을 생성할 수 있습니다.
이 Table 구성 요소를 살펴보겠습니다.
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable({
columns,
data
});
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps({
style: {
minWidth: 200,
width: 250,
border: "1px solid black"
}
})}
>
{column.render("Header")}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
);
})}
</tbody>
</table>
);
}
useTable 후크로 생성된 테이블의 기본 예제입니다. 여기에서 테이블 스타일 지정을 위해 HTML 요소를 사용했습니다.
<table> HTML 구성 요소는 최상위 수준에 있습니다. 또한 <thead>, <tr>, <th> 및 기타 요소가 있습니다.
코드를 직접 검사하고 싶다면 CodeSandbox에서 검사할 수 있습니다.
.getHeaderProps() 메서드를 사용하여 react-table 라이브러리로 열 너비 지정
useTable() 후크로 생성된 테이블이 있는 경우 UI 요소를 직접 정의해야 합니다. 여기서 <th> HTML이 등장합니다.
테이블의 헤더를 정의합니다. 즉, 열의 맨 위에 있는 셀에 레이블을 지정합니다.
위의 예에서 .getHeaderProps() 메서드를 하나의 인수인 스타일 객체와 함께 사용했습니다. 이 객체는 <th> 요소의 기본 스타일을 재정의합니다.
실제 코드를 살펴보겠습니다.
<th
{...column.getHeaderProps({
style: {
minWidth: 200,
width: 250,
border: "1px solid black"
}
})}
>
이것은 react-table 라이브러리로 테이블을 만들 때 열 너비를 지정하는 가장 쉬운 방법입니다. 이 경우 열 크기를 조정하기 위해 minWidth 및 width 매개변수를 지정했습니다.
실제로 객체로 스타일이 지정되어 있는 한 모든 CSS 속성을 적용할 수 있습니다.
예를 들어 min-width 속성을 인라인 스타일로 적용하려는 경우 minWidth가 됩니다. 이는 모든 스타일을 개체로 형식화해야 하기 때문에 수행됩니다.
코드를 확인하고 CodeSandbox에서 직접 수정해 볼 수 있습니다.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn