npm i react-data-table-component
import DataTable from "react-data-table-component";
const columns = [
{
name: "column1",
selector: row => row.column1,
},
{
name: "column2",
selector: row => row.column2,
},
];
const data = [
{
id: 0,
column1: "row1",
column2: "data",
},
{
id: 1,
column1: "row2",
column2: "data",
},
{
id: 2,
column1: "row3",
column2: "data",
},
];
return (
<div className="Table">
<DataTable title="Title" columns={columns} data={data} />
</div>
);
referrence : https://github.com/jbetancur/react-data-table-component
- title(string) : 테이블 위에 title을 표기
- selectableRows(boolean) : 테이블의 row옆에 Checkbox 추가 가능
- pagination(boolean) : 테이블의 row를 갯수 단위로 쪼개어 페이지 뷰 제공
- fixedHeader(boolean) : columns를 고정시킨 후 scroll을 활용해 row를 보여줌
- fixedHeaderScrollHeight(string) : scroll창의 크기를 지정 ex) 200px
- progressPending(boolean) : 데이터를 불러올 때 시간이 걸리는 경우, state값을 주어 컨텐츠를 보여주기 전 loading 기능 제공