01. Install react-data-table-component

npm i react-data-table-component

02. Import react-data-table-component

import DataTable from "react-data-table-component";

03. Usage

define columns

const columns = [
	{
		name: "column1",
		selector: row => row.column1,
	},
	{
		name: "column2",
		selector: row => row.column2,
	},
];

define data

const data = [
	{
		id: 0,
		column1: "row1",
		column2: "data",
	},
	{
		id: 1,
		column1: "row2",
		column2: "data",
	},
	{
		id: 2,
		column1: "row3",
		column2: "data",
	},
];

call component

return (
	<div className="Table">
		<DataTable title="Title" columns={columns} data={data} />
	</div>
);

output

referrence : https://github.com/jbetancur/react-data-table-component

other attribute

• title(string) : 테이블 위에 title을 표기
• selectableRows(boolean) : 테이블의 row옆에 Checkbox 추가 가능

• pagination(boolean) : 테이블의 row를 갯수 단위로 쪼개어 페이지 뷰 제공
• fixedHeader(boolean) : columns를 고정시킨 후 scroll을 활용해 row를 보여줌
• fixedHeaderScrollHeight(string) : scroll창의 크기를 지정 ex) 200px

• progressPending(boolean) : 데이터를 불러올 때 시간이 걸리는 경우, state값을 주어 컨텐츠를 보여주기 전 loading 기능 제공