[라이브러리]Gridjs : Typescript 기반 게시판 모듈

    <div id="wrapper"></div>

import { Grid } from 'gridjs';

  ngOnInit(): void {

    this.grid = new Grid({

      search: true,     //client-side searh (옵션)

      sort: true,       //client-side sort (옵션)

      pagination: true, //client-side pagenation (옵션)     

      fixedHeader: true,//height와 함께 사용시 fixed header 사용 가능

      // height: '400px',  //height 지정

      // pagination: {

      //   limit: 1     //페이지별 상한 숫자

      // },

      columns: ["Id", "Name","Phone"],

      // columns: ["Name", {

      //     name: 'Image',

      //     width: '50px',

      //     sort: false,

      //     formatter: (img) => html(`<center><img src='${img}'/></center>`)

      //   }

      // ] //column 일괄 HTML 스타일 적용

      // columns header HTML 스타일 적용

      // name: html('<i>Name</i>')

      data: [

        ["John", "john@example.com", "(353) 01 222 3333"],

        ["Mark", "mark@gmail.com", "(01) 22 888 4444"],

        ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],

        ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],

        ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]

      ], //columns 속성 없이 key:value 형태로 넣으면 자동으로 columns 인식

      // data: () => {  //비동기 처리시, 로딩효과

      //   return new Promise(resolve => {

      //     setTimeout(() =>

      //       resolve([

      //         ['John', 'john@example.com', '(353) 01 222 3333'],

      //         ['Mark', 'mark@gmail.com', '(01) 22 888 4444']

      //       ]), 2000);

      //   });

      // }

      // style 지정

      // ,style: {

      //   table: {

      //     border: '3px solid #ccc'

      //   },

      //   th: {

      //     'background-color': 'rgba(0, 0, 0, 0.1)',

      //     color: '#000',

      //     'border-bottom': '3px solid #ccc',

      //     'text-align': 'center'

      //   },

      //   td: {

      //     'text-align': 'center'

      //   }

      // }

      // ,

      // className: {

      //   td: 'my-custom-td-class',

      //   table: 'custom-table-classname'

      // }

      language: {

        'search': {

          'placeholder': '과제 ID를 입력하세요...'

        },

        'pagination': {  //하단 Text 표시

          'previous': '이전',

          'next': '다음',

          'showing': 'Displaying',

          'results': () => 'Issues'

        }

      }

      

    // then: data => data.data.map(card => [card.name, card.lang, card.released_at, card.artist]) //참조

      ////권장

      // columns: [{

      //   id: 'name',

      //   name: 'Name'

      // }, {

      //   id: 'email',

      //   name: 'Email'

      // }, {

      //   id: 'phoneNumber',

      //   name: 'Phone Number'

      // }],

      // data: [ //비동기로

      //   { name: 'John', email: 'john@example.com', phoneNumber: '(353) 01 222 3333' },

      //   { name: 'Mark', email: 'mark@gmail.com', phoneNumber: '(01) 22 888 4444' },

      // ]

    }).render(document.getElementById("wrapper"));

    // 이벤트 처리  

    this.grid.on('rowClick', (...args) => console.log('row: ' + JSON.stringify(args), args));

    this.grid.on('cellClick', (...args) => console.log('cell: ' + JSON.stringify(args), args));

    combineLatest([this.issues$, this._filterQuery.all$])

      .pipe(untilDestroyed(this))

      .subscribe(([issues, filter]) => {

        this.issues = this.filterIssues(issues, filter);

        console.log(this.issues);

        this.grid.updateConfig({

          data: this.issues.map(issue => [1,1,1]) //참조

        }).forceRender();

      });

      

    // .updateConfig({

    //   // lets update the columns field only

    //   columns: ['First Name', 'Email', 'Phone'] (컬럼명만 추후 변경 가능)

    // });

  }