본문 바로가기
react

react bootstrap

by 뇽꾸리 2022. 5. 10.
반응형
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;
반응형

댓글