[react] bootstrap table 사용기

부트스트랩(bootstrap) : 

웹 사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크

 

설치 커맨드 :

$ npm install bootstrap

 

react 프로젝트에 적용

 

import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import '../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css';   

// 경로는 자신의 프로젝트에 맞게 설정 (node_modules 이전 경로까지 자신의 프로젝트에 맞추기)
나의 경우 상위의 상위폴더에 node_modules가 있기 때문에 ../../ 로 작성하였음



state = {

      columns: [
      {
             No: 1,
             title: 'colOneTitle',
      },
      {
             No: 2,
             title: 'colTwoTitle',
      },
      {
        No: 3,
        title: 'colThreeTitle',
      },
    ],

    data:[
        {
         colOne: "data1",
         colTwo: "data2",
         colThree: "data3"
        }
    ],
}

//state 에 column 데이터 값을 정해준다.
// 총 3열에 대한 데이터를 적어주었다.



setSelectItem = (row) => {
      // 값이 선택되었을 때 할 동작을 작성
      console.log(row.colOne);
      console.log(row.colTwo);
      console.log(row.colThree);
}

render(){
    return (
          <div className="temp" onClick={this.onClickFunc}>
                    <BootstrapTable data={this.state.data}
                        selectRow={{
                            mode: 'checkbox',
                            clickToSelect: true,
                            onSelect: this.setSelectItem,
                            bgColor: 'rgb(255, 238, 139)'
                        }} version='3' bgColor="white">
                        <TableHeaderColumn isKey dataField='colOne'
                            dataAlign="left"
                            headerAlign="center"
                            width="50%"
                            columnClassName="tableHeaderCol"
                        >
                            {this.state.columns[0].colOneTitle}
                    </TableHeaderColumn>
                        <TableHeaderColumn columnClassName="tableHeaderCol" dataField='colTwo' dataAlign="left"
                            headerAlign="center"
                        >
                            Column 2 
                    </TableHeaderColumn>
                        <TableHeaderColumn columnClassName="tableHeaderCol" dataField='colThree' dataAlign="left"
                            headerAlign="center"
                        >
                            {this.state.columns[2].colThreeTitle}
                    </TableHeaderColumn>
                    </BootstrapTable>
                </div>
        );
}

// this.state.columns[*].Title은 Table의 Column에 표시되는 값

// clickToSelect -> true 설정을 하지 않으면 선택되지 않음

// onSelect ->  선택이 되면 호출 될 함수를 연결

// bgColor -> 백그라운드 색상 설정

// dataAlign -> 글씨 정렬

 

 

width, align, data 등의 값은 부모에서 상속받아 사용하면 더 활용성이 많아질 것 같다.

column에 정적으로 접근하는 방식이 마음에 들지는 않긴한데 일단 동작이 되긴한다

다른방법이 있는지도 찾아보고 내용을 업데이트 해야겠다.

동작하다보면 warning이 발생하는데 해결방법을 잘 모르겠다ㅜㅜ

해결하게 된다면 해결 내용도 업데이트해야겠다.

 

 

 

 

참고(출처) 사이트: 

부트스트랩이란? : ko.wikipedia.org/wiki/%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9_(%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)

부트스트랩시작: bootstrapk.com/getting-started/

Table 작업: code.tutsplus.com/ko/tutorials/working-with-tables-in-react-part-one--cms-29682