반응 부트스트랩 테이블

9094 단어
원본 게시물: react bootstrap table

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/

좋은 웹페이지 즐겨찾기