반응 부트스트랩 테이블
MDBDataTable은 다음 명령을 사용하여 설치하고 테이블 및 페이지 매김을 위한 데이터를 전달하는 데 필요한 React Bootstrap Table 구성 요소입니다.
설치하는 방법
npm install mdbreact --save
npm 패키지를 찾을 수 있는 링크
https://www.npmjs.com/package/mdbreact
React 부트스트랩 테이블(코드 예)
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { MDBDataTable } from "mdbreact";
const data = {
columns: [
{
label: "Name",
field: "name",
sort: "asc",
width: 150,
},
{
label: "Position",
field: "position",
sort: "asc",
width: 270,
},
{
label: "Office",
field: "office",
sort: "asc",
width: 200,
},
{
label: "Age",
field: "age",
sort: "asc",
width: 100,
},
{
label: "Start date",
field: "date",
sort: "asc",
width: 150,
},
{
label: "Salary",
field: "salary",
sort: "asc",
width: 100,
},
],
rows: [
{
name: "Nix",
position: "Architect",
office: "New City",
age: "34",
date: "2011/04/25",
salary: "$220",
},
{
name: "Wix",
position: "Accountant",
office: "Tokyo",
age: "63",
date: "2011/07/25",
salary: "$170",
},
],
};
export default function App() {
return (
<div className="App">
<MDBDataTable striped bordered small data={data} />
</div>
);
}
https://react-bootstrap.github.io/components/table/
Reference
이 문제에 관하여(반응 부트스트랩 테이블), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/askavy/react-bootstrap-table-3p33
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { MDBDataTable } from "mdbreact";
const data = {
columns: [
{
label: "Name",
field: "name",
sort: "asc",
width: 150,
},
{
label: "Position",
field: "position",
sort: "asc",
width: 270,
},
{
label: "Office",
field: "office",
sort: "asc",
width: 200,
},
{
label: "Age",
field: "age",
sort: "asc",
width: 100,
},
{
label: "Start date",
field: "date",
sort: "asc",
width: 150,
},
{
label: "Salary",
field: "salary",
sort: "asc",
width: 100,
},
],
rows: [
{
name: "Nix",
position: "Architect",
office: "New City",
age: "34",
date: "2011/04/25",
salary: "$220",
},
{
name: "Wix",
position: "Accountant",
office: "Tokyo",
age: "63",
date: "2011/07/25",
salary: "$170",
},
],
};
export default function App() {
return (
<div className="App">
<MDBDataTable striped bordered small data={data} />
</div>
);
}
Reference
이 문제에 관하여(반응 부트스트랩 테이블), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/askavy/react-bootstrap-table-3p33텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)