반응형
npm install react-bootstrap bootstrap
index.js 수정
import 'bootstrap/dist/css/bootstrap.css';
- 돔에다가 className="table table-success table-striped" 이런식으로 해주면 된다.
- class ="" 이런식으로 주면 되긴되는데 에러남
import React from "react";
import { useTable } from "react-table";
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable({ columns, data });
return (
<table {...getTableProps()} className="table table-success table-striped">
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => (
<td {...cell.getCellProps()}>{cell.render("Cell")}</td>
))}
</tr>
);
})}
</tbody>
</table>
);
}
export default Table;
반응형
'react' 카테고리의 다른 글
[React] checkBox array 추가,변경,삭제 (0) | 2022.10.13 |
---|---|
[React] 랜덤코드 생성 (0) | 2022.10.07 |
[React] option checked,selected (0) | 2022.10.06 |
[React] onClick,onChange 매개변수여러개 (0) | 2022.10.05 |
[React] 아임포트 (iamport) API 연동 (0) | 2022.07.22 |
댓글