Table 사용하기
: Table 패키지는 <html table> 태그에 간편하게 스타일을 적용할 수 있도록 지원해준다
테이블 색상, 가로줄, 세로줄, 크기 , hover, striped 속성을 지정할 수 있다
- R054_ReactstrapTable.js
import React, { Component } from 'react';
import { Table } from 'reactstrap';
class R054_ReactstrapTable extends Component {
render() {
return(
<Table>
{/* <Tabel dark bordered>
<Table striped hover>
<Tabel borderless size='sm'> */}
<thead>
<tr>
<th>number</th>
<th>Book Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope='row'>1</th>
<td>React 100</td>
<td>10000</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>React 200</td>
<td>20000</td>
</tr>
</tbody>
</Table>
)
}
}
export default R054_ReactstrapTable;
- App.js
import React from 'react';
import './App.css';
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면
//'./..App.css'
import ReactstrapTable from './R054_ReactstrapTable'
import 'bootstrap/dist/css/bootstrap.css'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<ReactstrapTable/>
</div>
);
}
export default App;
결과
'REACT' 카테고리의 다른 글
| REACT_Sweetalert2 Basic (0) | 2024.09.24 |
|---|---|
| REACT_reactstrap Tab (0) | 2024.09.24 |
| REACT_reactstrap Spinner (0) | 2024.09.24 |
| REACT_reactstrap Progress (0) | 2024.09.24 |
| REACT_reactstrap Popover (0) | 2024.09.24 |